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 compact headers

Browse Source
This commit is contained in:
Athou
2022-09-05 13:52:28 +02:00
parent 27f80148cb
commit d72c9ba247
7 changed files with 93 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: (
<Group>
<TbList />
<TbList size={iconSize} />
<Box ml={6}>
<Trans>Compact</Trans>
</Box>
</Group>
),
},
{
value: "cozy",
label: (
<Group>
<TbLayoutList size={iconSize} />
<Box ml={6}>
<Trans>Cozy</Trans>
</Box>
</Group>
),
},
{
value: "expanded",
label: (
<Group>
<TbNotes />
<TbNotes size={iconSize} />
<Box ml={6}>
<Trans>Expanded</Trans>
</Box>
@@ -57,7 +70,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Menu.Target>{props.control}</Menu.Target>
<Menu.Dropdown>
<Menu.Item
icon={<TbSettings />}
icon={<TbSettings size={iconSize} />}
onClick={() => {
dispatch(redirectToSettings())
setOpened(false)
@@ -70,7 +83,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Menu.Label>
<Trans>Display</Trans>
</Menu.Label>
<Menu.Item icon={dark ? <TbMoon /> : <TbSun />} onClick={() => toggleColorScheme()}>
<Menu.Item icon={dark ? <TbMoon size={iconSize} /> : <TbSun size={iconSize} />} onClick={() => toggleColorScheme()}>
<Trans>Theme</Trans>
</Menu.Item>
<SegmentedControl
@@ -89,7 +102,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Trans>Admin</Trans>
</Menu.Label>
<Menu.Item
icon={<TbUsers />}
icon={<TbUsers size={iconSize} />}
onClick={() => {
dispatch(redirectToAdminUsers())
setOpened(false)
@@ -98,7 +111,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Trans>Manage users</Trans>
</Menu.Item>
<Menu.Item
icon={<TbChartLine />}
icon={<TbChartLine size={iconSize} />}
onClick={() => {
dispatch(redirectToMetrics())
setOpened(false)
@@ -111,7 +124,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Divider />
<Menu.Item
icon={<TbHelp />}
icon={<TbHelp size={iconSize} />}
onClick={() => {
dispatch(redirectToAbout())
setOpened(false)
@@ -119,7 +132,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
>
<Trans>About</Trans>
</Menu.Item>
<Menu.Item icon={<TbPower />} onClick={logout}>
<Menu.Item icon={<TbPower size={iconSize} />} onClick={logout}>
<Trans>Logout</Trans>
</Menu.Item>
</Menu.Dropdown>