prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix to the tracks on the reader settings

Browse source
This commit is contained in:
Jackson Harper 2023-03-03 20:10:05 +08:00
parent d93b4458e1
commit 98db742c97
2 changed files with 65 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/web/components/elements/TickedRangeSlider.tsx
View file

@ -1,6 +1,7 @@
import { Box, HStack, SpanBox } from './LayoutPrimitives'
import { styled } from '../tokens/stitches.config'
import { Root as Slider, Thumb, Track, Range } from '@radix-ui/react-slider'
import { Root as Slider, Thumb, Track } from '@radix-ui/react-slider'
import { DropdownSeparator } from './DropdownElements'
type TickedRangeSliderProps = {
ticks?: number
@ -16,6 +17,8 @@ const StyledSlider = styled(Slider, {
alignItems: 'center',
'.SliderTrack': {
display: 'flex',
justifyContent: 'center',
margin: '0px',
height: '8px',
width: '225px',
@ -60,7 +63,9 @@ export function TickedRangeSlider({
}
}}
>
<Track className="SliderTrack" />
<Track className="SliderTrack">
<Box css={{ bg: '#CECECE', width: '2.5px', height: '100%' }} />
</Track>
<Thumb className="SliderThumb" />
</StyledSlider>
</HStack>

88
packages/web/components/templates/article/ReaderSettingsControl.tsx
View file

@ -93,7 +93,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
display: 'flex',
alignItems: 'center',
fontSize: '12px',
background: '#FFFFFF',
background: '$thBackground',
border: '1px sold $thBorderColor',
fontFamily: props.readerSettings.fontFamily,
textTransform: 'capitalize',
@ -138,22 +138,36 @@ function FontControls(props: FontControlsProps): JSX.Element {
distribution="start"
alignment="center"
>
<SpanBox
css={{
fontFamily: '$display',
fontStyle: 'normal',
fontWeight: '400',
fontSize: '20px',
lineHeight: '20px',
textAlign: 'center',
color: '#969696',
width: '50px',
pr: '5px',
pb: '5px',
<Button
style="plainIcon"
css={{ py: '0px', width: '60px' }}
onClick={() => {
// props.readerSettings.actionHandler('de')
// props.readerSettings
// const newMarginWith = Math.max(
// props.readerSettings.marginWidth - 45,
// 200
// )
// props.readerSettings.setMarginWidth(newMarginWith)
}}
>
a
</SpanBox>
<SpanBox
css={{
fontFamily: '$display',
fontStyle: 'normal',
fontWeight: '400',
fontSize: '20px',
lineHeight: '20px',
textAlign: 'center',
color: '#969696',
width: '50px',
pr: '5px',
pb: '5px',
}}
>
a
</SpanBox>
</Button>
<TickedRangeSlider
min={10}
max={34}
@ -161,23 +175,37 @@ function FontControls(props: FontControlsProps): JSX.Element {
value={props.readerSettings.fontSize}
onChange={handleFontSizeChange}
/>
<SpanBox
css={{
fontFamily: '$display',
fontStyle: 'normal',
fontWeight: '400',
fontSize: '20px',
lineHeight: '20px',
textAlign: 'center',
color: '#969696',
width: '60px',
pl: '16px',
<Button
style="plainIcon"
css={{ py: '0px', width: '60px' }}
onClick={() => {
// props.readerSettings.actionHandler('de')
// props.readerSettings
// const newMarginWith = Math.max(
// props.readerSettings.marginWidth - 45,
// 200
// )
// props.readerSettings.setMarginWidth(newMarginWith)
}}
>
A
</SpanBox>
<SpanBox
css={{
fontFamily: '$display',
fontStyle: 'normal',
fontWeight: '400',
fontSize: '20px',
lineHeight: '20px',
textAlign: 'center',
color: '#969696',
width: '60px',
pl: '16px',
}}
>
A
</SpanBox>
</Button>
</HStack>
</VStack>
)