style: Fine tune menu record card (#2240)

# Description Include tooltip for event timestamp Include hover status for menu Same space between items in record right area Update tooltip position and size Closes #2224 **Type of change** Please delete options that are not relevant. - [x] Update styles **Checklist** - [x] I have merged the original branch into my forked branch - [x] follows the style guidelines of this project - [x] I did a self-review of my code - [x] My changes generate no new warnings
argilla-io · Jan 25, 2023 · 62148e5 · 62148e5
1 parent 1df5d6f
commit 62148e5
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 71 deletions.
diff --git a/frontend/assets/icons/index.js b/frontend/assets/icons/index.js
@@ -14,11 +14,11 @@ require('./external')
 require('./filter')
 require('./hand-labeling')
 require('./info')
-require('./kebab-menu')
 require('./link')
 require('./log-out')
 require('./matching')
 require('./math-plus')
+require('./meatballs')
 require('./no-matching')
 require('./progress')
 require('./refresh')

diff --git a/frontend/assets/icons/kebab-menu.js b/frontend/assets/icons/kebab-menu.js
diff --git a/frontend/assets/icons/meatballs.js b/frontend/assets/icons/meatballs.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'meatballs': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 30 8',
+    data: '<path pid="0" d="M7.5 4A3.75 3.75 0 110 4a3.75 3.75 0 017.5 0zM18.75 4a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM26.25 7.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" _fill="#000"/>'
+  }
+})
diff --git a/frontend/assets/scss/abstract/placeholders/_tooltip.scss b/frontend/assets/scss/abstract/placeholders/_tooltip.scss
@@ -13,7 +13,7 @@ $tooltip-border-radius: $border-radius-s;
   pointer-events: none;
   z-index: 2;
   white-space: nowrap;
-  padding: $base-space $base-space*2;
+  padding: 6px $base-space;
   transform: none;
   background: $tooltip-bg;
   color: $tooltip-color;
@@ -32,7 +32,12 @@ $tooltip-border-radius: $border-radius-s;
     right: calc(100% + $tooltip-triangle-size/2);
     top: 50%;
     transform: translateY(-50%);
-    @include triangle(right, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+    @include triangle(
+      right,
+      $tooltip-triangle-size,
+      $tooltip-triangle-size,
+      $tooltip-bg
+    );
   }
 }
 %has-tooltip--bottom {
@@ -45,7 +50,12 @@ $tooltip-border-radius: $border-radius-s;
   &:before {
     right: calc(50% - $tooltip-triangle-size/2);
     top: 100%;
-    @include triangle(top, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+    @include triangle(
+      top,
+      $tooltip-triangle-size,
+      $tooltip-triangle-size,
+      $tooltip-bg
+    );
   }
 }
 %has-tooltip--top {
@@ -58,7 +68,12 @@ $tooltip-border-radius: $border-radius-s;
   &:before {
     right: calc(50% - $tooltip-triangle-size);
     top: -10px;
-    @include triangle(bottom, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+    @include triangle(
+      bottom,
+      $tooltip-triangle-size,
+      $tooltip-triangle-size,
+      $tooltip-bg
+    );
   }
 }
 %tooltip-large-text {
@@ -88,17 +103,17 @@ $tooltip-border-radius: $border-radius-s;
     opacity: 0;
     pointer-events: none;
   }
-  &:hover{
+  &:hover {
     &:after {
       width: auto;
       height: auto;
       opacity: 1;
-      transition: opacity 0.1s ease 0.2s;
+      transition: opacity 0.3s ease 0.2s;
       z-index: 2;
     }
     &:before {
       opacity: 1;
-      transition: opacity 0.1s ease 0.2s;
+      transition: opacity 0.3s ease 0.2s;
     }
   }
-}
+}
diff --git a/frontend/components/base/BaseButton.vue b/frontend/components/base/BaseButton.vue
@@ -207,4 +207,14 @@ export default {
     }
   }
 }
+.clear {
+  background: none;
+  padding: $base-space;
+  height: 30px;
+  &:hover,
+  &:active,
+  &.active {
+    background: $black-4;
+  }
+}
 </style>
diff --git a/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue b/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue
@@ -75,25 +75,28 @@ export default {
       padding: 0 0.8em 0 0.4em;
       div[data-title] {
         position: relative;
-        @extend %has-tooltip--top;
+        @extend %has-tooltip--bottom;
         @extend %tooltip-large-text;
         &:after {
-          margin-left: 1em;
+          right: 1em;
           min-width: 300px;
         }
+        &:before {
+          right: 0.5em !important;
+        }
       }
       &.--active {
         background: darken(palette(apricot, light), 2%);
         border: 1px solid palette(apricot, dark);
         align-items: center;
         &[data-title] {
           position: relative;
-          @extend %has-tooltip--top;
+          @extend %has-tooltip--bottom;
           &:after {
             right: 5em !important;
           }
           &:before {
-            right: 3.8em !important;
+            right: 3.7em !important;
           }
         }
         #{$this}__icon {

diff --git a/frontend/components/commons/results/RecordExtraActions.vue b/frontend/components/commons/results/RecordExtraActions.vue
@@ -17,9 +17,9 @@
 
 <template>
   <div v-click-outside="close" :key="open" class="record__extra-actions">
-    <a class="extra-actions__button" href="#" @click.prevent="open = !open"
-      ><svgicon name="kebab-menu" width="20" height="20" color="#4A4A4A"
-    /></a>
+    <base-button class="small clear" @click.prevent="open = !open"
+      ><svgicon name="meatballs" width="14" color="#4A4A4A" />
+    </base-button>
     <div v-if="open" class="extra-actions__content">
       <div @click="showRecordInfoModal()">
         <span>View record info</span>
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import "assets/icons/kebab-menu";
+import "assets/icons/meatballs";
 import { IdState } from "vue-virtual-scroller";
 
 export default {
@@ -109,11 +109,6 @@ export default {
 <style lang="scss" scoped>
 .extra-actions {
   position: relative;
-  &__button {
-    text-align: right;
-    outline: none;
-    text-decoration: none;
-  }
   &__content {
     position: absolute;
     right: 0.7em;

diff --git a/frontend/components/commons/results/ResultsRecord.vue b/frontend/components/commons/results/ResultsRecord.vue
@@ -43,6 +43,7 @@
             class="record__date"
             v-if="record.event_timestamp"
             :date="record.event_timestamp"
+            data-title="Event Timestamp"
           />
           <similarity-search-component
             class="record__similarity-search"
@@ -225,13 +226,18 @@ export default {
     }
   }
   &__extra-actions {
-    margin-right: $base-space;
+    margin-right: $base-space * 2;
+    margin-left: calc($base-space / 2);
   }
   &__date {
     @include font-size(12px);
     color: $black-37;
     font-weight: 500;
-    margin-right: $base-space;
+    margin-right: 12px;
+    &[data-title] {
+      position: relative;
+      @extend %has-tooltip--bottom;
+    }
   }
 }
 .similarity-search {

diff --git a/frontend/components/commons/results/similarity/SimilaritySearch.component.vue b/frontend/components/commons/results/similarity/SimilaritySearch.component.vue
@@ -2,9 +2,7 @@
   <div v-if="multipleVectors" id="dropdown" class="similarity-search">
     <base-dropdown :visible="dropdownIsvisible" @visibility="onVisibility">
       <span slot="dropdown-header">
-        <base-button class="small similarity-search__button">
-          Find similar
-        </base-button>
+        <base-button class="small clear"> Find similar </base-button>
       </span>
       <span slot="dropdown-content">
         <similarity-search-content
@@ -20,7 +18,7 @@
   </div>
   <base-button
     id="find-similar-button"
-    class="small similarity-search__button"
+    class="small clear"
     :disabled="isDisabled"
     v-else
     @click="findSimilar"
@@ -91,16 +89,6 @@ export default {
     font-weight: 500;
     margin-top: 0;
   }
-  &__button {
-    transition: all 0.2s ease-in;
-    @include font-size(13px);
-    font-weight: 500;
-    padding: $base-space;
-    &:hover {
-      background: $black-4;
-      transition: all 0.2s ease-in;
-    }
-  }
   &__buttons {
     display: flex;
     gap: $base-space;

diff --git a/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap b/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap
@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RecordExtraActions renders properly 1`] = `
-<div class="record__extra-actions" record="[object Object]" dataset="[object Object]"><a href="#" class="extra-actions__button"><svg version="1.1" viewBox="0 0 41 40" class="svg-icon svg-fill" style="width: 20px; height: 20px;">
-      <path fill="#4A4A4A" stroke="none" pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 5c1.114 0 1.956.297 2.527.89.57.593.855 1.457.855 2.59 0 1.095-.292 1.942-.875 2.542-.584.6-1.42.9-2.507.9-1.048 0-1.873-.304-2.477-.91-.604-.607-.905-1.45-.905-2.531 0-1.108.295-1.965.885-2.571.59-.607 1.423-.91 2.497-.91zm0 11.53c1.114 0 1.956.296 2.527.89.57.592.855 1.463.855 2.61 0 1.094-.292 1.941-.875 2.54-.584.6-1.42.9-2.507.9-1.048 0-1.873-.303-2.477-.909-.604-.607-.905-1.45-.905-2.531 0-1.121.295-1.985.885-2.591.59-.606 1.423-.91 2.497-.91zm0 11.548c1.114 0 1.956.297 2.527.89.57.594.855 1.457.855 2.591 0 1.094-.292 1.941-.875 2.541-.584.6-1.42.9-2.507.9-1.048 0-1.873-.303-2.477-.91-.604-.606-.905-1.45-.905-2.531 0-1.108.295-1.964.885-2.57.59-.607 1.423-.91 2.497-.91z" _fill="#000"></path>
-    </svg></a>
+<div class="record__extra-actions" record="[object Object]" dataset="[object Object]">
+  <base-button class="small clear"><svg version="1.1" viewBox="0 0 30 8" class="svg-icon svg-fill" style="width: 14px;">
+      <path fill="#4A4A4A" stroke="none" pid="0" d="M7.5 4A3.75 3.75 0 110 4a3.75 3.75 0 017.5 0zM18.75 4a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM26.25 7.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" _fill="#000"></path>
+    </svg></base-button>
   <div class="extra-actions__content">
     <div><span>View record info</span></div>
     <base-action-tooltip-stub tooltip="Copied">

diff --git a/frontend/static/icons/kebab-menu.svg b/frontend/static/icons/kebab-menu.svg
diff --git a/frontend/static/icons/meatballs.svg b/frontend/static/icons/meatballs.svg