From 9e5ec4eeb813c9633d556d9d7398ab6a6769c6c0 Mon Sep 17 00:00:00 2001
From: Matt J <matthieu@probabl.ai>
Date: Thu, 16 Jan 2025 14:36:05 +0100
Subject: [PATCH] clear note button
---
skore-ui/src/assets/styles/_variables.css | 2 +
skore-ui/src/views/project/ItemNote.vue | 55 +++++++++++++++++------
2 files changed, 43 insertions(+), 14 deletions(-)
diff --git a/skore-ui/src/assets/styles/_variables.css b/skore-ui/src/assets/styles/_variables.css
index 22fa25f06..b49e3e2ba 100644
--- 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
index 76b780bde..dcf2aef62 100644
--- 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;