ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show descriptions for generated commands, make them look better and sort better (#3023)

Browse Source
This commit is contained in:
Frank Noirot
2024-07-12 17:48:38 -04:00
committed by GitHub
parent e81b614523
commit 29bf77bb82
5 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

10
src/components/CommandComboBox.tsx
View File

@ -72,17 +72,21 @@ function CommandComboBox({
<Combobox.Option <Combobox.Option
key={option.groupId + option.name + (option.displayName || '')} key={option.groupId + option.name + (option.displayName || '')}
value={option} value={option}
className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90" className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
> >
{'icon' in option && option.icon && ( {'icon' in option && option.icon && (
<CustomIcon name={option.icon} className="w-5 h-5" /> <CustomIcon name={option.icon} className="w-5 h-5" />
)} )}
<p className="flex-grow">{option.displayName || option.name} </p> <div className="flex-grow flex flex-col">
<p className="my-0 leading-tight">
{option.displayName || option.name}{' '}
</p>
{option.description && ( {option.description && (
<p className="text-xs text-chalkboard-60 dark:text-chalkboard-40"> <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
{option.description} {option.description}
</p> </p>
)} )}
</div>
</Combobox.Option> </Combobox.Option>
))} ))}
</Combobox.Options> </Combobox.Options>

1
src/lib/commandBarConfigs/settingsCommandConfig.ts
View File

@ -124,6 +124,7 @@ export function createSettingsCommand({
displayName: `Settings · ${decamelize(type.replaceAll('.', ' · '), { displayName: `Settings · ${decamelize(type.replaceAll('.', ' · '), {
separator: ' ', separator: ' ',
})}`, })}`,
description: settingConfig.description,
groupId: 'settings', groupId: 'settings',
icon: 'settings', icon: 'settings',
needsReview: false, needsReview: false,

1
src/lib/createMachineCommand.ts
View File

@ -81,6 +81,7 @@ export function createMachineCommand<
name: type, name: type,
groupId, groupId,
icon, icon,
description: commandConfig.description,
needsReview: commandConfig.needsReview || false, needsReview: commandConfig.needsReview || false,
onSubmit: (data?: S[typeof type]) => { onSubmit: (data?: S[typeof type]) => {
if (data !== undefined && data !== null) { if (data !== undefined && data !== null) {

6
src/machines/commandBarMachine.ts
View File

@ -514,7 +514,9 @@ export const commandBarMachine = createMachine(
) )
function sortCommands(a: Command, b: Command) { function sortCommands(a: Command, b: Command) {
if (b.groupId === 'auth') return -1 if (b.groupId === 'auth' && !(a.groupId === 'auth')) return -2
if (a.groupId === 'auth') return 1 if (a.groupId === 'auth' && !(b.groupId === 'auth')) return 2
if (b.groupId === 'settings' && !(a.groupId === 'settings')) return -1
if (a.groupId === 'settings' && !(b.groupId === 'settings')) return 1
return a.name.localeCompare(b.name) return a.name.localeCompare(b.name)
} }