feat(#961): Rules metrics in sidebar

frontend/assets/scss/abstract/variables/_variables.scss

@@ -152,4 +152,9 @@ $swift-ease-in-out-timing-function: cubic-bezier(0.35,
 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
 $swift-linear-duration: 0.15s !default;
 $swift-linear-timing-function: linear !default;
-$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
+
+// sidebar
+$sidebarPanelWidth: 280px;
+$sidebarMenuWidth: 70px;
+$sidebarWidth: $sidebarPanelWidth + $sidebarMenuWidth;

frontend/components/commons/TaskSearch.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="app__content">
-    <div :class="['grid', annotationEnabled ? 'grid--editable' : '']">
+    <div class="grid">
       <Results :dataset="dataset" />
     </div>
   </div>
@@ -34,9 +34,6 @@ export default {
     },
   },
   computed: {
-    annotationEnabled() {
-      return this.dataset.viewSettings.viewMode === "annotate";
-    },
     workspace() {
       return currentWorkspace(this.$route);
     },

frontend/components/commons/header/filters/FiltersArea.vue

@@ -121,17 +121,11 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   margin-left: 0;
-  padding-right: calc(4em + 45px);
-  &--intro {
-    padding-top: 2em;
-    margin-bottom: 1.5em;
-    &:after {
-      border-bottom: 1px solid $line-light-color;
-      content: "";
-      margin-bottom: 1.5em;
-      position: absolute;
-      left: 0;
-      right: 0;
+  padding-right: calc($sidebarMenuWidth + 15px);
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.1s ease-in-out;
     }
   }
 }

frontend/components/commons/header/global-actions/GlobalActions.vue

@@ -45,17 +45,16 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4em;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   .--metrics & {
     @include media(">desktop") {
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
       transition: padding 0.1s ease-in-out;
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
 }
 .global-actions {

frontend/components/commons/header/user/user.vue

@@ -92,8 +92,8 @@ $buttonSize: 34px;
   }
   &__content {
     position: absolute;
-    top: 3.8em;
-    right: -1em;
+    top: 3.5em;
+    right: -0.5em;
     padding-top: 1.5em;
     background: $lighter-color;
     border-radius: 5px;
@@ -104,9 +104,9 @@ $buttonSize: 34px;
     min-width: 300px;
     &:after {
       position: absolute;
-      top: -12px;
-      right: 1.3em;
-      @include triangle(top, 12px, 12px, white);
+      top: -10px;
+      right: 1em;
+      @include triangle(top, 10px, 10px, white);
     }
     a {
       text-decoration: none;

frontend/components/commons/results/ResultsList.vue

@@ -172,19 +172,18 @@ export default {
   position: relative;
   margin-bottom: 0;
   list-style: none;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   z-index: 0;
   .--metrics & {
     @include media(">desktop") {
       width: 100%;
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
       transition: padding 0.1s ease-in-out;
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
   .results-scroll {
     height: 100vh !important;

frontend/components/commons/sidebar/SidebarButton.vue

@@ -1,16 +1,17 @@
 <template>
   <a
     class="sidebar-button"
+    :class="[type.toLowerCase(), activeView.includes(id) ? 'active' : '']"
     href="#"
-    :data-title="tooltip"
+    :data-title="!activeView.includes(id) ? tooltip : null"
     @click="$emit('button-action', id)"
   >
-    <svgicon
+    <!-- <svgicon
       v-if="type !== 'Refresh'"
-      v-show="activeView === id"
+      v-show="activeView.includes(id)"
       class="sidebar-button__icon-help"
       :name="type === 'Mode' ? 'check3' : 'double-chev'"
-    ></svgicon>
+    ></svgicon> -->
     <svgicon :name="icon"></svgicon>
   </a>
 </template>
@@ -22,13 +23,11 @@ import "assets/icons/annotate-view";
 import "assets/icons/labelling-rules-view";
 import "assets/icons/progress";
 import "assets/icons/metrics";
-import "assets/icons/double-chev";
-import "assets/icons/check3";
 export default {
   props: {
     activeView: {
-      type: String,
-      default: undefined,
+      type: Array,
+      default: () => [],
     },
     tooltip: {
       type: String,
@@ -64,14 +63,37 @@ $color: #333346;
     position: absolute;
     left: 0.8em;
   }
+  &.active {
+    &.mode {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+    &.metrics {
+      position: relative;
+      &:before {
+        content: "";
+        height: 38px;
+        width: 2px;
+        background: $color;
+        border-radius: 2px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
 }
 .svg-icon {
   display: block;
   text-align: center;
   margin: auto;
   width: 24px;
   height: 24px;
-  margin-bottom: 1.5em;
   fill: $color;
+  padding: 0.5em;
+  box-sizing: content-box;
+  margin-bottom: 0.5em;
 }
 </style>