Cleanup label picker

frontend/src/css/core/layout.css

@@ -82,7 +82,7 @@
 }
 
 /* fully fit the parent element - use as a base for app-y pages like QB or settings */
-.spread {
+.spread, :local(.spread) {
   position: absolute;
   top: 0;
   left: 0;

frontend/src/questions/components/LabelPopoverContent.css → frontend/src/questions/components/LabelPicker.css

@@ -16,18 +16,32 @@
 }
 
 :local(.option) {
+    composes: cursor-pointer from "style/cursor";
+    position: relative;
+}
+
+:local(.optionContent) {
     composes: px3 py1 from "style/spacing";
     composes: flex align-center from "style/flex";
     font-size: 18px;
+    color: var(--title-color);
 }
 
-:local(.option):hover,
-:local(.option.selected) {
-    background-color: rgba(132,187,76, 0.1);
+:local(.optionBackground) {
+    composes: spread from "style/layout";
+    opacity: 0.1;
+    background-color: currentColor;
+    visibility: hidden;
 }
 
-:local(.option.selected) {
-    color: rgb(132,187,76);
+:local(.option.selected) :local(.optionContent),
+:local(.option):hover :local(.optionContent) {
+    color: inherit;
+}
+
+:local(.option.selected) :local(.optionBackground),
+:local(.option):hover :local(.optionBackground) {
+    visibility: visible;
 }
 
 :local(.mainIcon) {
@@ -38,6 +52,6 @@
     composes: flex-align-right from "style/flex";
     visibility: hidden;
 }
-:local(.option.selected):hover :local(.removeIcon) {
+:local(.option):hover :local(.removeIcon) {
     visibility: visible;
 }

frontend/src/questions/components/LabelPicker.jsx

+import React, { Component, PropTypes } from "react";
+import S from "./LabelPicker.css";
+
+import LabelIcon from "./LabelIcon.jsx";
+import Icon from "metabase/components/Icon.jsx";
+
+import cx from "classnames";
+
+const LabelPicker = ({ labels, count, item, setLabeled }) =>
+    <div className={S.picker}>
+        <div className={S.heading}>
+        { count > 1 ?
+            "Apply labels to " + count + " questions"
+        :
+            "Label as"
+        }
+        </div>
+        <ul className={S.options}>
+            { labels.map(label => {
+                let color = label.icon.charAt(0) === "#" ? label.icon : undefined;
+                let selected = item && item.labels.indexOf(label) >= 0 || label.selected === true;
+                let partiallySelected = !item && label.selected === null;
+                return (
+                    <li
+                        key={label.id}
+                        onClick={() => setLabeled(item && item.id, label.id, !selected)}
+                        className={cx(S.option, { [S.selected]: selected })}
+                        style={{ color: color }}
+                    >
+                        <div className={S.optionContent}>
+                            { selected ?
+                                <Icon className={S.mainIcon} name="check" />
+                            : partiallySelected ?
+                                <Icon className={S.mainIcon} name="close" />
+                            :
+                                <LabelIcon className={S.mainIcon} icon={label.icon} />
+                            }
+                            {label.name}
+                            { selected && <Icon className={S.removeIcon} name="close" /> }
+                        </div>
+                        <div className={S.optionBackground}></div>
+                    </li>
+                )
+            }) }
+        </ul>
+    </div>
+
+export default LabelPicker;

frontend/src/questions/components/LabelPopoverContent.jsx

-import React, { Component, PropTypes } from "react";
-import S from "./LabelPopoverContent.css";
-
-import LabelIcon from "./LabelIcon.jsx";
-import Icon from "metabase/components/Icon.jsx";
-
-const LabelPopoverContent = ({ labels, count, item, setLabeled }) =>
-    <div className={S.picker}>
-        <div className={S.heading}>
-        { count > 1 ?
-            "Apply labels to " + count + " questions"
-        :
-            "Label as"
-        }
-        </div>
-        <ul className={S.options}>
-            { labels.map(label =>
-                (item && item.labels.indexOf(label) >= 0 || label.selected === true) ?
-                    <li key={label.id} className={S.option + " " + S.selected} onClick={() => setLabeled(item && item.id, label.id, false)}>
-                        <Icon className={S.mainIcon} name="check" />
-                        {label.name}
-                        <Icon className={S.removeIcon} name="close" />
-                    </li>
-                : (!item && label.selected === null) ?
-                    <li key={label.id} className={S.option} onClick={() => setLabeled(item && item.id, label.id, false)}>
-                        <Icon className={S.mainIcon} name="close" />
-                        {label.name}
-                    </li>
-                :
-                    <li key={label.id} className={S.option} onClick={() => setLabeled(item && item.id, label.id, true)}>
-                        <LabelIcon className={S.mainIcon} icon={label.icon} />
-                        {label.name}
-                    </li>
-            ) }
-        </ul>
-    </div>
-
-export default LabelPopoverContent;

frontend/src/questions/containers/LabelPopover.jsx

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from "react";
 import { connect } from "react-redux";
 
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import LabelPopoverContent from "../components/LabelPopoverContent.jsx";
+import LabelPicker from "../components/LabelPicker.jsx";
 
 import { setLabeled } from "../questions";
 import { getLabels } from "../selectors";
@@ -26,7 +26,7 @@ export default class LabelPopover extends Component {
                 triggerElement={triggerElement}
             >
                 { () =>
-                    <LabelPopoverContent labels={labels} setLabeled={setLabeled} item={item} count={count} />
+                    <LabelPicker labels={labels} setLabeled={setLabeled} item={item} count={count} />
                 }
             </PopoverWithTrigger>
         );