From c745263e1b28e4cedffa88de764f11d6379d745d Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 15 Oct 2020 13:50:37 +0200
Subject: Update rules filters

---
 frontend/src/components/fields/TagField.js   | 29 ++++----
 frontend/src/components/fields/TagField.scss | 99 +++++++++++++++++++---------
 frontend/src/components/fields/common.scss   |  1 +
 3 files changed, 82 insertions(+), 47 deletions(-)

(limited to 'frontend/src/components/fields')

diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js
index f1a48bd..89445b6 100644
--- a/frontend/src/components/fields/TagField.js
+++ b/frontend/src/components/fields/TagField.js
@@ -26,50 +26,47 @@ const _ = require('lodash');
 
 class TagField extends Component {
 
+    state = {};
+
     constructor(props) {
         super(props);
 
         this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
     }
 
-    state = {
-
-    };
-
     onAddition = (tag) => {
         if (typeof this.props.onChange === "function") {
-            const tags = [].concat(this.wrappedTags(), tag);
-            this.props.onChange(tags.map(t => t.name), true, tag); // true == addition
+            this.props.onChange([].concat(this.props.tags, tag), true, tag); // true == addition
         }
     };
 
     onDelete = (i) => {
         if (typeof this.props.onChange === "function") {
-            const tags = this.wrappedTags();
+            const tags = _.clone(this.props.tags);
             const tag = tags[i];
             tags.splice(i, 1);
-            this.props.onChange(tags.map(t => t.name), true, tag);  // false == delete
+            this.props.onChange(tags, true, tag);  // false == delete
         }
     };
 
-    wrappedTags = () => this.props.tags.map(t => new Object({"name": t}));
 
     render() {
         const small = this.props.small || false;
         const name = this.props.name || null;
 
         return (
-            <div className={classNames( "field", "tag-field", {"field-small": small})}>
-                { name &&
+            <div className={classNames("field", "tag-field", {"field-small": small},
+                {"field-inline": this.props.inline})}>
+                {name &&
                 <div className="field-name">
                     <label>{name}:</label>
                 </div>
                 }
-                <ReactTags tags={this.wrappedTags() || []}
-                           autoresize={false}
-                           allowNew={this.props.allowNew || true}
-                           onDelete={this.onDelete} onAddition={this.onAddition}
-                           minQueryLength={this.props.min} placeholderText={this.props.placeholder || ""} />
+                <div className="field-input">
+                    <ReactTags {...this.props} tags={this.props.tags || []} autoresize={false}
+                               onDelete={this.onDelete} onAddition={this.onAddition}
+                               placeholderText={this.props.placeholder || ""}/>
+                </div>
             </div>
         );
     }
diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss
index e77db97..737f11f 100644
--- a/frontend/src/components/fields/TagField.scss
+++ b/frontend/src/components/fields/TagField.scss
@@ -1,31 +1,68 @@
 @import "../../colors.scss";
 
 .tag-field {
+  font-size: 0.9em;
+  margin: 5px 0;
+
+  .field-name {
+    label {
+      margin: 0;
+    }
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+
+  &.field-inline {
+    display: flex;
+
+    .field-name {
+      padding: 6px 0 6px 7px;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      background-color: $color-primary-2;
+    }
+
+    .field-input {
+      flex: 1;
+
+      .react-tags {
+        padding-left: 3px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:focus-within .field-name {
+      background-color: $color-primary-1;
+    }
+  }
+
   .react-tags {
-    font-size: 12px;
     position: relative;
-    z-index: 10;
-    padding: 0 6px;
-    cursor: text;
+    display: flex;
     border-radius: 4px;
     background-color: $color-primary-2;
-  }
 
-  .react-tags.is-focused {
-    border-color: #b1b1b1;
+    &:focus-within,
+    &:focus-within .react-tags__search-input {
+      background-color: $color-primary-1;
+    }
   }
 
   .react-tags__selected {
-    display: inline;
+    display: inline-block;
+    flex: 0 1;
+    margin: 6px 0;
+    white-space: nowrap;
   }
 
   .react-tags__selected-tag {
-    font-size: 11px;
-    display: inline-block;
-    margin: 0 6px 6px 0;
+    font-size: 0.75em;
+    margin: 0 3px;
     padding: 2px 4px;
     color: $color-primary-3;
-    border: none;
     border-radius: 2px;
     background: $color-primary-4;
   }
@@ -39,12 +76,15 @@
   .react-tags__selected-tag:hover,
   .react-tags__selected-tag:focus {
     border-color: #b1b1b1;
+    background-color: $color-primary-0;
+
+    &::after {
+      color: $color-primary-4;
+    }
   }
 
   .react-tags__search {
-    display: inline-block;
-    max-width: 100%;
-    padding: 7px 10px;
+    flex: 1 0;
   }
 
   @media screen and (min-width: 30em) {
@@ -54,14 +94,7 @@
   }
 
   .react-tags__search-input {
-    font-size: inherit;
-    line-height: inherit;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
     color: $color-primary-4;
-    border: 0;
-    outline: none;
     background-color: $color-primary-2;
   }
 
@@ -71,6 +104,7 @@
 
   .react-tags__suggestions {
     position: absolute;
+    z-index: 50;
     top: 100%;
     left: 0;
     width: 100%;
@@ -87,30 +121,33 @@
     margin: 4px -1px;
     padding: 0;
     list-style: none;
-    color: $color-primary-1;
-    border-radius: 2px;
-    background: $color-primary-4;
+    border-radius: 3px;
+    background: $color-primary-2;
   }
 
   .react-tags__suggestions li {
-    padding: 3px 5px;
-    border-bottom: 1px solid #ddd;
+    padding: 5px 10px;
   }
 
   .react-tags__suggestions li mark {
     font-weight: 600;
-    text-decoration: underline;
+    padding: 0;
+    color: $color-primary-4;
     background: none;
   }
 
   .react-tags__suggestions li:hover {
     cursor: pointer;
-    color: $color-primary-4;
-    background: $color-primary-0;
+    border-radius: 3px;
+    background: $color-primary-1;
+
+    mark {
+      color: $color-primary-4;
+    }
   }
 
   .react-tags__suggestions li.is-active {
-    background: #b7cfe0;
+    background: $color-primary-3;
   }
 
   .react-tags__suggestions li.is-disabled {
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
index 8fbef0d..e5dc65c 100644
--- a/frontend/src/components/fields/common.scss
+++ b/frontend/src/components/fields/common.scss
@@ -3,6 +3,7 @@
 .field {
   input,
   textarea {
+    font-family: "Fira Code", monospace;
     width: 100%;
     padding: 7px 10px;
     color: $color-primary-4;
-- 
cgit v1.2.3-70-g09d2