2023-06-17 22:33:21 +00:00
|
|
|
/* @tldraw/ui */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-container {
|
2023-04-25 11:01:25 +00:00
|
|
|
--layer-panels: 300;
|
|
|
|
|
--layer-menus: 400;
|
|
|
|
|
--layer-overlays: 500;
|
|
|
|
|
--layer-toasts: 650;
|
2023-06-15 15:10:08 +00:00
|
|
|
--layer-cursor: 700;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
/* UI Refresh */
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
/* Button */
|
|
|
|
|
|
|
|
|
|
.tlui-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 40px;
|
|
|
|
|
min-width: 40px;
|
|
|
|
|
padding: 0px 12px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: transparent;
|
|
|
|
|
color: currentColor;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
font-family: inherit;
|
styling: make dotcom and examples site have consistent font styling (#3271)
Our font styling for dotcom vs. our examples app is _ever_ so slightly
different.
- the Inter fonts weren't being consistently linked. Sometimes we
grabbed 700, sometimes 800, sometimes 500 or 400
- the dotcom specified a default weight of 500 and line-height 1.6 which
was not specified in the our UI. this made the UI inconsistent
- furthermore, we didn't specify `text-rendering` nor `font-smooth` and
that also made things inconsistent
- finally, our buttons needed to inherit the line-height because
otherwise they were reverting to the user agent default
before:
<img width="1800" alt="Screenshot 2024-03-26 at 15 23 12"
src="https://github.com/tldraw/tldraw/assets/469604/ee25c79c-5b43-4501-a126-255a9b03a4b8">
after:
<img width="1800" alt="Screenshot 2024-03-26 at 15 22 53"
src="https://github.com/tldraw/tldraw/assets/469604/a7a62441-e767-4919-b2bb-5c283eadd230">
### 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 ❗️ -->
- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-27 09:44:22 +00:00
|
|
|
line-height: inherit;
|
2023-10-28 21:58:32 +00:00
|
|
|
text-rendering: optimizeLegibility;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
gap: 0px;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button:disabled {
|
|
|
|
|
color: var(--color-text-3);
|
|
|
|
|
text-shadow: none;
|
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
|
|
|
cursor: default;
|
2023-10-28 21:58:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button:disabled .tlui-kbd {
|
|
|
|
|
color: var(--color-text-3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button > * {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__label {
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button:focus-visible:not(:hover) {
|
|
|
|
|
outline: 1px solid var(--color-selected);
|
|
|
|
|
outline-offset: -4px;
|
|
|
|
|
border-radius: var(--radius-3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button::after {
|
|
|
|
|
display: block;
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 4px;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button[aria-expanded='true']::after {
|
|
|
|
|
background-color: var(--color-muted-0);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-16 09:13:04 +00:00
|
|
|
.tlui-button__icon + .tlui-button__label {
|
|
|
|
|
margin-left: var(--space-2);
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-button[data-state='hinted']::after {
|
|
|
|
|
background-color: var(--color-hint);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button[data-state='hinted']:not(:disabled, :focus-visible):active:after {
|
|
|
|
|
background: var(--color-hint);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button::after {
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button:not(:disabled):hover::after {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Low button */
|
|
|
|
|
|
|
|
|
|
.tlui-button__low {
|
|
|
|
|
border-radius: var(--radius-3);
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button__low::after {
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Primary / danger buttons */
|
|
|
|
|
|
|
|
|
|
.tlui-button__primary {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__danger {
|
|
|
|
|
color: var(--color-warn);
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button__primary:not(:disabled, :focus-visible):hover {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__danger:not(:disabled, :focus-visible):hover {
|
|
|
|
|
color: var(--color-warn);
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Panel button */
|
|
|
|
|
|
|
|
|
|
.tlui-button__panel {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Menu button */
|
|
|
|
|
|
|
|
|
|
.tlui-button__menu {
|
|
|
|
|
height: 40px;
|
|
|
|
|
min-height: 40px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
margin: -4px 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__menu:nth-child(1) {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__menu:nth-last-child(1) {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button__menu::after {
|
|
|
|
|
inset: 4px;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Menu checkbox button */
|
|
|
|
|
|
|
|
|
|
.tlui-button__checkbox {
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__checkbox__indicator {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Tool lock button */
|
|
|
|
|
|
|
|
|
|
.tlui-toolbar__lock-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 4px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
height: 40px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
min-width: 0px;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toolbar__lock-button::after {
|
|
|
|
|
top: 4px;
|
|
|
|
|
left: 8px;
|
|
|
|
|
inset: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Tool button */
|
|
|
|
|
|
|
|
|
|
.tlui-button__tool {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 48px;
|
|
|
|
|
width: 48px;
|
|
|
|
|
margin-left: -2px;
|
|
|
|
|
margin-right: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__tool:nth-of-type(1) {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-button__tool:nth-last-of-type(1) {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button__tool::after {
|
|
|
|
|
inset: 4px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-12 16:14:28 +00:00
|
|
|
.tlui-button__tool[aria-checked='true']:not(:disabled, :focus-visible):hover {
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-12 16:14:28 +00:00
|
|
|
.tlui-button__tool[aria-checked='true'] {
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-12 16:14:28 +00:00
|
|
|
.tlui-button__tool[aria-checked='true']:not(:disabled, :focus-visible):active {
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-12 16:14:28 +00:00
|
|
|
.tlui-button__tool[aria-checked='true']:not(:disabled)::after {
|
2023-10-28 21:58:32 +00:00
|
|
|
background: var(--color-selected);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-08 10:50:10 +00:00
|
|
|
.tlui-layout__mobile .tlui-button__tool {
|
|
|
|
|
height: 48px;
|
|
|
|
|
width: 44px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
/* Help */
|
|
|
|
|
|
|
|
|
|
.tlui-button__help {
|
|
|
|
|
height: 32px;
|
|
|
|
|
width: 32px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
min-width: 32px;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
border: 1px solid var(--color-low-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-button__help::after {
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
inset: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button Row */
|
|
|
|
|
|
|
|
|
|
.tlui-buttons__horizontal {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__horizontal > * {
|
|
|
|
|
margin-left: -2px;
|
|
|
|
|
margin-right: -2px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__horizontal > *:nth-child(1) {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__horizontal > *:nth-last-child(1) {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
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
|
|
|
.tlui-buttons__horizontal > *:only-child {
|
|
|
|
|
width: 56px;
|
|
|
|
|
}
|
2023-10-28 21:58:32 +00:00
|
|
|
|
|
|
|
|
/* Button Grid */
|
|
|
|
|
|
|
|
|
|
.tlui-buttons__grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, auto);
|
|
|
|
|
grid-auto-flow: row;
|
2023-11-08 11:35:25 +00:00
|
|
|
overflow: hidden;
|
2023-10-28 21:58:32 +00:00
|
|
|
}
|
|
|
|
|
.tlui-buttons__grid > .tlui-button {
|
|
|
|
|
margin: -2px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__grid > .tlui-button:nth-of-type(4n) {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Zoom button */
|
|
|
|
|
|
|
|
|
|
.tlui-zoom-menu__button__pct {
|
|
|
|
|
width: 60px;
|
|
|
|
|
min-width: 60px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* --------------------- Layout --------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-layout {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
grid-template-rows: minmax(0px, 1fr) auto;
|
|
|
|
|
grid-auto-rows: auto;
|
|
|
|
|
height: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
overflow: clip;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
user-select: none;
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: strict;
|
2023-04-25 11:01:25 +00:00
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
-webkit-transform: translate3d(0, 0, 0);
|
2023-05-05 14:14:42 +00:00
|
|
|
--sab: env(safe-area-inset-bottom);
|
styling: make dotcom and examples site have consistent font styling (#3271)
Our font styling for dotcom vs. our examples app is _ever_ so slightly
different.
- the Inter fonts weren't being consistently linked. Sometimes we
grabbed 700, sometimes 800, sometimes 500 or 400
- the dotcom specified a default weight of 500 and line-height 1.6 which
was not specified in the our UI. this made the UI inconsistent
- furthermore, we didn't specify `text-rendering` nor `font-smooth` and
that also made things inconsistent
- finally, our buttons needed to inherit the line-height because
otherwise they were reverting to the user agent default
before:
<img width="1800" alt="Screenshot 2024-03-26 at 15 23 12"
src="https://github.com/tldraw/tldraw/assets/469604/ee25c79c-5b43-4501-a126-255a9b03a4b8">
after:
<img width="1800" alt="Screenshot 2024-03-26 at 15 22 53"
src="https://github.com/tldraw/tldraw/assets/469604/a7a62441-e767-4919-b2bb-5c283eadd230">
### 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 ❗️ -->
- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-27 09:44:22 +00:00
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
font-smooth: antialiased;
|
|
|
|
|
text-rendering: optimizeLegibility;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-layout__top {
|
|
|
|
|
grid-column: 1;
|
|
|
|
|
grid-row: 1;
|
|
|
|
|
display: flex;
|
2023-06-01 18:46:26 +00:00
|
|
|
min-width: 0px;
|
2023-10-09 06:02:43 +00:00
|
|
|
justify-content: space-between;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-layout__top__left {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2023-10-09 06:02:43 +00:00
|
|
|
flex: 0 1 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-layout__top__right {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
height: 100%;
|
2023-10-09 06:02:43 +00:00
|
|
|
flex: 0 0 auto;
|
2023-06-01 18:46:26 +00:00
|
|
|
min-width: 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scrollable,
|
|
|
|
|
.scrollable * {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
touch-action: auto;
|
|
|
|
|
overscroll-behavior: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ----------------- Helper Buttons ---------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-helper-buttons {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
width: min-content;
|
|
|
|
|
gap: var(--space-3);
|
2023-10-28 21:58:32 +00:00
|
|
|
margin: var(--space-2) var(--space-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
white-space: nowrap;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------- Icon ---------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-icon {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
background-color: currentColor;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-icon__small {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Slider --------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-slider {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
user-select: none;
|
|
|
|
|
touch-action: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-slider__container {
|
2023-10-28 21:58:32 +00:00
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
padding: 0px var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-slider__track {
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
height: 44px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-slider__track::after {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(50% - 2px);
|
2023-10-28 21:58:32 +00:00
|
|
|
content: '';
|
|
|
|
|
height: 3px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: var(--color-muted-1);
|
|
|
|
|
border-radius: 14px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-slider__range {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(50% - 2px);
|
|
|
|
|
left: 0px;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background-color: var(--color-selected);
|
|
|
|
|
border-radius: 14px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-slider__thumb {
|
|
|
|
|
all: unset;
|
|
|
|
|
cursor: grab;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -1px;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-slider__thumb:active {
|
|
|
|
|
cursor: grabbing;
|
2024-01-27 15:01:18 +00:00
|
|
|
box-shadow:
|
|
|
|
|
inset 0px 0px 0px 2px var(--color-text-1),
|
|
|
|
|
var(--shadow-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-slider__thumb:focus-visible {
|
|
|
|
|
box-shadow: inset 0 0 0 2px var(--color-focus);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
/* ----------------------- Kbd ---------------------- */
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-kbd {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 11px;
|
|
|
|
|
display: grid;
|
|
|
|
|
justify-items: center;
|
|
|
|
|
grid-auto-flow: column;
|
|
|
|
|
grid-template-columns: auto;
|
|
|
|
|
grid-auto-columns: minmax(1em, auto);
|
|
|
|
|
align-self: bottom;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
margin-left: var(--space-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-kbd > span {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: inline;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
border-radius: 2px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-01-25 11:34:18 +00:00
|
|
|
.tlui-kbd > span:last-child {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-kbd:not(:last-child) {
|
|
|
|
|
margin-right: var(--space-2);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Focus Mode Button */
|
|
|
|
|
|
|
|
|
|
.tlui-focus-button {
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Popover -------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-popover {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-content: stretch;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-popover__content {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-height: 75vh;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
border: none;
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
box-shadow: var(--shadow-3);
|
|
|
|
|
z-index: var(--layer-menus);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
touch-action: auto;
|
|
|
|
|
overscroll-behavior: none;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
/* Zones */
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
/* ------------------- Status Bar ------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-debug-panel {
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: grid;
|
|
|
|
|
align-items: center;
|
2024-01-24 12:23:26 +00:00
|
|
|
grid-template-columns: 1fr auto auto auto;
|
2023-04-25 11:01:25 +00:00
|
|
|
justify-content: space-between;
|
|
|
|
|
padding-left: var(--space-4);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-top: 1px solid var(--color-background);
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-debug-panel__current-state {
|
2024-02-04 09:46:16 +00:00
|
|
|
overflow: hidden;
|
2023-04-25 11:01:25 +00:00
|
|
|
white-space: nowrap;
|
2024-02-04 09:46:16 +00:00
|
|
|
text-overflow: ellipsis;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-01-24 12:23:26 +00:00
|
|
|
.tlui-debug-panel__fps {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-debug-panel__fps__slow {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: var(--color-warn);
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* -------------------- Menu Zone ------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-menu-zone {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
width: fit-content;
|
2024-01-14 16:27:16 +00:00
|
|
|
border-right: 2px solid var(--color-background);
|
|
|
|
|
border-bottom: 2px solid var(--color-background);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-bottom-right-radius: var(--radius-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-low);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-menu-zone *[data-state='open']::after {
|
|
|
|
|
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Style Panel ------------------ */
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__wrapper {
|
|
|
|
|
box-shadow: var(--shadow-2);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
height: fit-content;
|
|
|
|
|
max-height: 100%;
|
2024-01-14 16:27:16 +00:00
|
|
|
margin: 8px;
|
2023-04-25 11:01:25 +00:00
|
|
|
touch-action: auto;
|
|
|
|
|
overscroll-behavior: none;
|
|
|
|
|
overflow-y: auto;
|
2023-10-28 21:58:32 +00:00
|
|
|
overflow-x: hidden;
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
pointer-events: all;
|
2023-10-28 21:58:32 +00:00
|
|
|
width: 148px;
|
|
|
|
|
max-width: 148px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel .tlui-button.select {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__section {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
|
|
|
border-bottom: 1px solid var(--color-divider);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__section:empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
|
|
|
margin-bottom: 7px;
|
|
|
|
|
border-bottom: 1px solid var(--color-divider);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__row {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2023-10-28 21:58:32 +00:00
|
|
|
/* Only really used for the alignment picker */
|
|
|
|
|
.tlui-style-panel__row__extra-button {
|
|
|
|
|
margin-left: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
.tlui-style-panel__double-select-picker {
|
2023-10-28 21:58:32 +00:00
|
|
|
display: flex;
|
|
|
|
|
grid-template-columns: 1fr auto;
|
2023-04-25 11:01:25 +00:00
|
|
|
align-items: center;
|
|
|
|
|
padding-left: var(--space-4);
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-text-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__double-select-picker-label {
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
2023-10-28 21:58:32 +00:00
|
|
|
flex-grow: 2;
|
|
|
|
|
max-width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-style-panel__section *[data-state='open']::after {
|
|
|
|
|
background: var(--color-muted-0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------- Input --------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-input {
|
|
|
|
|
background: none;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
2023-10-28 21:58:32 +00:00
|
|
|
height: 40px;
|
|
|
|
|
max-height: 40px;
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
color: var(--color-text-1);
|
2023-10-28 21:58:32 +00:00
|
|
|
padding: var(--space-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
padding-left: 0px;
|
|
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
width: 100%;
|
|
|
|
|
user-select: all;
|
2023-10-28 21:58:32 +00:00
|
|
|
text-rendering: optimizeLegibility;
|
2023-04-25 11:01:25 +00:00
|
|
|
-webkit-user-select: auto !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-input__wrapper {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 44px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-input__wrapper > .tlui-icon {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* If mobile use 16px as font size */
|
|
|
|
|
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦♂️ */
|
|
|
|
|
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
|
|
|
/* CSS specific to iOS devices */
|
|
|
|
|
.tlui-input {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------- Dialog ---------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: var(--layer-overlays);
|
|
|
|
|
background-color: var(--color-overlay);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
animation: fadeIn 0.12s ease-out;
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: default;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
box-shadow: var(--shadow-3);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-width: 300px;
|
2024-02-22 12:42:01 +00:00
|
|
|
max-width: 80%;
|
|
|
|
|
max-height: 80%;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__header {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 0;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
padding-left: var(--space-4);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
height: 44px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__header__title {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__header__close {
|
|
|
|
|
justify-self: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__body {
|
2023-10-28 21:58:32 +00:00
|
|
|
padding: var(--space-4) var(--space-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
flex: 0 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
user-select: all;
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__footer {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__footer__actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {
|
|
|
|
|
margin-right: -4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Toolbar -------------------- */
|
|
|
|
|
|
|
|
|
|
/* Wide container */
|
|
|
|
|
.tlui-toolbar {
|
|
|
|
|
grid-column: 1 / span 3;
|
|
|
|
|
grid-row: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-grow: 2;
|
2023-10-28 21:58:32 +00:00
|
|
|
padding-bottom: calc(var(--space-3) + var(--sab));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Centered Content */
|
|
|
|
|
.tlui-toolbar__inner {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
display: flex;
|
2023-10-28 21:58:32 +00:00
|
|
|
gap: var(--space-3);
|
|
|
|
|
align-items: flex-end;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-toolbar__left {
|
|
|
|
|
width: fit-content;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
/* Row of controls + lock button */
|
|
|
|
|
.tlui-toolbar__extras {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
pointer-events: none;
|
2024-01-14 16:27:16 +00:00
|
|
|
top: 6px;
|
2023-11-15 18:06:29 +00:00
|
|
|
height: 48px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-toolbar__extras:empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-toolbar__extras__controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
border-top-left-radius: var(--radius-4);
|
|
|
|
|
border-top-right-radius: var(--radius-4);
|
2024-01-14 16:27:16 +00:00
|
|
|
border: 2px solid var(--color-background);
|
2023-10-28 21:58:32 +00:00
|
|
|
margin-left: 8px;
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
width: fit-content;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toolbar__tools {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
2024-03-12 16:14:28 +00:00
|
|
|
align-items: center;
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-low);
|
2024-01-14 16:27:16 +00:00
|
|
|
border-radius: var(--radius-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: var(--color-panel);
|
|
|
|
|
box-shadow: var(--shadow-2);
|
|
|
|
|
}
|
2024-03-12 16:14:28 +00:00
|
|
|
.tlui-toolbar__tools__list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2023-04-25 11:01:25 +00:00
|
|
|
|
|
|
|
|
.tlui-toolbar__overflow {
|
|
|
|
|
width: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-08 10:50:10 +00:00
|
|
|
.tlui-layout__mobile .tlui-toolbar__overflow {
|
|
|
|
|
width: 32px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2024-02-08 10:50:10 +00:00
|
|
|
.tlui-layout__mobile .tlui-toolbar *[data-state='open']::after {
|
|
|
|
|
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- Help Zone ------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-help-menu {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: var(--space-2);
|
|
|
|
|
right: var(--space-2);
|
|
|
|
|
z-index: var(--layer-panels);
|
2024-01-14 16:27:16 +00:00
|
|
|
border: 2px solid var(--color-background);
|
2023-04-25 11:01:25 +00:00
|
|
|
border-radius: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------ Context Menu ------------------ */
|
|
|
|
|
|
|
|
|
|
.tlui-context-menu__move-to-page__name {
|
|
|
|
|
max-width: calc(min(300px, 35vw));
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-context-menu__move-to-page__name[data-disabled] {
|
|
|
|
|
color: var(--color-text-3);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------- Menu ---------------------- */
|
|
|
|
|
|
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
|
|
|
.tlui-menu:empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
.tlui-menu {
|
|
|
|
|
z-index: var(--layer-menus);
|
|
|
|
|
height: fit-content;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
max-height: 80vh;
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
touch-action: auto;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overscroll-behavior: none;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
box-shadow: var(--shadow-3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-menu::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-menu__arrow {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -1px;
|
|
|
|
|
fill: var(--color-panel);
|
|
|
|
|
stroke: var(--color-panel-contrast);
|
|
|
|
|
stroke-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-menu__group {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-menu__group:empty {
|
|
|
|
|
display: none;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-menu__group {
|
|
|
|
|
border-bottom: 1px solid var(--color-divider);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
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
|
|
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
|
|
|
border-bottom: none;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
/* Menu Sizes */
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-menu[data-size='large'] > .tlui-menu__group {
|
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
|
|
|
min-width: initial;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-menu[data-size='medium'] > .tlui-menu__group {
|
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
|
|
|
min-width: 144px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-menu[data-size='small'] > .tlui-menu__group {
|
2024-02-21 15:18:53 +00:00
|
|
|
min-width: 96px;
|
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
|
|
|
}
|
|
|
|
|
|
2024-02-19 14:52:43 +00:00
|
|
|
.tlui-menu[data-size='tiny'] > .tlui-menu__group {
|
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
|
|
|
min-width: 0px;
|
|
|
|
|
}
|
2024-02-19 14:52:43 +00:00
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* ------------------ Actions Menu ------------------ */
|
|
|
|
|
|
|
|
|
|
.tlui-actions-menu {
|
|
|
|
|
max-height: calc(100vh - 150px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Toasts --------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-toast__viewport {
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
padding: 0px var(--space-3) 64px 0px;
|
|
|
|
|
z-index: var(--layer-toasts);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__viewport > * {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__icon {
|
2024-03-27 09:41:13 +00:00
|
|
|
padding-top: 11px;
|
2023-04-25 11:01:25 +00:00
|
|
|
padding-left: var(--space-4);
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-text-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container {
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
box-shadow: var(--shadow-2);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-3);
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:41:13 +00:00
|
|
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
|
|
|
color: var(--color-success);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
|
|
|
color: var(--color-info);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
|
|
|
color: var(--color-warning);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
|
|
|
color: var(--color-error);
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
.tlui-toast__main {
|
|
|
|
|
flex-grow: 2;
|
2023-10-28 21:58:32 +00:00
|
|
|
max-width: 280px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__content {
|
2023-11-25 14:17:16 +00:00
|
|
|
padding: var(--space-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__title {
|
2023-10-29 14:40:42 +00:00
|
|
|
font-weight: bold;
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-text-1);
|
2024-03-27 09:41:13 +00:00
|
|
|
/* this makes the default toast look better */
|
|
|
|
|
line-height: 16px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__description {
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
padding: var(--space-3);
|
|
|
|
|
margin: 0px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-29 14:40:42 +00:00
|
|
|
.tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
|
|
|
|
|
padding-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
.tlui-toast__actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
2023-10-29 14:40:42 +00:00
|
|
|
margin-left: 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__close {
|
|
|
|
|
align-self: flex-end;
|
2023-10-28 21:58:32 +00:00
|
|
|
flex-shrink: 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
|
|
|
.tlui-toast__container[data-state='open'] {
|
|
|
|
|
animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-state='closed'] {
|
|
|
|
|
animation: hide 100ms ease-in;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-swipe='move'] {
|
|
|
|
|
transform: translateX(var(--radix-toast-swipe-move-x));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-swipe='cancel'] {
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
transition: transform 200ms ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-toast__container[data-swipe='end'] {
|
|
|
|
|
animation: swipe-out 100ms ease-out;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Bottom --------------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-layout__bottom {
|
|
|
|
|
grid-row: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-layout__bottom__main {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Navigation ------------------- */
|
|
|
|
|
|
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
|
|
|
.tlui-navigation-panel {
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
width: min-content;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
z-index: var(--layer-panels);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0px;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-navigation-panel::before {
|
2023-04-25 11:01:25 +00:00
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: -1;
|
2024-01-14 16:27:16 +00:00
|
|
|
inset: -2px -2px 0px 0px;
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: 0;
|
2024-01-14 16:27:16 +00:00
|
|
|
border-top: 2px solid var(--color-background);
|
|
|
|
|
border-right: 2px solid var(--color-background);
|
2023-10-28 21:58:32 +00:00
|
|
|
border-top-right-radius: var(--radius-4);
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-low);
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-navigation-panel__toggle .tlui-icon {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0.24;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.tlui-navigation-panel__toggle:active .tlui-icon {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
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
|
|
|
.tlui-navigation-panel__toggle:hover .tlui-icon {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-minimap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 96px;
|
|
|
|
|
min-height: 96px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: var(--space-3);
|
|
|
|
|
padding-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-minimap__canvas {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ----------------------- ... ---------------------- */
|
|
|
|
|
|
|
|
|
|
@keyframes hide {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes slide-in {
|
|
|
|
|
from {
|
|
|
|
|
transform: translateX(calc(100% + var(--space-3)));
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
transform: translateX(0px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes swipe-out {
|
|
|
|
|
from {
|
|
|
|
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
transform: translateX(calc(100% + var(--space-3)));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Page Select ------------------ */
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
max-height: 50vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__trigger {
|
|
|
|
|
width: 128px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__header {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
2023-12-20 09:09:29 +00:00
|
|
|
height: 40px;
|
2023-04-25 11:01:25 +00:00
|
|
|
padding-left: var(--space-4);
|
|
|
|
|
border-bottom: 1px solid var(--color-divider);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
|
|
|
margin-right: -4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__header__title {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__name {
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
text-align: left;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__list {
|
|
|
|
|
position: relative;
|
|
|
|
|
touch-action: auto;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
touch-action: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
2023-10-28 21:58:32 +00:00
|
|
|
gap: 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item:nth-of-type(n + 2) {
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-20 09:09:29 +00:00
|
|
|
.tlui-page-menu__item__button {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-page-menu__item__button:not(:only-child) {
|
2023-04-25 11:01:25 +00:00
|
|
|
flex-grow: 2;
|
2023-10-28 21:58:32 +00:00
|
|
|
margin-right: -2px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item__button > span {
|
|
|
|
|
display: block;
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
text-align: left;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item__button__checkbox {
|
2023-10-29 10:09:39 +00:00
|
|
|
padding-left: 35px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item__button__check {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable__title {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable:focus-within {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable__handle {
|
|
|
|
|
touch-action: none;
|
|
|
|
|
width: 32px;
|
2023-10-28 21:58:32 +00:00
|
|
|
min-width: 0px;
|
2023-05-18 13:45:19 +00:00
|
|
|
height: 40px;
|
2023-04-25 11:01:25 +00:00
|
|
|
cursor: grab;
|
|
|
|
|
color: var(--color-text-3);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-right: -9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__sortable__handle:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page-menu__item__input {
|
2023-10-28 21:58:32 +00:00
|
|
|
margin-left: 12px;
|
2023-04-25 11:01:25 +00:00
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* The more menu has complex CSS here: */
|
|
|
|
|
/* If the user can hover, then visible but opacity zero until hover */
|
|
|
|
|
/* If the user cannot hover, then not displayed unless editing, and then opacity 1 */
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__submenu {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
flex: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
display: none;
|
2023-10-28 21:58:32 +00:00
|
|
|
margin-left: -2px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__submenu[data-isediting='true'] {
|
|
|
|
|
display: block;
|
2024-02-16 09:13:04 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__submenu > .tlui-button {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-21 15:18:53 +00:00
|
|
|
@media (any-pointer: coarse) {
|
|
|
|
|
.tlui-page_menu__item__submenu > .tlui-button {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-16 09:13:04 +00:00
|
|
|
.tlui-page-menu__item__button .tlui-button__icon {
|
|
|
|
|
margin-right: 4px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tlui-page_menu__item__submenu {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-16 09:13:04 +00:00
|
|
|
.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open'],
|
|
|
|
|
.tlui-page_menu__item__submenu:hover > .tlui-button,
|
|
|
|
|
.tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Dialogs -------------------- */
|
|
|
|
|
|
|
|
|
|
/* Edit Link Dialog */
|
|
|
|
|
|
|
|
|
|
.tlui-edit-link-dialog {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-edit-link-dialog__input {
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
padding: 0px var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Embed Dialog */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tlui-embed__spacer {
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
min-height: 0px;
|
|
|
|
|
margin-left: calc(-1 * var(--space-4));
|
|
|
|
|
margin-top: calc(-1 * var(--space-4));
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
.tlui-embed-dialog__list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding-bottom: var(--space-5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__item__image {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__enter {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__input {
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
padding: 0px var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__warning {
|
|
|
|
|
color: var(--color-warn);
|
2023-10-28 21:58:32 +00:00
|
|
|
text-shadow: none;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__instruction__link {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--space-1);
|
|
|
|
|
margin-top: var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-embed-dialog__enter a {
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
|
2023-10-28 21:58:32 +00:00
|
|
|
.tlui-following-indicator {
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
|
|
|
|
border-width: 2px;
|
|
|
|
|
border-style: solid;
|
2023-10-28 21:58:32 +00:00
|
|
|
z-index: var(--layer-following-indicator);
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2023-10-17 08:32:41 +00:00
|
|
|
|
|
|
|
|
/* ---------------- Offline Indicator --------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-offline-indicator {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
border: 3px solid var(--color-background);
|
|
|
|
|
padding: 0px var(--space-5);
|
|
|
|
|
height: 42px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 99px;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
animation: fade-in;
|
|
|
|
|
animation-duration: 0.12s;
|
|
|
|
|
animation-delay: 2s;
|
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
|
}
|
2023-10-28 21:58:32 +00:00
|
|
|
|
|
|
|
|
/* --------------- Keyboard shortcuts --------------- */
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__header {
|
|
|
|
|
border-bottom: 1px solid var(--color-divider);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__body {
|
|
|
|
|
position: relative;
|
2024-02-22 12:42:01 +00:00
|
|
|
columns: 3;
|
2023-10-28 21:58:32 +00:00
|
|
|
column-gap: var(--space-9);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
touch-action: auto;
|
2024-03-04 14:26:01 +00:00
|
|
|
|
|
|
|
|
/* Terrible fix to allow firefox users to scroll the dialog */
|
|
|
|
|
overflow-x: auto;
|
2023-10-28 21:58:32 +00:00
|
|
|
}
|
|
|
|
|
|
2024-02-22 12:42:01 +00:00
|
|
|
.tlui-shortcuts-dialog__body__tablet {
|
|
|
|
|
columns: 2;
|
2023-10-28 21:58:32 +00:00
|
|
|
}
|
|
|
|
|
|
2024-02-22 12:42:01 +00:00
|
|
|
.tlui-shortcuts-dialog__body__mobile {
|
|
|
|
|
columns: 1;
|
2023-10-28 21:58:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__group {
|
|
|
|
|
break-inside: avoid-column;
|
|
|
|
|
padding-bottom: var(--space-6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__group__title {
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
color: var(--color-text-3);
|
|
|
|
|
height: 32px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__group__content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__key-pair {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tlui-shortcuts-dialog__key-pair__key {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|