PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

followups to z-index and PR template (#4054)

Browse source 
some followups to https://github.com/tldraw/tldraw/pull/4020 and
https://github.com/tldraw/tldraw/pull/4038/files

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`
This commit is contained in:
Mime Čuvalo 2024-07-09 10:22:43 +01:00 committed by GitHub
parent a85c215ffc
commit 57dd425eff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 52 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/pull_request_template.md vendored
View file

@ -18,4 +18,4 @@ Describe what your pull request does. If you can, add GIFs or images showing the
### Release notes ### Release notes
- Fixed a bug with... - Fixed a bug with…

4
apps/dotcom/styles/z-board.css
View file

@ -225,10 +225,6 @@
align-items: center; align-items: center;
} }
.tlui-people-menu__user__color-picker {
z-index: 200;
}
.tlui-people-menu__user__color { .tlui-people-menu__user__color {
flex-shrink: 0; flex-shrink: 0;
} }

2
apps/huppy/src/flows/enforcePrLabels.tsx
View file

@ -56,7 +56,7 @@ export const enforcePrLabels: Flow = {
return fail('Please add a label to the PR.') return fail('Please add a label to the PR.')
} }
if (pull.body?.includes('Add a brief release note for your PR here.')) { if (pull.body?.includes('Fixed a bug with…')) {
return fail('Add a release note to the PR body.') return fail('Add a release note to the PR body.')
} }

91
packages/editor/editor.css
View file

@ -23,33 +23,39 @@
--radius-4: 11px; --radius-4: 11px;
/* Canvas z-index */ /* Canvas z-index */
--layer-cvs-hidden: -999999; --layer-canvas-hidden: -999999;
--layer-cvs-background: 100; --layer-canvas-background: 100;
--layer-cvs-grid: 150; --layer-canvas-grid: 150;
--layer-cvs-shapes: 300; --layer-canvas-shapes: 300;
--layer-cvs-overlays: 400; --layer-canvas-overlays: 500;
--layer-cvs-blocker: 10000; --layer-canvas-blocker: 10000;
/* Canvas overlays z-index */ /* Canvas overlays z-index */
--layer-ols-collaborator-scribble: 10; --layer-overlays-collaborator-scribble: 10;
--layer-ols-collaborator-brush: 20; --layer-overlays-collaborator-brush: 20;
--layer-ols-collaborator-shape-indicator: 30; --layer-overlays-collaborator-shape-indicator: 30;
--layer-ols-user-scribble: 40; --layer-overlays-user-scribble: 40;
--layer-ols-user-brush: 50; --layer-overlays-user-brush: 50;
--layer-ols-user-indicator-selected: 60; --layer-overlays-user-indicator-selected: 60;
--layer-ols-user-indicator-hovered: 70; --layer-overlays-user-indicator-hovered: 70;
--layer-ols-user-handles: 80; --layer-overlays-user-handles: 80;
--layer-ols-user-snapline: 90; --layer-overlays-user-snapline: 90;
--layer-ols-selection-fg: 100; --layer-overlays-selection-fg: 100;
--layer-ols-user-indicator-hint: 110; --layer-overlays-user-indicator-hint: 110;
--layer-ols-collaborator-cursor-hint: 120; --layer-overlays-collaborator-cursor-hint: 120;
--layer-ols-collaborator-cursor: 130; --layer-overlays-collaborator-cursor: 130;
/* Text editor z-index */ /* Text editor z-index */
--layer-text-container: 1; --layer-text-container: 1;
--layer-text-content: 3; --layer-text-content: 3;
--layer-text-editor: 4; --layer-text-editor: 4;
/* Error fallback z-index */
--layer-error-overlay: 1;
--layer-error-canvas: 2;
--layer-error-canvas-after: 3;
--layer-error-content: 4;
/* Misc */ /* Misc */
--tl-zoom: 1; --tl-zoom: 1;
@ -261,7 +267,7 @@ input,
.tl-shapes { .tl-shapes {
position: relative; position: relative;
z-index: var(--layer-cvs-shapes); z-index: var(--layer-canvas-shapes);
} }
.tl-overlays { .tl-overlays {
@ -272,7 +278,7 @@ input,
width: 100%; width: 100%;
contain: strict; contain: strict;
pointer-events: none; pointer-events: none;
z-index: var(--layer-cvs-overlays); z-index: var(--layer-canvas-overlays);
} }
.tl-overlays__item { .tl-overlays__item {
@ -296,7 +302,7 @@ input,
/* ------------------- Background ------------------- */ /* ------------------- Background ------------------- */
.tl-background__wrapper { .tl-background__wrapper {
z-index: var(--layer-cvs-background); z-index: var(--layer-canvas-background);
position: absolute; position: absolute;
inset: 0px; inset: 0px;
height: 100%; height: 100%;
@ -318,7 +324,7 @@ input,
height: 100%; height: 100%;
touch-action: none; touch-action: none;
pointer-events: none; pointer-events: none;
z-index: var(--layer-cvs-grid); z-index: var(--layer-canvas-grid);
contain: strict; contain: strict;
} }
@ -399,58 +405,58 @@ input,
/* back of the stack, behind user's stuff */ /* back of the stack, behind user's stuff */
.tl-collaborator__scribble { .tl-collaborator__scribble {
z-index: var(--layer-ols-collaborator-scribble); z-index: var(--layer-overlays-collaborator-scribble);
} }
.tl-collaborator__brush { .tl-collaborator__brush {
z-index: var(--layer-ols-collaborator-brush); z-index: var(--layer-overlays-collaborator-brush);
} }
.tl-collaborator__shape-indicator { .tl-collaborator__shape-indicator {
z-index: var(--layer-ols-collaborator-shape-indicator); z-index: var(--layer-overlays-collaborator-shape-indicator);
} }
.tl-user-scribble { .tl-user-scribble {
z-index: var(--layer-ols-user-scribble); z-index: var(--layer-overlays-user-scribble);
} }
.tl-user-brush { .tl-user-brush {
z-index: var(--layer-ols-user-brush); z-index: var(--layer-overlays-user-brush);
} }
.tl-user-indicator__selected { .tl-user-indicator__selected {
z-index: var(--layer-ols-user-indicator-selected); z-index: var(--layer-overlays-user-indicator-selected);
} }
.tl-user-indicator__hovered { .tl-user-indicator__hovered {
z-index: var(--layer-ols-user-indicator-hovered); z-index: var(--layer-overlays-user-indicator-hovered);
} }
.tl-user-handles { .tl-user-handles {
z-index: var(--layer-ols-user-handles); z-index: var(--layer-overlays-user-handles);
} }
.tl-user-snapline { .tl-user-snapline {
z-index: var(--layer-ols-user-snapline); z-index: var(--layer-overlays-user-snapline);
} }
.tl-selection__fg { .tl-selection__fg {
pointer-events: none; pointer-events: none;
z-index: var(--layer-ols-selection-fg); z-index: var(--layer-overlays-selection-fg);
} }
.tl-user-indicator__hint { .tl-user-indicator__hint {
z-index: var(--layer-ols-user-indicator-hint); z-index: var(--layer-overlays-user-indicator-hint);
stroke-width: calc(2.5px * var(--tl-scale)); stroke-width: calc(2.5px * var(--tl-scale));
} }
/* behind collaborator cursor */ /* behind collaborator cursor */
.tl-collaborator__cursor-hint { .tl-collaborator__cursor-hint {
z-index: var(--layer-ols-collaborator-cursor-hint); z-index: var(--layer-overlays-collaborator-cursor-hint);
} }
.tl-collaborator__cursor { .tl-collaborator__cursor {
z-index: var(--layer-ols-collaborator-cursor); z-index: var(--layer-overlays-collaborator-cursor);
} }
.tl-cursor { .tl-cursor {
@ -803,7 +809,7 @@ input,
.tl-text-measure { .tl-text-measure {
position: absolute; position: absolute;
z-index: var(--layer-cvs-hidden); z-index: var(--layer-canvas-hidden);
top: 0px; top: 0px;
left: 0px; left: 0px;
opacity: 0; opacity: 0;
@ -1387,7 +1393,6 @@ input,
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-text-1); color: var(--color-text-1);
position: absolute; position: absolute;
z-index: 600;
} }
.tl-error-boundary__overlay { .tl-error-boundary__overlay {
@ -1395,7 +1400,7 @@ input,
inset: 0px; inset: 0px;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 1; z-index: var(--layer-error-overlay);
background-color: var(--color-overlay); background-color: var(--color-overlay);
} }
@ -1411,7 +1416,7 @@ input,
inset: 0px; inset: 0px;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 2; z-index: var(--layer-error-canvas);
} }
/* some browsers seem to have some weird interactions between stacking contexts /* some browsers seem to have some weird interactions between stacking contexts
@ -1424,7 +1429,7 @@ it from receiving any pointer events or affecting the cursor. */
inset: 0px; inset: 0px;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 3; z-index: var(--layer-error-canvas-after);
pointer-events: all; pointer-events: all;
} }
@ -1443,7 +1448,7 @@ it from receiving any pointer events or affecting the cursor. */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
z-index: 4; z-index: var(--layer-error-content);
gap: 12px; gap: 12px;
} }
@ -1552,7 +1557,7 @@ it from receiving any pointer events or affecting the cursor. */
.tl-hit-test-blocker { .tl-hit-test-blocker {
position: absolute; position: absolute;
z-index: var(--layer-cvs-blocker); z-index: var(--layer-canvas-blocker);
inset: 0px; inset: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;

4
packages/tldraw/src/lib/ui.css
View file

@ -5,7 +5,7 @@
--layer-focused-input: 10; --layer-focused-input: 10;
--layer-panels: 300; --layer-panels: 300;
--layer-menus: 400; --layer-menus: 400;
--layer-cvs-overlays: 500; --layer-canvas-overlays: 500;
--layer-toasts: 650; --layer-toasts: 650;
--layer-cursor: 700; --layer-cursor: 700;
--layer-header-footer: 999; --layer-header-footer: 999;
@ -746,7 +746,7 @@
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: var(--layer-cvs-overlays); z-index: var(--layer-canvas-overlays);
background-color: var(--color-overlay); background-color: var(--color-overlay);
pointer-events: all; pointer-events: all;
animation: fadeIn 0.12s ease-out; animation: fadeIn 0.12s ease-out;