Merge branch 'feat/share-annotation-progress' of github.com:argilla-i…

…o/argilla into feat/share-annotation-progress
argilla-io · Dec 5, 2024 · 0c7aa71 · 0c7aa71
2 parents a44ab98 + 725f7ce
commit 0c7aa71
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -25,6 +25,7 @@
     <div v-else class="my-progress__share">
       <Share v-if="canSeeShare" />
       <StatusCounter
+        :ghost="true"
         :rainbow="shouldShowSubmittedAnimation"
         class="my-progress__status"
         :color="RecordStatus.submitted.color"

diff --git a/argilla-frontend/components/features/annotation/progress/share/Share.vue b/argilla-frontend/components/features/annotation/progress/share/Share.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="share" @click.stop="copyOnClipboard">
-    <BaseActionTooltip
-      :tooltip="$t('copiedToClipboard')"
-      tooltipPosition="down"
-    >
+    <BaseActionTooltip :tooltip="$t('copiedToClipboard')">
       <BaseButton
+        class="share__button"
         :title="$t('button.tooltip.copyToClipboard')"
         @mouseover="openDialog"
         @mouseleave="closeDialog"
       >
-        Share
+        <svgicon class="share__icon" name="link" width="14" height="14" />
+        {{ $t("share") }}
       </BaseButton>
     </BaseActionTooltip>
     <transition name="fade" appear>
@@ -20,7 +19,6 @@
       >
         <div>
           <img :src="imageLink" />
-          <p class="share__link" v-text="imageLink" />
         </div>
       </dialog>
     </transition>
@@ -37,6 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$bullet-size: 8px;
 .share {
   z-index: 2;
   margin-left: auto;
@@ -58,13 +57,17 @@ export default {
     z-index: 2;
   }
 
-  &__link {
-    width: 95%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 10px;
-    color: var(--fg-secondary);
+  &__button {
+    @include font-size(12px);
+    height: 24px;
+    padding: $base-space;
+    background: var(--bg-opacity-3);
+    border-radius: $border-radius;
+  }
+
+  &__icon {
+    padding: 0;
+    flex-shrink: 0;
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts
@@ -32,11 +32,11 @@ export const useShareViewModel = () => {
   };
 
   const createImageLink = () => {
-    const url = new URL("https://argilla.imglab-cdn.net/dibt/dibt.png");
+    const url = new URL("https://argilla.imglab-cdn.net/dibt/dibt_v2.png");
     const params = new URLSearchParams(url.search);
-    params.set("width", "900");
-    params.set("text-width", "450");
-    params.set("text-height", "750");
+    params.set("width", "1200");
+    params.set("text-width", "700");
+    params.set("text-height", "590");
     params.set("text-weight", "bold");
     params.set("text-padding", "60");
     params.set("text-color", "39,71,111");
@@ -45,11 +45,11 @@ export const useShareViewModel = () => {
 
     params.set(
       "text",
-      `<span size="10pt">${user.value.userName}</span>
+      `<span size="7pt">${user.value.userName}</span>
 
-I just contributed ${metrics.submitted} examples to this dataset:
+I've just contributed ${metrics.submitted} examples to this dataset:
 
-<span size="10pt">${dataset.name}</span>
+<span size="9pt">${dataset.name}</span>
 
 <span size="8pt" weight="normal">Team progress</span>
 ${progress.percentage.completed}%`

diff --git a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="status-counter" :class="{ rainbow }">
+  <li class="status-counter" :class="{ rainbow, ghost }">
     <span>
       <span class="color-bullet" :style="{ backgroundColor: color }"></span>
       <label class="status-counter__name" v-text="statusLabel" />
@@ -26,6 +26,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    ghost: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     statusLabel() {
@@ -64,6 +68,10 @@ $bullet-size: 8px;
   }
 }
 
+.ghost {
+  background: none;
+}
+
 .rainbow {
   position: relative;
   padding: $base-space;

diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
@@ -11,7 +11,7 @@ export default {
   search: "Search",
   searchPlaceholder: "Introduce a query",
   searchDatasets: "Search datasets",
-  share: "Share",
+  share: "Share progress",
   expand: "Expand",
   copied: "Copied",
   copiedToClipboard: "Copied to clipboard",