Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

add about page

Browse Source
This commit is contained in:
Athou
2022-08-15 13:26:45 +02:00
parent a8e818f97f
commit e2340c2e98
9 changed files with 587 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
commafeed-client/src/components/KeyboardShortcutsHelp.tsx Normal file
View File

@@ -0,0 +1,134 @@
import { Trans } from "@lingui/macro"
import { Kbd, Table } from "@mantine/core"
export function KeyboardShortcutsHelp() {
return (
<Table striped highlightOnHover>
<tbody>
<tr>
<td>
<Trans>Refresh</Trans>
</td>
<td>
<Kbd>R</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Open next entry</Trans>
</td>
<td>
<Kbd>J</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Open previous entry</Trans>
</td>
<td>
<Kbd>K</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Move the page down</Trans>
</td>
<td>
<Kbd>
<Trans>Space</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Move the page up</Trans>
</td>
<td>
<Kbd>
<Trans>Shift</Trans>
</Kbd>
<span> + </span>
<Kbd>
<Trans>Space</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Open/close current entry</Trans>
</td>
<td>
<Kbd>O</Kbd>,<span> </span>
<Kbd>
<Trans>Enter</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Open current entry in a new tab</Trans>
</td>
<td>
<Kbd>V</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Open current entry in a new tab in the background</Trans>
</td>
<td>
<Kbd>B</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Toggle read status of current entry</Trans>
</td>
<td>
<Kbd>M</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Mark all entries as read</Trans>
</td>
<td>
<Kbd>
<Trans>Shift</Trans>
</Kbd>
<span> + </span>
<Kbd>A</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Go to the All view</Trans>
</td>
<td>
<Kbd>G</Kbd>
<span> </span>
<Kbd>A</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Navigate to a subscription by entering its name</Trans>
</td>
<td>
<Kbd>G</Kbd>
<span> </span>
<Kbd>U</Kbd>
</td>
</tr>
<tr>
<td>
<Trans>Show keyboard shortcut help</Trans>
</td>
<td>
<Kbd>?</Kbd>
</td>
</tr>
</tbody>
</Table>
)
}

6
commafeed-client/src/components/content/FeedEntries.tsx
View File

@@ -1,3 +1,5 @@
import { t } from "@lingui/macro"
import { openModal } from "@mantine/modals"
import { Constants } from "app/constants"
import {
loadMoreEntries,
@@ -10,6 +12,7 @@ import {
} from "app/slices/entries"
import { redirectToRootCategory } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
import { Loader } from "components/Loader"
import { useMousetrap } from "hooks/useMousetrap"
import { useEffect, useRef } from "react"
@@ -129,6 +132,9 @@ export function FeedEntries() {
useMousetrap("g a", () => {
dispatch(redirectToRootCategory())
})
useMousetrap("?", () => {
openModal({ title: t`Keyboard shortcuts`, size: "xl", children: <KeyboardShortcutsHelp /> })
})
if (!entries) return <Loader />
return (

11
commafeed-client/src/components/content/add/CategorySelect.tsx
View File

@@ -1,9 +1,12 @@
import { t } from "@lingui/macro"
import { Select, SelectItem, SelectProps } from "@mantine/core"
import { Constants } from "app/constants"
import { useAppSelector } from "app/store"
import { flattenCategoryTree } from "app/utils"
export function CategorySelect(props: Partial<SelectProps>) {
type CategorySelectProps = Partial<SelectProps> & { withAll?: boolean }
export function CategorySelect(props: CategorySelectProps) {
const rootCategory = useAppSelector(state => state.tree.rootCategory)
const categories = rootCategory && flattenCategoryTree(rootCategory)
const selectData: SelectItem[] | undefined = categories
@@ -13,6 +16,12 @@ export function CategorySelect(props: Partial<SelectProps>) {
label: c.name,
value: c.id,
}))
if (props.withAll) {
selectData?.unshift({
label: t`All`,
value: Constants.categoryIds.all,
})
}
return <Select {...props} data={selectData ?? []} disabled={!selectData} />
}

13
commafeed-client/src/components/header/ProfileMenu.tsx
View File

@@ -1,9 +1,9 @@
import { Trans } from "@lingui/macro"
import { Divider, Menu, useMantineColorScheme } from "@mantine/core"
import { redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { useState } from "react"
import { TbChartLine, TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
import { TbChartLine, TbHelp, TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
interface ProfileMenuProps {
control: React.ReactElement
@@ -65,6 +65,15 @@ export function ProfileMenu(props: ProfileMenuProps) {
)}
<Divider />
<Menu.Item
icon={<TbHelp />}
onClick={() => {
dispatch(redirectToAbout())
setOpened(false)
}}
>
<Trans>About</Trans>
</Menu.Item>
<Menu.Item icon={<TbPower />} onClick={logout}>
<Trans>Logout</Trans>
</Menu.Item>