clear note button

probabl-ai · Jan 16, 2025 · 9e5ec4e · 9e5ec4e
1 parent f6dddc8
commit 9e5ec4e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/skore-ui/src/assets/styles/_variables.css b/skore-ui/src/assets/styles/_variables.css
@@ -60,6 +60,7 @@ body[data-vscode-theme-kind="vscode-dark"],
   --color-text-branding: #f08b30;
   --color-text-button-primary: #fff;
   --color-text-logo: #fff;
+  --color-text-danger: #ff3b00;
 
   /* icons */
   --color-icon-primary: #f08b30;
@@ -98,6 +99,7 @@ body[data-vscode-theme-kind="vscode-light"],
   --color-text-branding: #3043f0;
   --color-text-button-primary: #fff;
   --color-text-logo: #000;
+  --color-text-danger: #ff3b00;
 
   /* icons */
   --color-icon-primary: #f08b30;

diff --git a/skore-ui/src/views/project/ItemNote.vue b/skore-ui/src/views/project/ItemNote.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useTemplateRef, watch } from "vue";
+import { nextTick, ref, useTemplateRef, watch } from "vue";
 
 import MarkdownWidget from "@/components/MarkdownWidget.vue";
 import RichTextEditor from "@/components/RichTextEditor.vue";
@@ -23,11 +23,23 @@ const debouncedSetNote = debounce(
   true
 );
 
-function onEditorBlurred() {
+function onEdit() {
+  isEditing.value = true;
+  nextTick(() => {
+    editor.value?.focus();
+  });
+}
+
+function onEditionEnd() {
   debouncedSetNote();
   isEditing.value = false;
 }
 
+function onClear() {
+  richText.value = "";
+  onEditionEnd();
+}
+
 watch(richText, () => {
   debouncedSetNote();
 });
@@ -36,7 +48,18 @@ watch(richText, () => {
 <template>
   <div class="item-note">
     <div class="header">
-      <div>Note</div>
+      <div class="info">
+        <div>Note</div>
+        <Transition name="fade">
+          <SimpleButton
+            v-if="isEditing && richText && richText.length > 0"
+            label="clear"
+            class="clear"
+            :is-inline="true"
+            @click="onClear"
+          />
+        </Transition>
+      </div>
       <Transition name="fade">
         <div class="edit-actions" v-if="isEditing">
           <SimpleButton :is-inline="true" icon="icon-bold" @click="editor?.markBold()" />
@@ -50,19 +73,12 @@ watch(richText, () => {
         ref="editor"
         v-model:value="richText"
         :rows="4"
-        @keyup.esc="onEditorBlurred"
-        @keydown.shift.enter="onEditorBlurred"
-        @keydown.meta.enter="onEditorBlurred"
+        @keyup.esc="onEditionEnd"
+        @keydown.shift.enter="onEditionEnd"
+        @keydown.meta.enter="onEditionEnd"
       />
     </div>
-    <div
-      class="preview"
-      v-if="!isEditing"
-      @click="
-        isEditing = true;
-        editor?.focus();
-      "
-    >
+    <div class="preview" v-if="!isEditing" @click="onEdit">
       <MarkdownWidget :source="richText" v-if="richText && richText.length > 0" />
       <div class="placeholder" v-else>Click to annotate {{ props.item.name }}.</div>
     </div>
@@ -83,6 +99,17 @@ watch(richText, () => {
     border-bottom: solid var(--stroke-width-md) var(--color-stroke-background-primary);
     background-color: var(--color-background-secondary);
 
+    .info {
+      display: flex;
+      gap: var(--spacing-8);
+
+      .clear {
+        padding: 0;
+        color: var(--color-text-danger);
+        font-size: var(--font-size-xs);
+      }
+    }
+
     .edit-actions {
       display: flex;
       flex-direction: row;