cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-10 18:03:47 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: editor layout

Browse Source
This commit is contained in:
Carlos Valente
2026-01-21 19:56:52 +01:00
committed by Carlos Valente
parent 967e92e2c8
commit da02ecd113
77 changed files with 2267 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss
+18 -1
View File
@@ -35,8 +35,8 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
line-height: 1em;
svg {
color: $gray-500;
@@ -70,10 +70,27 @@
}
}
.item .iconStrong {
color: $ui-white;
}
.content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
line-height: 1.2;
}
.description {
color: $gray-400;
font-size: calc(1rem - 2px);
line-height: 1.3;
}
.shortcut {
apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
+13 -6
View File
@@ -8,6 +8,7 @@ type DropdownMenuItemDivider = { type: 'divider' };
type DropdownMenuItem = {
type: 'item' | 'destructive';
label: string;
description?: string;
icon?: IconType;
disabled?: boolean;
onClick: () => void;
@@ -39,9 +40,12 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
disabled={item.disabled}
data-type={item.type}
>
<span className={style.label}>
{item.icon && <item.icon />}
{item.label}
<span className={style.content}>
<span className={style.label}>
{item.icon && <item.icon />}
{item.label}
</span>
{item.description && <span className={style.description}>{item.description}</span>}
</span>
{item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
</BaseMenu.Item>
@@ -79,9 +83,12 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
}
return (
<BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
<span className={style.label}>
{item.icon && <item.icon />}
{item.label}
<span className={style.content}>
<span className={style.label}>
{item.icon && <item.icon />}
{item.label}
</span>
{item.description && <span className={style.description}>{item.description}</span>}
</span>
{item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
</BaseMenu.Item>