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>
{app.selectedShapes?.size > 1 && (
<>
<ReactContextMenu.Item>
<div className="tl-menu-button-row pb-0">
<Button
@ -63,7 +64,9 @@ export const ContextMenu = observer(function ContextMenu({
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button
title="Distribute horizontally"
onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))}
onClick={() =>
runAndTransition(() => app.distribute(DistributeType.Horizontal))
}
>
<TablerIcon name="layout-distribute-vertical" />
</Button>
@ -95,15 +98,17 @@ export const ContextMenu = observer(function ContextMenu({
<TablerIcon name="layout-distribute-horizontal" />
</Button>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.packIntoRectangle)}
>
<TablerIcon className="tl-menu-icon" name="layout-grid" />
Pack into rectangle
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
</ReactContextMenu.Item>
</>
)}
{app.selectedShapes?.size > 0 && (
<>
@ -111,6 +116,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item"
onClick={() => runAndTransition(app.cut)}
>
<TablerIcon className="tl-menu-icon" name="cut" />
Cut
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
@ -122,6 +128,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item"
onClick={() => runAndTransition(app.copy)}
>
<TablerIcon className="tl-menu-icon" name="copy" />
Copy
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
@ -135,6 +142,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item"
onClick={() => runAndTransition(app.paste)}
>
<TablerIcon className="tl-menu-icon" name="clipboard" />
Paste
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
@ -168,6 +176,7 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item"
onClick={() => runAndTransition(app.api.deleteShapes)}
>
<TablerIcon className="tl-menu-icon" name="backspace" />
Delete
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
@ -182,12 +191,14 @@ export const ContextMenu = observer(function ContextMenu({
className="tl-menu-item"
onClick={() => runAndTransition(app.flipHorizontal)}
>
<TablerIcon className="tl-menu-icon" name="flip-horizontal" />
Flip horizontally
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.flipVertical)}
>
<TablerIcon className="tl-menu-icon" name="flip-vertical" />
Flip vertically
</ReactContextMenu.Item>
</>

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

@ -23,7 +23,7 @@
}
.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;
all: unset;
@ -39,6 +39,10 @@
cursor: pointer;
background-color: var(--ls-primary-background-color) !important;
}
.tl-menu-icon {
@apply absolute left-4 text-base opacity-50;
}
}
.tl-menu-button-row {