agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #33855 from overleaf/mj-command-palette-tweaks

Browse Source 
[web] command palette tweaks

GitOrigin-RevId: 454d6916043d3317e60302379bcf9707fb8d4dcb
This commit is contained in:
Mathias Jakobsen
2026-05-21 08:07:12 +00:00
committed by Copybot
parent eddec90cb1
commit 9d79cc89ec
3 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/command-palette/hooks/use-command-palette-triggers.ts
+3 -1
View File
@@ -1,10 +1,12 @@
import useEventListener from '@/shared/hooks/use-event-listener'
import { Dispatch, SetStateAction, useCallback } from 'react'
import { isMac } from '@/shared/utils/os'
const useCommandPaletteTriggers = (show: Dispatch<SetStateAction<boolean>>) => {
const onKeyDown = useCallback(
(event: KeyboardEvent) => {
if ((event.ctrlKey || event.metaKey) && event.code === 'KeyP') {
const modifierKey = isMac ? event.metaKey : event.ctrlKey
if (modifierKey && event.code === 'KeyP') {
event.preventDefault()
show(prev => !prev)
}
services/web/frontend/js/features/command-palette/hooks/use-file-tree-command-source.ts
+2 -2
View File
@@ -49,7 +49,7 @@ const useFileTreeCommandSource = (): CommandPaletteSource => {
.slice(0, 10)
.map(({ path, name, id }) => ({
title: name,
description: path,
description: path === name ? undefined : path,
onSelect: () => onSelect(id),
score: 1,
}))
@@ -70,7 +70,7 @@ const useFileTreeCommandSource = (): CommandPaletteSource => {
})
return result.map(({ path, name, id, score }) => ({
title: name,
description: path,
description: path === name ? undefined : path,
onSelect: () => onSelect(id),
score,
}))
services/web/frontend/stylesheets/pages/editor/command-palette.scss
+28 -8
View File
@@ -1,4 +1,17 @@
:root {
--command-palette-color-scheme: dark;
--command-palette-selected-bg: var(--green-70);
--command-palette-selected-color: var(--green-10);
}
@include theme('light') {
--command-palette-color-scheme: light;
--command-palette-selected-bg: var(--bg-accent-03);
--command-palette-selected-color: var(--green-70);
}
.command-palette {
color-scheme: var(--command-palette-color-scheme);
pointer-events: none;
.modal-dialog {
@@ -9,18 +22,23 @@
padding: 0;
}
.modal-content {
background-color: var(--bg-primary-themed);
border: 1px solid var(--border-divider-themed);
}
.command-palette-input {
width: 100%;
padding: var(--spacing-05);
border: 0;
border-bottom: 1px solid var(--border-divider);
border-bottom: 1px solid var(--border-divider-themed);
background: transparent;
color: var(--content-primary);
color: var(--content-primary-themed);
font-size: var(--font-size-04);
outline: none;
&::placeholder {
color: var(--content-secondary);
color: var(--content-placeholder-themed);
}
}
@@ -30,6 +48,7 @@
padding: var(--spacing-02);
max-height: 50vh;
overflow-y: auto;
color: var(--content-primary-themed);
&:empty {
display: none;
@@ -49,7 +68,7 @@
border: 0;
border-radius: var(--border-radius-base);
background: transparent;
color: var(--content-primary);
color: var(--content-primary-themed);
text-align: left;
cursor: pointer;
@@ -59,16 +78,17 @@
}
&.command-palette-result-selected button {
background-color: var(--bg-accent-01);
color: var(--content-primary-dark);
background-color: var(--command-palette-selected-bg);
color: var(--command-palette-selected-color);
}
&.command-palette-result-selected .command-palette-result-description {
color: var(--content-secondary-dark);
color: var(--command-palette-selected-color);
}
}
.command-palette-result-title {
color: var(--content-primary-themed);
font-size: var(--font-size-03);
font-weight: 500;
line-height: 1.2;
@@ -76,7 +96,7 @@
.command-palette-result-description {
font-size: var(--font-size-02);
color: var(--content-secondary);
color: var(--content-secondary-themed);
line-height: 1.2;
}
}