Update styling of drag and drop interactions

canonical · Jun 21, 2019 · 946150b · 946150b
1 parent e4f80b2
commit 946150b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/static/js/publisher/release/components/releasesTableCell.js b/static/js/publisher/release/components/releasesTableCell.js
@@ -12,7 +12,8 @@ import { undoRelease } from "../actions/pendingReleases";
 
 import {
   getPendingChannelMap,
-  getFilteredAvailableRevisionsForArch
+  getFilteredAvailableRevisionsForArch,
+  hasPendingRelease
 } from "../selectors";
 
 class ReleasesTableCell extends Component {
@@ -126,16 +127,11 @@ class ReleasesTableCell extends Component {
     const channel = getChannelName(track, risk);
 
     // current revision to show (released or pending)
-    let currentRevision =
+    const currentRevision =
       pendingChannelMap[channel] && pendingChannelMap[channel][arch];
-    // already released revision
-    let releasedRevision = channelMap[channel] && channelMap[channel][arch];
 
     // check if there is a pending release in this cell
-    const hasPendingRelease =
-      currentRevision &&
-      (!releasedRevision ||
-        releasedRevision.revision !== currentRevision.revision);
+    const hasPendingRelease = this.props.hasPendingRelease(channel, arch);
 
     const isChannelPendingClose = pendingCloses.includes(channel);
     const isPending = hasPendingRelease || isChannelPendingClose;
@@ -195,6 +191,7 @@ ReleasesTableCell.propTypes = {
   pendingChannelMap: PropTypes.object,
   // compute state
   getAvailableCount: PropTypes.func,
+  hasPendingRelease: PropTypes.func,
   // actions
   toggleHistoryPanel: PropTypes.func.isRequired,
   undoRelease: PropTypes.func.isRequired,
@@ -212,7 +209,9 @@ const mapStateToProps = state => {
     pendingCloses: state.pendingCloses,
     pendingChannelMap: getPendingChannelMap(state),
     getAvailableCount: arch =>
-      getFilteredAvailableRevisionsForArch(state, arch).length
+      getFilteredAvailableRevisionsForArch(state, arch).length,
+    hasPendingRelease: (channel, arch) =>
+      hasPendingRelease(state, channel, arch)
   };
 };
 

diff --git a/static/js/publisher/release/components/releasesTableRow.js b/static/js/publisher/release/components/releasesTableRow.js
@@ -3,7 +3,11 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { DragSource, DropTarget } from "react-dnd";
 
-import { getArchitectures, getPendingChannelMap } from "../selectors";
+import {
+  getArchitectures,
+  getPendingChannelMap,
+  hasPendingRelease
+} from "../selectors";
 import ReleasesTableCell from "./releasesTableCell";
 
 import { promoteChannel } from "../actions/pendingReleases";
@@ -27,6 +31,7 @@ export const ItemTypes = {
 
 const cellSource = {
   beginDrag(props) {
+    document.documentElement.style.cursor = "grabbing";
     return {
       risk: props.risk
     };
@@ -209,6 +214,10 @@ class ReleasesTableRow extends Component {
 
     const rowTitle = risk === AVAILABLE ? channelVersion : channel;
 
+    const isHighlighted = archs.every(arch => {
+      return this.props.hasPendingRelease(channel, arch);
+    });
+
     return (
       <Fragment>
         {risk === AVAILABLE && (
@@ -232,7 +241,7 @@ class ReleasesTableRow extends Component {
                 <div
                   className={`p-releases-channel ${
                     filteredChannel === channel ? "is-active" : ""
-                  }`}
+                  } ${isHighlighted ? "is-highlighted" : ""}`}
                 >
                   {this.props.connectDragSource(
                     <span className="p-releases-channel__handle">
@@ -303,6 +312,8 @@ ReleasesTableRow.propTypes = {
   archs: PropTypes.array.isRequired,
   pendingChannelMap: PropTypes.object,
 
+  hasPendingRelease: PropTypes.func,
+
   // actions
   closeChannel: PropTypes.func.isRequired,
   promoteChannel: PropTypes.func.isRequired,
@@ -322,7 +333,9 @@ const mapStateToProps = state => {
     filters: state.history.filters,
     pendingCloses: state.pendingCloses,
     archs: getArchitectures(state),
-    pendingChannelMap: getPendingChannelMap(state)
+    pendingChannelMap: getPendingChannelMap(state),
+    hasPendingRelease: (channel, arch) =>
+      hasPendingRelease(state, channel, arch)
   };
 };
 

diff --git a/static/js/publisher/release/selectors/index.js b/static/js/publisher/release/selectors/index.js
@@ -177,3 +177,22 @@ export function getTracks(state) {
 
   return sortAlphaNum(tracks, "latest");
 }
+
+// return true if there is a pending release in given channel for given arch
+export function hasPendingRelease(state, channel, arch) {
+  const { channelMap } = state;
+  const pendingChannelMap = getPendingChannelMap(state);
+
+  // current revision to show (released or pending)
+  let currentRevision =
+    pendingChannelMap[channel] && pendingChannelMap[channel][arch];
+  // already released revision
+  let releasedRevision = channelMap[channel] && channelMap[channel][arch];
+
+  // check if there is a pending release in this cell
+  return (
+    currentRevision &&
+    (!releasedRevision ||
+      releasedRevision.revision !== currentRevision.revision)
+  );
+}
diff --git a/static/sass/_snapcraft_release.scss b/static/sass/_snapcraft_release.scss
@@ -1,5 +1,5 @@
 @mixin snapcraft-release {
-  $color-highlighted: #ffecd4;
+  $color-highlighted: #fae6be;
 
   // RELEASES CONFIRM
 
@@ -97,6 +97,10 @@
     .is-over & {
       background-color: $color-highlighted;
     }
+
+    &.is-highlighted {
+      background-color: $color-highlighted;
+    }
   }
 
   .p-releases-channel__name {
@@ -117,7 +121,7 @@
   }
 
   .p-releases-channel__handle {
-    cursor: move;
+    cursor: grab;
     padding-right: $sph-intra--condensed;
     padding-top: ($spv-intra - .1rem);
   }