From 0ff2ed6cc31e3d12436055e5f7dc974b695d38c7 Mon Sep 17 00:00:00 2001
From: Kaz Wesley <kaz@lambdaverse.org>
Date: Thu, 13 Jun 2024 06:03:43 -0700
Subject: [PATCH] Add divider to numeric slider (#10268)

https://github.com/enso-org/enso/assets/1047859/5a9ba761-dfec-4ec7-99ce-3088556e63e4

Closes #10234.

# Important Notes
- Tested in combination with #10267, though they can be merged separately.
---
 app/gui2/e2e/widgets.spec.ts                  |  2 +-
 app/gui2/src/assets/base.css                  |  1 +
 .../components/widgets/NumericInputWidget.vue | 53 ++++++++++---------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/app/gui2/e2e/widgets.spec.ts b/app/gui2/e2e/widgets.spec.ts
index 2970f6c200..eb68344851 100644
--- a/app/gui2/e2e/widgets.spec.ts
+++ b/app/gui2/e2e/widgets.spec.ts
@@ -55,7 +55,7 @@ test('Widget in plain AST', async ({ page }) => {
   const numberNode = locate.graphNodeByBinding(page, 'five')
   const numberWidget = numberNode.locator('.WidgetNumber')
   await expect(numberWidget).toBeVisible()
-  await expect(numberWidget.locator('input')).toHaveValue('5')
+  await expect(numberWidget).toHaveValue('5')
 
   const listNode = locate.graphNodeByBinding(page, 'list')
   const listWidget = listNode.locator('.WidgetVector')
diff --git a/app/gui2/src/assets/base.css b/app/gui2/src/assets/base.css
index 9ae3677769..29cb01a713 100644
--- a/app/gui2/src/assets/base.css
+++ b/app/gui2/src/assets/base.css
@@ -15,6 +15,7 @@
   --color-dim: rgb(0 0 0 / 0.25);
   --color-frame-bg: rgb(255 255 255 / 0.3);
   --color-frame-selected-bg: rgb(255 255 255 / 0.7);
+  --color-widget-slight: rgb(255 255 255 / 0.06);
   --color-widget: rgb(255 255 255 / 0.12);
   --color-widget-focus: rgb(255 255 255 / 0.25);
   --color-widget-selected: rgb(255 255 255 / 0.58);
diff --git a/app/gui2/src/components/widgets/NumericInputWidget.vue b/app/gui2/src/components/widgets/NumericInputWidget.vue
index fd146f1dcb..89598d0887 100644
--- a/app/gui2/src/components/widgets/NumericInputWidget.vue
+++ b/app/gui2/src/components/widgets/NumericInputWidget.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePointer } from '@/composables/events'
-import { computed, ref, watch, type ComponentInstance, type StyleValue } from 'vue'
+import { computed, ref, watch, type CSSProperties, type ComponentInstance } from 'vue'
 import AutoSizedInput from './AutoSizedInput.vue'
 
 const props = defineProps<{
@@ -60,7 +60,7 @@ const sliderWidth = computed(() => {
 const inputComponent = ref<ComponentInstance<typeof AutoSizedInput>>()
 const MIN_CONTENT_WIDTH = 56
 
-const inputStyle = computed<StyleValue>(() => {
+const inputStyle = computed<CSSProperties>(() => {
   const value = `${editedValue.value}`
   const dotIdx = value.indexOf('.')
   let indent = 0
@@ -109,20 +109,19 @@ defineExpose({
 </script>
 
 <template>
-  <label class="NumericInputWidget">
-    <div v-if="props.limits != null" class="slider" :style="{ width: sliderWidth }"></div>
-    <AutoSizedInput
-      ref="inputComponent"
-      v-model="editedValue"
-      autoSelect
-      :style="inputStyle"
-      v-on="dragPointer.events"
-      @click.stop
-      @blur="blurred"
-      @focus="focused"
-      @input="emit('input', editedValue)"
-    />
-  </label>
+  <AutoSizedInput
+    ref="inputComponent"
+    v-model="editedValue"
+    autoSelect
+    class="NumericInputWidget"
+    :class="{ slider: sliderWidth != null }"
+    :style="{ ...inputStyle, '--slider-width': sliderWidth }"
+    v-on="dragPointer.events"
+    @click.stop
+    @blur="blurred"
+    @focus="focused"
+    @input="emit('input', editedValue)"
+  />
 </template>
 
 <style scoped>
@@ -130,22 +129,24 @@ defineExpose({
   position: relative;
   overflow: clip;
   border-radius: var(--radius-full);
-}
-.AutoSizedInput {
   user-select: none;
+  padding: 0 4px;
   background: var(--color-widget);
-  border-radius: var(--radius-full);
-  overflow: clip;
-  padding: 0px 4px;
   &:focus {
     background: var(--color-widget-focus);
   }
 }
 
-.slider {
-  position: absolute;
-  height: 100%;
-  left: 0;
-  background: var(--color-widget);
+.NumericInputWidget.slider {
+  &:focus {
+    /* Color will be blended with background defined below. */
+    background-color: var(--color-widget);
+  }
+  background: linear-gradient(
+    to right,
+    var(--color-widget-focus) 0 calc(var(--slider-width) - 1px),
+    var(--color-widget-slight) calc(var(--slider-width) - 1px) var(--slider-width),
+    var(--color-widget) var(--slider-width) 100%
+  );
 }
 </style>