Style tag filter.

tropy · Oct 29, 2018 · 32dab25 · 32dab25
1 parent 608f1e5
commit 32dab25
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 40 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -8,7 +8,7 @@ files:
 rules:
   # Extends
   extends-before-mixins: 2
-  extends-before-declarations: 2
+  extends-before-declarations: 0
   placeholder-in-extend: 2
 
   # Mixins

diff --git a/src/components/project/sidebar.js b/src/components/project/sidebar.js
@@ -326,7 +326,9 @@ class ProjectSidebar extends React.PureComponent {
               </Collapse>
               <nav>
                 {this.hasNoMatchingTags &&
-                  <FormattedMessage id="sidebar.tags.none"/>}
+                  <div className="no-tags">
+                    <FormattedMessage id="sidebar.tags.none"/>
+                  </div>}
                 <TagList
                   edit={this.props.edit.tag}
                   keymap={this.props.keymap.TagList}

diff --git a/src/components/tag/filter.js b/src/components/tag/filter.js
@@ -34,17 +34,19 @@ class TagFilter extends React.Component {
   render() {
     return (
       <div className="tag-filter">
-        <Input
-          className="tag-filter-input form-control"
-          value={this.props.value}
-          placeholder={this.placeholder}
-          onCancel={this.handleCancel}
-          onChange={this.handleChange}
-          onCommit={this.handleCommit}/>
-        {!blank(this.props.value) &&
-          <Button
-            icon={<IconXSmall/>}
-            onClick={this.handleCancel}/>}
+        <div className="tag-filter-container">
+          <Input
+            className="tag-filter-input form-control"
+            value={this.props.value}
+            placeholder={this.placeholder}
+            onCancel={this.handleCancel}
+            onChange={this.handleChange}
+            onCommit={this.handleCommit}/>
+          {!blank(this.props.value) &&
+            <Button
+              icon={<IconXSmall/>}
+              onClick={this.handleCancel}/>}
+        </div>
       </div>
     )
   }

diff --git a/src/stylesheets/abstracts/_placeholders.scss b/src/stylesheets/abstracts/_placeholders.scss
@@ -4,4 +4,5 @@
 
 @import
   "placeholders/drop-target",
-  "placeholders/list-states";
+  "placeholders/list-states",
+  "placeholders/input-clear-button";
diff --git a/src/stylesheets/abstracts/placeholders/_input-clear-button.scss b/src/stylesheets/abstracts/placeholders/_input-clear-button.scss
@@ -0,0 +1,32 @@
+//
+// Input clear button
+// --------------------------------------------------
+
+%input-clear-button {
+  .btn-icon {
+    position: absolute;
+    right: $space-min + 1px;
+    top: (($input-height-base - $clear-button-size) / 2);
+    width: $clear-button-size;
+    height: $clear-button-size;
+    background: $icon-color;
+    padding: 0;
+    border-radius: 50%;
+
+    .icon {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: $clear-search-color;
+    }
+
+    &:active {
+      background: $icon-active-color;
+
+      .icon {
+        color: $clear-search-color;
+      }
+    }
+  }
+}
diff --git a/src/stylesheets/components/_search.scss b/src/stylesheets/components/_search.scss
@@ -18,30 +18,5 @@
     padding-right: 1px + $clear-button-size + $space-min;
   }
 
-  .btn-icon {
-    position: absolute;
-    right: $space-min + 1px;
-    top: (($input-height-base - $clear-button-size) / 2);
-    width: $clear-button-size;
-    height: $clear-button-size;
-    background: $icon-color;
-    padding: 0;
-    border-radius: 50%;
-
-    .icon {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: $clear-search-color;
-    }
-
-    &:active {
-      background: $icon-active-color;
-
-      .icon {
-        color: $clear-search-color;
-      }
-    }
-  }
+  @extend %input-clear-button;
 }
diff --git a/src/stylesheets/components/_sidebar.scss b/src/stylesheets/components/_sidebar.scss
@@ -166,4 +166,14 @@
     	}
     }
   }
+
+  .tag-filter {
+    padding: $space-min $default-padding-horizontal $space-min $list-tree-padding-left;
+  }
+
+  .no-tags {
+    padding-left: $list-tree-padding-left;
+    padding-right: $default-padding-horizontal;
+    color: $no-tags-color;
+  }
 }
diff --git a/src/stylesheets/components/tag/_filter.scss b/src/stylesheets/components/tag/_filter.scss
@@ -0,0 +1,11 @@
+//
+// Tag filter
+// --------------------------------------------------
+
+.tag-filter {
+  .tag-filter-container {
+    position: relative;
+  }
+
+  @extend %input-clear-button;
+}
diff --git a/src/stylesheets/themes/_light.scss b/src/stylesheets/themes/_light.scss
@@ -320,6 +320,7 @@ $icon-tag-color:                    var(--shade-1);
 $icon-tag-nested-focus-color:       var(--shade-1-darken-4);
 $icon-tag-border:                   var(--shade-5);
 $icon-tag-nested-focus-border:      var(--shade-5-darken-4);
+$no-tags-color:                     var(--shade-5);
 
 // Note list
 $note-list-focus-color:  var(--shade-0);

diff --git a/src/stylesheets/windows/_project.scss b/src/stylesheets/windows/_project.scss
@@ -76,6 +76,7 @@
 
   "../components/tag/list",
   "../components/tag/colors",
+  "../components/tag/filter",
 
   "../components/photo/list",
   "../components/photo/grid",