Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue-835-Part-1

Browse Source
This commit is contained in:
Rupin Khandelwal
2022-06-22 11:49:35 -07:00
parent 7f7ac7a7a8
commit 560853fb1d
2 changed files with 100 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/web/components/elements/images/PenWithColorIcon.tsx Normal file
View File

@ -0,0 +1,55 @@
import { config } from '../../tokens/stitches.config'
type PenWithColorProps = {
color?: string
width?: number
height?: number
}
export function PenWithColorIcon({
color,
height,
width,
}: PenWithColorProps): JSX.Element {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 20.25H8.68934C8.78783 20.25 8.88536 20.2306 8.97635 20.1929C9.06735 20.1552 9.15003 20.1 9.21967 20.0303L18 11.25L12.75 6.00001L3.96967 14.7803C3.90003 14.85 3.84478 14.9327 3.80709 15.0237C3.80379 15.0316 3.80063 15.0396 3.79761 15.0477C3.76615 15.1317 3.75 15.2208 3.75 15.3107V19.5C3.75 19.6989 3.82902 19.8897 3.96967 20.0303C4.11032 20.171 4.30109 20.25 4.5 20.25Z"
fill="#FFD234"
/>
<path
d="M15.2197 3.53034L12.75 6.00001L18 11.25L20.4697 8.78034C20.6103 8.63969 20.6893 8.44892 20.6893 8.25001C20.6893 8.0511 20.6103 7.86033 20.4697 7.71968L16.2803 3.53034C16.1397 3.38969 15.9489 3.31067 15.75 3.31067C15.5511 3.31067 15.3603 3.38969 15.2197 3.53034Z"
fill="#FFD234"
/>
<path
d="M8.68934 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V15.3107C3.75 15.2122 3.7694 15.1147 3.80709 15.0237C3.84478 14.9327 3.90003 14.85 3.96967 14.7803L15.2197 3.53034C15.3603 3.38969 15.5511 3.31067 15.75 3.31067C15.9489 3.31067 16.1397 3.38969 16.2803 3.53034L20.4697 7.71968C20.6103 7.86033 20.6893 8.0511 20.6893 8.25001C20.6893 8.44892 20.6103 8.63969 20.4697 8.78034L9.21967 20.0303C9.15003 20.1 9.06735 20.1552 8.97635 20.1929C8.88536 20.2306 8.78783 20.25 8.68934 20.25Z"
stroke="#0A0806"
strokeOpacity="0.8"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.75 6L18 11.25"
stroke="#0A0806"
strokeOpacity="0.8"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.95223 20.2021L3.79785 15.0477"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}

59
packages/web/components/patterns/HighlightBar.tsx
View File

@ -1,16 +1,17 @@
import { Button } from '../elements/Button'
import { HStack, Box } from '../elements/LayoutPrimitives'
import { AnchoredPopover } from '../patterns/AnchoredPopover'
import { StyledText } from '../elements/StyledText'
import { highlightBarKeyboardCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { styled, theme } from '../tokens/stitches.config'
import { PenIcon } from '../elements/images/PenIcon'
import { CommentIcon } from '../elements/images/CommentIcon'
import { ShareIcon } from '../elements/images/ShareIcon'
import { TrashIcon } from '../elements/images/TrashIcon'
import { isAndroid } from '../../lib/deviceType'
import { styled, theme } from '../tokens/stitches.config'
import { AnchoredPopover } from '../patterns/AnchoredPopover'
import { StyledText } from '../elements/StyledText'
import { Button } from '../elements/Button'
import { HStack, Box } from '../elements/LayoutPrimitives'
import { TrashIcon } from '../elements/images/TrashIcon'
import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
import { Note } from 'phosphor-react'
type PageCoordinates = {
pageX: number
pageY: number
@ -48,7 +49,9 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
'@smDown': {
maxWidth: '80%',
bottom: `calc(28px + ${isAndroid() ? 30 : 0}px + env(safe-area-inset-bottom, 40px))`,
bottom: `calc(28px + ${
isAndroid() ? 30 : 0
}px + env(safe-area-inset-bottom, 40px))`,
},
}}
>
@ -62,7 +65,17 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
yAnchorCoordinate={props.anchorCoordinates.pageY}
preventAutoFocus={false}
>
<BarContent {...props} />
<Box>
css=
{{
width: '350px',
background: '$grayBg',
borderRadius: '4px',
border: '1px solid $grayBorder',
boxShadow: theme.shadows.cardBoxShadow.toString(),
}}
<BarContent {...props} />
</Box>
</AnchoredPopover>
)
}
@ -116,7 +129,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
}}
>
<HStack css={{ height: '100%', alignItems: 'center' }}>
<PenIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
<PenWithColorIcon />
<StyledText
style="body"
css={{
@ -139,7 +152,10 @@ function BarContent(props: HighlightBarProps): JSX.Element {
onClick={() => props.handleButtonClick('delete')}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
>
<TrashIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
<TrashIcon
size={28}
strokeColor={theme.colors.readerFont.toString()}
/>
</Button>
)}
<Separator />
@ -149,7 +165,22 @@ function BarContent(props: HighlightBarProps): JSX.Element {
onClick={() => props.handleButtonClick('comment')}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
>
<CommentIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
<HStack css={{ height: '100%', alignItems: 'center' }}>
<Note size={24} color={theme.colors.readerFont.toString()} />
<StyledText
style="body"
css={{
pb: '4px',
pl: '12px',
m: '0px',
color: '$readerFont',
fontWeight: '400',
fontSize: '16px',
}}
>
Note
</StyledText>
</HStack>
</Button>
{/* <Separator />
<Button