| ${i18n('keyboard_shortcuts_action')} | +${i18n('keyboard_shortcuts_shortcut')} | +
|---|
${i18n('keyboard_shortcuts_intro')}
+ ${sectionHtml} + `; + }, +}; diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index a938596c1..ac000bd0d 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -2232,6 +2232,16 @@ $(document).on('click', '.user-options-menu-btn', async function (e) { }, }, //-------------------------------------------------- + // Keyboard Shortcuts + //-------------------------------------------------- + { + html: i18n('keyboard_shortcuts'), + id: 'keyboard_shortcuts', + onClick: async function () { + UIWindowSettings({ tab: 'keyboard-shortcuts' }); + }, + }, + //-------------------------------------------------- // My Websites //-------------------------------------------------- { diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 2872a71ae..8b2e6423c 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -4514,6 +4514,60 @@ fieldset[name=number-code] { font-weight: 500; } +.settings-shortcuts-intro { + font-size: 14px; + color: #4a4a4a; + margin: -8px 0 18px; +} + +.settings-shortcuts-section { + margin-bottom: 24px; +} + +.settings-shortcuts-section h2 { + font-size: 16px; + font-weight: 600; + margin: 0 0 10px; + color: #2c2c2c; +} + +.settings-shortcuts-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; + background: #ffffff; + border: 1px solid #ececec; + border-radius: 8px; + overflow: hidden; +} + +.settings-shortcuts-table thead th { + text-align: left; + padding: 10px 14px; + background: #f6f6f6; + font-weight: 600; + color: #444; +} + +.settings-shortcuts-table tbody td { + padding: 10px 14px; + border-top: 1px solid #eeeeee; + vertical-align: top; +} + +.settings-shortcuts-keys span { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 8px; + border-radius: 6px; + background: #f3f3f3; + border: 1px solid #e0e0e0; + font-family: "SFMono-Regular", "Segoe UI", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + color: #333; +} + .settings-content.active { display: flex; flex-direction: column; diff --git a/src/gui/src/i18n/translations/en.js b/src/gui/src/i18n/translations/en.js index 6e2c1b8d9..bfac229b5 100644 --- a/src/gui/src/i18n/translations/en.js +++ b/src/gui/src/i18n/translations/en.js @@ -297,6 +297,28 @@ const en = { server_information: 'Server Information', session_saved: 'Thank you for creating an account. This session has been saved.', settings: 'Settings', + keyboard_shortcuts: 'Keyboard Shortcuts', + keyboard_shortcuts_intro: 'Learn the most useful shortcuts for navigating Puter faster.', + keyboard_shortcuts_action: 'Action', + keyboard_shortcuts_shortcut: 'Shortcut', + keyboard_shortcuts_general: 'General', + keyboard_shortcuts_navigation: 'Navigation', + keyboard_shortcuts_files: 'Files & Clipboard', + keyboard_shortcuts_open_help: 'Open this keyboard shortcuts guide', + keyboard_shortcuts_search: 'Open search', + keyboard_shortcuts_close_window: 'Close the active window', + keyboard_shortcuts_undo: 'Undo last action', + keyboard_shortcuts_select_all: 'Select all items', + keyboard_shortcuts_open_item: 'Open selected item', + keyboard_shortcuts_close_menus: 'Close dialogs, menus, and popovers', + keyboard_shortcuts_arrow_navigation: 'Navigate menus and selections', + keyboard_shortcuts_type_to_select: 'Type to jump to an item by name', + keyboard_shortcuts_type_to_select_keys: 'Type letters or numbers', + keyboard_shortcuts_copy: 'Copy selected items', + keyboard_shortcuts_cut: 'Cut selected items', + keyboard_shortcuts_paste: 'Paste items', + keyboard_shortcuts_delete: 'Move selected items to Trash', + keyboard_shortcuts_permanent_delete: 'Permanently delete (after confirmation)', set_new_password: 'Set New Password', share: 'Share', share_to: 'Share to', diff --git a/src/gui/src/keyboard.js b/src/gui/src/keyboard.js index 535585bd0..dddb20650 100644 --- a/src/gui/src/keyboard.js +++ b/src/gui/src/keyboard.js @@ -19,6 +19,7 @@ import UIAlert from './UI/UIAlert.js'; import UIWindowSearch from './UI/UIWindowSearch.js'; +import UIWindowSettings from './UI/Settings/UIWindowSettings.js'; import launch_app from './helpers/launch_app.js'; import open_item from './helpers/open_item.js'; import determine_active_container_parent from './helpers/determine_active_container_parent.js'; @@ -26,6 +27,16 @@ import determine_active_container_parent from './helpers/determine_active_contai $(document).bind('keydown', async function (e) { const focused_el = document.activeElement; //----------------------------------------------------------------------------- + // Keyboard Shortcuts help + // F1 or Ctrl/Cmd + ? (Ctrl/Cmd + Shift + /) + //----------------------------------------------------------------------------- + if ( e.which === 112 || ((e.ctrlKey || e.metaKey) && e.shiftKey && e.which === 191) ) { + e.preventDefault(); + e.stopPropagation(); + UIWindowSettings({ tab: 'keyboard-shortcuts' }); + return false; + } + //----------------------------------------------------------------------------- // Search // ctrl/command + f, will open UIWindowSearch //----------------------------------------------------------------------------- diff --git a/src/gui/src/services/SettingsService.js b/src/gui/src/services/SettingsService.js index 66a5eec9b..13ee7ac2e 100644 --- a/src/gui/src/services/SettingsService.js +++ b/src/gui/src/services/SettingsService.js @@ -24,6 +24,7 @@ import AccountTab from '../UI/Settings/UITabAccount.js'; import SecurityTab from '../UI/Settings/UITabSecurity.js'; import PersonalizationTab from '../UI/Settings/UITabPersonalization.js'; import LanguageTag from '../UI/Settings/UITabLanguage.js'; +import KeyboardShortcutsTab from '../UI/Settings/UITabKeyboardShortcuts.js'; import UIElement from '../UI/UIElement.js'; const TSettingsTab = use('ui.traits.TSettingsTab'); @@ -36,6 +37,7 @@ export class SettingsService extends Service { SecurityTab, PersonalizationTab, LanguageTag, + KeyboardShortcutsTab, AboutTab, ].forEach(tab => { this.register_tab(tab);