From 9aebcf0c698c12756c3d6b08fa1c097db97b62a3 Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 20 Mar 2023 10:54:46 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Add=20a=20simple=20keybind=20vi?= =?UTF-8?q?ewer=20in=20about=20menu=20#751?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modals/AboutModal/AboutModal.tsx | 39 +++++++++++++++++-- .../Actions/ToggleEditMode/ToggleEditMode.tsx | 2 +- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 8f366fd9f..952018c0f 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -1,13 +1,14 @@ import { + Accordion, ActionIcon, Anchor, Badge, Button, createStyles, - Divider, Grid, Group, HoverCard, + Kbd, Modal, Stack, Table, @@ -35,6 +36,7 @@ import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation'; import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore'; +import Tip from '../../../layout/Tip'; import { usePrimaryGradient } from '../../../layout/useGradient'; import Credits from '../../../Settings/Common/Credits'; @@ -50,6 +52,21 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod const informations = useInformationTableItems(newVersionAvailable); const { t } = useTranslation(['common', 'layout/modals/about']); + const keybinds = [ + { key: 'Mod + J', shortcut: 'Toggle light/dark mode' }, + { key: 'Mod + K', shortcut: 'Focus on search bar' }, + { key: 'Mod + B', shortcut: 'Open docker widget' }, + { key: 'Mod + E', shortcut: 'Toggle Edit mode' }, + ]; + const rows = keybinds.map((element) => ( + + + {element.key} + + {element.shortcut} + + )); + return ( closeModal()} @@ -76,7 +93,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - +
{informations.map((item, index) => ( @@ -100,8 +117,24 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod ))}
+ + + }>Keybinds + + + + + + + + + {rows} +
KeyShortcut
+ Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key + + + - {t('layout/modals/about:contact')} diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index 365431379..c1f4445ff 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -29,7 +29,7 @@ export const ToggleEditModeAction = () => { const { config } = useConfigContext(); const { classes } = useCardStyles(true); - useHotkeys([['ctrl+E', toggleEditMode]]); + useHotkeys([['mod+E', toggleEditMode]]); useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => { if (enabled) { From c799d507d2533701aac17146c8f7d4c99da09bf3 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:11:50 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8E=A8=20Wrap=20shortcut=20with=20tex?= =?UTF-8?q?t=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 952018c0f..1914c59f9 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -63,7 +63,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod {element.key} - {element.shortcut} + {element.shortcut} )); From ed159ea3c3af0776971e85280d5295ae07c6275b Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:18:19 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=8C=90=20Add=20translations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/about.json | 3 +++ src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json index aa99318db..d85feef8b 100644 --- a/public/locales/en/layout/modals/about.json +++ b/public/locales/en/layout/modals/about.json @@ -2,6 +2,9 @@ "description": "Homarr is a sleek, modern dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one convenient location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.", "contact": "Having trouble or questions? Connect with us!", "addToDashboard": "Add to Dashboard", + "tip": "Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key", + "key": "Shortcut key", + "action": "Action", "metrics": { "configurationSchemaVersion": "Configuration schema version", "configurationsCount": "Available configurations", diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 1914c59f9..0dffd9487 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -124,13 +124,13 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - - + + {rows}
KeyShortcutt{'layout/modals/about:key'}t{'layout/modals/about:action'}
- Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key + {t('layout/modals/about:tip')} From 850375767e745340be010939425d8e9949c79343 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:20:15 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=8C=90=20Add=20translations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/about.json | 1 + src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json index d85feef8b..83109b624 100644 --- a/public/locales/en/layout/modals/about.json +++ b/public/locales/en/layout/modals/about.json @@ -5,6 +5,7 @@ "tip": "Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key", "key": "Shortcut key", "action": "Action", + "keybinds": "Keybinds", "metrics": { "configurationSchemaVersion": "Configuration schema version", "configurationsCount": "Available configurations", diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 0dffd9487..89d796001 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -119,7 +119,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - }>Keybinds + }>t{'layout/modals/about:keybinds'} From e0eb195097f836368e4d3923a3dcb5a3822b84e2 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:43:10 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20compilation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Modals/AboutModal/AboutModal.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 89d796001..936779bff 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -63,7 +63,9 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - + )); @@ -119,13 +121,15 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
{element.key} {element.shortcut} + {element.shortcut} +
- }>t{'layout/modals/about:keybinds'} + }> + {t('layout/modals/about:keybinds')} + - - + + {rows}
t{'layout/modals/about:key'}t{'layout/modals/about:action'}{t('layout/modals/about:key')}{t('layout/modals/about:action')}