fix(ui): fix label selection blocked by dropdown

Fixes label selection being blocked by labels menu dropdown and adds margins to labels menu items. Co-authored-by: Daniel Campbell <[email protected]>
influxdata · Feb 19, 2019 · e1b02b3 · e1b02b3
1 parent 284bef4
commit e1b02b3
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 22 deletions.
diff --git a/ui/src/clockface/components/label/LabelSelector.scss b/ui/src/clockface/components/label/LabelSelector.scss
@@ -28,22 +28,13 @@
 .label-selector--menu {
   width: 100%;
   min-height: 50px;
+  margin: $ix-marg-b;
 }
 
 .label-selector--menu-item {
-  padding: $ix-marg-a $ix-marg-b;
-  color: $g13-mist;
-  transition: color 0.25s ease, background-color 0.25s ease;
-
-  &.active,
-  &.active:hover {
-    cursor: pointer;
-    color: $g18-cloud;
-    background-color: $g6-smoke;
-  }
+  margin: 1px;
 }
 
-.label-selector--description,
 .label-selector--empty {
   font-size: 13px;
   font-weight: 500;
@@ -61,15 +52,10 @@
   line-height: 30px;
 }
 
-.label-selector--description {
-  margin-left: 6px;
-  color: $g13-mist;
-  flex: 2 0 50%;
-}
-
-.label-selector--bottom {
+.label-selector--selection {
   display: flex;
   flex-wrap: nowrap;
+  margin-bottom: $ix-marg-c;
 }
 
 .label-selector--remove-all {

diff --git a/ui/src/clockface/components/label/LabelSelector.tsx b/ui/src/clockface/components/label/LabelSelector.tsx
@@ -76,11 +76,11 @@ class LabelSelector extends Component<Props, State> {
     return (
       <ClickOutside onClickOutside={this.handleStopSuggesting}>
         <div className="label-selector">
-          {this.input}
-          <div className="label-selector--bottom">
+          <div className="label-selector--selection">
             {this.selectedLabels}
             {this.clearSelectedButton}
           </div>
+          {this.input}
         </div>
       </ClickOutside>
     )

diff --git a/ui/src/clockface/components/label/LabelSelectorMenuItem.tsx b/ui/src/clockface/components/label/LabelSelectorMenuItem.tsx
@@ -23,7 +23,11 @@ class LabelSelectorMenuItem extends Component<Props> {
     const {name, colorHex, description, id} = this.props
 
     return (
-      <span onMouseOver={this.handleMouseOver} onClick={this.handleClick}>
+      <span
+        className="label-selector--menu-item"
+        onMouseOver={this.handleMouseOver}
+        onClick={this.handleClick}
+      >
         <Label
           name={name}
           description={description}

diff --git a/ui/src/shared/components/ResourceLabelForm.scss b/ui/src/shared/components/ResourceLabelForm.scss
@@ -5,7 +5,7 @@
 */
 
 .resource-label--form {
-    margin: $ix-marg-b;
+    margin-bottom: $ix-marg-b;
 
     .resource-label--create-button {
         margin-top: $ix-marg-c + 2px;