mirror of
https://github.com/enso-org/enso.git
synced 2024-11-22 11:52:59 +03:00
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.
This commit is contained in:
parent
fadb81abe6
commit
0ff2ed6cc3
@ -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')
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user