diff --git a/e2e-tests/whiteboards.spec.ts b/e2e-tests/whiteboards.spec.ts index 1e3dea28ec..c5ea78559d 100644 --- a/e2e-tests/whiteboards.spec.ts +++ b/e2e-tests/whiteboards.spec.ts @@ -25,7 +25,7 @@ test('set whiteboard title', async ({ page }) => { }) test('select rectangle tool', async ({ page }) => { - await page.keyboard.press('R') + await page.keyboard.press('8') await expect(page.locator('.tl-geometry-tools-pane-anchor [title="Rectangle (r)"]')).toHaveAttribute('data-selected', 'true') }) @@ -33,7 +33,7 @@ test('draw a rectangle', async ({ page }) => { const canvas = await page.waitForSelector('.logseq-tldraw'); const bounds = (await canvas.boundingBox())!; - await page.keyboard.press('R') + await page.keyboard.press('8') await page.mouse.move(bounds.x, bounds.y); await page.mouse.down(); diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs index 39bd0092b1..28b5bc0d6d 100644 --- a/src/main/frontend/components/repo.cljs +++ b/src/main/frontend/components/repo.cljs @@ -228,7 +228,7 @@ (check-multiple-windows? state) (toggle-fn)) :title repo-path} ;; show full path on hover - [:span.flex.pr-2.relative + [:span.flex.relative {:style {:top 1}} (ui/icon "database" {:size 16 :id "database-icon"})] [:div.graphs diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 5426c89d14..cb62710115 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/src/main/frontend/components/sidebar.cljs @@ -87,7 +87,7 @@ (if whiteboard-page? (route-handler/redirect-to-whiteboard! name) (route-handler/redirect-to-page! name {:click-from-recent? recent?})))))} - [:span.page-icon (if whiteboard-page? [:span.tie.tie-whiteboard] icon)] + [:span.page-icon (if whiteboard-page? (ui/icon "whiteboard" {:extension? true}) icon)] [:span.page-title (pdf-assets/fix-local-asset-filename original-name)]])) (defn get-page-icon [page-entity] diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index 3ae9b62afb..1d132c7dab 100644 --- a/src/main/frontend/components/sidebar.css +++ b/src/main/frontend/components/sidebar.css @@ -119,7 +119,8 @@ .page-icon { @apply flex items-center mr-1 align-baseline; - width: 16px; + width: 20px; + flex-shrink: 0; height: 18px; text-align: center; display: inline-block; @@ -133,7 +134,9 @@ user-select: none; transition: background-color .3s; - > :is(.ti, .tie) { + .ui__icon { + width: 20px; + text-align: center; font-size: 16px; margin-right: 8px; opacity: .9; @@ -621,4 +624,4 @@ html[data-theme='dark'] { .full-height-without-header { height: calc(100vh - var(--ls-headbar-height) - 4rem); -} \ No newline at end of file +} diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 4e381d6b54..6f85529661 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -947,7 +947,7 @@ (when-not (string/blank? class) (let [^js jsTablerIcons (gobj/get js/window "tablerIcons")] (if (or extension? font? (not jsTablerIcons)) - [:i (merge {:class + [:span.ui__icon (merge {:class (util/format (str "%s-" class (when (:class opts) diff --git a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx index 0932318338..5eed0f1065 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx @@ -23,7 +23,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element { Zoom to fit
- 1 + 1
@@ -35,7 +35,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element { Zoom to selection
- 1 + {MOD_KEY} 1
diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx index b0f03ab690..ebd752bef1 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx @@ -4,6 +4,6 @@ import { BoxShape, type Shape } from '../shapes' export class BoxTool extends TLBoxTool { static id = 'box' - static shortcut = ['r'] + static shortcut = ['8'] Shape = BoxShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/DotTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/DotTool.tsx index 471d4fe4e9..18b1050c4d 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/DotTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/DotTool.tsx @@ -4,6 +4,5 @@ import { DotShape, type Shape } from '../shapes' export class DotTool extends TLDotTool { static id = 'dot' - static shortcut = ['t'] Shape = DotShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx index 825d9c4087..f12b08e85c 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx @@ -4,6 +4,5 @@ import { EllipseShape, type Shape } from '../shapes' export class EllipseTool extends TLBoxTool { static id = 'ellipse' - static shortcut = ['o'] Shape = EllipseShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx index 4069c0cd07..137b5eba42 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx @@ -4,5 +4,5 @@ import type { Shape } from '../shapes' export class NuEraseTool extends TLEraseTool { static id = 'erase' - static shortcut = ['e'] + static shortcut = ['5'] } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx index dc2d6b384b..523b5bb35a 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx @@ -4,7 +4,7 @@ import { HighlighterShape, type Shape } from '../shapes' export class HighlighterTool extends TLDrawTool { static id = 'highlighter' - static shortcut = ['m'] + static shortcut = ['4'] Shape = HighlighterShape simplify = true simplifyTolerance = 0.618 diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx index 10091ab3a9..89232dfdc9 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx @@ -6,6 +6,6 @@ import { LineShape, type Shape } from '../shapes' export class LineTool extends TLLineTool { static id = 'line' // not sure why "c" is not working in Logseq? - static shortcut = ['c', 'x'] + static shortcut = ['6'] Shape = LineShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx index 2fdbd2431d..db62bcc0ab 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx @@ -9,7 +9,7 @@ export class LogseqPortalTool extends TLTool< TLApp > { static id = 'logseq-portal' - static shortcut = ['l'] + static shortcut = ['9'] static states = [IdleState, CreatingState] static initial = 'idle' diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx index 7ae8c916a6..f888b10d28 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx @@ -4,7 +4,7 @@ import { PencilShape, type Shape } from '../shapes' export class PencilTool extends TLDrawTool { static id = 'pencil' - static shortcut = ['d', 'p'] + static shortcut = ['3'] Shape = PencilShape simplify = false } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/PolygonTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/PolygonTool.tsx index 7d6c5c59dc..1fb03025de 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/PolygonTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/PolygonTool.tsx @@ -4,6 +4,5 @@ import { PolygonShape, type Shape } from '../shapes' export class PolygonTool extends TLBoxTool { static id = 'polygon' - static shortcut = ['g'] Shape = PolygonShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx index 71ecb106bb..a05e61a0af 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx @@ -4,6 +4,6 @@ import { TextShape, type Shape } from '../shapes' export class TextTool extends TLTextTool { static id = 'text' - static shortcut = ['t'] + static shortcut = ['7'] Shape = TextShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/YouTubeTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/YouTubeTool.tsx index 40d4612bf0..de21c40d29 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/YouTubeTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/YouTubeTool.tsx @@ -4,7 +4,6 @@ import { YouTubeShape, type Shape } from '../shapes' export class YouTubeTool extends TLBoxTool { static id = 'youtube' - static shortcut = ['y'] Shape = YouTubeShape } diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index da4f2b8420..846c5dde8c 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -60,6 +60,13 @@ .tl-menu-right-slot { margin-left: auto; padding-left: 20px; + + .keyboard-shortcut > code { + padding: 4px !important; + text-rendering: initial; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; + } } .tl-menu-right-slot:focus { diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts index c1ab9379ce..f30c167386 100644 --- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts +++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts @@ -98,11 +98,11 @@ export class TLApp< fn: () => this.api.resetZoom(), }, { - keys: '1', + keys: 'shift+1', fn: () => this.api.zoomToFit(), }, { - keys: 'shift+1', + keys: 'mod+shift+1', fn: () => this.api.zoomToSelection(), }, { @@ -920,7 +920,7 @@ export class TLApp< } readonly onWheel: TLEvents['wheel'] = (info, e) => { - if (e.ctrlKey || this.isIn('select.contextMenu')) { + if (e.ctrlKey || e.metaKey || this.isIn('select.contextMenu')) { return } diff --git a/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts b/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts index 5d2f6dba6f..52ade43e65 100644 --- a/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts +++ b/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts @@ -10,7 +10,7 @@ export class TLMoveTool< R extends TLApp = TLApp > extends TLTool { static id = 'move' - static shortcut = ['h'] + static shortcut = ['2'] static states = [IdleState, IdleHoldState, PanningState, PinchingState] diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx b/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx index b0ea6af7dc..484f011904 100644 --- a/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx +++ b/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx @@ -33,7 +33,7 @@ export class TLSelectTool< static initial = 'idle' - static shortcut = ['v'] + static shortcut = ['1'] static states = [ IdleState, diff --git a/tldraw/packages/react/src/hooks/index.ts b/tldraw/packages/react/src/hooks/index.ts index 880ae8d6a1..7293535458 100644 --- a/tldraw/packages/react/src/hooks/index.ts +++ b/tldraw/packages/react/src/hooks/index.ts @@ -16,4 +16,4 @@ export * from './useCursor' export * from './useZoom' export * from './useMinimapEvents' export * from './useDebounced' -export * from './useRestoreCamera' \ No newline at end of file +export * from './useRestoreCamera'