PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/assets/translations/sl.json
Steve Ruiz ac0259a6af
Composable custom UI (#2796) 
This PR refactors our menu systems and provides an interface to hide or
replace individual user interface elements.

# Background

Previously, we've had two types of overrides:
- "schema" overrides that would allow insertion or replacement of items
in the different menus
- "component" overrides that would replace components in the editor's
user interface

This PR is an attempt to unify the two and to provide for additional
cases where the "schema-based" user interface had begun to break down.

# Approach

This PR makes no attempt to change the `actions` or `tools`
overrides—the current system seems to be correct for those because they
are not reactive. The challenge with the other ui schemas is that they
_are_ reactive, and thus the overrides both need to a) be fed in from
outside of the editor as props, and b) react to changes from the editor,
which is an impossible situation.

The new approach is to use React to declare menu items. (Surprise!) 

```tsx
function CustomHelpMenuContent() {
	return (
		<>
			<DefaultHelpMenuContent />
			<TldrawUiMenuGroup id="custom stuff">
				<TldrawUiMenuItem
					id="about"
					label="Like my posts"
					icon="external-link"
					readonlyOk
					onSelect={() => {
						window.open('https://x.com/tldraw', '_blank')
					}}
				/>
			</TldrawUiMenuGroup>
		</>
	)
}

const components: TLComponents = {
	HelpMenuContent: CustomHelpMenuContent,
}

export default function CustomHelpMenuContentExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw components={components} />
		</div>
	)
}
```

We use a `components` prop with the combined editor and ui components.

- [ ] Create a "layout" component?
- [ ] Make UI components more isolated? If possible, they shouldn't
depend on styles outside of themselves, so that they can be used in
other layouts. Maybe we wait on this because I'm feeling a slippery
slope toward presumptions about configurability.
- [ ] OTOH maybe we go hard and consider these things as separate
components, even packages, with their own interfaces for customizability
/ configurability, just go all the way with it, and see what that looks
like.

# Pros

Top line: you can customize tldraw's user interface in a MUCH more
granular / powerful way than before.

It solves a case where menu items could not be made stateful from
outside of the editor context, and provides the option to do things in
the menus that we couldn't allow previously with the "schema-based"
approach.

It also may (who knows) be more performant because we can locate the
state inside of the components for individual buttons and groups,
instead of all at the top level above the "schema". Because items /
groups decide their own state, we don't have to have big checks on how
many items are selected, or whether we have a flippable state. Items and
groups themselves are allowed to re-build as part of the regular React
lifecycle. Menus aren't constantly being rebuilt, if that were ever an
issue.

Menu items can be shared between different menu types. We'll are
sometimes able to re-use items between, for example, the menu and the
context menu and the actions menu.

Our overrides no longer mutate anything, so there's less weird searching
and finding.

# Cons

This approach can make customization menu contents significantly more
complex, as an end user would need to re-declare most of a menu in order
to make any change to it. Luckily a user can add things to the top or
bottom of the context menu fairly easily. (And who knows, folks may
actually want to do deep customization, and this allows for it.)

It's more code. We are shipping more react components, basically one for
each menu item / group.

Currently this PR does not export the subcomponents, i.e. menu items. If
we do want to export these, then heaven help us, it's going to be a
_lot_ of exports.

# Progress 

- [x] Context menu
- [x] Main menu
- [x] Zoom menu
- [x] Help menu
- [x] Actions menu
- [x] Keyboard shortcuts menu
- [x] Quick actions in main menu? (new)
- [x] Helper buttons? (new)
- [x] Debug Menu

And potentially
- [x] Toolbar
- [x] Style menu
- [ ] Share zone
- [x] Navigation zone
- [ ] Other zones

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. use the context menu
2. use the custom context menu example
3. use cursor chat in the context menu

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.
2024-02-15 12:10:09 +00:00

358 lines
16 KiB
JSON
Raw Blame History

{
"action.convert-to-bookmark": "Pretvori v zaznamek",
"action.convert-to-embed": "Pretvori v vdelavo",
"action.open-embed-link": "Odpri povezavo",
"action.align-bottom": "Poravnaj dno",
"action.align-center-horizontal": "Poravnaj vodoravno",
"action.align-center-vertical": "Poravnaj navpično",
"action.align-center-horizontal.short": "Poravnaj vodoravno",
"action.align-center-vertical.short": "Poravnaj navpično",
"action.align-left": "Poravnaj levo",
"action.align-right": "Poravnaj desno",
"action.align-top": "Poravnaj vrh",
"action.back-to-content": "Nazaj na vsebino",
"action.bring-forward": "Premakni naprej",
"action.bring-to-front": "Premakni v ospredje",
"action.copy-as-json.short": "JSON",
"action.copy-as-json": "Kopiraj kot JSON",
"action.copy-as-png.short": "PNG",
"action.copy-as-png": "Kopiraj kot PNG",
"action.copy-as-svg.short": "SVG",
"action.copy-as-svg": "Kopiraj kot SVG",
"action.copy": "Kopiraj",
"action.cut": "Izreži",
"action.delete": "Izbriši",
"action.distribute-horizontal": "Porazdeli vodoravno",
"action.distribute-vertical": "Porazdeli navpično",
"action.distribute-horizontal.short": "Porazdeli vodoravno",
"action.distribute-vertical.short": "Porazdeli navpično",
"action.duplicate": "Podvoji",
"action.edit-link": "Uredi povezavo",
"action.exit-pen-mode": "Zapustite način peresa",
"action.export-as-json.short": "JSON",
"action.export-as-json": "Izvozi kot JSON",
"action.export-as-png.short": "PNG",
"action.export-as-png": "Izvozi kot PNG",
"action.export-as-svg.short": "SVG",
"action.export-as-svg": "Izvozi kot SVG",
"action.flip-horizontal": "Zrcali vodoravno",
"action.flip-vertical": "Zrcali navpično",
"action.flip-horizontal.short": "Zrcali horizontalno",
"action.flip-vertical.short": "Zrcali vertikalno",
"action.group": "Združi",
"action.insert-media": "Naloži predstavnost",
"action.new-shared-project": "Nov skupni projekt",
"action.open-file": "Odpri datoteko",
"action.pack": "Spakiraj",
"action.paste": "Prilepi",
"action.print": "Natisni",
"action.redo": "Uveljavi",
"action.rotate-ccw": "Zavrti v nasprotni smeri urinega kazalca",
"action.rotate-cw": "Zavrti v smeri urinega kazalca",
"action.save-copy": "Shrani kopijo",
"action.select-all": "Izberi vse",
"action.select-none": "Počisti izbiro",
"action.send-backward": "Pošlji nazaj",
"action.send-to-back": "Pošlji v ozadje",
"action.share-project": "Deli ta projekt",
"action.stack-horizontal": "Naloži vodoravno",
"action.stack-vertical": "Naloži navpično",
"action.stack-horizontal.short": "Naloži vodoravno",
"action.stack-vertical.short": "Naloži navpično",
"action.stretch-horizontal": "Raztegnite vodoravno",
"action.stretch-vertical": "Raztegni navpično",
"action.stretch-horizontal.short": "Raztezanje vodoravno",
"action.stretch-vertical.short": "Raztezanje navpično",
"action.toggle-auto-size": "Preklopi samodejno velikost",
"action.toggle-dark-mode.menu": "Temni način",
"action.toggle-dark-mode": "Preklopi temni način",
"action.toggle-debug-mode.menu": "Način odpravljanja napak",
"action.toggle-debug-mode": "Preklopi način odpravljanja napak",
"action.toggle-focus-mode.menu": "Osredotočen način",
"action.toggle-focus-mode": "Preklopi na osredotočen način",
"action.toggle-grid.menu": "Prikaži mrežo",
"action.toggle-grid": "Preklopi mrežo",
"action.toggle-snap-mode.menu": "Vedno pripni",
"action.toggle-snap-mode": "Preklopi pripenjanje",
"action.toggle-tool-lock.menu": "Zaklepanje orodja",
"action.toggle-tool-lock": "Preklopi zaklepanje orodja",
"action.toggle-transparent.context-menu": "Prozorno",
"action.toggle-transparent.menu": "Prozorno",
"action.toggle-transparent": "Preklopi prosojno ozadje",
"action.undo": "Razveljavi",
"action.ungroup": "Razdruži",
"action.zoom-in": "Povečaj",
"action.zoom-out": "Pomanjšaj",
"action.zoom-to-100": "Povečaj na 100 %",
"action.zoom-to-fit": "Povečaj do prileganja",
"action.zoom-to-selection": "Pomakni na izbiro",
"color-style.black": "Črna",
"color-style.blue": "Modra",
"color-style.green": "Zelena",
"color-style.grey": "Siva",
"color-style.light-blue": "Svetlo modra",
"color-style.light-green": "Svetlo zelena",
"color-style.light-red": "Svetlo rdeča",
"color-style.light-violet": "Svetlo vijolična",
"color-style.orange": "Oranžna",
"color-style.red": "Rdeča",
"color-style.violet": "Vijolična",
"color-style.yellow": "Rumena",
"fill-style.none": "Brez",
"fill-style.semi": "Polovično",
"fill-style.solid": "Polno",
"fill-style.pattern": "Vzorec",
"dash-style.dashed": "Črtkano",
"dash-style.dotted": "Pikčasto",
"dash-style.draw": "Narisano",
"dash-style.solid": "Polno",
"size-style.s": "Malo",
"size-style.m": "Srednje",
"size-style.l": "Veliko",
"size-style.xl": "Zelo veliko",
"opacity-style.0.1": "10 %",
"opacity-style.0.25": "25 %",
"opacity-style.0.5": "50 %",
"opacity-style.0.75": "75 %",
"opacity-style.1": "100 %",
"font-style.draw": "Draw",
"font-style.sans": "Sans",
"font-style.serif": "Serif",
"font-style.mono": "Mono",
"align-style.start": "Začetek",
"align-style.middle": "Sredina",
"align-style.end": "Konec",
"align-style.justify": "Poravnaj",
"geo-style.arrow-down": "Puščica navzdol",
"geo-style.arrow-left": "Puščica levo",
"geo-style.arrow-right": "Puščica desno",
"geo-style.arrow-up": "Puščica navzgor",
"geo-style.diamond": "Diamant",
"geo-style.ellipse": "Elipsa",
"geo-style.hexagon": "Šesterokotnik",
"geo-style.octagon": "Osmerokotnik",
"geo-style.oval": "Oval",
"geo-style.pentagon": "Peterokotnik",
"geo-style.rectangle": "Pravokotnik",
"geo-style.rhombus-2": "Romb 2",
"geo-style.rhombus": "Romb",
"geo-style.star": "Zvezda",
"geo-style.trapezoid": "Trapez",
"geo-style.triangle": "Trikotnik",
"geo-style.x-box": "X polje",
"arrowheadStart-style.none": "Brez",
"arrowheadStart-style.arrow": "Puščica",
"arrowheadStart-style.bar": "Črta",
"arrowheadStart-style.diamond": "Diamant",
"arrowheadStart-style.dot": "Pika",
"arrowheadStart-style.inverted": "Obrnjeno",
"arrowheadStart-style.pipe": "Cev",
"arrowheadStart-style.square": "Kvadrat",
"arrowheadStart-style.triangle": "Trikotnik",
"arrowheadEnd-style.none": "Brez",
"arrowheadEnd-style.arrow": "Puščica",
"arrowheadEnd-style.bar": "Črta",
"arrowheadEnd-style.diamond": "Diamant",
"arrowheadEnd-style.dot": "Pika",
"arrowheadEnd-style.inverted": "Obrnjeno",
"arrowheadEnd-style.pipe": "Cev",
"arrowheadEnd-style.square": "Kvadrat",
"arrowheadEnd-style.triangle": "Trikotnik",
"spline-style.line": "Črta",
"spline-style.cubic": "Kubično",
"tool.select": "Izbor",
"tool.hand": "Roka",
"tool.draw": "Risanje",
"tool.eraser": "Radirka",
"tool.arrow-down": "Puščica navzdol",
"tool.arrow-left": "Puščica levo",
"tool.arrow-right": "Puščica desno",
"tool.arrow-up": "Puščica navzgor",
"tool.arrow": "Puščica",
"tool.diamond": "Diamant",
"tool.ellipse": "Elipsa",
"tool.hexagon": "Šesterokotnik",
"tool.line": "Črta",
"tool.octagon": "Osmerokotnik",
"tool.oval": "Oval",
"tool.pentagon": "Peterokotnik",
"tool.rectangle": "Pravokotnik",
"tool.rhombus": "Romb",
"tool.star": "Zvezda",
"tool.trapezoid": "Trapez",
"tool.triangle": "Trikotnik",
"tool.x-box": "X polje",
"tool.asset": "Sredstvo",
"tool.frame": "Okvir",
"tool.note": "Opomba",
"tool.embed": "Vdelava",
"tool.text": "Besedilo",
"menu.title": "Meni",
"menu.copy-as": "Kopiraj kot",
"menu.edit": "Uredi",
"menu.export-as": "Izvozi kot",
"menu.file": "Datoteka",
"menu.language": "Jezik",
"menu.preferences": "Nastavitve",
"menu.view": "Pogled",
"context-menu.arrange": "Preuredi",
"context-menu.copy-as": "Kopiraj kot",
"context-menu.export-as": "Izvozi kot",
"context-menu.move-to-page": "Premakni na stran",
"context-menu.reorder": "Preuredite",
"page-menu.title": "Strani",
"page-menu.create-new-page": "Ustvari novo stran",
"page-menu.max-page-count-reached": "Doseženo največje število strani",
"page-menu.new-page-initial-name": "Stran 1",
"page-menu.edit-start": "Uredi",
"page-menu.edit-done": "Zaključi",
"page-menu.submenu.rename": "Preimenuj",
"page-menu.submenu.duplicate-page": "Podvoji",
"page-menu.submenu.title": "Meni",
"page-menu.submenu.move-down": "Premakni navzdol",
"page-menu.submenu.move-up": "Premakni navzgor",
"page-menu.submenu.delete": "Izbriši",
"share-menu.title": "Deli",
"share-menu.share-project": "Deli ta projekt",
"share-menu.copy-link": "Kopiraj povezavo",
"share-menu.readonly-link": "Samo za branje",
"share-menu.copy-readonly-link": "Kopiraj povezavo samo za branje",
"share-menu.offline-note": "Skupna raba tega projekta bo ustvarila živo kopijo na novem URL-ju. URL lahko delite z do tridesetimi drugimi osebami, s katerimi lahko skupaj gledate in urejate vsebino.",
"share-menu.copy-link-note": "Vsakdo s povezavo si bo lahko ogledal in urejal ta projekt.",
"share-menu.copy-readonly-link-note": "Vsakdo s povezavo si bo lahko ogledal (vendar ne urejal) ta projekt.",
"share-menu.project-too-large": "Žal tega projekta ni mogoče deliti, ker je prevelik. Delamo na tem!",
"people-menu.title": "Ljudje",
"people-menu.change-name": "Spremeni ime",
"people-menu.change-color": "Spremeni barvo",
"people-menu.user": "(Ti)",
"people-menu.invite": "Povabi ostale",
"help-menu.title": "Pomoč in viri",
"help-menu.about": "O nas",
"help-menu.discord": "Discord",
"help-menu.github": "GitHub",
"help-menu.keyboard-shortcuts": "Bližnjice na tipkovnici",
"help-menu.twitter": "Twitter",
"actions-menu.title": "Akcije",
"edit-link-dialog.title": "Uredi povezavo",
"edit-link-dialog.invalid-url": "Povezava mora biti veljavna",
"edit-link-dialog.detail": "Povezave se bodo odprle v novem zavihku.",
"edit-link-dialog.url": "URL",
"edit-link-dialog.clear": "Počisti",
"edit-link-dialog.save": "Nadaljuj",
"edit-link-dialog.cancel": "Prekliči",
"embed-dialog.title": "Ustvari vdelavo",
"embed-dialog.back": "Nazaj",
"embed-dialog.create": "Ustvari",
"embed-dialog.cancel": "Prekliči",
"embed-dialog.url": "URL",
"embed-dialog.instruction": "Prilepite URL spletnega mesta, da ustvarite vdelavo.",
"embed-dialog.invalid-url": "Iz tega URL-ja nismo mogli ustvariti vdelave.",
"edit-pages-dialog.move-down": "Premakni navzdol",
"edit-pages-dialog.move-up": "Premakni navzgor",
"shortcuts-dialog.title": "Bližnjice na tipkovnici",
"shortcuts-dialog.edit": "Uredi",
"shortcuts-dialog.file": "Datoteka",
"shortcuts-dialog.preferences": "Nastavitve",
"shortcuts-dialog.tools": "Orodja",
"shortcuts-dialog.transform": "Preoblikuj",
"shortcuts-dialog.view": "Pogled",
"style-panel.title": "Stili",
"style-panel.align": "Poravnava",
"style-panel.arrowheads": "Puščice",
"style-panel.color": "Barva",
"style-panel.dash": "Črtasto",
"style-panel.fill": "Polnilo",
"style-panel.font": "Pisava",
"style-panel.geo": "Oblika",
"style-panel.mixed": "Mešano",
"style-panel.opacity": "Motnost",
"style-panel.size": "Velikost",
"style-panel.spline": "Krivulja",
"tool-panel.drawing": "Risanje",
"tool-panel.shapes": "Oblike",
"navigation-zone.toggle-minimap": "Preklopi mini zemljevid",
"navigation-zone.zoom": "Povečava",
"focus-mode.toggle-focus-mode": "Preklopi na osredotočen način",
"toast.close": "Zapri",
"file-system.file-open-error.title": "Datoteke ni bilo mogoče odpreti",
"file-system.file-open-error.not-a-tldraw-file": "Datoteka, ki ste jo poskušali odpreti, ni videti kot datoteka tldraw.",
"file-system.file-open-error.file-format-version-too-new": "Datoteka, ki ste jo poskušali odpreti, je iz novejše različice tldraw. Ponovno naložite stran in poskusite znova.",
"file-system.file-open-error.generic-corrupted-file": "Datoteka, ki ste jo poskušali odpreti, je poškodovana.",
"file-system.confirm-open.title": "Prepiši trenutni projekt?",
"file-system.confirm-open.description": "Če ustvarite nov projekt, boste izbrisali trenutni projekt in vse neshranjene spremembe bodo izgubljene. Ste prepričani, da želite nadaljevati?",
"file-system.confirm-open.cancel": "Prekliči",
"file-system.confirm-open.open": "Odpri datoteko",
"file-system.confirm-open.dont-show-again": "Ne sprašuj znova",
"toast.error.export-fail.title": "Izvoz ni uspel",
"toast.error.export-fail.desc": "Izvoz slike ni uspel",
"toast.error.copy-fail.title": "Kopiranje ni uspelo",
"toast.error.copy-fail.desc": "Kopiranje slike ni uspelo",
"file-system.shared-document-file-open-error.title": "Datoteke ni bilo mogoče odpreti",
"file-system.shared-document-file-open-error.description": "Odpiranje datotek v skupnih projektih ni podprto.",
"vscode.file-open.dont-show-again": "Ne sprašuj znova",
"vscode.file-open.desc": "Ta datoteka je bila ustvarjena s starejšo različico tldraw. Ali jo želite posodobiti, da bo deloval z novo različico?",
"context.pages.new-page": "Nova stran",
"style-panel.arrowhead-start": "Začetek",
"style-panel.arrowhead-end": "Konec",
"vscode.file-open.open": "Nadaljuj",
"vscode.file-open.backup": "Varnostna kopija",
"vscode.file-open.backup-saved": "Varnostna kopija shranjena",
"vscode.file-open.backup-failed": "Varnostno kopiranje ni uspelo: to ni datoteka .tldr.",
"tool-panel.more": "Več",
"debug-panel.more": "Več",
"action.new-project": "Nov projekt",
"file-system.confirm-clear.title": "Počisti trenutni projekt?",
"file-system.confirm-clear.description": "Če ustvarite nov projekt, boste izbrisali trenutni projekt in vse neshranjene spremembe bodo izgubljene. Ste prepričani, da želite nadaljevati?",
"file-system.confirm-clear.cancel": "Prekliči",
"file-system.confirm-clear.continue": "Nadaljuj",
"file-system.confirm-clear.dont-show-again": "Ne sprašuj znova",
"action.stop-following": "Prenehaj slediti",
"people-menu.follow": "Sledi",
"style-panel.position": "Položaj",
"page-menu.go-to-page": "Pojdi na stran",
"action.insert-embed": "Vstavi vdelavo",
"people-menu.following": "Sledim",
"people-menu.leading": "Sledi vam",
"geo-style.check-box": "Potrditveno polje",
"tool.check-box": "Potrditveno polje",
"share-menu.create-snapshot-link": "Ustvari povezavo do posnetka",
"share-menu.save-note": "Ta projekt prenesite na svoj računalnik kot datoteko .tldr.",
"share-menu.fork-note": "Na podlagi tega posnetka ustvarite nov skupni projekt.",
"share-menu.snapshot-link-note": "Zajemite in delite ta projekt kot povezavo do posnetka samo za branje.",
"share-menu.upload-failed": "Oprostite, trenutno nismo mogli naložiti vašega projekta. Poskusite znova ali nam sporočite, če se težava ponovi.",
"style-panel.vertical-align": "Navpična poravnava",
"tool.laser": "Laser",
"action.fork-project": "Naredi kopijo projekta",
"action.leave-shared-project": "Zapusti skupni projekt",
"sharing.confirm-leave.title": "Zapusti trenutni projekt?",
"sharing.confirm-leave.description": "Ali ste prepričani, da želite zapustiti ta skupni projekt? Nanj se lahko vrnete tako, da se ponovno vrnete na njegov URL.",
"sharing.confirm-leave.cancel": "Prekliči",
"sharing.confirm-leave.leave": "Zapusti",
"sharing.confirm-leave.dont-show-again": "Ne sprašuj znova",
"action.toggle-reduce-motion.menu": "Zmanjšaj gibanje",
"action.toggle-reduce-motion": "Preklop zmanjšanja gibanja",
"tool.highlight": "Marker",
"action.toggle-lock": "Zakleni / odkleni",
"share-menu.default-project-name": "Skupni projekt",
"home-project-dialog.title": "Lokalni projekt",
"home-project-dialog.description": "To je vaš lokalni projekt. Namenjen je samo vam!",
"rename-project-dialog.title": "Preimenuj projekt",
"rename-project-dialog.cancel": "Prekliči",
"rename-project-dialog.rename": "Preimenuj",
"home-project-dialog.ok": "V redu",
"action.open-cursor-chat": "Klepet s kazalcem",
"shortcuts-dialog.collaboration": "Sodelovanje",
"cursor-chat.type-to-chat": "Vnesite za klepet ...",
"geo-style.cloud": "Oblak",
"tool.cloud": "Oblak",
"action.unlock-all": "Odkleni vse",
"status.offline": "Brez povezave",
"status.online": "Povezan",
"action.remove-frame": "Odstrani okvir",
"action.fit-frame-to-content": "Prilagodi vsebini",
"action.toggle-edge-scrolling.menu": "Pomikanje ob robovih",
"action.toggle-edge-scrolling": "Preklopi pomikanje ob robovih",
"verticalAlign-style.start": "Vrh",
"verticalAlign-style.middle": "Sredina",
"verticalAlign-style.end": "Dno"
}
Reference in a new issue View git blame Copy permalink