Merge branch 'main' into develop

argilla-io · May 28, 2024 · 8714260 · 8714260
2 parents 41c08c0 + 5bb3672
commit 8714260
Show file tree

Hide file tree

Showing 52 changed files with 497 additions and 455 deletions.
diff --git a/argilla-frontend/components/base/base-range/BaseRangeSlider.vue b/argilla-frontend/components/base/base-range/BaseRangeSlider.vue
@@ -2,6 +2,7 @@
   <div>
     <label :for="id"><slot /></label>
     <div class="range__wrapper">
+      <span class="range__legend" v-text="min" />
       <div class="range">
         <span class="range__progress-value" ref="progress" v-text="range" />
         <input
@@ -14,10 +15,7 @@
           v-model.number="range"
         />
       </div>
-      <div class="range__legends">
-        <span v-text="min" />
-        <span v-text="max" />
-      </div>
+      <span class="range__legend" v-text="max" />
     </div>
   </div>
 </template>
@@ -67,7 +65,7 @@ export default {
       this.$refs.progress.style.left = `calc(${this.progress}% + (${
         8 - this.progress * 0.15
       }px))`;
-      this.$refs.slider.style.background = `linear-gradient(to right, #3e5cc9 ${this.progress}%, rgba(0, 0, 0, 0.2) ${this.progress}%)`;
+      this.$refs.slider.style.background = `linear-gradient(to right, #3e5cc9 ${this.progress}%, #ccc ${this.progress}%)`;
     },
   },
   created() {
@@ -78,9 +76,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$slider-color: $primary-color;
-$slider-light-color: rgba(0, 26, 255, 0.1);
-$slider-thumb-size: 16px;
 label {
   width: fit-content;
   height: 14px;
@@ -93,38 +88,22 @@ label {
   min-width: 240px;
   &__wrapper {
     display: flex;
-    flex-direction: column;
+    gap: $base-space;
     align-items: center;
     margin-top: $base-space;
   }
-  &__legends {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
+  &__legend {
     color: $black-37;
     @include font-size(12px);
   }
   &__progress-value {
-    display: none;
     position: absolute;
     top: $base-space * 3;
-    margin-left: -15px;
-    width: 30px;
+    margin-left: -20px;
+    width: 40px;
     text-align: center;
-    color: palette(white);
-    background: palette(grey, 200);
-    border-radius: $border-radius-s;
+    color: $black-54;
     @include font-size(12px);
-    &:before {
-      position: absolute;
-      left: calc(50% - 6px);
-      top: 0;
-      transform: translateY(-50%);
-      @include triangle(top, 6px, 6px, palette(grey, 200));
-    }
-    .range:hover & {
-      display: block;
-    }
   }
   &__slider {
     -webkit-appearance: none;
@@ -141,39 +120,39 @@ label {
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  height: $slider-thumb-size;
-  width: $slider-thumb-size;
-  background-color: $slider-color;
+  height: 15px;
+  width: 15px;
+  background-color: $primary-color;
   border-radius: 50%;
   border: none;
   transition: 0.2s ease-in-out;
 }
 
 input[type="range"]::-moz-range-thumb {
-  height: $slider-thumb-size;
-  width: $slider-thumb-size;
-  background-color: $slider-color;
+  height: 15px;
+  width: 15px;
+  background-color: $primary-color;
   border-radius: 50%;
   border: none;
   transition: 0.2s ease-in-out;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-  box-shadow: 0 0 0 4px $slider-light-color;
+  box-shadow: 0 0 0 6px rgba(0, 26, 255, 0.1);
 }
 input[type="range"]:active::-webkit-slider-thumb {
-  box-shadow: 0 0 0 6px $slider-light-color;
+  box-shadow: 0 0 0 10px rgba(0, 26, 255, 0.1);
 }
 input[type="range"]:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 6px $slider-light-color;
+  box-shadow: 0 0 0 10px rgba(0, 26, 255, 0.1);
 }
 input[type="range"]::-moz-range-thumb:hover {
-  box-shadow: 0 0 0 4px $slider-light-color;
+  box-shadow: 0 0 0 6px rgba(0, 26, 255, 0.1);
 }
 input[type="range"]:active::-moz-range-thumb {
-  box-shadow: 0 0 0 6px $slider-light-color;
+  box-shadow: 0 0 0 10px rgba(0, 26, 255, 0.1);
 }
 input[type="range"]:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 6px $slider-light-color;
+  box-shadow: 0 0 0 10px rgba(0, 26, 255, 0.1);
 }
 </style>
diff --git a/argilla-frontend/components/base/base-switch/BaseSwitch.vue b/argilla-frontend/components/base/base-switch/BaseSwitch.vue
@@ -34,15 +34,15 @@
           tabindex="-1"
         />
         <button :type="type" class="re-switch-holder">
-          <svgicon width="10" height="10" name="check" color="white"></svgicon>
+          <svgicon width="12" height="12" name="check" color="white"></svgicon>
         </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-const checkedPosition = 70;
+const checkedPosition = 50;
 const initialPosition = "-1px";
 
 import "assets/icons/check";
@@ -117,9 +117,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$switch-width: 28px;
+$switch-width: 36px;
 $switch-height: 11px;
-$switch-thumb-size: 18px;
+$switch-thumb-size: 24px;
+$switch-ripple-size: 44px;
 .re-switch {
   display: flex;
   align-items: center;
@@ -129,13 +130,11 @@ $switch-thumb-size: 18px;
       display: none;
     }
     .re-switch-thumb {
-      background-color: #f0f0f0 !important;
+      background-color: palette(white) !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
-    pointer-events: none;
-    cursor: default;
     .re-switch-thumb {
       background-color: palette(white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
@@ -152,9 +151,9 @@ $switch-thumb-size: 18px;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
-    background-color: $black-20;
-    cursor: pointer;
+    background-color: palette(grey, 600);
     .re-switch-thumb {
+      box-shadow: $shadow;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
       position: absolute;
@@ -170,14 +169,13 @@ $switch-thumb-size: 18px;
     }
     .re-switch-holder {
       @include absoluteCenter;
-      width: $switch-thumb-size;
-      height: $switch-thumb-size;
+      width: 40px;
+      height: 40px;
       margin: 0;
       padding: 0;
       z-index: 2;
       background: none;
       border: none;
-      cursor: pointer;
       &:focus {
         outline: none;
       }
@@ -188,4 +186,16 @@ $switch-thumb-size: 18px;
     color: $black-54;
   }
 }
+
+.re-switch.re-dragging {
+  .re-switch-thumb {
+    cursor: grabbing;
+  }
+}
+
+.re-switch.re-disabled {
+  .re-switch-thumb {
+    cursor: default;
+  }
+}
 </style>
diff --git a/argilla-frontend/components/base/base-table/BaseTableInfo.vue b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
@@ -447,7 +447,6 @@ export default {
   &__body {
     overflow: auto;
     padding-bottom: 0.5em;
-    min-height: 250px;
     @extend %hide-scrollbar;
     #{$this}__item {
       margin-bottom: -1px;

diff --git a/argilla-frontend/components/commons/user/user-settings/UserSettingsContent.vue b/argilla-frontend/components/commons/user/user-settings/UserSettingsContent.vue
@@ -2,11 +2,11 @@
   <div class="wrapper">
     <BaseSpinner v-if="!user" />
 
-    <div class="user-settings" v-if="user">
-      <div class="user-settings-item edition-user-info-component">
+    <div class="left-content" v-if="user">
+      <div class="left-content-item edition-user-info-component">
         <EditionUserInfoComponent :userInfo="user" />
       </div>
-      <div class="user-settings-item user-token-component">
+      <div class="left-content-item user-token-component">
         <UserTokenComponent :userToken="user.api_key" />
       </div>
     </div>
@@ -25,7 +25,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-settings-item {
+.left-content-item {
   border-bottom: 1px solid $black-10;
 }
 </style>
diff --git a/argilla-frontend/components/commons/user/user-settings/UserSettingsHeader.vue b/argilla-frontend/components/commons/user/user-settings/UserSettingsHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user-settings__header">
+  <div class="top-content">
     <h1 v-text="$t('userSettings.title')" />
     <BaseButton :to="datasetsURL" class="secondary text">
       <svgicon name="chevron-left" width="10" height="10" color="#4C4EA3" />
@@ -20,13 +20,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-settings__header {
+.top-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 100%;
   border-bottom: 1px solid #e6e6e6;
-  @include media(">tablet") {
-    min-height: 100px;
-  }
 }
 </style>
diff --git a/...a-frontend/components/features/datasets/datasets-settings/LeftDatasetSettings.content.vue b/...a-frontend/components/features/datasets/datasets-settings/LeftDatasetSettings.content.vue
@@ -112,7 +112,6 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  max-width: 800px;
   .dataset-description {
     display: flex;
     align-items: center;

diff --git a/...la-frontend/components/features/datasets/datasets-settings/TopDatasetSettings.content.vue b/...la-frontend/components/features/datasets/datasets-settings/TopDatasetSettings.content.vue
@@ -45,8 +45,5 @@ export default {
   align-items: center;
   height: 100%;
   border-bottom: 1px solid #e6e6e6;
-  @include media(">tablet") {
-    min-height: 100px;
-  }
 }
 </style>
diff --git a/...frontend/components/features/datasets/datasets-table/dataset-progress/DatasetProgress.vue b/...frontend/components/features/datasets/datasets-table/dataset-progress/DatasetProgress.vue
@@ -35,13 +35,11 @@ export default {
 
 <style lang="scss" scoped>
 .dataset-progress {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: calc($base-space / 2);
   max-width: 160px;
-  z-index: 0;
   &__bar {
     width: 100%;
     max-width: 160px;

diff --git a/...ents/feedback-task/container/fields/span-annotation/SpanAnnotationTextField.component.vue b/...ents/feedback-task/container/fields/span-annotation/SpanAnnotationTextField.component.vue
@@ -252,7 +252,7 @@ export default {
   &__field {
     position: relative;
     margin: 0;
-    @include font-size(16px);
+    @include font-size(18px);
     line-height: v-bind(lineHeight);
     user-select: text;
     &--overlapped {

diff --git a/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue b/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
@@ -129,7 +129,7 @@ export default {
       return this.options.length === 1;
     },
     suggestedScore() {
-      return this.suggestion?.value.score?.fixed;
+      return this.suggestion?.value.score.fixed;
     },
     entityColor() {
       return this.entity.color;
@@ -313,7 +313,6 @@ export default {
   }
   &__suggestion {
     margin-right: calc($base-space / 2);
-    flex-shrink: 0;
     &--score {
       display: none;
       margin-right: calc($base-space / 2);

diff --git a/...d/components/feedback-task/container/fields/span-annotation/components/EntityDropdown.vue b/...d/components/feedback-task/container/fields/span-annotation/components/EntityDropdown.vue
@@ -16,7 +16,7 @@
         class="span-entity__input"
         type="text"
         autocomplete="off"
-        placeholder=""
+        :placeholder="$nuxt.$t('search')"
         autofocus
         v-model="searchText"
         @keydown.stop=""

diff --git a/...tend/components/feedback-task/container/fields/span-annotation/components/highlighting.ts b/...tend/components/feedback-task/container/fields/span-annotation/components/highlighting.ts
@@ -73,7 +73,7 @@ export class Highlighting {
   ) {
     this.styles = {
       entitiesGap: 16,
-      lineHeight: config.allowOverlap ? 48 : 32,
+      lineHeight: 32,
       spanContainerId: `entity-span-container-${nodeId}`,
       entityCssKey: "hl",
       ...styles,
@@ -171,10 +171,8 @@ export class Highlighting {
     );
 
     const lineHeight =
-      maxOverlappedLevels > 2
-        ? this.styles.lineHeight +
-          this.styles.entitiesGap * Math.max(0, maxOverlappedLevels - 2)
-        : this.styles.lineHeight;
+      this.styles.lineHeight +
+      this.styles.entitiesGap * Math.max(0, maxOverlappedLevels - 1);
 
     this.config.lineHeight = lineHeight;
   }

diff --git a/...-task/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/...-task/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
@@ -17,8 +17,9 @@
         @focus="onFocus"
       >
         <BaseTooltip
+          v-if="isSuggested(item)"
           class="draggable__rank-card--unranked"
-          :title="isSuggested(item) ? $t('suggestion.name') : null"
+          :title="$t('suggestion.name')"
           :text="getSuggestedAgent(item)"
           minimalist
         >
@@ -68,7 +69,8 @@
             @focus="onFocus"
           >
             <BaseTooltip
-              :title="isSuggested(item) ? $t('suggestion.name') : null"
+              v-if="isSuggested(item)"
+              :title="$t('suggestion.name')"
               :text="getSuggestedAgent(item)"
               minimalist
               class="draggable__rank-card--ranked"