mirror of https://github.com/logseq/logseq
Merge pull request #6570 from logseq/feat/whiteboards-zoom-buttons
commit
b9f76784e6
|
@ -17,15 +17,34 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
|
|||
app.api.redo()
|
||||
}, [app])
|
||||
|
||||
const zoomIn = React.useCallback(() => {
|
||||
app.api.zoomIn()
|
||||
}, [app])
|
||||
|
||||
const zoomOut = React.useCallback(() => {
|
||||
app.api.zoomOut()
|
||||
}, [app])
|
||||
|
||||
return (
|
||||
<div className="tl-action-bar">
|
||||
<button onClick={undo}>
|
||||
<TablerIcon name="arrow-back-up" />
|
||||
</button>
|
||||
<button onClick={redo}>
|
||||
<TablerIcon name="arrow-forward-up" />
|
||||
</button>
|
||||
<ZoomMenu />
|
||||
<div className="tl-history-bar">
|
||||
<button title="Undo" onClick={undo}>
|
||||
<TablerIcon name="arrow-back-up" />
|
||||
</button>
|
||||
<button title="Redo" onClick={redo}>
|
||||
<TablerIcon name="arrow-forward-up" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="tl-zoom-bar">
|
||||
<button title="Zoom in" onClick={zoomIn}>
|
||||
<TablerIcon name="plus" />
|
||||
</button>
|
||||
<button title="Zoom out" onClick={zoomOut}>
|
||||
<TablerIcon name="minus" />
|
||||
</button>
|
||||
<ZoomMenu />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -45,7 +45,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
|
|||
className="tl-contextbar"
|
||||
style={{
|
||||
visibility: hidden ? 'hidden' : 'visible',
|
||||
pointerEvents: hidden ? 'none' : 'all'
|
||||
pointerEvents: hidden ? 'none' : 'all',
|
||||
}}
|
||||
>
|
||||
{Actions.map((Action, idx) => (
|
||||
|
|
|
@ -8,6 +8,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
|
|||
const preventEvent = (e: Event) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenuPrimitive.Root>
|
||||
<DropdownMenuPrimitive.Trigger>
|
||||
|
@ -18,7 +19,6 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
|
|||
id="zoomPopup"
|
||||
sideOffset={12}
|
||||
>
|
||||
<DropdownMenuPrimitive.Arrow style={{ fill: 'white' }}></DropdownMenuPrimitive.Arrow>
|
||||
<DropdownMenuPrimitive.Item
|
||||
className="menu-link tl-zoom-menu-dropdown-item"
|
||||
onSelect={preventEvent}
|
||||
|
|
|
@ -75,34 +75,37 @@
|
|||
color: whites;
|
||||
}
|
||||
|
||||
.tl-action-bar {
|
||||
@apply absolute bottom-0 flex border-0;
|
||||
.tl-zoom-bar,
|
||||
.tl-history-bar {
|
||||
@apply flex items-center border-0 rounded gap-1 p-1;
|
||||
|
||||
background: var(--ls-secondary-background-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.tl-zoom-bar {
|
||||
@apply ml-4;
|
||||
}
|
||||
|
||||
.tl-action-bar {
|
||||
@apply absolute bottom-0 flex items-center border-0 left-10 bottom-10;
|
||||
|
||||
border-radius: 12px 12px 0 0;
|
||||
left: 53px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
color: black;
|
||||
z-index: 100000;
|
||||
user-select: none;
|
||||
background: var(--ls-primary-background-color);
|
||||
box-shadow: var(--shadow-medium);
|
||||
|
||||
> button {
|
||||
@apply text-sm rounded border-0 inline-flex items-center justify-center;
|
||||
button {
|
||||
@apply text-sm rounded border-0 inline-flex items-center justify-center p-2;
|
||||
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
color: var(--ls-primary-text-color);
|
||||
font-family: var(--ls-font-family);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
background-color: var(--ls-primary-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -111,10 +114,6 @@
|
|||
@apply py-2 rounded shadow-lg;
|
||||
opacity: 100%;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
|
||||
> span svg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tl-zoom-menu-dropdown-item {
|
||||
|
|
Loading…
Reference in New Issue