quick demo with slider

blockscout · Nov 9, 2023 · a815eb2 · a815eb2
1 parent b69d05e
commit a815eb2
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 2 deletions.
diff --git a/ui/snippets/footer/ColorModeSlider.tsx b/ui/snippets/footer/ColorModeSlider.tsx
@@ -0,0 +1,91 @@
+import {
+  IconButton,
+  Icon,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useColorMode,
+  useColorModeValue,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  Tooltip,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import gearIcon from 'icons/gear.svg';
+
+const COLORS = [
+  '#101112',
+  '#142639',
+  '#193047',
+  '#24405c',
+];
+
+const ColorModeSlider = () => {
+  const { colorMode } = useColorMode();
+  const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+  const [ sliderValue, setSliderValue ] = React.useState(0);
+  const [ showTooltip, setShowTooltip ] = React.useState(false);
+
+  const handleValueChange = React.useCallback((value: number) => {
+    setSliderValue(value);
+    const color = COLORS[value - 1];
+    window.document.documentElement.style.setProperty('--chakra-colors-black', color);
+  }, []);
+
+  const handleMouseEnter = React.useCallback(() => {
+    setShowTooltip(true);
+  }, []);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setShowTooltip(false);
+  }, []);
+
+  return (
+    <Popover placement="bottom-start" isLazy trigger="click">
+      <PopoverTrigger>
+        <IconButton
+          colorScheme="blue"
+          aria-label="hint"
+          icon={ <Icon as={ gearIcon } boxSize={ 5 }/> }
+          boxSize={ 8 }
+          variant="outline"
+          isDisabled={ colorMode === 'light' }
+        />
+      </PopoverTrigger>
+      <PopoverContent overflowY="hidden" w="240px">
+        <PopoverBody bgColor={ bgColor } h="54px" boxShadow="2xl">
+          <Slider
+            id="slider"
+            defaultValue={ 1 }
+            min={ 1 }
+            max={ COLORS.length }
+            colorScheme="teal"
+            onChange={ handleValueChange }
+            onMouseEnter={ handleMouseEnter }
+            onMouseLeave={ handleMouseLeave }
+          >
+            <SliderTrack>
+              <SliderFilledTrack/>
+            </SliderTrack>
+            <Tooltip
+              hasArrow
+              bg="teal.500"
+              color="white"
+              placement="top"
+              isOpen={ showTooltip }
+              label={ COLORS[sliderValue - 1] }
+            >
+              <SliderThumb/>
+            </Tooltip>
+          </Slider>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ColorModeSlider;
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
@@ -19,6 +19,7 @@ import useIssueUrl from 'lib/hooks/useIssueUrl';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import ColorModeToggler from '../header/ColorModeToggler';
+import ColorModeSlider from './ColorModeSlider';
 import FooterLinkItem from './FooterLinkItem';
 import IntTxsIndexingStatus from './IntTxsIndexingStatus';
 import getApiVersionUrl from './utils/getApiVersionUrl';
@@ -118,6 +119,7 @@ const Footer = () => {
       <Box flexGrow="1" mb={{ base: 8, lg: 0 }} minW="195px">
         <Flex flexWrap="wrap" columnGap={ 8 } rowGap={ 6 }>
           <ColorModeToggler/>
+          <ColorModeSlider/>
           { !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> }
           <NetworkAddToWallet/>
         </Flex>

diff --git a/ui/snippets/header/ColorModeToggler.tsx b/ui/snippets/header/ColorModeToggler.tsx
@@ -1,6 +1,6 @@
 import type { UseCheckboxProps } from '@chakra-ui/checkbox';
 import { useCheckbox } from '@chakra-ui/checkbox';
-import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
+import { useColorMode, useColorModeValue, Icon, useToken } from '@chakra-ui/react';
 import type {
   SystemStyleObject,
   ThemingProps,
@@ -39,6 +39,7 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
   const trackBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
   const thumbBg = 'white';
   const transitionProps = getDefaultTransitionProps();
+  const blackColor = useToken('colors', 'black');
 
   const trackStyles: SystemStyleObject = React.useMemo(() => ({
     bgColor: props.trackBg || trackBg,
@@ -67,9 +68,14 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
     transitionDuration: 'ultra-slow',
   }), [ thumbBg, transitionProps, state.isChecked ]);
 
+  const handleChange = React.useCallback(() => {
+    toggleColorMode();
+    window.document.documentElement.style.setProperty('--chakra-colors-black', blackColor);
+  }, [ blackColor, toggleColorMode ]);
+
   return (
     <chakra.label
-      { ...getRootProps({ onChange: toggleColorMode }) }
+      { ...getRootProps({ onChange: handleChange }) }
       display="inline-block"
       position="relative"
       verticalAlign="middle"