clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-28 14:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: button and toolbar styles

Browse Source
This commit is contained in:
Konstantinos Kaloutas
2022-09-20 20:18:23 +03:00
parent 566879f7b9
commit 44e2cf8964
4 changed files with 53 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx
View File

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite'
import * as React from 'react'
import type { Shape } from '../../lib'
import { TablerIcon } from '../icons'
import { Button } from '../Button'
import { ZoomMenu } from '../ZoomMenu'
export const ActionBar = observer(function ActionBar(): JSX.Element {
@@ -27,22 +28,22 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
return (
<div className="tl-action-bar">
<div className="tl-history-bar">
<button title="Undo" onClick={undo}>
<div className="tl-button-bar tl-history-bar">
<Button title="Undo" onClick={undo}>
<TablerIcon name="arrow-back-up" />
</button>
<button title="Redo" onClick={redo}>
</Button>
<Button title="Redo" onClick={redo}>
<TablerIcon name="arrow-forward-up" />
</button>
</Button>
</div>
<div className="tl-zoom-bar">
<button title="Zoom in" onClick={zoomIn} id="tl-zoom-in">
<div className="tl-button-bar tl-zoom-bar">
<Button title="Zoom in" onClick={zoomIn} id="tl-zoom-in">
<TablerIcon name="plus" />
</button>
<button title="Zoom out" onClick={zoomOut} id="tl-zoom-out">
</Button>
<Button title="Zoom out" onClick={zoomOut} id="tl-zoom-out">
<TablerIcon name="minus" />
</button>
</Button>
<ZoomMenu />
</div>
</div>

2
tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx
View File

@@ -42,7 +42,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
{Actions.length > 0 && (
<div
ref={rContextBar}
className="tl-contextbar"
className="tl-button-bar tl-context-bar"
style={{
visibility: hidden ? 'hidden' : 'visible',
pointerEvents: hidden ? 'none' : 'all',

40
tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
View File

@@ -26,6 +26,7 @@ import {
ToggleGroupMultipleInput,
} from '../inputs/ToggleGroupInput'
import { ToggleInput } from '../inputs/ToggleInput'
import { Button } from '../Button'
export const contextBarActionTypes = [
// Order matters
@@ -84,8 +85,7 @@ const EditAction = observer(() => {
const shape = filterShapeByAction(app.selectedShapesArray, 'Edit')[0]
return (
<button
className="tl-contextbar-button"
<Button
type="button"
title="Edit"
onClick={() => {
@@ -103,7 +103,7 @@ const EditAction = observer(() => {
}}
>
<TablerIcon name="text" />
</button>
</Button>
)
})
@@ -120,7 +120,7 @@ const AutoResizingAction = observer(() => {
<ToggleInput
title="Auto Resize"
toggle={shapes.every(s => s.props.type === 'logseq-portal')}
className="tl-contextbar-button"
className="tl-button"
pressed={pressed}
onPressedChange={v => {
shapes.forEach(s => {
@@ -227,22 +227,20 @@ const OpenPageAction = observer(() => {
return (
<span className="flex gap-1">
<button
<Button
title="Open Page in Right Sidebar"
className="tl-contextbar-button"
type="button"
onClick={() => handlers?.sidebarAddBlock(pageId, blockType === 'B' ? 'block' : 'page')}
>
<TablerIcon name="layout-sidebar-right" />
</button>
<button
</Button>
<Button
title="Open Page"
className="tl-contextbar-button"
type="button"
onClick={() => handlers?.redirectToPage(pageId)}
>
<TablerIcon name="external-link" />
</button>
</Button>
</span>
)
})
@@ -262,23 +260,22 @@ const IFrameSourceAction = observer(() => {
return (
<span className="flex gap-3">
<button title="Reload" className="tl-contextbar-button" type="button" onClick={handleReload}>
<Button title="Reload" type="button" onClick={handleReload}>
<TablerIcon name="refresh" />
</button>
<TextInput
</Button>
<Button
title="Website Url"
className="tl-iframe-src"
value={`${shape.props.url}`}
onChange={handleChange}
/>
<button
<Button
title="Open website url"
className="tl-contextbar-button"
type="button"
onClick={() => window.open(shape.props.url)}
>
<TablerIcon name="external-link" />
</button>
</Button>
</span>
)
})
@@ -299,14 +296,13 @@ const YoutubeLinkAction = observer(() => {
value={`${shape.props.url}`}
onChange={handleChange}
/>
<button
<Button
title="Open YouTube Link"
className="tl-contextbar-button"
type="button"
onClick={() => window.logseq?.api?.open_external_link?.(shape.props.url)}
>
<TablerIcon name="external-link" />
</button>
</Button>
</span>
)
})
@@ -327,7 +323,7 @@ const NoFillAction = observer(() => {
return (
<ToggleInput
title="Fill Toggle"
className="tl-contextbar-button"
className="tl-button"
pressed={noFill}
onPressedChange={handleChange}
>
@@ -454,7 +450,7 @@ const TextStyleAction = observer(() => {
<span className="flex gap-1">
<ToggleInput
title="Bold"
className="tl-contextbar-button"
className="tl-button"
pressed={bold}
onPressedChange={v => {
shapes.forEach(shape => {
@@ -470,7 +466,7 @@ const TextStyleAction = observer(() => {
</ToggleInput>
<ToggleInput
title="Italic"
className="tl-contextbar-button"
className="tl-button"
pressed={italic}
onPressedChange={v => {
shapes.forEach(shape => {

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

@@ -79,14 +79,6 @@
color: whites;
}
.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;
}
@@ -96,22 +88,6 @@
z-index: 100000;
user-select: none;
button {
@apply text-sm rounded border-0 inline-flex items-center justify-center p-2;
height: 30px;
background: transparent;
color: var(--ls-primary-text-color);
font-family: var(--ls-font-family);
cursor: pointer;
opacity: 1;
white-space: nowrap;
&:hover {
background-color: var(--ls-primary-background-color);
}
}
}
.tl-zoom-menu-dropdown-menu-button {
@@ -139,7 +115,7 @@
padding-left: 20px;
}
.tl-contextbar {
.tl-button-bar {
@apply relative flex text-sm;
pointer-events: all;
@@ -153,7 +129,9 @@
align-items: stretch;
box-shadow: var(--shadow-medium);
z-index: 1000;
}
.tl-context-bar {
label {
font-family: var(--ls-font-family);
font-size: 10px;
@@ -240,6 +218,26 @@
height: 32px;
}
.tl-button {
@apply relative flex items-center justify-center text-base rounded border-0;
height: 28px;
width: 28px;
font-family: var(--ls-font-family);
background: none;
cursor: pointer;
color: var(--ls-primary-text-color);
&:hover {
background-color: var(--ls-primary-background-color);
}
&[data-selected='true'] {
background-color: var(--color-selectedFill);
color: var(--color-selectedContrast);
}
}
.tl-primary-tools {
@apply absolute h-full top-0 flex items-center justify-center;
@@ -250,26 +248,6 @@
flex-flow: column;
border-radius: 8px;
padding: 8px;
.tl-button {
@apply relative flex items-center justify-center text-base rounded border-0;
height: 28px;
width: 28px;
font-family: var(--ls-font-family);
background: none;
cursor: pointer;
color: var(--ls-primary-text-color);
&:hover {
background-color: var(--color-hover);
}
&[data-selected='true'] {
background-color: var(--color-selectedFill);
color: var(--color-selectedContrast);
}
}
}
.tl-tools-floating-panel {
@@ -864,17 +842,6 @@ html[data-theme='dark'] {
}
}
.tl-contextbar-button {
@apply rounded inline-flex items-center justify-center;
height: 32px;
width: 32px;
color: var(--ls-primary-text-color);
&:hover {
background-color: var(--ls-tertiary-background-color);
}
}
.tl-contextbar-separator {
background-color: var(--ls-border-color);
width: 1px;