greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add icons to context menu

pull/6956/head
Konstantinos Kaloutas 2022-10-10 18:14:46 +03:00 committed by Gabriel Horner
parent a00d6c077c
commit 5a996526ac
2 changed files with 72 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
View File

@ -40,70 +40,75 @@ export const ContextMenu = observer(function ContextMenu({
> >
<div> <div>
{app.selectedShapes?.size > 1 && ( {app.selectedShapes?.size > 1 && (
<ReactContextMenu.Item> <>
<div className="tl-menu-button-row pb-0"> <ReactContextMenu.Item>
<Button <div className="tl-menu-button-row pb-0">
title="Align left" <Button
onClick={() => runAndTransition(() => app.align(AlignType.Left))} title="Align left"
> onClick={() => runAndTransition(() => app.align(AlignType.Left))}
<TablerIcon name="layout-align-left" /> >
</Button> <TablerIcon name="layout-align-left" />
<Button </Button>
title="Align center horizontally" <Button
onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))} title="Align center horizontally"
> onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
<TablerIcon name="layout-align-center" /> >
</Button> <TablerIcon name="layout-align-center" />
<Button </Button>
title="Align right" <Button
onClick={() => runAndTransition(() => app.align(AlignType.Right))} title="Align right"
> onClick={() => runAndTransition(() => app.align(AlignType.Right))}
<TablerIcon name="layout-align-right" /> >
</Button> <TablerIcon name="layout-align-right" />
<Separator.Root className="tl-toolbar-separator" orientation="vertical" /> </Button>
<Button <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
title="Distribute horizontally" <Button
onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))} title="Distribute horizontally"
> onClick={() =>
<TablerIcon name="layout-distribute-vertical" /> runAndTransition(() => app.distribute(DistributeType.Horizontal))
</Button> }
</div> >
<div className="tl-menu-button-row pt-0"> <TablerIcon name="layout-distribute-vertical" />
<Button </Button>
title="Align top" </div>
onClick={() => runAndTransition(() => app.align(AlignType.Top))} <div className="tl-menu-button-row pt-0">
> <Button
<TablerIcon name="layout-align-top" /> title="Align top"
</Button> onClick={() => runAndTransition(() => app.align(AlignType.Top))}
<Button >
title="Align center vertically" <TablerIcon name="layout-align-top" />
onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))} </Button>
> <Button
<TablerIcon name="layout-align-middle" /> title="Align center vertically"
</Button> onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
<Button >
title="Align bottom" <TablerIcon name="layout-align-middle" />
onClick={() => runAndTransition(() => app.align(AlignType.Bottom))} </Button>
> <Button
<TablerIcon name="layout-align-bottom" /> title="Align bottom"
</Button> onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
<Separator.Root className="tl-toolbar-separator" orientation="vertical" /> >
<Button <TablerIcon name="layout-align-bottom" />
title="Distribute vertically" </Button>
onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))} <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
> <Button
<TablerIcon name="layout-distribute-horizontal" /> title="Distribute vertically"
</Button> onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))}
</div> >
<TablerIcon name="layout-distribute-horizontal" />
</Button>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" /> <ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item <ReactContextMenu.Item
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.packIntoRectangle)} onClick={() => runAndTransition(app.packIntoRectangle)}
> >
<TablerIcon className="tl-menu-icon" name="layout-grid" />
Pack into rectangle Pack into rectangle
</ReactContextMenu.Item> </ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" /> <ReactContextMenu.Separator className="menu-separator" />
</ReactContextMenu.Item> </>
)} )}
{app.selectedShapes?.size > 0 && ( {app.selectedShapes?.size > 0 && (
<> <>
@ -111,6 +116,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.cut)} onClick={() => runAndTransition(app.cut)}
> >
<TablerIcon className="tl-menu-icon" name="cut" />
Cut Cut
<div className="tl-menu-right-slot"> <div className="tl-menu-right-slot">
<span className="keyboard-shortcut"> <span className="keyboard-shortcut">
@ -122,6 +128,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.copy)} onClick={() => runAndTransition(app.copy)}
> >
<TablerIcon className="tl-menu-icon" name="copy" />
Copy Copy
<div className="tl-menu-right-slot"> <div className="tl-menu-right-slot">
<span className="keyboard-shortcut"> <span className="keyboard-shortcut">
@ -135,6 +142,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.paste)} onClick={() => runAndTransition(app.paste)}
> >
<TablerIcon className="tl-menu-icon" name="clipboard" />
Paste Paste
<div className="tl-menu-right-slot"> <div className="tl-menu-right-slot">
<span className="keyboard-shortcut"> <span className="keyboard-shortcut">
@ -168,6 +176,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.api.deleteShapes)} onClick={() => runAndTransition(app.api.deleteShapes)}
> >
<TablerIcon className="tl-menu-icon" name="backspace" />
Delete Delete
<div className="tl-menu-right-slot"> <div className="tl-menu-right-slot">
<span className="keyboard-shortcut"> <span className="keyboard-shortcut">
@ -182,12 +191,14 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.flipHorizontal)} onClick={() => runAndTransition(app.flipHorizontal)}
> >
<TablerIcon className="tl-menu-icon" name="flip-horizontal" />
Flip horizontally Flip horizontally
</ReactContextMenu.Item> </ReactContextMenu.Item>
<ReactContextMenu.Item <ReactContextMenu.Item
className="tl-menu-item" className="tl-menu-item"
onClick={() => runAndTransition(app.flipVertical)} onClick={() => runAndTransition(app.flipVertical)}
> >
<TablerIcon className="tl-menu-icon" name="flip-vertical" />
Flip vertically Flip vertically
</ReactContextMenu.Item> </ReactContextMenu.Item>
</> </>

6
tldraw/apps/tldraw-logseq/src/styles.css
View File

@ -23,7 +23,7 @@
} }
.tl-menu-item { .tl-menu-item {
@apply flex items-center px-4 py-1 text-sm !important; @apply flex items-center pl-10 pr-4 py-1 text-sm relative !important;
min-width: 220px; min-width: 220px;
all: unset; all: unset;
@ -39,6 +39,10 @@
cursor: pointer; cursor: pointer;
background-color: var(--ls-primary-background-color) !important; background-color: var(--ls-primary-background-color) !important;
} }
.tl-menu-icon {
@apply absolute left-4 text-base opacity-50;
}
} }
.tl-menu-button-row { .tl-menu-button-row {