From e53c907916b557fd0f8d9de5af201c65460a946d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 7 Oct 2022 14:05:35 +0800 Subject: [PATCH 1/6] Display some background colour on highlighted notes --- packages/web/components/tokens/stitches.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 2fcf45ce5..7e5fb70ce 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -129,7 +129,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = grayProgressBackground: '#FFFFFF', // Semantic Colors - highlightBackground: 'rgba(255, 210, 52, 0.65)', + highlightBackground: '250, 227, 146', highlight: '#FFD234', highlightText: '#3D3D3D', error: '#FA5E4A', @@ -202,7 +202,7 @@ const darkThemeSpec = { grayProgressBackground: '#616161', // Semantic Colors - highlightBackground: '#867740', + highlightBackground: '134, 119, 64', highlight: '#FFD234', highlightText: 'white', error: '#FA5E4A', From 791c9a9113621d19abb9a73bfe940a6de43cd286 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 7 Oct 2022 14:13:49 +0800 Subject: [PATCH 2/6] Always treat highlightBackground as an array not a color now. This lets us apply alpha differently to backgrounds and underlines --- packages/web/components/patterns/HighlightView.tsx | 2 +- .../components/patterns/LibraryCards/HighlightItemCard.tsx | 2 +- packages/web/components/tokens/stitches.config.ts | 2 +- packages/web/styles/articleInnerStyling.css | 5 +++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 5ada52dd4..6e69f9842 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/packages/web/components/patterns/HighlightView.tsx @@ -33,7 +33,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element { } }}> {props.highlight.prefix} - + {lines.map((line: string, index: number) => ( {line} diff --git a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx index d493d8fd6..b290a68dd 100644 --- a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx +++ b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx @@ -48,7 +48,7 @@ export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element { > Date: Fri, 7 Oct 2022 16:51:01 +0800 Subject: [PATCH 3/6] Display the highlight bar near the cursor on non-touch devices --- .../web/components/patterns/HighlightBar.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index b454cade3..1a95588b5 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -27,12 +27,12 @@ type HighlightBarProps = { anchorCoordinates: PageCoordinates isNewHighlight: boolean isSharedToFeed: boolean - isTouchscreenDevice: boolean + displayNearCursor: boolean handleButtonClick: (action: HighlightAction) => void } export function HighlightBar(props: HighlightBarProps): JSX.Element { - if (props.isTouchscreenDevice) { + if (props.displayNearCursor) { return ( - - css= - {{ - width: '350px', - background: '$grayBg', - borderRadius: '4px', - border: '1px solid $grayBorder', - boxShadow: '$cardBoxShadow', - }} - - - + + ) } } From 846a720582481a015bf4a9d23f37f38ae91314e1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 7 Oct 2022 16:58:33 +0800 Subject: [PATCH 4/6] Use near cursor display on the highlight bar on non-touch devices --- packages/web/components/templates/article/HighlightsLayer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index a22377b0b..f36476140 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -23,6 +23,7 @@ import { HighlightsModal } from './HighlightsModal' import { useCanShareNative } from '../../../lib/hooks/useCanShareNative' import { showErrorToast } from '../../../lib/toastHelpers' import { ArticleMutations } from '../../../lib/articleActions' +import { isTouchScreenDevice } from '../../../lib/deviceType' type HighlightsLayerProps = { highlights: Highlight[] @@ -535,7 +536,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { isNewHighlight={!!selectionData} handleButtonClick={handleAction} isSharedToFeed={focusedHighlight?.sharedAt != undefined} - isTouchscreenDevice={true /* isTouchScreenDevice() */} + displayNearCursor={isTouchScreenDevice()} /> ) From 35a818479008b24c92df1ef323a463191ca2bf67 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 7 Oct 2022 17:09:34 +0800 Subject: [PATCH 5/6] More clear naming for the touch bar --- packages/web/components/patterns/HighlightBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index 1a95588b5..b92b5337a 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -32,7 +32,7 @@ type HighlightBarProps = { } export function HighlightBar(props: HighlightBarProps): JSX.Element { - if (props.displayNearCursor) { + if (!props.displayNearCursor) { return ( {props.isNewHighlight ? ( From 501edbcde366cf9f4f4a4d8d4ba8e04ae6e2fee5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 7 Oct 2022 17:14:11 +0800 Subject: [PATCH 6/6] fix typo --- packages/web/components/patterns/HighlightBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index b92b5337a..f1129e089 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -93,7 +93,7 @@ function BarContent(props: HighlightBarProps): JSX.Element { css={{ height: '100%', alignItems: 'center', - width: props.displayNearCursor ? 'auto' '100%', + width: props.displayNearCursor ? 'auto' : '100%', }} > {props.isNewHighlight ? (