New design for sliders with gradients (#1986)

chaiNNer-org · Jul 25, 2023 · 99aabc2 · 99aabc2
1 parent 081bf70
commit 99aabc2
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/src/renderer/components/inputs/SliderInput.tsx b/src/renderer/components/inputs/SliderInput.tsx
@@ -19,6 +19,7 @@ import {
     Scale,
     SliderStyle,
     StyledSlider,
+    getSliderHeight,
 } from './elements/StyledSlider';
 import { WithLabel, WithoutLabel } from './InputContainer';
 import { InputProps } from './props';
@@ -178,7 +179,7 @@ export const SliderInput = memo(
         const scale = useMemo(() => parseScale(input), [input]);
         const sliderStyle = useMemo((): SliderStyle => {
             if (input.gradient) {
-                return { type: 'gradient', gradient: input.gradient };
+                return { type: 'label', label: input.label, gradient: input.gradient };
             }
             if (!filled) {
                 return { type: 'no-fill' };
@@ -210,7 +211,9 @@ export const SliderInput = memo(
                         controlsStep={controlsStep}
                         defaultValue={def}
                         hideTrailingZeros={hideTrailingZeros}
-                        inputHeight={sliderStyle.type === 'label' ? '28px' : undefined}
+                        inputHeight={
+                            sliderStyle.type === 'label' ? getSliderHeight(sliderStyle) : undefined
+                        }
                         inputString={isConnected ? typeNumberString : inputString}
                         inputWidth={`${inputWidthRem}rem`}
                         isDisabled={isLocked || isConnected}

diff --git a/src/renderer/components/inputs/elements/StyledSlider.tsx b/src/renderer/components/inputs/elements/StyledSlider.tsx
@@ -84,6 +84,7 @@ interface OldLabelStyle {
 interface LabelStyle {
     readonly type: 'label';
     readonly label: string;
+    readonly gradient?: readonly string[];
 }
 interface GradientStyle {
     readonly type: 'gradient';
@@ -98,6 +99,17 @@ interface AlphaStyle {
 }
 export type SliderStyle = OldLabelStyle | LabelStyle | GradientStyle | NoFillStyle | AlphaStyle;
 
+const getLinearGradient = (gradient: readonly string[]) => {
+    return `linear-gradient(to right, ${gradient.join(', ')})`;
+};
+
+export const getSliderHeight = (style: SliderStyle) => {
+    if (style.type === 'label') {
+        return style.gradient ? '32px' : '28px';
+    }
+    return '1em';
+};
+
 interface StyledSliderProps {
     style: SliderStyle;
     scale: Scale;
@@ -134,7 +146,7 @@ export const StyledSlider = memo(
 
         let customBackground;
         if (style.type === 'gradient') {
-            customBackground = `linear-gradient(to right, ${style.gradient.join(', ')})`;
+            customBackground = getLinearGradient(style.gradient);
         } else if (style.type === 'alpha') {
             customBackground = [
                 `linear-gradient(to right, transparent, ${style.color || 'black'})`,
@@ -149,7 +161,7 @@ export const StyledSlider = memo(
             <Slider
                 defaultValue={scale.toScale(def)}
                 focusThumbOnChange={false}
-                height={style.type === 'label' ? '28px' : '1em'}
+                height={getSliderHeight(style)}
                 isDisabled={isDisabled}
                 max={scale.toScale(max)}
                 min={scale.toScale(min)}
@@ -181,16 +193,46 @@ export const StyledSlider = memo(
                                 w="full"
                                 zIndex={0}
                             />
+                            {style.gradient && (
+                                <>
+                                    <Box
+                                        background={getLinearGradient(style.gradient)}
+                                        border={`1px solid ${borderColor}`}
+                                        borderBottomRadius="md"
+                                        borderTop="none"
+                                        bottom={0}
+                                        cursor="pointer"
+                                        h="4px"
+                                        left={0}
+                                        p="1px"
+                                        position="absolute"
+                                        right={0}
+                                        userSelect="none"
+                                        zIndex={1}
+                                    />
+                                    <Box
+                                        border={`1px solid ${borderColor}`}
+                                        borderRadius="md"
+                                        cursor="pointer"
+                                        h="full"
+                                        position="absolute"
+                                        userSelect="none"
+                                        w="full"
+                                        zIndex={1}
+                                    />
+                                </>
+                            )}
                             <Box
                                 alignItems="center"
                                 cursor="pointer"
                                 display="flex"
                                 h="full"
                                 p="1px"
+                                pb={style.gradient && '3px'}
                                 position="absolute"
                                 userSelect="none"
                                 w="full"
-                                zIndex={1}
+                                zIndex={2}
                             >
                                 <Text
                                     as="span"