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

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

@ -40,6 +40,7 @@ export const ContextMenu = observer(function ContextMenu({
> >
<div> <div>
{app.selectedShapes?.size > 1 && ( {app.selectedShapes?.size > 1 && (
<>
<ReactContextMenu.Item> <ReactContextMenu.Item>
<div className="tl-menu-button-row pb-0"> <div className="tl-menu-button-row pb-0">
<Button <Button
@ -63,7 +64,9 @@ export const ContextMenu = observer(function ContextMenu({
<Separator.Root className="tl-toolbar-separator" orientation="vertical" /> <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button <Button
title="Distribute horizontally" title="Distribute horizontally"
onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))} onClick={() =>
runAndTransition(() => app.distribute(DistributeType.Horizontal))
}
> >
<TablerIcon name="layout-distribute-vertical" /> <TablerIcon name="layout-distribute-vertical" />
</Button> </Button>
@ -95,15 +98,17 @@ export const ContextMenu = observer(function ContextMenu({
<TablerIcon name="layout-distribute-horizontal" /> <TablerIcon name="layout-distribute-horizontal" />
</Button> </Button>
</div> </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 {