From 0b07c447973bc224387469ac02d894a4fa78a0e3 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 20 Sep 2023 15:32:18 +0300 Subject: [PATCH] AdminX searchfield keyboard shortcut (#18244) refs. https://github.com/TryGhost/Product/issues/3349 - it's a bit cumbersome to always click in the searchfield to use it. `/` is a standard keyboard shortcut to focus on a searchfield in apps. Also, by auto-focusing on the searchfield it's even faster to find settings. --- apps/admin-x-settings/src/MainContent.tsx | 6 +- .../settings/SettingSectionHeader.tsx | 2 +- .../src/components/Sidebar.tsx | 32 ++++- .../membership/tiers/TierDetailModal.tsx | 114 +++++++++--------- 4 files changed, 93 insertions(+), 61 deletions(-) diff --git a/apps/admin-x-settings/src/MainContent.tsx b/apps/admin-x-settings/src/MainContent.tsx index adbdfd7382..243c54430d 100644 --- a/apps/admin-x-settings/src/MainContent.tsx +++ b/apps/admin-x-settings/src/MainContent.tsx @@ -51,15 +51,15 @@ const MainContent: React.FC = () => { {loadingModal &&
} {/* Sidebar */} -
+
Settings
-
+
-
+
diff --git a/apps/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.tsx b/apps/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.tsx index 8bc303df40..dedfa37f72 100644 --- a/apps/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.tsx @@ -6,7 +6,7 @@ interface Props { } const SettingSectionHeader: React.FC = ({title, sticky = false}) => { - let styles = 'pb-4 text-2xs font-semibold uppercase tracking-wider text-grey-700 z-20 '; + let styles = 'pb-[10px] text-2xs font-semibold uppercase tracking-wider text-grey-700 z-20 '; if (sticky) { styles += ' sticky top-0 -mt-4 pt-4 bg-white dark:bg-black'; } diff --git a/apps/admin-x-settings/src/components/Sidebar.tsx b/apps/admin-x-settings/src/components/Sidebar.tsx index 81173ac9b1..bd79a8edc6 100644 --- a/apps/admin-x-settings/src/components/Sidebar.tsx +++ b/apps/admin-x-settings/src/components/Sidebar.tsx @@ -1,5 +1,6 @@ +import Button from '../admin-x-ds/global/Button'; import Icon from '../admin-x-ds/global/Icon'; -import React from 'react'; +import React, {useEffect, useRef} from 'react'; import SettingNavItem from '../admin-x-ds/settings/SettingNavItem'; import SettingNavSection from '../admin-x-ds/settings/SettingNavSection'; import TextField from '../admin-x-ds/global/form/TextField'; @@ -17,6 +18,30 @@ import {useSearch} from './providers/ServiceProvider'; const Sidebar: React.FC = () => { const {filter, setFilter} = useSearch(); const {updateRoute} = useRouting(); + const searchInputRef = useRef(null); + + // Focus in on search field when pressing CMD+K/CTRL+K + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + if (e.key === '/') { + e?.preventDefault(); + if (searchInputRef.current) { + searchInputRef.current.focus(); + } + } + }; + window.addEventListener('keydown', handleKeyPress); + return () => { + window.removeEventListener('keydown', handleKeyPress); + }; + }, []); + + // Auto-focus on searchfield on page load + useEffect(() => { + if (searchInputRef.current) { + searchInputRef.current.focus(); + } + }, []); const {settings, config} = useGlobalData(); const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string]; @@ -41,7 +66,10 @@ const Sidebar: React.FC = () => {
- + + {filter ?
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx index 775e926c69..d49ef19d7e 100644 --- a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx +++ b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx @@ -35,7 +35,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => { const {mutateAsync: updateTier} = useEditTier(); const {mutateAsync: createTier} = useAddTier(); const [hasFreeTrial, setHasFreeTrial] = React.useState(!!tier?.trial_days); - const {localSettings} = useSettingGroup(); + const {localSettings, siteData} = useSettingGroup(); const siteTitle = getSettingValues(localSettings, ['title']) as string[]; const [errors, setErrors] = useState<{ [key in keyof Tier]?: string }>({}); // eslint-disable-line no-unused-vars @@ -208,65 +208,69 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => { value={formState.description || ''} onChange={e => updateForm(state => ({...state, description: e.target.value}))} /> - {!isFreeTier &&
-
-
- Prices -
- updateForm(state => ({...state, currency}))} + /> +
+
+
+ validators.monthly_price()} + onChange={price => updateForm(state => ({...state, monthly_price: price}))} + /> + validators.yearly_price()} + onChange={price => updateForm(state => ({...state, yearly_price: price}))} />
-
- validators.monthly_price()} - onChange={price => updateForm(state => ({...state, monthly_price: price}))} - /> - validators.yearly_price()} - onChange={price => updateForm(state => ({...state, yearly_price: price}))} - /> -
-
-
-
- -
- +
+
+ +
+ Members will be subscribed at full price once the trial ends. Learn more -
} - placeholder='0' - rightPlaceholder='days' - title='Trial days' - value={formState.trial_days} - hideTitle - onChange={e => updateForm(state => ({...state, trial_days: e.target.value.replace(/[^\d]/, '')}))} - /> +
} + placeholder='0' + rightPlaceholder='days' + title='Trial days' + value={formState.trial_days} + hideTitle + onChange={e => updateForm(state => ({...state, trial_days: e.target.value.replace(/[^\d]/, '')}))} + /> +
-
} + + )}