feat(#961): rules metrics in sidebar (#1377)

(cherry picked from commit a26a910) - include sidebar metrics animation (#1408) (cherry picked from commit a775889)
argilla-io · May 10, 2022 · 261f53a · 261f53a
1 parent f09746e
commit 261f53a
Show file tree

Hide file tree

Showing 34 changed files with 1,082 additions and 482 deletions.
diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -81,6 +81,16 @@
     margin: 0 auto;
     padding: 4em;
 }
+%collapsable-if-metrics {
+  padding-right: calc($sidebarMenuWidth + 15px);
+  transition: padding 0.25s linear 0.2s;
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.25s linear;
+    }
+  }
+}
 
 // buttons
 %button {
@@ -202,12 +212,12 @@
       width: auto;
       height: auto;
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
       z-index: 2;
     }
     &:before {
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
     }
   }
 }
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/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;
diff --git a/frontend/components/commons/TaskSearch.vue b/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);
     },

diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -121,19 +121,7 @@ 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;
-    }
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 
 .filters {

diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -45,18 +45,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4em;
-  padding-right: calc(4em + 45px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc(294px + 100px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-    padding-right: 100px;
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 .global-actions {
   display: flex;

diff --git a/frontend/components/commons/header/user/user.vue b/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;

diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
@@ -167,25 +167,12 @@ export default {
 <style lang="scss" scoped>
 .content {
   $this: &;
-  padding: 0;
   width: 100%;
   position: relative;
   margin-bottom: 0;
   list-style: none;
-  padding-right: calc(4em + 45px);
   z-index: 0;
-  .--metrics & {
-    @include media(">desktop") {
-      width: 100%;
-      padding-right: calc(294px + 100px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-    padding-right: 100px;
-  }
+  @extend %collapsable-if-metrics !optional;
   .results-scroll {
     height: 100vh !important;
     overflow: auto;

diff --git a/frontend/components/commons/sidebar/SidebarButton.vue b/frontend/components/commons/sidebar/SidebarButton.vue
@@ -1,16 +1,11 @@
 <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
-      v-if="type !== 'Refresh'"
-      v-show="activeView === id"
-      class="sidebar-button__icon-help"
-      :name="type === 'Mode' ? 'check3' : 'double-chev'"
-    ></svgicon>
     <svgicon :name="icon"></svgicon>
   </a>
 </template>
@@ -22,13 +17,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 +57,58 @@ $color: #333346;
     position: absolute;
     left: 0.8em;
   }
+  &.mode {
+    &:hover {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+  }
+  &.active {
+    &.mode {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+    &.metrics {
+      position: relative;
+      .svg-icon {
+        animation: move-horizontal 0.2s ease-in-out 0.2s;
+        animation-fill-mode: backwards;
+      }
+      &.active:before {
+        content: "";
+        height: 38px;
+        width: 2px;
+        border-radius: 2px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: $color;
+      }
+    }
+  }
 }
 .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;
+}
+
+@keyframes move-horizontal {
+  0% {
+    transform: translateX(0.3em);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 </style>