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

Improve hover actions on library cards, start to add spaced list view

Browse Source
This commit is contained in:
Jackson Harper
2023-06-26 14:26:05 +08:00
parent ae05789e5b
commit d4ccde4cd2
6 changed files with 74 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View File

@ -64,9 +64,11 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
const [isHovered, setIsHovered] = useState(false)
const [anchor, setAnchor] = useState<HTMLDivElement | null>(null)
return (
<VStack
ref={setAnchor}
css={{
pl: '20px',
padding: '15px',
@ -98,6 +100,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
) : (
<>
<LibraryHoverActions
anchor={anchor}
item={props.item}
viewer={props.viewer}
handleAction={props.handleAction}

33
packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
View File

@ -14,8 +14,10 @@ import {
} from 'phosphor-react'
import { CardMenu } from '../CardMenu'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import { useFloating, shift, offset } from '@floating-ui/react'
type LibraryHoverActionsProps = {
anchor: HTMLDivElement | null
viewer: UserBasicData
isHovered: boolean
@ -26,21 +28,30 @@ type LibraryHoverActionsProps = {
export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
const [menuOpen, setMenuOpen] = useState(false)
const { refs, floatingStyles } = useFloating({
elements: {
reference: props.anchor,
},
middleware: [
offset({
mainAxis: -44,
crossAxis: -10,
}),
],
placement: 'top-end',
})
return (
<Box
css={{
position: 'relative',
width: '100%',
height: '0px',
display: 'flex',
}}
>
<Box ref={refs.setFloating} style={floatingStyles}>
<Box
css={{
position: 'absolute',
top: '-6px',
right: '-6px',
// position: 'fixed',
// transform: 'translate(621px, 73px)',
// top: '5px',
// right: '155px',
// marginTop: '-33px',
// marginRight: '-162px',
overflow: 'clip',
height: '33px',

10
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View File

@ -31,17 +31,21 @@ import { LibraryHoverActions } from './LibraryHoverActions'
export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
const [isHovered, setIsHovered] = useState(false)
const [anchor, setAnchor] = useState<HTMLDivElement | null>(null)
return (
<VStack
ref={setAnchor}
css={{
px: '15px',
py: '10px',
px: '20px',
pt: '20px',
pb: '20px',
height: '100%',
cursor: 'pointer',
gap: '10px',
border: '1px solid $grayBorder',
borderBottom: 'none',
borderRadius: '6px',
width: '100vw',
'@media (min-width: 768px)': {
width: `calc(100vw - ${LIBRARY_LEFT_MENU_WIDTH})`,
@ -70,6 +74,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
) : (
<>
<LibraryHoverActions
anchor={anchor}
item={props.item}
viewer={props.viewer}
handleAction={props.handleAction}
@ -97,7 +102,6 @@ export function LibraryListCardContent(
props: LinkedItemCardProps
): JSX.Element {
const { isChecked, setIsChecked, item } = props
const [menuOpen, setMenuOpen] = useState(false)
const originText = siteName(props.item.originalArticleUrl, props.item.url)
const handleCheckChanged = useCallback(() => {

2
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View File

@ -1100,7 +1100,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
width: '100%',
gridAutoRows: 'auto',
borderRadius: '6px',
gridGap: props.layout == 'LIST_LAYOUT' ? '0' : '20px',
gridGap: props.layout == 'LIST_LAYOUT' ? '10px' : '20px',
marginTop: '10px',
marginBottom: '0px',
paddingTop: '0',

1
packages/web/package.json
View File

@ -18,6 +18,7 @@
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"@floating-ui/react": "^0.24.3",
"@radix-ui/react-avatar": "^0.1.1",
"@radix-ui/react-checkbox": "^0.1.5",
"@radix-ui/react-dialog": "^0.1.1",

40
yarn.lock
View File

@ -2504,6 +2504,34 @@
dependencies:
tslib "^2.1.0"
"@floating-ui/core@^1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
"@floating-ui/dom@^1.3.0":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.2.tgz#eb3a37f7506c4f95ef735967dc3496b5012e11cb"
integrity sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==
dependencies:
"@floating-ui/core" "^1.3.1"
"@floating-ui/react-dom@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
dependencies:
"@floating-ui/dom" "^1.3.0"
"@floating-ui/react@^0.24.3":
version "0.24.3"
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.24.3.tgz#4f11f09c7245555724f5167dd6925133457db89c"
integrity sha512-wWC9duiog4HmbgKSKObDRuXqMjZR/6m75MIG+slm5CVWbridAjK9STcnCsGYmdpK78H/GmzYj4ADVP8paZVLYQ==
dependencies:
"@floating-ui/react-dom" "^2.0.1"
aria-hidden "^1.1.3"
tabbable "^6.0.1"
"@google-cloud/common@^3.8.1":
version "3.9.0"
resolved "https://registry.yarnpkg.com/@google-cloud/common/-/common-3.9.0.tgz#d93e62d13e66edacfad1cd25b20fdbbc11d9f6dd"
@ -10070,6 +10098,13 @@ aria-hidden@^1.1.1:
dependencies:
tslib "^1.0.0"
aria-hidden@^1.1.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
dependencies:
tslib "^2.0.0"
aria-query@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@ -26195,6 +26230,11 @@ synchronous-promise@^2.0.15:
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
tabbable@^6.0.1:
version "6.1.2"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703"
integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==
tapable@^1.0.0, tapable@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"