feat(UI): Use a double chevron as focus mode button icon (#620)

Closes #583
probabl-ai · Oct 28, 2024 · 1571501 · 1571501
1 parent 5e9fef0
commit 1571501
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 51 deletions.
diff --git a/skore-ui/src/assets/fonts/icomoon.eot b/skore-ui/src/assets/fonts/icomoon.eot
diff --git a/skore-ui/src/assets/fonts/icomoon.svg b/skore-ui/src/assets/fonts/icomoon.svg
diff --git a/skore-ui/src/assets/fonts/icomoon.ttf b/skore-ui/src/assets/fonts/icomoon.ttf
diff --git a/skore-ui/src/assets/fonts/icomoon.woff b/skore-ui/src/assets/fonts/icomoon.woff
diff --git a/skore-ui/src/assets/styles/_icons.css b/skore-ui/src/assets/styles/_icons.css
@@ -31,102 +31,110 @@
   content: "\e900";
 }
 
-.icon-handle::before {
+.icon-left-double-chevron::before {
   content: "\e901";
 }
 
-.icon-more::before {
+.icon-left-chevron::before {
   content: "\e902";
 }
 
-.icon-branch::before {
+.icon-handle::before {
   content: "\e903";
 }
 
-.icon-edit::before {
+.icon-more::before {
   content: "\e904";
 }
 
-.icon-copy::before {
+.icon-branch::before {
   content: "\e905";
 }
 
-.icon-pill::before {
+.icon-edit::before {
   content: "\e906";
 }
 
-.icon-new-document::before {
+.icon-copy::before {
   content: "\e907";
 }
 
-.icon-recent-document::before {
+.icon-pill::before {
   content: "\e908";
 }
 
-.icon-plus::before {
+.icon-new-document::before {
   content: "\e909";
 }
 
-.icon-plus-circle::before {
+.icon-recent-document::before {
   content: "\e90a";
 }
 
-.icon-warning::before {
+.icon-plus::before {
   content: "\e90b";
 }
 
-.icon-info::before {
+.icon-plus-circle::before {
   content: "\e90c";
 }
 
-.icon-error::before {
+.icon-warning::before {
   content: "\e90d";
 }
 
-.icon-success::before {
+.icon-info::before {
   content: "\e90e";
 }
 
-.icon-search::before {
+.icon-error::before {
   content: "\e90f";
 }
 
-.icon-maximize::before {
+.icon-success::before {
   content: "\e910";
 }
 
-.icon-folder::before {
+.icon-search::before {
   content: "\e911";
 }
 
-.icon-plot::before {
+.icon-maximize::before {
   content: "\e912";
 }
 
-.icon-text::before {
+.icon-folder::before {
   content: "\e913";
 }
 
-.icon-gift::before {
+.icon-plot::before {
   content: "\e914";
 }
 
-.icon-pie-chart::before {
+.icon-text::before {
   content: "\e915";
 }
 
-.icon-chevron-left::before {
+.icon-gift::before {
   content: "\e916";
 }
 
-.icon-chevron-down::before {
+.icon-pie-chart::before {
   content: "\e917";
 }
 
-.icon-chevron-right::before {
+.icon-chevron-left::before {
   content: "\e918";
 }
 
-.icon-chevron-up::before {
+.icon-chevron-down::before {
   content: "\e919";
 }
+
+.icon-chevron-right::before {
+  content: "\e91a";
+}
+
+.icon-chevron-up::before {
+  content: "\e91b";
+}
diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
@@ -502,6 +502,8 @@ const isCached = ref(false);
           <div>icon-chevron-right <span class="icon-chevron-right"></span></div>
           <div>icon-chevron-up <span class="icon-chevron-up"></span></div>
           <div>icon-handle <span class="icon-handle"></span></div>
+          <div>icon-left-double-chevron <span class="icon-left-double-chevron"></span></div>
+          <div>icon-plus <span class="icon-plus"></span></div>
         </div>
       </TabsItem>
       <TabsItem :value="12">

diff --git a/skore-ui/src/views/project/ProjectView.vue b/skore-ui/src/views/project/ProjectView.vue
@@ -72,7 +72,12 @@ onBeforeUnmount(() => {
     </div>
     <div ref="editor" class="editor">
       <div class="editor-header">
-        <SimpleButton icon="icon-maximize" @click="onFocusMode" />
+        <SimpleButton
+          icon="icon-left-double-chevron"
+          @click="onFocusMode"
+          class="focus-mode-button"
+          :class="{ flipped: isInFocusMode }"
+        />
         <h1>{{ projectStore.currentView }}</h1>
       </div>
       <Transition name="fade">
@@ -211,6 +216,14 @@ main {
           font-weight: var(--text-weight-highlight);
           text-align: center;
         }
+
+        & .focus-mode-button {
+          transform-origin: center;
+
+          &.flipped {
+            transform: scaleX(-1);
+          }
+        }
       }
 
       & .placeholder {