forked from Archives/Athou_commafeed
add an even more compact entry layout
This commit is contained in:
Athou
37441
commafeed-client/package-lock.json
generated
37441
commafeed-client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,80 +1,81 @@
|
||||
{
|
||||
"name": "commafeed-client",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev:typescript": "tsc --watch",
|
||||
"build": "npm run i18n:compile && tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"test:ci": "vitest run",
|
||||
"eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
|
||||
"i18n": "npm run i18n:extract && npm run i18n:compile",
|
||||
"i18n:extract": "lingui extract --clean",
|
||||
"i18n:compile": "lingui compile --typescript",
|
||||
"postinstall": "npm run i18n:compile"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@fontsource/open-sans": "^4.5.14",
|
||||
"@lingui/core": "^3.17.0",
|
||||
"@lingui/macro": "^3.17.0",
|
||||
"@lingui/react": "^3.17.0",
|
||||
"@mantine/core": "^5.10.3",
|
||||
"@mantine/form": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.3",
|
||||
"@mantine/modals": "^5.10.3",
|
||||
"@mantine/notifications": "^5.10.3",
|
||||
"@mantine/spotlight": "^5.10.3",
|
||||
"@reduxjs/toolkit": "^1.9.2",
|
||||
"axios": "^1.3.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"interweave": "^13.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"make-plural": "^7.2.0",
|
||||
"mousetrap": "^1.6.5",
|
||||
"react": "^18.2.0",
|
||||
"react-async-hook": "^4.0.0",
|
||||
"react-contexify": "^6.0.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-infinite-scroller": "^1.2.6",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.8.0",
|
||||
"react-swipeable": "^7.0.0",
|
||||
"swagger-ui-react": "^4.15.5",
|
||||
"tinycon": "^0.6.8",
|
||||
"websocket-heartbeat-js": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lingui/cli": "^3.17.0",
|
||||
"@types/eslint": "^8.21.0",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/mousetrap": "^1.6.11",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@types/react-infinite-scroller": "^1.2.3",
|
||||
"@types/swagger-ui-react": "^4.11.0",
|
||||
"@types/tinycon": "^0.6.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.50.0",
|
||||
"@typescript-eslint/parser": "^5.50.0",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"eslint": "^8.33.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-hooks": "^0.4.3",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"prettier": "^2.8.3",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.1.1",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-tsconfig-paths": "^4.0.5",
|
||||
"vitest": "^0.28.4",
|
||||
"vitest-mock-extended": "^1.0.9"
|
||||
}
|
||||
"name": "commafeed-client",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev:typescript": "tsc --watch",
|
||||
"build": "npm run i18n:compile && tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"test:ci": "vitest run",
|
||||
"eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
|
||||
"i18n": "npm run i18n:extract && npm run i18n:compile",
|
||||
"i18n:extract": "lingui extract --clean",
|
||||
"i18n:compile": "lingui compile --typescript",
|
||||
"postinstall": "npm run i18n:compile"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@fontsource/open-sans": "^4.5.14",
|
||||
"@lingui/core": "^3.17.0",
|
||||
"@lingui/macro": "^3.17.0",
|
||||
"@lingui/react": "^3.17.0",
|
||||
"@mantine/core": "^5.10.3",
|
||||
"@mantine/form": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.3",
|
||||
"@mantine/modals": "^5.10.3",
|
||||
"@mantine/notifications": "^5.10.3",
|
||||
"@mantine/spotlight": "^5.10.3",
|
||||
"@mantine/styles": "^5.10.3",
|
||||
"@reduxjs/toolkit": "^1.9.2",
|
||||
"axios": "^1.3.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"interweave": "^13.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"make-plural": "^7.2.0",
|
||||
"mousetrap": "^1.6.5",
|
||||
"react": "^18.2.0",
|
||||
"react-async-hook": "^4.0.0",
|
||||
"react-contexify": "^6.0.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-infinite-scroller": "^1.2.6",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.8.0",
|
||||
"react-swipeable": "^7.0.0",
|
||||
"swagger-ui-react": "^4.15.5",
|
||||
"tinycon": "^0.6.8",
|
||||
"websocket-heartbeat-js": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lingui/cli": "^3.17.0",
|
||||
"@types/eslint": "^8.21.0",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/mousetrap": "^1.6.11",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@types/react-infinite-scroller": "^1.2.3",
|
||||
"@types/swagger-ui-react": "^4.11.0",
|
||||
"@types/tinycon": "^0.6.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.50.0",
|
||||
"@typescript-eslint/parser": "^5.50.0",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"eslint": "^8.33.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-hooks": "^0.4.3",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"prettier": "^2.8.3",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.1.1",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-tsconfig-paths": "^4.0.5",
|
||||
"vitest": "^0.28.4",
|
||||
"vitest-mock-extended": "^1.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -306,4 +306,4 @@ export type ReadingMode = "all" | "unread"
|
||||
|
||||
export type ReadingOrder = "asc" | "desc"
|
||||
|
||||
export type ViewMode = "title" | "cozy" | "expanded"
|
||||
export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
|
||||
|
||||
@@ -2,9 +2,10 @@ import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { markEntry } from "app/slices/entries"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { Entry } from "app/types"
|
||||
import { Entry, ViewMode } from "app/types"
|
||||
import React from "react"
|
||||
import { useSwipeable } from "react-swipeable"
|
||||
import { MantineNumberSize } from "@mantine/styles"
|
||||
import { FeedEntryBody } from "./FeedEntryBody"
|
||||
import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
|
||||
import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
|
||||
@@ -18,16 +19,18 @@ interface FeedEntryProps {
|
||||
onHeaderClick: (e: React.MouseEvent) => void
|
||||
}
|
||||
|
||||
const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolean }) => {
|
||||
const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
|
||||
let backgroundColor
|
||||
if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
|
||||
else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
|
||||
|
||||
let marginY = theme.spacing.xs
|
||||
if (props.compact) marginY = 6
|
||||
if (props.viewMode === "title") marginY = 2
|
||||
else if (props.viewMode === "cozy") marginY = 6
|
||||
|
||||
let mobileMarginY = 6
|
||||
if (props.compact) mobileMarginY = 4
|
||||
if (props.viewMode === "title") mobileMarginY = 2
|
||||
else if (props.viewMode === "cozy") mobileMarginY = 4
|
||||
|
||||
const styles = {
|
||||
paper: {
|
||||
@@ -53,10 +56,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolea
|
||||
|
||||
export function FeedEntry(props: FeedEntryProps) {
|
||||
const viewMode = useAppSelector(state => state.user.settings?.viewMode)
|
||||
const compact = viewMode === "title"
|
||||
const compactHeader = compact && !props.expanded
|
||||
|
||||
const { classes } = useStyles({ ...props, compact })
|
||||
const { classes } = useStyles({ ...props, viewMode })
|
||||
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
@@ -66,9 +66,15 @@ export function FeedEntry(props: FeedEntryProps) {
|
||||
|
||||
const { onContextMenu } = useFeedEntryContextMenu(props.entry)
|
||||
|
||||
const spacing = compact ? 8 : "xs"
|
||||
const borderRadius = compact ? "xs" : "sm"
|
||||
let padding: MantineNumberSize = "xs"
|
||||
if (viewMode === "title") padding = 4
|
||||
else if (viewMode === "cozy") padding = 8
|
||||
|
||||
let borderRadius: MantineNumberSize = "sm"
|
||||
if (viewMode === "title") borderRadius = 0
|
||||
else if (viewMode === "cozy") borderRadius = "xs"
|
||||
|
||||
const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
|
||||
return (
|
||||
<Paper withBorder radius={borderRadius} className={classes.paper}>
|
||||
<Anchor
|
||||
@@ -80,17 +86,17 @@ export function FeedEntry(props: FeedEntryProps) {
|
||||
onAuxClick={props.onHeaderClick}
|
||||
onContextMenu={onContextMenu}
|
||||
>
|
||||
<Box p={spacing} {...swipeHandlers}>
|
||||
<Box p={padding} {...swipeHandlers}>
|
||||
{compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
|
||||
{!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
|
||||
</Box>
|
||||
</Anchor>
|
||||
{props.expanded && (
|
||||
<Box px={spacing} pb={spacing}>
|
||||
<Box px={padding} pb={padding}>
|
||||
<Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
|
||||
<FeedEntryBody entry={props.entry} />
|
||||
</Box>
|
||||
<Divider variant="dashed" my={spacing} />
|
||||
<Divider variant="dashed" my={padding} />
|
||||
<FeedEntryFooter entry={props.entry} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
TbHelp,
|
||||
TbLayoutList,
|
||||
TbList,
|
||||
TbListDetails,
|
||||
TbMoon,
|
||||
TbNotes,
|
||||
TbPower,
|
||||
@@ -54,6 +55,17 @@ const viewModeData: ViewModeControlItem[] = [
|
||||
</Group>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "detailed",
|
||||
label: (
|
||||
<Group>
|
||||
<TbListDetails size={iconSize} />
|
||||
<Box ml={6}>
|
||||
<Trans>Detailed</Trans>
|
||||
</Box>
|
||||
</Group>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "expanded",
|
||||
label: (
|
||||
|
||||
@@ -31,7 +31,7 @@ public class UserSettings extends AbstractModel {
|
||||
}
|
||||
|
||||
public enum ViewMode {
|
||||
title, cozy, expanded
|
||||
title, cozy, detailed, expanded
|
||||
}
|
||||
|
||||
@OneToOne(fetch = FetchType.LAZY)
|
||||
|
||||
Reference in New Issue
Block a user