mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

[tiny] lift theme in style panel (#3170) 

The button pickers in the style panel pop in and out all the time as
different shapes are selected. This PR lifts the dark mode check up to
the style panel itself, rather than in each picker.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Use the style panel
2. Change the them
pull/3183/head
Steve Ruiz 2024-03-17 17:45:45 +00:00 zatwierdzone przez GitHub
rodzic 307495f010
commit 4e0df0730d
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
4 zmienionych plików z 96 dodań i 25 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

9
packages/tldraw/api-report.md
Wyświetl plik

@ -62,6 +62,7 @@ import { TLBookmarkShape } from '@tldraw/editor';
import { TLCancelEvent } from '@tldraw/editor';
import { TLClickEvent } from '@tldraw/editor';
import { TLClickEventInfo } from '@tldraw/editor';
import { TLDefaultColorTheme } from '@tldraw/editor';
import { TLDefaultSizeStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor';
@ -308,8 +309,9 @@ export function ClipboardMenuGroup(): JSX_2.Element;
export function CloudToolbarItem(): JSX_2.Element;
// @public (undocumented)
export function CommonStylePickerSet({ styles }: {
export function CommonStylePickerSet({ styles, theme, }: {
styles: ReadonlySharedStyleMap;
theme: TLDefaultColorTheme;
}): JSX_2.Element;
// @public
@ -1398,7 +1400,8 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
}
// @public (undocumented)
export function TextStylePickerSet({ styles }: {
export function TextStylePickerSet({ theme, styles, }: {
theme: TLDefaultColorTheme;
styles: ReadonlySharedStyleMap;
}): JSX_2.Element | null;
@ -1752,6 +1755,8 @@ export interface TLUiButtonPickerProps<T extends string> {
// (undocumented)
style: StyleProp<T>;
// (undocumented)
theme: TLDefaultColorTheme;
// (undocumented)
title: string;
// (undocumented)
uiType: string;

68
packages/tldraw/api/api.json
Wyświetl plik

@ -2555,7 +2555,7 @@
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function CommonStylePickerSet({ styles }: "
"text": "export declare function CommonStylePickerSet({ styles, theme, }: "
},
{
"kind": "Content",
@ -2566,6 +2566,15 @@
"text": "ReadonlySharedStyleMap",
"canonicalReference": "@tldraw/editor!ReadonlySharedStyleMap:class"
},
{
"kind": "Content",
"text": ";\n theme: "
},
{
"kind": "Reference",
"text": "TLDefaultColorTheme",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorTheme:type"
},
{
"kind": "Content",
"text": ";\n}"
@ -2590,17 +2599,17 @@
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx",
"returnTypeTokenRange": {
"startIndex": 5,
"endIndex": 7
"startIndex": 7,
"endIndex": 9
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ styles }",
"parameterName": "{ styles, theme, }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 4
"endIndex": 6
},
"isOptional": false
}
@ -16145,11 +16154,20 @@
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function TextStylePickerSet({ styles }: "
"text": "export declare function TextStylePickerSet({ theme, styles, }: "
},
{
"kind": "Content",
"text": "{\n styles: "
"text": "{\n theme: "
},
{
"kind": "Reference",
"text": "TLDefaultColorTheme",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorTheme:type"
},
{
"kind": "Content",
"text": ";\n styles: "
},
{
"kind": "Reference",
@ -16184,17 +16202,17 @@
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx",
"returnTypeTokenRange": {
"startIndex": 5,
"endIndex": 8
"startIndex": 7,
"endIndex": 10
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ styles }",
"parameterName": "{ theme, styles, }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 4
"endIndex": 6
},
"isOptional": false
}
@ -20543,6 +20561,34 @@
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"canonicalReference": "tldraw!TLUiButtonPickerProps#theme:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "theme: "
},
{
"kind": "Reference",
"text": "TLDefaultColorTheme",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorTheme:type"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "theme",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "tldraw!TLUiButtonPickerProps#title:member",

33
packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
Wyświetl plik

@ -13,8 +13,11 @@ import {
ReadonlySharedStyleMap,
StyleProp,
TLArrowShapeArrowheadStyle,
TLDefaultColorTheme,
getDefaultColorTheme,
minBy,
useEditor,
useIsDarkMode,
useValue,
} from '@tldraw/editor'
import React from 'react'
@ -36,6 +39,8 @@ export type TLUiStylePanelContentProps = {
/** @public */
export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {
const isDarkMode = useIsDarkMode()
if (!styles) return null
const geo = styles.get(GeoShapeGeoStyle)
@ -49,10 +54,12 @@ export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps)
const hideSpline = spline === undefined
const hideText = font === undefined
const theme = getDefaultColorTheme({ isDarkMode: isDarkMode })
return (
<>
<CommonStylePickerSet styles={styles} />
{!hideText && <TextStylePickerSet styles={styles} />}
<CommonStylePickerSet theme={theme} styles={styles} />
{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}
{!(hideGeo && hideArrowHeads && hideSpline) && (
<div className="tlui-style-panel__section" aria-label="style panel styles">
<GeoStylePickerSet styles={styles} />
@ -86,7 +93,13 @@ function useStyleChangeCallback() {
}
/** @public */
export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
export function CommonStylePickerSet({
styles,
theme,
}: {
styles: ReadonlySharedStyleMap
theme: TLDefaultColorTheme
}) {
const msg = useTranslation()
const handleValueChange = useStyleChangeCallback()
@ -114,6 +127,7 @@ export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMa
items={STYLES.color}
value={color}
onValueChange={handleValueChange}
theme={theme}
/>
)}
<OpacitySlider />
@ -128,6 +142,7 @@ export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMa
items={STYLES.fill}
value={fill}
onValueChange={handleValueChange}
theme={theme}
/>
)}
{dash === undefined ? null : (
@ -138,6 +153,7 @@ export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMa
items={STYLES.dash}
value={dash}
onValueChange={handleValueChange}
theme={theme}
/>
)}
{size === undefined ? null : (
@ -148,6 +164,7 @@ export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMa
items={STYLES.size}
value={size}
onValueChange={handleValueChange}
theme={theme}
/>
)}
</div>
@ -157,7 +174,13 @@ export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMa
}
/** @public */
export function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
export function TextStylePickerSet({
theme,
styles,
}: {
theme: TLDefaultColorTheme
styles: ReadonlySharedStyleMap
}) {
const msg = useTranslation()
const handleValueChange = useStyleChangeCallback()
@ -178,6 +201,7 @@ export function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap
items={STYLES.font}
value={font}
onValueChange={handleValueChange}
theme={theme}
/>
)}
@ -190,6 +214,7 @@ export function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap
items={STYLES.horizontalAlign}
value={align}
onValueChange={handleValueChange}
theme={theme}
/>
<div className="tlui-style-panel__row__extra-button">
{verticalAlign === undefined ? (

11
packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx
Wyświetl plik

@ -3,9 +3,8 @@ import {
SharedStyle,
StyleProp,
TLDefaultColorStyle,
getDefaultColorTheme,
TLDefaultColorTheme,
useEditor,
useValue,
} from '@tldraw/editor'
import classNames from 'classnames'
import { memo, useMemo, useRef } from 'react'
@ -22,6 +21,7 @@ export interface TLUiButtonPickerProps<T extends string> {
style: StyleProp<T>
value: SharedStyle<T>
items: StyleValuesForUi<T>
theme: TLDefaultColorTheme
onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void
}
@ -34,6 +34,7 @@ function _TldrawUiButtonPicker<T extends string>(props: TLUiButtonPickerProps<T>
value,
// columns = clamp(items.length, 2, 4),
onValueChange,
theme,
} = props
const editor = useEditor()
const msg = useTranslation()
@ -91,12 +92,6 @@ function _TldrawUiButtonPicker<T extends string>(props: TLUiButtonPickerProps<T>
}
}, [value, editor, onValueChange, style])
const theme = useValue(
'theme',
() => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),
[editor]
)
return (
<div data-testid={`style.${uiType}`} className={classNames('tlui-buttons__grid')}>
{items.map((item) => (