feat(UI): Add view button is now larger and has a tooltip (#555)

This PR makes the add view button larger and adds a tooltip to it. UI preview: https://github.com/user-attachments/assets/c5f6de13-18b7-482e-9620-9772e7ecf024 Fixes #509
probabl-ai · Oct 21, 2024 · d821ffb · d821ffb
1 parent b554400
commit d821ffb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/skore-ui/src/components/SectionHeader.vue b/skore-ui/src/components/SectionHeader.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import SimpleButton from "@/components/SimpleButton.vue";
 
 const props = defineProps<{
   title: string;
   subtitle?: string;
   icon?: string;
   actionIcon?: string;
+  actionTooltip?: string;
 }>();
 
 const emit = defineEmits(["action"]);
@@ -21,7 +23,10 @@ const emit = defineEmits(["action"]);
       </span>
     </h1>
     <div class="action" v-if="props.actionIcon">
-      <SimpleButton :icon="props.actionIcon" @click="emit('action')" />
+      <FloatingTooltip :text="props.actionTooltip" v-if="props.actionTooltip">
+        <SimpleButton :icon="props.actionIcon" @click="emit('action')" />
+      </FloatingTooltip>
+      <SimpleButton v-else :icon="props.actionIcon" @click="emit('action')" />
     </div>
   </div>
 </template>

diff --git a/skore-ui/src/components/SimpleButton.vue b/skore-ui/src/components/SimpleButton.vue
@@ -76,7 +76,7 @@ onBeforeMount(() => {
     background: var(--border-color-lower);
     box-shadow: inset 0 0 3.24px 2.4px rgb(var(--text-color-highlight) 0.5);
     color: var(--text-color-normal);
-    font-size: var(--text-size-small);
+    font-size: var(--text-size-normal);
     font-weight: var(--text-weight-normal);
   }
 

diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
@@ -13,6 +13,7 @@ import DataFrameWidget from "@/components/DataFrameWidget.vue";
 import DropdownButton from "@/components/DropdownButton.vue";
 import DropdownButtonItem from "@/components/DropdownButtonItem.vue";
 import { type EditableListItemModel } from "@/components/EditableList.vue";
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
 import ImageWidget from "@/components/ImageWidget.vue";
 import MarkdownWidget from "@/components/MarkdownWidget.vue";

diff --git a/skore-ui/src/views/project/ProjectViewList.vue b/skore-ui/src/views/project/ProjectViewList.vue
@@ -90,7 +90,8 @@ onMounted(async () => {
     <SectionHeader
       title="Views"
       icon="icon-recent-document"
-      action-icon="icon-plus-circle"
+      action-icon="icon-plus"
+      action-tooltip="Add a new view"
       @action="onAddView"
     />
     <Simplebar class="list">