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

Use SVG images of grouped font stepper controls

Browse source 
Aligning the components in CSS didn't work very
well, so this uses exported versions of the design
with the `A` icon and `+/-` symbol in a single image.
This commit is contained in:
Jackson Harper 2022-05-02 12:19:33 -07:00
parent aa3e91ac97
commit 93bd6b6ed5
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHoriz
import { AIcon } from '../../elements/images/AIcon'
import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
import { showSuccessToast } from '../../../lib/toastHelpers'
import Image from 'next/image'
type ReaderSettingsProps = {
marginWidth: number
@ -34,20 +34,20 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
<VStack>
<HStack
alignment='center'
distribution='between'
css={{
width: '100%',
height: '70px',
marginTop: '4px',
borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
}}
>
<Button style='plainIcon' onClick={() => props.articleActionHandler('decrementFontSize')}>
<AIcon size={28} color={theme.colors.readerFont.toString()} />
<Minus size={28} color={theme.colors.readerFont.toString()}/>
<Button style='plainIcon' css={{ width: '50%' }} onClick={() => props.articleActionHandler('decrementFontSize')}>
<Image src='/static/icons/font-stepper-down.svg' width={56} height={32} />
</Button>
<VerticalDivider />
<Button style='plainIcon' onClick={() => props.articleActionHandler('incrementFontSize')}>
<AIcon size={44} color={theme.colors.readerFont.toString()} />
<Plus size={28} color={theme.colors.readerFont.toString()} />
<Button style='plainIcon' css={{ width: '50%', height: '100%' }} onClick={() => props.articleActionHandler('incrementFontSize')}>
<Image src='/static/icons/font-stepper-up.svg' width={71} height={45} />
</Button>
</HStack>
<VStack

5
packages/web/public/static/icons/font-stepper-down.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="56" height="29" viewBox="0 0 56 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6079 19.5436L13.5525 8.10555L7.49707 19.5436" stroke="#0A0806" stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.8261 16.1798H9.28125" stroke="#0A0806" stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32.2515 13.9959H50.9237" stroke="black" stroke-width="1.69748" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 497 B

5
packages/web/public/static/icons/font-stepper-up.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="72" height="46" viewBox="0 0 72 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2935 34.2954L21.7811 10.6606L9.26855 34.2954" stroke="#0A0806" stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.6116 27.3442H12.9551" stroke="#0A0806" stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.3784 22.1471C47.9097 22.1471 47.5297 22.5271 47.5297 22.9958C47.5297 23.4646 47.9097 23.8446 48.3784 23.8446V22.1471ZM67.0507 23.8446C67.5194 23.8446 67.8994 23.4646 67.8994 22.9958C67.8994 22.5271 67.5194 22.1471 67.0507 22.1471V23.8446ZM58.5633 13.6597C58.5633 13.191 58.1833 12.811 57.7146 12.811C57.2458 12.811 56.8658 13.191 56.8658 13.6597H58.5633ZM56.8658 32.332C56.8658 32.8007 57.2458 33.1807 57.7146 33.1807C58.1833 33.1807 58.5633 32.8007 58.5633 32.332H56.8658ZM48.3784 23.8446H67.0507V22.1471H48.3784V23.8446ZM56.8658 13.6597V32.332H58.5633V13.6597H56.8658Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 975 B