From d72c9ba247cd1c81c1c4252807cc8cc35f29e5fa Mon Sep 17 00:00:00 2001 From: Athou Date: Mon, 5 Sep 2022 13:52:28 +0200 Subject: [PATCH] add compact headers --- commafeed-client/src/app/types.ts | 2 +- .../src/components/content/FeedEntry.tsx | 6 +- .../content/FeedEntryCompactHeader.tsx | 56 +++++++++++++++++++ .../src/components/header/ProfileMenu.tsx | 31 +++++++--- commafeed-client/src/locales/en/messages.po | 4 ++ commafeed-client/src/locales/fr/messages.po | 4 ++ .../commafeed/backend/model/UserSettings.java | 2 +- 7 files changed, 93 insertions(+), 12 deletions(-) create mode 100644 commafeed-client/src/components/content/FeedEntryCompactHeader.tsx diff --git a/commafeed-client/src/app/types.ts b/commafeed-client/src/app/types.ts index 9471051f..3af51975 100644 --- a/commafeed-client/src/app/types.ts +++ b/commafeed-client/src/app/types.ts @@ -305,4 +305,4 @@ export type ReadingMode = "all" | "unread" export type ReadingOrder = "asc" | "desc" -export type ViewMode = "title" | "expanded" +export type ViewMode = "title" | "cozy" | "expanded" diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index 06c2b803..01923891 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -6,6 +6,7 @@ import { useAppDispatch, useAppSelector } from "app/store" import { Entry } from "app/types" import React, { useRef } from "react" import { FeedEntryBody } from "./FeedEntryBody" +import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader" import { FeedEntryFooter } from "./FeedEntryFooter" import { FeedEntryHeader } from "./FeedEntryHeader" @@ -37,8 +38,10 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => { export function FeedEntry(props: FeedEntryProps) { const { classes } = useStyles(props) + const viewMode = useAppSelector(state => state.user.settings?.viewMode) const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed) const dispatch = useAppDispatch() + const compactHeader = viewMode === "title" && !props.expanded const headerClicked = (e: React.MouseEvent) => { if (e.button === 1 || e.ctrlKey || e.metaKey) { @@ -82,7 +85,8 @@ export function FeedEntry(props: FeedEntryProps) { onAuxClick={headerClicked} > - + {compactHeader && } + {!compactHeader && } {props.expanded && ( diff --git a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx new file mode 100644 index 00000000..856f792b --- /dev/null +++ b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx @@ -0,0 +1,56 @@ +import { Box, createStyles, Image, Text } from "@mantine/core" +import { Entry } from "app/types" +import { RelativeDate } from "components/RelativeDate" +import { OnDesktop } from "components/responsive/OnDesktop" + +export interface FeedEntryHeaderProps { + entry: Entry +} + +const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({ + wrapper: { + display: "flex", + alignItems: "center", + columnGap: "10px", + }, + title: { + flexGrow: 1, + fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }, + feedName: { + width: "145px", + minWidth: "145px", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }, + date: { + whiteSpace: "nowrap", + }, +})) +export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) { + const { classes } = useStyles(props) + return ( + + + feed icon + + + + {props.entry.feedName} + + + {props.entry.title} + + + + + + + + + ) +} diff --git a/commafeed-client/src/components/header/ProfileMenu.tsx b/commafeed-client/src/components/header/ProfileMenu.tsx index b4692b07..cedcd7a4 100644 --- a/commafeed-client/src/components/header/ProfileMenu.tsx +++ b/commafeed-client/src/components/header/ProfileMenu.tsx @@ -5,7 +5,7 @@ import { changeViewMode } from "app/slices/user" import { useAppDispatch, useAppSelector } from "app/store" import { ViewMode } from "app/types" import { useState } from "react" -import { TbChartLine, TbHelp, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb" +import { TbChartLine, TbHelp, TbLayoutList, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb" interface ProfileMenuProps { control: React.ReactElement @@ -15,23 +15,36 @@ interface ViewModeControlItem extends SegmentedControlItem { value: ViewMode } +const iconSize = 16 + const viewModeData: ViewModeControlItem[] = [ { value: "title", label: ( - + Compact ), }, + { + value: "cozy", + label: ( + + + + Cozy + + + ), + }, { value: "expanded", label: ( - + Expanded @@ -57,7 +70,7 @@ export function ProfileMenu(props: ProfileMenuProps) { {props.control} } + icon={} onClick={() => { dispatch(redirectToSettings()) setOpened(false) @@ -70,7 +83,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Display - : } onClick={() => toggleColorScheme()}> + : } onClick={() => toggleColorScheme()}> Theme Admin } + icon={} onClick={() => { dispatch(redirectToAdminUsers()) setOpened(false) @@ -98,7 +111,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Manage users } + icon={} onClick={() => { dispatch(redirectToMetrics()) setOpened(false) @@ -111,7 +124,7 @@ export function ProfileMenu(props: ProfileMenuProps) { } + icon={} onClick={() => { dispatch(redirectToAbout()) setOpened(false) @@ -119,7 +132,7 @@ export function ProfileMenu(props: ProfileMenuProps) { > About - } onClick={logout}> + } onClick={logout}> Logout diff --git a/commafeed-client/src/locales/en/messages.po b/commafeed-client/src/locales/en/messages.po index e4f3cdf8..5b975f64 100644 --- a/commafeed-client/src/locales/en/messages.po +++ b/commafeed-client/src/locales/en/messages.po @@ -177,6 +177,10 @@ msgstr "Confirm" msgid "Confirm password" msgstr "Confirm password" +#: src/components/header/ProfileMenu.tsx +msgid "Cozy" +msgstr "Cozy" + #: src/components/settings/ProfileSettings.tsx msgid "Current password" msgstr "Current password" diff --git a/commafeed-client/src/locales/fr/messages.po b/commafeed-client/src/locales/fr/messages.po index 83a2a9b3..b0682008 100644 --- a/commafeed-client/src/locales/fr/messages.po +++ b/commafeed-client/src/locales/fr/messages.po @@ -177,6 +177,10 @@ msgstr "Confirmer" msgid "Confirm password" msgstr "Confirmer le mot de passe" +#: src/components/header/ProfileMenu.tsx +msgid "Cozy" +msgstr "Cozy" + #: src/components/settings/ProfileSettings.tsx msgid "Current password" msgstr "Mot de passe actuel" diff --git a/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java b/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java index 66f4cecd..99fe96db 100644 --- a/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java +++ b/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java @@ -31,7 +31,7 @@ public class UserSettings extends AbstractModel { } public enum ViewMode { - title, expanded + title, cozy, expanded } @OneToOne(fetch = FetchType.LAZY)