Update CSS for BMT filters [SCI-6084] (#3652)

* Update css for bmt filters [SCI-6084]

* Create shared component for dropdown [SCI-6084]

Co-authored-by: Anton <anton@scinote.net>

app/assets/stylesheets/repository/bmt_filters.scss

@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
 .bmt-filters-button.active-filters {
   position: relative;
 
@@ -18,6 +21,36 @@
   min-width: 422px;
   z-index: 100;
 
+  .sci-input-container {
+    margin-bottom: .5em;
+  }
+
+  .dropdown-selector-container {
+    width: 100%;
+  }
+
+  .field-suboption {
+    align-items: center;
+    display: flex;
+    margin-top: .5em;
+
+    .sci-checkbox-container {
+      margin-right: .25em;
+    }
+
+    .distance-attribute {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      margin-bottom: .5em;
+      margin-top: 1.5em;
+
+      input[type=radio] {
+        margin: 0 .25em 0 .5em;
+      }
+    }
+  }
+
   label {
     font-weight: normal;
   }
@@ -39,7 +72,6 @@
 
   .filter-list-notice {
     color: $color-silver-chalice;
-    font-style: italic;
     padding: 1em;
   }
 
@@ -51,15 +83,26 @@
 
     .title {
       @include font-h2;
-      margin-right: auto;
+    }
+
+    .clear-filters-btn {
+      margin-left: auto;
+    }
+  }
+
+  .filter-container {
+    border-bottom: $border-tertiary;
+    padding: 1em 3.5em 1em 1em;
+
+
+    .filter-title {
+      @include font-small;
     }
   }
 
   .filter-element {
     align-items: center;
-    border-bottom: $border-tertiary;
     display: flex;
-    padding: 1em 3.5em 1em 1em;
     position: relative;
   }
 
@@ -67,8 +110,8 @@
     cursor: pointer;
     padding: 0;
     position: absolute;
-    right: 0;
-    top: 0;
+    right: -2.5em;
+    top: -2px;
   }
 
   .filters-list {
@@ -81,7 +124,7 @@
     align-items: center;
     border-top: $border-tertiary;
     display: flex;
-    padding: 0 1em;
+    padding: 5px 1em 0;
 
     .add-filter {
       margin-right: auto;
@@ -92,6 +135,12 @@
     .title {
       cursor: pointer;
     }
+
+    &.open {
+      .fa-caret-down {
+        @include rotate(-180deg);
+      }
+    }
   }
 
   .saved-filters-list {

app/javascript/vue/bmt_filter/container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="filter-container">
+  <div class="filters-container">
     <div class="header">
       <div id="savedFiltersContainer" class="dropdown saved-filters-container" @click="toggleSavedFilters">
         <div class="title" id="savedFilterDropdown">
@@ -17,7 +17,7 @@
           />
         </div>
       </div>
-      <button class="btn btn-light" @click="closeSavedFilters() && clearFilters()">
+      <button class="btn btn-light clear-filters-btn" @click="closeSavedFilters() && clearFilters()">
         <i class="fas fa-times-circle"></i>
         {{ i18n.t('repositories.show.bmt_search.clear_all') }}
       </button>
@@ -36,7 +36,7 @@
       />
     </div>
     <div class="footer" @click="closeSavedFilters">
-      <button class="btn btn-light add-filter" @click="addFilter">
+      <button class="btn btn-secondary add-filter" @click="addFilter">
         <i class="fas fa-plus"></i>
         {{ i18n.t('repositories.show.bmt_search.add_filter') }}
       </button>

app/javascript/vue/bmt_filter/filter.vue

@@ -1,28 +1,30 @@
 <template>
-  <div class="filter-element">
-    <div class="form-group filter-action">
-      <div class="form-select">
-        <select @change="updateFilter({ type: $event.target.value })" v-model="type">
-          <option
-            v-for="type in types"
-            :key="type.name" :value="type">
-              {{ i18n.t('repositories.show.bmt_search.filters.types.' + type + '.name') }}
-          </option>
-        </select>
+  <div class="filter-container">
+    <b class='filter-title'>Filter</b>  
+    <div class="filter-element">
+      <div class="form-group filter-action">
+      
+        <div class="sci-input-container">
+          <DropdownSelector
+            :options="prepareTypesOptions()"
+            :selectorId="`bmtFilter${this.filter.id}`"
+            @dropdown:changed="updateFilter"
+          />
+        </div>
+        <component
+          :is="type"
+          @filter:updateData="updateFilter"
+          :additionalDataAttributes="additionalDataAttributes"
+          :currentData="filter.data" />
       </div>
-      <component
-        :is="type"
-        @filter:updateData="updateFilter"
-        :additionalDataAttributes="additionalDataAttributes"
-        :currentData="filter.data" />
+      <div class="filter-remove">
+        <button class="btn btn-light icon-btn" @click="$emit('filter:delete')">
+          <i class="fas fa-times-circle"></i>
+        </button>
+      </div>
+      <hr>
     </div>
-    <div class="filter-remove">
-      <button class="btn btn-light icon-btn" @click="$emit('filter:delete')">
-        <i class="fas fa-times-circle"></i>
-      </button>
-    </div>
-    <hr>
-  </div>
+</div>
 </template>
 
 <script>
@@ -33,6 +35,7 @@
   import variantSequenceFilter from 'vue/bmt_filter/filters/variantSequenceFilter.vue'
   import fullSequenceFilter from 'vue/bmt_filter/filters/fullSequenceFilter.vue'
   import monomerSubstructureSearchFilter from 'vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
   export default {
     props: {
@@ -61,15 +64,24 @@
       subsequenceFilter,
       variantSequenceFilter,
       fullSequenceFilter,
-      monomerSubstructureSearchFilter
+      monomerSubstructureSearchFilter,
+      DropdownSelector
     },
     methods: {
-      updateFilter(data) {
+      prepareTypesOptions() {
+        return this.types.map(option => {
+          return {label: this.i18n.t(`repositories.show.bmt_search.filters.types.${option}.name`), value: option}
+        })
+      },
+      updateFilter(value) {
+        this.type = value;
         this.$emit(
           'filter:update',
           {
             id: this.filter.id,
-            data: data
+            data: {
+              type: value
+            }
           }
         );
       }

app/javascript/vue/bmt_filter/filters/additionalDataFilter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="filter-form">
-    <div class="form-select">
-      <select @change="updateFilterData" v-model="attribute">
+    <div class="sci-input-container">
+      <select @change="updateFilterData" v-model="attribute" class="sci-input-field">
         <option
           v-for="attribute in additionalDataAttributes"
           :key="attribute.name" :value="attribute.name">
@@ -9,13 +9,15 @@
         </option>
       </select>
     </div>
-    <input
-      @input="updateFilterData"
-      class="form-control"
-      type="text"
-      name="value"
-      v-model="value"
-    />
+    <div class="sci-input-container">
+      <input
+        @input="updateFilterData"
+        class="sci-input-field"
+        type="text"
+        name="value"
+        v-model="value"
+      />
+    </div>
   </div>
 </template>
 

app/javascript/vue/bmt_filter/filters/entityTypeFilter.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="entityType"
       v-model="entityType"

app/javascript/vue/bmt_filter/filters/fullSequenceFilter.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="sequence"
       v-model="sequence"
       :placeholder="i18n.t('repositories.show.bmt_search.filters.types.fullSequenceFilter.placeholder')"
     />
     <div>
-      <label>
+      <label class="field-suboption">
         <div class="sci-checkbox-container">
           <input
             @change="updateFilterData"

app/javascript/vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="structure"
       v-model="structure"

app/javascript/vue/bmt_filter/filters/monomerTypeFilter.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="monomerType"
       v-model="monomerType"

app/javascript/vue/bmt_filter/filters/subsequenceFilter.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="sequence"
       v-model="sequence"
       :placeholder="i18n.t('repositories.show.bmt_search.filters.types.subsequenceFilter.placeholder')"
     />
     <div>
-      <label>
+      <label class="field-suboption">
         <div class="sci-checkbox-container">
           <input
             @change="updateFilterData"

app/javascript/vue/bmt_filter/filters/variantSequenceFilter.vue

@@ -1,43 +1,37 @@
 <template>
-  <div class="filter-form">
+  <div class="sci-input-container">
     <input
       @input="updateFilterData"
-      class="form-control"
+      class="sci-input-field"
       type="text"
       name="sequence"
       v-model="sequence"
       :placeholder="i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.placeholder')"
     />
     <div>
-      <label>
-        <div class="row">
-          <div class="col-md-4">
+      <label class="field-suboption">
+        <div class="sci-input-container">
             <label for="distance">{{ i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.distance') }}</label>
-            <input class="form-control" @input="updateFilterData" type="text" v-model="distance" />
-          </div>
-          <div class="col-md-4">
-            <label>
-              <input
-                @change="updateFilterData"
-                type="radio"
-                v-model="distanceType"
-                value="EXACT"
-              />
-              <span>{{ i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.exact') }}</span>
-            </label>
-          </div>
-          <div class="col-md-4">
-            <label>
-              <input
-                @change="updateFilterData"
-                type="radio"
-                v-model="distanceType"
-                value="MAX"
-              />
-              <span>{{ i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.maximum') }}</span>
-            </label>
-          </div>
+            <input class="sci-input-field" @input="updateFilterData" type="text" v-model="distance" />
         </div>
+        <label class="distance-attribute">
+          <input
+            @change="updateFilterData"
+            type="radio"
+            v-model="distanceType"
+            value="EXACT"
+          />
+          <span>{{ i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.exact') }}</span>
+        </label>
+        <label class="distance-attribute">
+          <input
+            @change="updateFilterData"
+            type="radio"
+            v-model="distanceType"
+            value="MAX"
+          />
+          <span>{{ i18n.t('repositories.show.bmt_search.filters.types.variantSequenceFilter.maximum') }}</span>
+        </label>
       </label>
     </div>
   </div>

app/javascript/vue/shared/dropdown_selector.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="dropdown-selector">
+    <select :id="this.selectorId">
+      <option
+        v-for="option in this.options"
+        :key="option.label" :value="option.value">
+          {{ option.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DropdownSelector',
+    props: {
+      options: Array,
+      selectorId: String,
+      noEmptyOption: {
+        type: Boolean,
+        default: true
+      },
+      singleSelect: {
+        type: Boolean,
+        default: true
+      },
+      closeOnSelect: {
+        type: Boolean,
+        default: true
+      },
+      selectAppearance: {
+        type: String,
+        default: 'simple'
+      },
+      onChange: Function
+
+    },
+    mounted: function() {
+      dropdownSelector.init(`#${this.selectorId}`, {
+        noEmptyOption: this.noEmptyOption,
+        singleSelect: this.singleSelect,
+        closeOnSelect: this.closeOnSelect,
+        selectAppearance: this.selectAppearance,
+        onChange: () => {
+          if (this.onChange) this.onChange();
+          this.selectChanged(dropdownSelector.getValues(`#${this.selectorId}`))
+        }
+      });
+    },
+    methods: {
+      selectChanged(value) {
+        this.$emit(
+          'dropdown:changed',
+          value
+        );
+      }
+    }
+  }
+</script>

config/locales/en.yml

@@ -1377,7 +1377,7 @@ en:
         add_filter: "Add filter"
         apply: "Apply"
         filter: "Filter"
-        no_filters: "Filter through Chemaxon's database. No active filters are applied at the moment."
+        no_filters: "No active filters."
         filters:
           types:
             additionalDataFilter:
@@ -2726,7 +2726,7 @@ en:
 
   bio_eddie:
     new_molecule: "New Molecule"
-    new_button: "Create Biomolecule"
+    new_button: "Biomolecule"
     molecule_name_placeholder: "Click here to enter Molecule name"
     no_molecules_found: "No Molecules Found"
     save_and_register: "Save & Register to Biomolecule Toolkit"