-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add zoom slider to interface controls (#402)
* build: install jotai in frontend * feat: add modal component * feat: convert nav links to modals * fix: add missing dark theme support * feat: add Slider component * feat: add zoom slider for source view * feat: add touchscreen support for modals * fix: lint error
- Loading branch information
Showing
9 changed files
with
476 additions
and
190 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { X } from 'lucide-react' | ||
| import { Dispatch, ReactNode, SetStateAction } from 'react' | ||
| import { createUseStyles } from 'react-jss' | ||
|
|
||
| import theme from '../helpers/theme' | ||
|
|
||
| type ModalProps = { | ||
| visible: boolean, | ||
| setVisible: Dispatch<SetStateAction<boolean>>, | ||
| children?: ReactNode, | ||
| } | ||
|
|
||
| const useStyles = createUseStyles( { | ||
| modalBackDrop: { | ||
| position: 'fixed', | ||
| left: 0, | ||
| top: 0, | ||
| backgroundColor: `${theme.ModalBackdrop}`, | ||
| width: '100%', | ||
| height: '100%', | ||
| zIndex: 2, | ||
| }, | ||
| modal: { | ||
| zIndex: 3, | ||
| margin: `calc(${theme.Gutter} * .5) auto 0`, | ||
| background: `${theme.ModalBg}`, | ||
| borderRadius: theme.Gap, | ||
| maxWidth: '810px', | ||
| maxHeight: `calc(100% - ${theme.Gutter})`, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| overflow: 'auto', | ||
| }, | ||
| close: { | ||
| float: 'right', | ||
| top: 0, | ||
| position: 'sticky', | ||
| lineHeight: 0, | ||
| padding: `calc(${theme.Gap} * 1.5)`, | ||
| cursor: 'pointer', | ||
| '&:hover': { | ||
| color: `${theme.Blue}`, | ||
| }, | ||
| }, | ||
| content: { | ||
| flexGrow: 1, | ||
| overflowY: 'scroll', | ||
| '&::-webkit-scrollbar': { | ||
| display: 'none', | ||
| }, | ||
| }, | ||
| '@media (prefers-color-scheme: dark)': { | ||
| modalBackDrop: { | ||
| backgroundColor: `${theme.ModalBackdropDarkScheme}`, | ||
| }, | ||
| modal: { | ||
| background: `${theme.ModalBgDarkScheme}`, | ||
| }, | ||
| close: { | ||
| '&:hover': { | ||
| color: `${theme.BlueDarkScheme}`, | ||
| }, | ||
| }, | ||
| }, | ||
| '@media (pointer: coarse)': { | ||
| modal: { | ||
| width: '100%', | ||
| margin: [ 0, 'auto' ], | ||
| left: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| maxHeight: `calc(100% - ${theme.Gap})`, | ||
| borderRadius: [ theme.Gap, theme.Gap, 0, 0 ], | ||
| position: 'fixed', | ||
| }, | ||
| }, | ||
| } ) | ||
|
|
||
| const Modal = ( { visible, setVisible, children }: ModalProps ) => { | ||
| const classes = useStyles() | ||
| const toggleVisibility = () => setVisible( !visible ) | ||
|
|
||
| if ( visible ) { | ||
| return ( | ||
| <div className={classes.modalBackDrop} onClick={toggleVisibility}> | ||
| <div className={classes.modal} onClick={( e ) => e.stopPropagation()}> | ||
| <div className={classes.content}> | ||
| <div className={classes.close} onClick={toggleVisibility}> | ||
| <X /> | ||
| </div> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| export default Modal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { Dispatch, SetStateAction } from 'react' | ||
| import { createUseStyles } from 'react-jss' | ||
|
|
||
| import theme from '../helpers/theme' | ||
|
|
||
| type SliderProps = { | ||
| min: number, | ||
| max: number, | ||
| step: number | string, | ||
| units: string, | ||
| value: number, | ||
| setValue: Dispatch<SetStateAction<number>>, | ||
| } | ||
|
|
||
| const useStyles = createUseStyles( { | ||
| legend: { | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| fontSize: '0.75rem', | ||
| color: `${theme.FgMuted}`, | ||
| }, | ||
| value: { | ||
| color: `${theme.Fg}`, | ||
| }, | ||
| slider: { | ||
| width: '100%', | ||
| }, | ||
|
|
||
| '@media (prefers-color-scheme: dark)': { | ||
| legend: { | ||
| color: `${theme.FgMutedDarkScheme}`, | ||
| }, | ||
| value: { | ||
| color: `${theme.FgDarkScheme}`, | ||
| }, | ||
| }, | ||
|
|
||
| } ) | ||
|
|
||
| const Slider = ( { min, max, step, units, value, setValue }: SliderProps ) => { | ||
| const classes = useStyles() | ||
| return ( | ||
| <> | ||
| <div className={classes.legend}> | ||
| <span> | ||
| {min} | ||
| {units} | ||
| </span> | ||
| <span className={classes.value}> | ||
| {value} | ||
| {units} | ||
| </span> | ||
| <span> | ||
| {max} | ||
| {units} | ||
| </span> | ||
| </div> | ||
| <input | ||
| className={classes.slider} | ||
| type="range" | ||
| min={min} | ||
| max={max} | ||
| step={step} | ||
| defaultValue={value} | ||
| onChange={( e ) => setValue( parseFloat( e.target.value as unknown as string ) )} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Slider |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.