add strangeness in store & update LibraryOptions filters

src/components/formItems/MultipleTagsSelect.vue

@@ -72,8 +72,10 @@ export default {
 
   .list-inline {
     margin: 0;
+
     &-item {
       margin-bottom: .25rem;
+      display: inline-block;
     }
   }
 

src/pages/library/LibraryOptions.vue

@@ -19,28 +19,45 @@
       v-if="mode !== 'tree'"
       :label="$t('options.filters.title')"
     >
-      <b-form-group
+      <div class="filters-mini-group mb-1">
-        :label="$t('options.filters.choices.tags')"
+        <b-form-checkbox
-        label-for="tags-select"
+          v-model="tagsIsActive" name="tags-button"
-      >
+          button class="toggle-btn"
+          :class="tagsIsActive ? null : 'collapsed'"
+          :aria-expanded="tagsIsActive ? 'true' : 'false'"
+          aria-controls="tags-select"
+          button-variant="outline-dark"
+        >
+          {{ $t('options.filters.choices.tags') }}
+        </b-form-checkbox>
+
         <multiple-tags-select
+          v-if="tagsIsActive"
           id="tags-select" :button-text="$t('options.filters.add')"
           v-model="activeTags" :options="tagsOptions"
         />
-      </b-form-group>
+      </div>
 
-      <b-form-group
+      <div class="filters-mini-group">
-        :label="$t('options.filters.choices.strangeness')"
+        <b-form-checkbox
-        label-for="strangeness-input"
+          v-model="strangenessIsActive" name="tags-button"
-      >
+          button class="toggle-btn"
-        <div class="strangeness-input-wrapper">
+          :class="strangenessIsActive ? null : 'collapsed'"
+          :aria-expanded="strangenessIsActive ? 'true' : 'false'"
+          aria-controls="strangeness-input"
+          button-variant="outline-dark"
+        >
+          {{ $t('options.filters.choices.strangeness') }}
+        </b-form-checkbox>
+
+        <div v-if="strangenessIsActive" class="strangeness-input-wrapper">
           <b-form-input
-          id="strangeness-input"
+            id="strangeness-input"
-          type="range" min="0" max="5"
+            type="range" min="1" max="5"
-          v-model="strangeness"
+            v-model="activeStrangeness"
           />
         </div>
-      </b-form-group>
+      </div>
     </b-form-group>
 
     <!-- LIST + MAP ONLY -->
@@ -91,7 +108,8 @@ export default {
         { text: this.$t('options.display.choices.card-list'), value: 'list' }
       ],
       selectedTags: [],
-      strangeness: 0
+      tagsIsActive: false,
+      strangenessIsActive: false
     }
   },
 
@@ -103,7 +121,8 @@ export default {
       'mode',
       'nodeDepartId',
       'search',
-      'tags'
+      'tags',
+      'strangeness'
     ]),
 
     show () {
@@ -136,6 +155,27 @@ export default {
       set (value) {
         this.$store.commit('UPDATE_TAGS', value)
       }
+    },
+
+    activeStrangeness: {
+      get () { return this.strangeness },
+      set (value) {
+        this.$store.commit('UPDATE_STRANGENESS', parseInt(value))
+      }
+    }
+  },
+
+  watch: {
+    strangenessIsActive (activate) {
+      if (activate) {
+        this.$store.commit('UPDATE_STRANGENESS', 1)
+      } else {
+        this.$store.commit('UPDATE_STRANGENESS', undefined)
+      }
+    },
+
+    tagsIsActive () {
+      this.$store.commit('UPDATE_TAGS', [])
     }
   }
 }
@@ -158,7 +198,7 @@ export default {
     }
   }
 
-  @include media-breakpoint-up($layout-bp) {
+  @include media-breakpoint-up($size-bp) {
     padding: 0 $header-spacer $header-spacer;
     display: flex;
     justify-content: space-between;
@@ -166,11 +206,12 @@ export default {
 
 
   ::v-deep {
-    @include media-breakpoint-up($layout-bp) {
+    @include media-breakpoint-up($size-bp) {
       flex-wrap: wrap;
 
       fieldset {
-        margin-bottom: 0;*
+        margin-bottom: 0;
+
         &:last-child {
           flex-shrink: 2;
         }
@@ -182,6 +223,10 @@ export default {
     }
 
     .mode-select-group {
+      > div {
+        line-height: 0;
+      }
+
       label {
         border-color: transparent;
 
@@ -194,56 +239,43 @@ export default {
     }
 
     .filters-group {
-      margin: 0;
+      width: 100%;
-      label {
-        margin-right: .5rem;
-      }
-
-      .form-group {
-        display: flex;
-      }
-
-      > div {
-        :last-child {
-          position: relative;
-
-          label {
-            white-space: nowrap;
-          }
-
-          .strangeness-input-wrapper {
-            min-width: 150px;
-            &::before,
-            &::after {
-              content: '';
-              display: inline-block;
-              width: 3px;
-              height: 20px;
-              background-color: $black;
-              position: absolute;
-            }
-
-            &::after {
-              margin-left: -2px;
-            }
-          }
-        }
-      }
 
       @include media-breakpoint-up($layout-bp) {
-        min-width: 450px;
+        max-width: 450px;
+      }
 
-        .form-group {
+      .filters-mini-group {
-          margin-bottom: 0;
+        display: flex;
+        line-height: 0;
+      }
+
+      .toggle-btn label {
+        border-color: transparent;
+        margin-right: .5rem;
+
+        &:not(:disabled):not(.disabled):active,
+        &:not(:disabled):not(.disabled).active {
+          border-color: $black;
+          background-color: transparent;
+          color: $black;
+        }
+      }
+
+      .strangeness-input-wrapper {
+        min-width: 150px;
+        &::before,
+        &::after {
+          content: '';
+          display: inline-block;
+          width: 3px;
+          height: 20px;
+          background-color: $black;
+          position: absolute;
         }
 
-        > div {
+        &::after {
-          display: flex;
+          margin-left: -2px;
-          justify-content: space-between;
-
-          > :first-child {
-            margin-right: 1rem;
-          }
         }
       }
     }

src/store/modules/library.js

@@ -19,13 +19,13 @@ export default {
     nodebook: undefined,
 
     // LibraryOptions options
-    strangeness: [0, 1, 2, 3, 4],
     tagsOptions: [],
     // LibraryOptions state
     mode: undefined,
     nodeDepartId: undefined,
     search: '',
-    tags: []
+    tags: [],
+    strangeness: undefined
   },
 
   mutations: {
@@ -79,6 +79,10 @@ export default {
       state.tags = tags
     },
 
+    'UPDATE_STRANGENESS' (state, strangenessLvl) {
+      state.strangeness = strangenessLvl
+    },
+
     'SET_MODE' (state, mode) {
       state.mode = mode
     },
@@ -192,6 +196,7 @@ export default {
     nodeDepartId: state => state.nodeDepartId,
     search: state => state.search,
     tags: state => state.tags,
+    strangeness: state => state.strangeness,
 
     // LibraryOptions options
     tagsOptions: state => state.tagsOptions,