console: Use Option+K as main hotkey for the search panel

TheThingsNetwork · Jul 31, 2024 · 852ded7 · 852ded7
1 parent 631fcaa
commit 852ded7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/pkg/webui/components/sidebar/search-button/index.js b/pkg/webui/components/sidebar/search-button/index.js
@@ -31,6 +31,7 @@ import style from './search-button.styl'
 const SearchButton = ({ onClick, className }) => {
   const ref = useRef(null)
   const { isMinimized } = useContext(SidebarContext)
+  const isMacClient = window.navigator.platform.includes('Mac')
 
   const handleClick = useCallback(() => {
     onClick()
@@ -59,7 +60,10 @@ const SearchButton = ({ onClick, className }) => {
           <Dropdown.HeaderItem title={sharedMessages.search} />
         </Dropdown.Attached>
       )}
-      <p className={style.backslash}>/</p>
+      <div className="d-flex gap-cs-xxs">
+        <p className={style.keyboardKey}>{isMacClient ? '⌘' : 'Ctrl'}</p>
+        <p className={style.keyboardKey}>K</p>
+      </div>
     </Button>
   )
 }

diff --git a/pkg/webui/components/sidebar/search-button/search-button.styl b/pkg/webui/components/sidebar/search-button/search-button.styl
@@ -20,13 +20,14 @@
   display: flex
   justify-content: space-between
   align-items: center
-  padding: $cs.xxs $cs.xxs
+  padding: $cs.xs
   gap: $cs.xxs
   box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, .06)
   background: var(--c-bg-neutral-min)
-  border: 1px solid var(--c-border-neutral-semilight)
+  border: 1px solid var(--c-border-neutral-light)
   border-radius: $br.l
   transition: border-color .08s linear, box-shadow .08s linear, color .08s linear
+  height: 2.7rem // ~38px
 
 
   &:hover
@@ -40,7 +41,7 @@
     & > div p
       display: none
 
-    .backslash
+    .keyboard-key
       display: none
 
   p
@@ -49,20 +50,20 @@
   .icon
     font-size: $fs.xl
     position: relative
-    top: 1px
 
-  .backslash
+  .keyboard-key
     margin: 0
-    height: 1.65rem // 24px
-    width: 1.65rem // 24px
+    height: 1.75rem
+    min-width: 1.75rem
+    box-sizing: border-box
     text-align: center
     border-radius: $br.m
     border: 1px solid var(--c-border-neutral-light)
-    font-size: $fs.m
+    font-size: $fs.s
     display: flex
     justify-content: center
     align-items: center
-    padding-bottom: 1px
+    padding: 0 $cs.xxs
 
 .fly-out-list
   --dropdown-offset: calc(.75rem - 3px)

diff --git a/pkg/webui/console/containers/search-panel/index.js b/pkg/webui/console/containers/search-panel/index.js
@@ -43,7 +43,7 @@ const SearchPanelManager = () => {
   // Add a handler for the Command+K keyboard shortcut.
   useEffect(() => {
     const handleSlashKey = event => {
-      if (event.key === '/' || (event.key === 'k' && (event.metaKey || event.ctrlKey))) {
+      if ((event.key === 'k' || event.key === '/') && (event.metaKey || event.ctrlKey)) {
         dispatch(setSearchOpen(true))
       }
     }