b3d6af4454
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.
387 lines
7.2 KiB
CSS
387 lines
7.2 KiB
CSS
/* ------------------ Da Share Zone ----------------- */
|
|
|
|
.tlui-style-panel__wrapper {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tlui-share-zone {
|
|
padding: 0px 0px 0px 0px;
|
|
display: flex;
|
|
height: 40px;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
z-index: var(--layer-panels);
|
|
align-items: center;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.tlui-share-zone__button-wrapper {
|
|
all: unset;
|
|
padding: 2px;
|
|
position: relative;
|
|
pointer-events: all;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tlui-share-zone__button {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
height: 36px;
|
|
border: 2px solid var(--color-background);
|
|
border-radius: 8px;
|
|
background-color: var(--color-selected);
|
|
color: var(--color-selected-contrast);
|
|
text-shadow: none;
|
|
pointer-events: all;
|
|
position: relative;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tlui-share-zone__button::before {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
inset: 0px;
|
|
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-people-menu__avatars-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
border-radius: var(--radius-1);
|
|
padding-right: 1px;
|
|
height: 36px;
|
|
}
|
|
|
|
.tlui-people-menu__avatars {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tlui-people-menu__avatar {
|
|
height: 28px;
|
|
width: 28px;
|
|
border: 2px solid var(--color-background);
|
|
background-color: var(--color-low);
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: var(--color-selected-contrast);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tlui-people-menu__avatar:nth-of-type(n + 2) {
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.tlui-people-menu__avatars-button[data-state='open'] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
border-color: var(--color-low);
|
|
}
|
|
}
|
|
|
|
.tlui-people-menu__more {
|
|
min-width: 0px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-text-1);
|
|
font-family: inherit;
|
|
padding: 0px 4px;
|
|
letter-spacing: 1.5;
|
|
}
|
|
.tlui-people-menu__more::after {
|
|
border-radius: var(--radius-2);
|
|
inset: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 220px;
|
|
height: fit-content;
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.tlui-people-menu__section {
|
|
position: relative;
|
|
touch-action: auto;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
touch-action: auto;
|
|
}
|
|
|
|
.tlui-people-menu__section:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-divider);
|
|
}
|
|
|
|
.tlui-people-menu__user {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.tlui-people-menu__user__color-picker {
|
|
z-index: var(--layer-overlays);
|
|
}
|
|
|
|
.tlui-people-menu__user__color {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tlui-people-menu__user__name {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
color: var(--color-text-1);
|
|
max-width: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 100;
|
|
}
|
|
|
|
.tlui-people-menu__user__label {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
color: var(--color-text-3);
|
|
flex-grow: 100;
|
|
flex-shrink: 0;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.tlui-people-menu__user__input {
|
|
flex-grow: 2;
|
|
height: 100%;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__user > .tlui-input__wrapper {
|
|
width: auto;
|
|
display: flex;
|
|
align-items: auto;
|
|
flex-grow: 2;
|
|
gap: 8px;
|
|
height: 100%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.tlui-people-menu__item__button {
|
|
padding: 0 11px;
|
|
}
|
|
|
|
.tlui-people-menu__item > .tlui-button__menu {
|
|
width: auto;
|
|
display: flex;
|
|
align-items: auto;
|
|
justify-content: flex-start;
|
|
flex-grow: 2;
|
|
gap: 11px;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow {
|
|
min-width: 44px;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow[data-active='true'] .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow:focus-visible .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tlui-people-menu__item__follow .tlui-icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow:hover .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.tlui-layout[data-breakpoint='0'] .tlui-offline-indicator {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 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;
|
|
height: 40px;
|
|
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;
|
|
max-width: calc(100% - 40px);
|
|
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;
|
|
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 {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.tlui-document-name__input__wrapper:focus-within + .tlui-document-name__menu::after {
|
|
/* when the input is focused, its outline is flush against the menu button which doesn't look
|
|
good. This shifts the left-hand edge of the menu button over by 2px to give it a little
|
|
breathing room when the input is focused. */
|
|
width: calc(100% - 10px);
|
|
}
|