diff --git a/commafeed-client/src/app/types.ts b/commafeed-client/src/app/types.ts index 67212e29..68a2218d 100644 --- a/commafeed-client/src/app/types.ts +++ b/commafeed-client/src/app/types.ts @@ -260,6 +260,7 @@ export interface LocalSettings { viewMode: ViewMode sidebarWidth: number announcementHash: string + fontSizePercentage: number } export interface StarRequest { diff --git a/commafeed-client/src/app/user/slice.ts b/commafeed-client/src/app/user/slice.ts index 2e9a79fa..487d27aa 100644 --- a/commafeed-client/src/app/user/slice.ts +++ b/commafeed-client/src/app/user/slice.ts @@ -36,6 +36,7 @@ export const initialLocalSettings: LocalSettings = { viewMode: "detailed", sidebarWidth: 360, announcementHash: "no-hash", + fontSizePercentage: 100, } const initialState: UserState = { @@ -49,6 +50,9 @@ export const userSlice = createSlice({ setViewMode: (state, action: PayloadAction) => { state.localSettings.viewMode = action.payload }, + setFontSizePercentage: (state, action: PayloadAction) => { + state.localSettings.fontSizePercentage = action.payload + }, setSidebarWidth: (state, action: PayloadAction) => { state.localSettings.sidebarWidth = action.payload }, @@ -162,4 +166,4 @@ export const userSlice = createSlice({ }, }) -export const { setViewMode, setSidebarWidth, setAnnouncementHash } = userSlice.actions +export const { setViewMode, setSidebarWidth, setAnnouncementHash, setFontSizePercentage } = userSlice.actions diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index 56c464f7..006508b3 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -32,8 +32,9 @@ const useStyles = tss rtl: boolean showSelectionIndicator: boolean maxWidth?: number + fontSizePercentage: number }>() - .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => { + .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth, fontSizePercentage }) => { let backgroundColor: string if (colorScheme === "dark") { backgroundColor = read ? "inherit" : theme.colors.dark[5] @@ -83,10 +84,12 @@ const useStyles = tss }, }, headerLink: { + fontSize: `${fontSizePercentage}%`, color: "inherit", textDecoration: "none", }, body: { + fontSize: `${fontSizePercentage}%`, direction: rtl ? "rtl" : "ltr", maxWidth: maxWidth ?? "100%", }, @@ -95,6 +98,7 @@ const useStyles = tss export function FeedEntry(props: FeedEntryProps) { const viewMode = useAppSelector(state => state.user.localSettings.viewMode) + const fontSizePercentage = useAppSelector(state => state.user.localSettings.fontSizePercentage) const { classes, cx } = useStyles({ read: props.entry.read, expanded: props.expanded, @@ -102,6 +106,7 @@ export function FeedEntry(props: FeedEntryProps) { rtl: props.entry.rtl, showSelectionIndicator: props.showSelectionIndicator, maxWidth: props.maxWidth, + fontSizePercentage, }) const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode) diff --git a/commafeed-client/src/components/header/ProfileMenu.tsx b/commafeed-client/src/components/header/ProfileMenu.tsx index d9ea740f..029b1c5f 100644 --- a/commafeed-client/src/components/header/ProfileMenu.tsx +++ b/commafeed-client/src/components/header/ProfileMenu.tsx @@ -7,6 +7,7 @@ import { Menu, SegmentedControl, type SegmentedControlItem, + Slider, useMantineColorScheme, } from "@mantine/core" import { showNotification } from "@mantine/notifications" @@ -14,7 +15,7 @@ import { client } from "app/client" import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks" import { useAppDispatch, useAppSelector } from "app/store" import type { ViewMode } from "app/types" -import { setViewMode } from "app/user/slice" +import { setFontSizePercentage, setViewMode } from "app/user/slice" import { reloadProfile } from "app/user/thunks" import dayjs from "dayjs" import { useNow } from "hooks/useNow" @@ -100,6 +101,7 @@ export function ProfileMenu(props: ProfileMenuProps) { const admin = useAppSelector(state => state.user.profile?.admin) const viewMode = useAppSelector(state => state.user.localSettings.viewMode) const forceRefreshCooldownDuration = useAppSelector(state => state.server.serverInfos?.forceRefreshCooldownDuration) + const fontSizePercentage = useAppSelector(state => state.user.localSettings.fontSizePercentage) const dispatch = useAppDispatch() const { colorScheme, setColorScheme } = useMantineColorScheme() @@ -184,6 +186,22 @@ export function ProfileMenu(props: ProfileMenuProps) { mb="xs" /> + + + + Font size + + `${v}%`} + mb="xl" + value={fontSizePercentage} + onChange={value => dispatch(setFontSizePercentage(value))} + /> + {admin && ( <>