Icon highlight and SvgButton (#10002)

Fixes #9904 Refactored our button: the common logic of "button being an SVG icon" moved to new `SvgButton` component. Simplified and unified CSS. Added hover highlight. ![image](https://github.com/enso-org/enso/assets/3919101/40aa628c-4181-487c-a0f7-b49e06d274b8)
enso-org · May 20, 2024 · 65f28c3 · 65f28c3
1 parent c3976f7
commit 65f28c3
Show file tree

Hide file tree

Showing 19 changed files with 160 additions and 207 deletions.
diff --git a/app/gui2/e2e/componentBrowser.spec.ts b/app/gui2/e2e/componentBrowser.spec.ts
@@ -274,7 +274,7 @@ test('Component browser handling of overridden record-mode', async ({ page }) =>
 
   // Enable record mode for the node.
   await locate.graphNodeIcon(node).hover()
-  await expect(recordModeToggle).not.toHaveClass(/recording-overridden/)
+  await expect(recordModeToggle).toHaveClass(/toggledOff/)
   await recordModeToggle.click()
   // TODO[ao]: The simple move near top-left corner not always works i.e. not always
   //  `pointerleave` event is emitted. Investigated in https://github.com/enso-org/enso/issues/9478
@@ -283,7 +283,7 @@ test('Component browser handling of overridden record-mode', async ({ page }) =>
   await page.mouse.move(700, 1200, { steps: 20 })
   await expect(recordModeIndicator).toBeVisible()
   await locate.graphNodeIcon(node).hover()
-  await expect(recordModeToggle).toHaveClass(/recording-overridden/)
+  await expect(recordModeToggle).toHaveClass(/toggledOn/)
   // Ensure editing in the component browser doesn't display the override expression.
   await locate.graphNodeIcon(node).click({ modifiers: [CONTROL_KEY] })
   await expect(locate.componentBrowser(page)).toBeVisible()

diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
diff --git a/app/gui2/src/components/CircularMenu.vue b/app/gui2/src/components/CircularMenu.vue
@@ -2,7 +2,7 @@
 import ColorRing from '@/components/ColorRing.vue'
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import SmallPlusButton from '@/components/SmallPlusButton.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { ref } from 'vue'
 
@@ -37,45 +37,44 @@ const showColorPicker = ref(false)
       :class="`${props.isFullMenuVisible ? 'full' : 'partial'}`"
     >
       <div v-if="!isFullMenuVisible" class="More" @pointerdown.stop="emit('openFullMenu')"></div>
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="comment"
-        class="icon-container button slot2"
+        class="slot2"
         :alt="`Edit comment`"
         @click.stop="emit('startEditingComment')"
       />
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="paint_palette"
-        class="icon-container button slot3"
+        class="slot3"
         :alt="`Choose color`"
         @click.stop="showColorPicker = true"
       />
-      <SvgIcon
+      <SvgButton
         v-if="isFullMenuVisible"
         name="trash2"
-        class="icon-container button slot4"
+        class="slot4"
         :alt="`Delete component`"
         @click.stop="emit('delete')"
       />
       <ToggleIcon
         icon="eye"
-        class="icon-container button slot5"
+        class="slot5"
         :alt="`${props.isVisualizationVisible ? 'Hide' : 'Show'} visualization`"
         :modelValue="props.isVisualizationVisible"
         @update:modelValue="emit('update:isVisualizationVisible', $event)"
       />
-      <SvgIcon
+      <SvgButton
         name="edit"
-        class="icon-container button slot6"
+        class="slot6"
         data-testid="edit-button"
         @click.stop="emit('startEditing')"
       />
       <ToggleIcon
         icon="record"
-        class="icon-container button slot7"
+        class="overrideRecordingButton slot7"
         data-testid="overrideRecordingButton"
-        :class="{ 'recording-overridden': props.isRecordingOverridden }"
         :alt="`${props.isRecordingOverridden ? 'Disable' : 'Enable'} recording`"
         :modelValue="props.isRecordingOverridden"
         @update:modelValue="emit('update:isRecordingOverridden', $event)"
@@ -180,27 +179,19 @@ const showColorPicker = ref(false)
   clip-path: var(--full-ring-path);
 }
 
-.icon-container {
-  display: inline-flex;
-  background: none;
-  padding: 0;
-  border: none;
-  opacity: 30%;
-  pointer-events: all;
-}
-
-.toggledOn {
-  opacity: unset;
-}
-
 .inactive {
   pointer-events: none;
   opacity: 10%;
 }
 
-.recording-overridden {
-  opacity: 100%;
-  color: red;
+.overrideRecordingButton {
+  &.toggledOn {
+    opacity: 100%;
+    color: red;
+  }
+  &.toggledOff {
+    opacity: unset;
+  }
 }
 
 /**
@@ -247,7 +238,7 @@ const showColorPicker = ref(false)
 
 .below-slot5 {
   position: absolute;
-  top: calc(var(--outer-diameter) - 32px);
+  top: calc(var(--outer-diameter) - 24px);
   pointer-events: all;
 }
 

diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue
@@ -693,20 +693,16 @@ const handler = componentBrowserBindings.handler({
   gap: 12px;
   padding: 7px;
 
-  & svg {
+  & * {
     color: rgba(0, 0, 0, 0.18);
     transition: color 0.2s;
   }
   & .first-on-right {
     margin-left: auto;
   }
-  & > svg.toggledOn {
+  & > .toggledOn {
     color: rgba(0, 0, 0, 0.6);
   }
-
-  & > svg:not(.toggledOn):hover {
-    color: rgba(0, 0, 0, 0.3);
-  }
 }
 
 .bottom-panel {

diff --git a/app/gui2/src/components/ExtendedMenu.vue b/app/gui2/src/components/ExtendedMenu.vue
@@ -4,6 +4,7 @@ import SvgIcon from '@/components/SvgIcon.vue'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import { targetIsOutside } from '@/util/autoBlur'
 import { ref } from 'vue'
+import SvgButton from './SvgButton.vue'
 
 const showCodeEditor = defineModel<boolean>('showCodeEditor', { required: true })
 const showDocumentationEditor = defineModel<boolean>('showDocumentationEditor', { required: true })
@@ -55,20 +56,19 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
       <div class="row">
         <div class="label">Zoom</div>
         <div class="zoomControl">
-          <div class="zoomButtonHighlight">
-            <SvgIcon :scale="12 / 16" name="minus" title="Decrease zoom" @click="emit('zoomOut')" />
-          </div>
+          <SvgButton
+            class="zoomButton"
+            name="minus"
+            title="Decrease zoom"
+            @click="emit('zoomOut')"
+          />
           <span
             class="zoomScaleLabel"
             v-text="props.zoomLevel ? props.zoomLevel.toFixed(0) + '%' : '?'"
           ></span>
-          <div class="zoomButtonHighlight">
-            <SvgIcon :scale="12 / 16" name="add" title="increase zoom" @click="emit('zoomIn')" />
-          </div>
+          <SvgButton class="zoomButton" name="add" title="Increase zoom" @click="emit('zoomIn')" />
           <div class="divider"></div>
-          <div class="showAllIconHighlight">
-            <SvgIcon name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
-          </div>
+          <SvgButton name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
         </div>
       </div>
       <div
@@ -126,6 +126,9 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   &:hover {
     background-color: var(--color-menu-entry-hover-bg);
   }
+  &:active {
+    background-color: var(--color-menu-entry-active-bg);
+  }
   &.selected {
     background-color: var(--color-menu-entry-selected-bg);
   }
@@ -160,22 +163,6 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   align-items: center;
 }
 
-.showAllIconHighlight {
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  padding-left: 4px;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin: -4px -4px;
-  border-radius: var(--radius-full);
-  transition: background-color 0.3s;
-  &:hover {
-    background-color: var(--color-menu-entry-hover-bg);
-  }
-}
-
 .zoomScaleLabel {
   width: 4em;
   text-align: center;
@@ -186,21 +173,8 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   left: 8px;
 }
 
-.zoomButtonHighlight {
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-full);
-  position: relative;
-  margin: 0px;
-  padding: 2px;
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.zoomButtonHighlight:hover {
-  background-color: var(--color-menu-entry-hover-bg);
+.zoomButton {
+  --icon-transform: scale(12/16);
 }
 
 .dropdown-enter-active,

diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -280,7 +280,7 @@ const dragPointer = usePointer(
   // is not going to be a node drag.
   { pointerCapturedBy: 'target' },
 )
-const isDragged = computed(() => dragPointer.dragging && significantMove)
+const isDragged = computed(() => dragPointer.dragging && significantMove.value)
 
 const isRecordingOverridden = computed({
   get() {

diff --git a/app/gui2/src/components/NavBar.vue b/app/gui2/src/components/NavBar.vue
@@ -12,7 +12,7 @@ const emit = defineEmits<{ back: []; forward: []; breadcrumbClick: [index: numbe
 
 <template>
   <div class="NavBar">
-    <SvgIcon name="graph_editor" draggable="false" class="icon" />
+    <SvgIcon name="graph_editor" draggable="false" />
     <div class="breadcrumbs-controls">
       <SvgIcon
         name="arrow_left"

diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 
 const props = defineProps<{ recordMode: boolean }>()
@@ -18,7 +18,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
       />
     </div>
     <div class="control right-end" @click.stop="() => emit('recordOnce')">
-      <SvgIcon alt="Record once" class="button" name="record_once" draggable="false" :scale="1.5" />
+      <SvgButton alt="Record once" class="button" name="record_once" draggable="false" />
     </div>
   </div>
 </template>
@@ -34,7 +34,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 .control {
   background: var(--color-frame-bg);
   backdrop-filter: var(--blur-app-bg);
-  padding: 8px 8px;
+  padding: 4px 4px;
   width: 42px;
   cursor: pointer;
 }
@@ -43,7 +43,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
   border-radius: var(--radius-full) 0 0 var(--radius-full);
 
   .button {
-    margin: 0 4px 0 auto;
+    margin: 0 0 0 auto;
   }
 }
 
@@ -52,8 +52,11 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 
   .button {
     position: relative;
-    top: -4px;
     margin: 0 auto 0 0;
+    width: 32px;
+    height: 24px;
+    --icon-transform: scale(1.5) translateY(calc(-4px / 1.5));
+    --icon-transform-origin: left top;
   }
 }
 

diff --git a/app/gui2/src/components/SelectionMenu.vue b/app/gui2/src/components/SelectionMenu.vue
@@ -2,6 +2,7 @@
 import ColorPickerMenu from '@/components/ColorPickerMenu.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
+import SvgButton from './SvgButton.vue'
 
 const showColorPicker = defineModel<boolean>('showColorPicker', { required: true })
 const _props = defineProps<{ selectedComponents: number }>()
@@ -16,31 +17,18 @@ const emit = defineEmits<{
     <span
       v-text="`${selectedComponents} component${selectedComponents === 1 ? '' : 's'} selected`"
     />
-    <SvgIcon
-      name="group"
-      draggable="false"
-      class="icon button"
-      alt="Group components"
-      @click.stop="emit('collapseNodes')"
-    />
+    <SvgButton name="group" alt="Group components" @click.stop="emit('collapseNodes')" />
     <ToggleIcon
       v-model="showColorPicker"
       :alt="`${showColorPicker ? 'Hide' : 'Show'} the component color chooser`"
       icon="paint_palette"
-      class="toggle button"
       :class="{
         // Any `pointerdown` event outside the color picker will close it. Ignore clicks that occur while the color
         // picker is open, so that it isn't toggled back open.
         disableInput: showColorPicker,
       }"
     />
-    <SvgIcon
-      name="trash"
-      draggable="false"
-      class="icon button"
-      alt="Delete components"
-      @click.stop="emit('removeNodes')"
-    />
+    <SvgButton name="trash" alt="Delete components" @click.stop="emit('removeNodes')" />
     <ColorPickerMenu v-if="showColorPicker" class="submenu" @close="showColorPicker = false" />
   </div>
 </template>
@@ -69,14 +57,10 @@ const emit = defineEmits<{
   backdrop-filter: var(--blur-app-bg);
 }
 
-.toggle {
+.toggledOff {
   opacity: 0.6;
 }
 
-.toggledOn {
-  opacity: unset;
-}
-
 .disableInput {
   pointer-events: none;
 }

diff --git a/app/gui2/src/components/SmallPlusButton.vue b/app/gui2/src/components/SmallPlusButton.vue
@@ -40,6 +40,5 @@ function addNode() {
   margin: 8px;
   padding: 0;
   border: none;
-  opacity: 30%;
 }
 </style>