PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/apps/dotcom/styles/z-board.css

195 lines
3.6 KiB
CSS
Raw Normal View History

unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
/* ------------------ Da Share Zone ----------------- */
[Improvement] Share zone styling (#2628) ### Change Type - [x] `patch` — Bug fix ### Release Notes - Tweaked user avatar size. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
.tlui-style-panel__wrapper {
margin-top: 4px;
}
unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
.tlui-share-zone__connection-status {
width: 8px;
height: 100%;
position: relative;
display: flex;
align-items: center;
}
.tlui-share-zone__connection-status::after {
content: '';
width: 8px;
height: 8px;
background-color: currentColor;
border-radius: 100%;
}
[Improvement] Share zone styling (#2628) ### Change Type - [x] `patch` — Bug fix ### Release Notes - Tweaked user avatar size. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
.tlui-share-zone__button-wrapper {
all: unset;
padding: 2px;
position: relative;
pointer-events: all;
position: relative;
cursor: pointer;
}
unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
.tlui-share-zone__button {
font-family: inherit;
font-size: inherit;
[Improvement] Share zone styling (#2628) ### Change Type - [x] `patch` — Bug fix ### Release Notes - Tweaked user avatar size. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
height: 36px;
border: 2px solid var(--color-background);
unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
border-radius: 8px;
background-color: var(--color-selected);
color: var(--color-selected-contrast);
text-shadow: none;
pointer-events: all;
position: relative;
[Improvement] Share zone styling (#2628) ### Change Type - [x] `patch` — Bug fix ### Release Notes - Tweaked user avatar size. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
font-weight: 600;
unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
}
.tlui-share-zone__button::before {
position: absolute;
display: block;
content: '';
[Improvement] Share zone styling (#2628) ### Change Type - [x] `patch` — Bug fix ### Release Notes - Tweaked user avatar size. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
inset: 0px;
unbrivate, dot com in (#2475) This PR moves the tldraw.com app into the public repo. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] --------- Co-authored-by: Dan Groshev <git@dgroshev.com> Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
background-color: var(--color-background);
border-top-left-radius: var(--radius-3);
border-bottom-right-radius: var(--radius-3);
border-bottom-left-radius: var(--radius-3);
z-index: -1;
}
.tlui-share-zone__button:active {
color: var(--color-selected-contrast);
}
@media (hover: hover) {
.tlui-share-zone__button:hover {
color: var(--color-selected-contrast);
}
.tlui-share-zone__button:not(:disabled, :focus-visible):hover {
color: var(--color-selected-contrast);
}
}
.tlui-share-zone__popover {
font-size: 12px;
font-weight: inherit;
width: 200px;
max-width: 100%;
max-height: 100%;
position: relative;
}
.tlui-share-zone__qr-code {
width: 200px;
height: 200px;
cursor: pointer;
background: none;
background-color: var(--color-muted-2);
background-size: cover;
border: none;
}
.tlui-share-zone__spinner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tlui-share-zone__details {
font-size: 11px;
font-weight: 400;
padding: var(--space-4);
color: var(--color-text-1);
line-height: 1.5;
margin: 0px;
}
.tlui-share-zone__status {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
position: relative;
left: -4px;
}
.tlui-share-zone__status > div {
width: 8px;
height: 8px;
border-radius: 100%;
}
/* ------------------- People Menu ------------------- */
.tlui-layout[data-breakpoint='0'] .tlui-offline-indicator {
margin-top: 4px;
}
Allow users to set document name and use it for exporting / saving (#2685) Adds the ability to change document names in the top center part of the UI. This mostly brings back the functionality we already had in the past. This is basically a port of what @SomeHats did a while back. I changed the dropdown options and removed some of the things (we are not dealing with network requests directly so some of that logic did not apply any longer). We did have autosave back then, not sure if we want to bring that back? Changes the `exportAs` api, thus braking. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [x] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Top center should now show a new UI element. It has a dropdown with a few actions. 2. Double clicking the name should also start editing it. 3. The name should also be respected when exporting things. Not if you select some shapes or a frame. In that case we still use the old names. But if you don't have anything selected and then export / save a project it should have the document name. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Allow users to name their documents.
2024-02-19 12:30:26 +00:00
/* Document Name */
.tlui-document-name__inner {
border-radius: calc(var(--radius-2) + var(--space-2));
background-color: var(--color-background);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
top bar design tweaks (#3205) For a while, there've been a couple design issues with our top bar that have been bothering me: ![image](https://github.com/tldraw/tldraw/assets/1489520/55355b7c-7ff2-4843-841c-5e53cbd788b2) This diff: - Makes the document title and share button have the same height and vertical alignment - Vertically centers the share button between the top of the viewport and the share panel - Aligns the right of the share button to the right of the style panel <img width="1512" alt="Screenshot 2024-03-18 at 16 08 09" src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e"> <img width="1512" alt="Screenshot 2024-03-18 at 16 08 18" src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67"> Also tweaking some of the spacing and radiuses around the document title itself to get things ✨pixel perfect✨ Before: <img width="395" alt="Screenshot 2024-03-19 at 15 23 05" src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394"> After: <img width="378" alt="Screenshot 2024-03-19 at 15 22 27" src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1"> ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
2024-03-19 15:29:01 +00:00
height: 36px;
margin-top: 4px;
fix document name alignment (#3559) it got wrong :( ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
2024-04-23 09:49:01 +00:00
padding-left: 4px;
Allow users to set document name and use it for exporting / saving (#2685) Adds the ability to change document names in the top center part of the UI. This mostly brings back the functionality we already had in the past. This is basically a port of what @SomeHats did a while back. I changed the dropdown options and removed some of the things (we are not dealing with network requests directly so some of that logic did not apply any longer). We did have autosave back then, not sure if we want to bring that back? Changes the `exportAs` api, thus braking. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [x] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Top center should now show a new UI element. It has a dropdown with a few actions. 2. Double clicking the name should also start editing it. 3. The name should also be respected when exporting things. Not if you select some shapes or a frame. In that case we still use the old names. But if you don't have anything selected and then export / save a project it should have the document name. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Allow users to name their documents.
2024-02-19 12:30:26 +00:00
max-width: 100%;
color: var(--color-text);
text-shadow: 1px 1px 0px var(--color-background);
pointer-events: all;
}
.tlui-document-name__input__wrapper {
position: relative;
fix document name overflow (#3263) Fix the document name getting truncated as I forgot to update a measurement in the CSS. Also fixes an issue where if you had a long title which you then cleared, the input width wouldn't update until you entered your first character of the new name. ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
2024-03-26 11:16:15 +00:00
max-width: calc(100% - 36px);
Allow users to set document name and use it for exporting / saving (#2685) Adds the ability to change document names in the top center part of the UI. This mostly brings back the functionality we already had in the past. This is basically a port of what @SomeHats did a while back. I changed the dropdown options and removed some of the things (we are not dealing with network requests directly so some of that logic did not apply any longer). We did have autosave back then, not sure if we want to bring that back? Changes the `exportAs` api, thus braking. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [x] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Top center should now show a new UI element. It has a dropdown with a few actions. 2. Double clicking the name should also start editing it. 3. The name should also be respected when exporting things. Not if you select some shapes or a frame. In that case we still use the old names. But if you don't have anything selected and then export / save a project it should have the document name. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Allow users to name their documents.
2024-02-19 12:30:26 +00:00
display: flex;
flex: auto;
}
.tlui-document-name__input,
.tlui-document-name__text {
padding: var(--space-2) var(--space-3);
white-space: pre;
line-height: 24px;
min-width: 62px;
}
.tlui-document-name__input {
position: absolute;
top bar design tweaks (#3205) For a while, there've been a couple design issues with our top bar that have been bothering me: ![image](https://github.com/tldraw/tldraw/assets/1489520/55355b7c-7ff2-4843-841c-5e53cbd788b2) This diff: - Makes the document title and share button have the same height and vertical alignment - Vertically centers the share button between the top of the viewport and the share panel - Aligns the right of the share button to the right of the style panel <img width="1512" alt="Screenshot 2024-03-18 at 16 08 09" src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e"> <img width="1512" alt="Screenshot 2024-03-18 at 16 08 18" src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67"> Also tweaking some of the spacing and radiuses around the document title itself to get things ✨pixel perfect✨ Before: <img width="395" alt="Screenshot 2024-03-19 at 15 23 05" src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394"> After: <img width="378" alt="Screenshot 2024-03-19 at 15 22 27" src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1"> ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
2024-03-19 15:29:01 +00:00
padding: var(--space-1) var(--space-3);
margin-top: 2px;
Allow users to set document name and use it for exporting / saving (#2685) Adds the ability to change document names in the top center part of the UI. This mostly brings back the functionality we already had in the past. This is basically a port of what @SomeHats did a while back. I changed the dropdown options and removed some of the things (we are not dealing with network requests directly so some of that logic did not apply any longer). We did have autosave back then, not sure if we want to bring that back? Changes the `exportAs` api, thus braking. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [x] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Top center should now show a new UI element. It has a dropdown with a few actions. 2. Double clicking the name should also start editing it. 3. The name should also be respected when exporting things. Not if you select some shapes or a frame. In that case we still use the old names. But if you don't have anything selected and then export / save a project it should have the document name. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Allow users to name their documents.
2024-02-19 12:30:26 +00:00
width: 100%;
border-radius: var(--radius-2);
color: var(--color-text);
background: transparent;
}
.tlui-document-name__input:focus {
box-shadow: inset 0px 0px 0px 1px var(--color-selected);
border: none;
}
.tlui-document-name__text {
width: 100%;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tlui-document-name__text__hidden {
opacity: 0;
pointer-events: none;
}
.tlui-document-name__menu {
top bar design tweaks (#3205) For a while, there've been a couple design issues with our top bar that have been bothering me: ![image](https://github.com/tldraw/tldraw/assets/1489520/55355b7c-7ff2-4843-841c-5e53cbd788b2) This diff: - Makes the document title and share button have the same height and vertical alignment - Vertically centers the share button between the top of the viewport and the share panel - Aligns the right of the share button to the right of the style panel <img width="1512" alt="Screenshot 2024-03-18 at 16 08 09" src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e"> <img width="1512" alt="Screenshot 2024-03-18 at 16 08 18" src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67"> Also tweaking some of the spacing and radiuses around the document title itself to get things ✨pixel perfect✨ Before: <img width="395" alt="Screenshot 2024-03-19 at 15 23 05" src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394"> After: <img width="378" alt="Screenshot 2024-03-19 at 15 22 27" src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1"> ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
2024-03-19 15:29:01 +00:00
width: 36px;
min-width: 36px;
height: 36px;
Allow users to set document name and use it for exporting / saving (#2685) Adds the ability to change document names in the top center part of the UI. This mostly brings back the functionality we already had in the past. This is basically a port of what @SomeHats did a while back. I changed the dropdown options and removed some of the things (we are not dealing with network requests directly so some of that logic did not apply any longer). We did have autosave back then, not sure if we want to bring that back? Changes the `exportAs` api, thus braking. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [x] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Top center should now show a new UI element. It has a dropdown with a few actions. 2. Double clicking the name should also start editing it. 3. The name should also be respected when exporting things. Not if you select some shapes or a frame. In that case we still use the old names. But if you don't have anything selected and then export / save a project it should have the document name. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Allow users to name their documents.
2024-02-19 12:30:26 +00:00
}
Reference in a new issue Copy permalink