mirror of
https://github.com/penpot/penpot.git
synced 2025-07-25 23:37:20 +02:00
♻️ Remove new-css-system from workspace header
This commit is contained in:
Eva
Alonso Torres
parent
c707539f6f
commit
412343f3de
15 changed files with 677 additions and 2184 deletions
|
|
@ -613,13 +613,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortcut {
|
.shortcut-base {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
gap: $s-2;
|
gap: $s-2;
|
||||||
color: var(--menu-shortcut-foreground-color);
|
color: var(--menu-shortcut-foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortcut-key {
|
.shortcut-key-base {
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
height: $s-20;
|
height: $s-20;
|
||||||
|
|
@ -787,7 +787,7 @@
|
||||||
background-color: var(--menu-background-color);
|
background-color: var(--menu-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item {
|
.menu-item-base {
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,6 @@
|
||||||
@import "main/partials/viewer";
|
@import "main/partials/viewer";
|
||||||
@import "main/partials/viewer-header";
|
@import "main/partials/viewer-header";
|
||||||
@import "main/partials/viewer-thumbnails";
|
@import "main/partials/viewer-thumbnails";
|
||||||
@import "main/partials/zoom-widget";
|
|
||||||
@import "main/partials/activity-bar";
|
@import "main/partials/activity-bar";
|
||||||
@import "main/partials/color-palette";
|
@import "main/partials/color-palette";
|
||||||
@import "main/partials/text-palette";
|
@import "main/partials/text-palette";
|
||||||
|
|
@ -84,7 +83,6 @@
|
||||||
@import "main/partials/tool-bar";
|
@import "main/partials/tool-bar";
|
||||||
@import "main/partials/user-settings";
|
@import "main/partials/user-settings";
|
||||||
@import "main/partials/workspace";
|
@import "main/partials/workspace";
|
||||||
@import "main/partials/workspace-header";
|
|
||||||
@import "main/partials/comments";
|
@import "main/partials/comments";
|
||||||
@import "main/partials/color-bullet";
|
@import "main/partials/color-bullet";
|
||||||
@import "main/partials/inspect";
|
@import "main/partials/inspect";
|
||||||
|
|
|
||||||
|
|
@ -1786,221 +1786,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Export multiple
|
|
||||||
|
|
||||||
.export-progress-modal-overlay {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
position: fixed;
|
|
||||||
right: 1rem;
|
|
||||||
top: 3rem;
|
|
||||||
padding: 16px 18px;
|
|
||||||
background-color: $color-white;
|
|
||||||
border: 1px solid $color-gray-20;
|
|
||||||
border-radius: $br3;
|
|
||||||
z-index: 1000;
|
|
||||||
|
|
||||||
&.transparent {
|
|
||||||
background-color: rgba($color-white, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-progress-modal-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-progress-modal-header {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: stretch;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
|
|
||||||
.modal-close-button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 2px 0;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-progress-modal-title {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
color: $color-black;
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: $fs16;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
color: $color-gray-30;
|
|
||||||
font-size: $fs16;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-right: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.retry {
|
|
||||||
font-size: $fs12;
|
|
||||||
margin-right: 16px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-multiple-dialog {
|
|
||||||
.modal-content {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 0 0.5rem 0rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
flex-grow: 0;
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 0px 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 50px;
|
|
||||||
|
|
||||||
&.image {
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid $color-gray-10;
|
|
||||||
border-radius: $br3;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
height: 32px;
|
|
||||||
margin: 0 8px;
|
|
||||||
width: 32px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: 20px;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.check {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 18px;
|
|
||||||
padding: 0;
|
|
||||||
width: 30px;
|
|
||||||
svg {
|
|
||||||
fill: $color-white;
|
|
||||||
max-width: 18px;
|
|
||||||
max-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .checked {
|
|
||||||
svg {
|
|
||||||
background-color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .intermediate,
|
|
||||||
.unchecked {
|
|
||||||
svg {
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.title {
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: $fs12;
|
|
||||||
color: $color-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.name {
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: $fs16;
|
|
||||||
color: $color-black;
|
|
||||||
width: 45%;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.scale {
|
|
||||||
width: 6.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.scale,
|
|
||||||
&.extension {
|
|
||||||
color: $color-gray-30;
|
|
||||||
font-size: $fs12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid $color-gray-10;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 32px;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.field {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 3rem;
|
|
||||||
margin: 0 0.5rem 0 2rem;
|
|
||||||
width: calc(100% - 2.5rem);
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
border-top: 1px solid $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-selection {
|
|
||||||
padding: 2rem 1rem 2rem 2rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
color: $color-primary-dark;
|
|
||||||
float: right;
|
|
||||||
margin-left: 4rem;
|
|
||||||
width: 176px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-size: $fs12;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $color-gray-40;
|
|
||||||
font-size: $fs16;
|
|
||||||
padding: 1rem 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-graphics-dialog {
|
.remove-graphics-dialog {
|
||||||
.modal-content {
|
.modal-content {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
|
|
||||||
|
|
@ -1,364 +0,0 @@
|
||||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
//
|
|
||||||
// Copyright (c) KALEIDOS INC
|
|
||||||
|
|
||||||
.workspace-header {
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-gray-50;
|
|
||||||
border-bottom: 1px solid $color-gray-60;
|
|
||||||
display: flex;
|
|
||||||
padding: $size-1 $size-4 $size-1 55px;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: "left center right";
|
|
||||||
grid-template-columns: 1fr auto 1fr;
|
|
||||||
grid-template-rows: 100%;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.left-area {
|
|
||||||
grid-area: left;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-area {
|
|
||||||
grid-area: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-area {
|
|
||||||
grid-area: right;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-icon {
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-gray-60;
|
|
||||||
border-bottom: 1px solid $color-gray-50;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
width: 48px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
height: 30px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-30;
|
|
||||||
height: 30px;
|
|
||||||
width: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-section {
|
|
||||||
margin-left: 1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shared-badge {
|
|
||||||
margin-left: $size-1;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-section {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-section {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
padding-right: 1rem;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin-left: $size-5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-dropdown {
|
|
||||||
top: 45px;
|
|
||||||
left: 98px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-tree {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
margin-left: $size-1;
|
|
||||||
padding: $size-1;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: $size-2;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-white;
|
|
||||||
font-size: $fs14;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.project-name {
|
|
||||||
color: $color-gray-20;
|
|
||||||
margin-right: $size-1;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid $color-gray-10;
|
|
||||||
background: $color-gray-50;
|
|
||||||
color: $color-gray-10;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
&:focus,
|
|
||||||
&:focus-within {
|
|
||||||
outline: none;
|
|
||||||
border-radius: $br3;
|
|
||||||
border: 1px solid $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 40px;
|
|
||||||
left: 40px;
|
|
||||||
width: 195px;
|
|
||||||
z-index: 12;
|
|
||||||
|
|
||||||
background-color: $color-white;
|
|
||||||
border-radius: $br3;
|
|
||||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
||||||
|
|
||||||
:first-child {
|
|
||||||
&:hover {
|
|
||||||
border-radius: $br3 $br3 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:last-child {
|
|
||||||
&:hover {
|
|
||||||
border-radius: 0 0 $br3 $br3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: $fs14;
|
|
||||||
padding: $size-2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-gray-60;
|
|
||||||
margin: 0 $size-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
border-top: 1px solid $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-menu {
|
|
||||||
position: absolute;
|
|
||||||
left: 238px;
|
|
||||||
width: 270px;
|
|
||||||
z-index: 12;
|
|
||||||
background-color: $color-white;
|
|
||||||
border-radius: $br3;
|
|
||||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
||||||
|
|
||||||
:first-child {
|
|
||||||
&:hover {
|
|
||||||
border-radius: $br3 $br3 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:last-child {
|
|
||||||
&:hover {
|
|
||||||
border-radius: 0 0 $br3 $br3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.file {
|
|
||||||
top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.edit {
|
|
||||||
top: 77px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.view {
|
|
||||||
top: 114px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.preferences {
|
|
||||||
top: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.help-info {
|
|
||||||
top: 186px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: $fs14;
|
|
||||||
padding: $size-2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-gray-60;
|
|
||||||
margin: 0 $size-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcut {
|
|
||||||
color: $color-gray-20;
|
|
||||||
font-size: $fs12;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.separator {
|
|
||||||
border-top: 1px solid $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-users {
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-left: $size-2;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 3px solid #f3dd14;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 25px;
|
|
||||||
width: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& button.document-history {
|
|
||||||
background: $color-gray-60;
|
|
||||||
border-radius: $br3;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 24px;
|
|
||||||
padding: 3px;
|
|
||||||
width: 24px;
|
|
||||||
|
|
||||||
& svg {
|
|
||||||
width: 18px;
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-progress-widget {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.persistence-status-widget {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 150px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
.label {
|
|
||||||
color: $color-danger;
|
|
||||||
}
|
|
||||||
.icon svg {
|
|
||||||
fill: $color-danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pending {
|
|
||||||
.label {
|
|
||||||
color: $color-warning;
|
|
||||||
}
|
|
||||||
.icon svg {
|
|
||||||
fill: $color-warning;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: $color-gray-30;
|
|
||||||
font-size: $fs14;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
fill: $color-gray-30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -57,10 +57,6 @@ $height-palette-max: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.workspace-loader {
|
|
||||||
grid-area: viewport;
|
|
||||||
}
|
|
||||||
|
|
||||||
.workspace-content {
|
.workspace-content {
|
||||||
grid-area: viewport;
|
grid-area: viewport;
|
||||||
}
|
}
|
||||||
|
|
@ -156,15 +152,15 @@ $height-palette-max: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.workspace-loader {
|
// .workspace-loader {
|
||||||
display: flex;
|
// display: flex;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
|
|
||||||
svg {
|
// svg {
|
||||||
fill: $color-gray-50;
|
// fill: $color-gray-50;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.workspace-content {
|
.workspace-content {
|
||||||
background-color: $color-canvas;
|
background-color: $color-canvas;
|
||||||
|
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
.zoom-widget {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-gray-10;
|
|
||||||
font-size: $fs14;
|
|
||||||
margin-left: $size-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon svg {
|
|
||||||
fill: $color-gray-10;
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 25px;
|
|
||||||
width: 210px;
|
|
||||||
z-index: 12;
|
|
||||||
|
|
||||||
background-color: $color-white;
|
|
||||||
border-radius: $br3;
|
|
||||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
||||||
|
|
||||||
li {
|
|
||||||
color: $color-gray-60;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: $fs14;
|
|
||||||
display: flex;
|
|
||||||
padding: $size-2;
|
|
||||||
|
|
||||||
&.separator {
|
|
||||||
border-top: 1px solid $color-gray-10;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 2px;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.basic-zoom-bar {
|
|
||||||
cursor: auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-gray-20;
|
|
||||||
font-size: $fs14;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
&.zoom-btns {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 2px;
|
|
||||||
color: $color-gray-60;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: $fs14;
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: $color-white;
|
|
||||||
border: none;
|
|
||||||
&:hover {
|
|
||||||
color: $color-primary-darker;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.reset-btn {
|
|
||||||
color: $color-primary-dark;
|
|
||||||
}
|
|
||||||
.zoom-size {
|
|
||||||
min-width: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -26,8 +26,7 @@
|
||||||
|
|
||||||
(mf/defc export-multiple-dialog
|
(mf/defc export-multiple-dialog
|
||||||
[{:keys [exports title cmd no-selection]}]
|
[{:keys [exports title cmd no-selection]}]
|
||||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
(let [lstate (mf/deref refs/export)
|
||||||
lstate (mf/deref refs/export)
|
|
||||||
in-progress? (:in-progress lstate)
|
in-progress? (:in-progress lstate)
|
||||||
|
|
||||||
exports (mf/use-state exports)
|
exports (mf/use-state exports)
|
||||||
|
|
@ -67,139 +66,53 @@
|
||||||
(swap! exports (fn [exports]
|
(swap! exports (fn [exports]
|
||||||
(mapv #(assoc % :enabled (not all-checked?)) exports))))]
|
(mapv #(assoc % :enabled (not all-checked?)) exports))))]
|
||||||
|
|
||||||
(if new-css-system
|
[:div {:class (stl/css :modal-overlay)}
|
||||||
[:div {:class (stl/css :modal-overlay)}
|
[:div {:class (stl/css-case :modal-container true
|
||||||
[:div {:class (stl/css-case :modal-container true
|
:empty (empty? all-exports))}
|
||||||
:empty (empty? all-exports))}
|
|
||||||
|
|
||||||
[:div {:class (stl/css :modal-header)}
|
[:div {:class (stl/css :modal-header)}
|
||||||
[:h2 {:class (stl/css :modal-title)} title]
|
[:h2 {:class (stl/css :modal-title)} title]
|
||||||
[:button {:class (stl/css :modal-close-btn)
|
[:button {:class (stl/css :modal-close-btn)
|
||||||
:on-click cancel-fn}
|
:on-click cancel-fn}
|
||||||
i/close-refactor]]
|
i/close-refactor]]
|
||||||
|
|
||||||
[:*
|
[:*
|
||||||
[:div {:class (stl/css :modal-content)}
|
[:div {:class (stl/css :modal-content)}
|
||||||
(if (> (count all-exports) 0)
|
(if (> (count all-exports) 0)
|
||||||
[:*
|
[:*
|
||||||
[:div {:class (stl/css :selection-header)}
|
[:div {:class (stl/css :selection-header)}
|
||||||
[:button {:class (stl/css :selection-btn)
|
[:button {:class (stl/css :selection-btn)
|
||||||
:on-click change-all}
|
:on-click change-all}
|
||||||
[:span {:class (stl/css :checkbox-wrapper)}
|
[:span {:class (stl/css :checkbox-wrapper)}
|
||||||
(cond
|
(cond
|
||||||
all-checked? [:span {:class (stl/css-case :checkobox-tick true
|
all-checked? [:span {:class (stl/css-case :checkobox-tick true
|
||||||
:global/checked true)} i/tick-refactor]
|
:global/checked true)} i/tick-refactor]
|
||||||
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
|
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
|
||||||
:global/uncheked true)}]
|
:global/uncheked true)}]
|
||||||
:else [:span {:class (stl/css-case :checkobox-tick true
|
:else [:span {:class (stl/css-case :checkobox-tick true
|
||||||
:global/intermediate true)} i/remove-refactor])]]
|
:global/intermediate true)} i/remove-refactor])]]
|
||||||
[:div {:class (stl/css :selection-title)}
|
[:div {:class (stl/css :selection-title)}
|
||||||
(tr "dashboard.export-multiple.selected"
|
(tr "dashboard.export-multiple.selected"
|
||||||
(c (count enabled-exports))
|
(c (count enabled-exports))
|
||||||
(c (count all-exports)))]]
|
(c (count all-exports)))]]
|
||||||
[:div {:class (stl/css :selection-wrapper)}
|
[:div {:class (stl/css :selection-wrapper)}
|
||||||
[:div {:class (stl/css-case :selection-list true
|
[:div {:class (stl/css-case :selection-list true
|
||||||
:selection-shadow (> (count all-exports) 8))}
|
:selection-shadow (> (count all-exports) 8))}
|
||||||
(for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
|
(for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
|
||||||
(let [{:keys [x y width height]} (:selrect shape)]
|
(let [{:keys [x y width height]} (:selrect shape)]
|
||||||
[:div {:class (stl/css :selection-row)
|
[:div {:class (stl/css :selection-row)
|
||||||
:key (:id shape)}
|
:key (:id shape)}
|
||||||
[:button {:class (stl/css :selection-btn)
|
[:button {:class (stl/css :selection-btn)
|
||||||
:data-value index
|
:data-value index
|
||||||
:on-click on-toggle-enabled}
|
:on-click on-toggle-enabled}
|
||||||
[:span {:class (stl/css :checkbox-wrapper)}
|
[:span {:class (stl/css :checkbox-wrapper)}
|
||||||
(if (:enabled export)
|
|
||||||
[:span {:class (stl/css-case :checkobox-tick true
|
|
||||||
:global/checked true)} i/tick-refactor]
|
|
||||||
[:span {:class (stl/css-case :checkobox-tick true
|
|
||||||
:global/uncheked true)}])]
|
|
||||||
|
|
||||||
[:div {:class (stl/css :image-wrapper)}
|
|
||||||
(if (some? (:thumbnail shape))
|
|
||||||
[:img {:src (:thumbnail shape)}]
|
|
||||||
[:svg {:view-box (dm/str x " " y " " width " " height)
|
|
||||||
:width 24
|
|
||||||
:height 20
|
|
||||||
:version "1.1"
|
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
||||||
;; Fix Chromium bug about color of html texts
|
|
||||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
|
||||||
:style {:-webkit-print-color-adjust :exact}
|
|
||||||
:fill "none"}
|
|
||||||
|
|
||||||
[:& shape-wrapper {:shape shape}]])]
|
|
||||||
|
|
||||||
[:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))]
|
|
||||||
(when (:scale export)
|
|
||||||
[:div {:class (stl/css :selection-scale)}
|
|
||||||
(dm/str (ust/format-precision (* width (:scale export)) 2) "px"
|
|
||||||
(ust/format-precision (* height (:scale export)) 2) "px")])
|
|
||||||
|
|
||||||
(when (:type export)
|
|
||||||
[:div {:class (stl/css :selection-extension)}
|
|
||||||
(-> export :type d/name str/upper)])]]))]]]
|
|
||||||
|
|
||||||
[:& no-selection])]
|
|
||||||
|
|
||||||
(when (> (count all-exports) 0)
|
|
||||||
[:div {:class (stl/css :modal-footer)}
|
|
||||||
[:div {:class (stl/css :action-buttons)}
|
|
||||||
[:input
|
|
||||||
{:class (stl/css :cancel-button)
|
|
||||||
:type "button"
|
|
||||||
:value (tr "labels.cancel")
|
|
||||||
:on-click cancel-fn}]
|
|
||||||
|
|
||||||
[:input {:class (stl/css-case :accept-btn true
|
|
||||||
:btn-disabled (or in-progress? all-unchecked?))
|
|
||||||
:disabled (or in-progress? all-unchecked?)
|
|
||||||
:type "button"
|
|
||||||
:value (if in-progress?
|
|
||||||
(tr "workspace.options.exporting-object")
|
|
||||||
(tr "labels.export"))
|
|
||||||
:on-click (when-not in-progress? accept-fn)}]]])]]]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[:div.modal-overlay
|
|
||||||
[:div.modal-container.export-multiple-dialog
|
|
||||||
{:class (when (empty? all-exports) "empty")}
|
|
||||||
|
|
||||||
[:div.modal-header
|
|
||||||
[:div.modal-header-title
|
|
||||||
[:h2 title]]
|
|
||||||
|
|
||||||
[:div.modal-close-button
|
|
||||||
{:on-click cancel-fn} i/close]]
|
|
||||||
|
|
||||||
[:*
|
|
||||||
[:div.modal-content
|
|
||||||
(if (> (count all-exports) 0)
|
|
||||||
[:*
|
|
||||||
|
|
||||||
|
|
||||||
[:div.header
|
|
||||||
[:div.field.check {:on-click change-all}
|
|
||||||
(cond
|
|
||||||
all-checked? [:span.checked i/checkbox-checked]
|
|
||||||
all-unchecked? [:span.unchecked i/checkbox-unchecked]
|
|
||||||
:else [:span.intermediate i/checkbox-intermediate])]
|
|
||||||
[:div.field.title (tr "dashboard.export-multiple.selected"
|
|
||||||
(c (count enabled-exports))
|
|
||||||
(c (count all-exports)))]]
|
|
||||||
|
|
||||||
[:div.body
|
|
||||||
(for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
|
|
||||||
(let [{:keys [x y width height]} (:selrect shape)]
|
|
||||||
[:div.row
|
|
||||||
[:div.field.check {:data-value index
|
|
||||||
:on-click on-toggle-enabled}
|
|
||||||
(if (:enabled export)
|
(if (:enabled export)
|
||||||
[:span.checked i/checkbox-checked]
|
[:span {:class (stl/css-case :checkobox-tick true
|
||||||
[:span.unchecked i/checkbox-unchecked])]
|
:global/checked true)} i/tick-refactor]
|
||||||
|
[:span {:class (stl/css-case :checkobox-tick true
|
||||||
|
:global/uncheked true)}])]
|
||||||
|
|
||||||
[:div.field.image
|
[:div {:class (stl/css :image-wrapper)}
|
||||||
(if (some? (:thumbnail shape))
|
(if (some? (:thumbnail shape))
|
||||||
[:img {:src (:thumbnail shape)}]
|
[:img {:src (:thumbnail shape)}]
|
||||||
[:svg {:view-box (dm/str x " " y " " width " " height)
|
[:svg {:view-box (dm/str x " " y " " width " " height)
|
||||||
|
|
@ -208,59 +121,51 @@
|
||||||
:version "1.1"
|
:version "1.1"
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
;; Fix Chromium bug about color of html texts
|
;; Fix Chromium bug about color of html texts
|
||||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
||||||
:style {:-webkit-print-color-adjust :exact}
|
:style {:-webkit-print-color-adjust :exact}
|
||||||
:fill "none"}
|
:fill "none"}
|
||||||
|
|
||||||
[:& shape-wrapper {:shape shape}]])]
|
[:& shape-wrapper {:shape shape}]])]
|
||||||
|
|
||||||
[:div.field.name (cond-> (:name shape) suffix (str suffix))]
|
[:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))]
|
||||||
(when (:scale export)
|
(when (:scale export)
|
||||||
[:div.field.scale (dm/str (ust/format-precision (* width (:scale export)) 2) "px"
|
[:div {:class (stl/css :selection-scale)}
|
||||||
(ust/format-precision (* height (:scale export)) 2) "px ")])
|
(dm/str (ust/format-precision (* width (:scale export)) 2) "px"
|
||||||
|
(ust/format-precision (* height (:scale export)) 2) "px")])
|
||||||
|
|
||||||
(when (:type export)
|
(when (:type export)
|
||||||
[:div.field.extension (-> export :type d/name str/upper)])]))]
|
[:div {:class (stl/css :selection-extension)}
|
||||||
|
(-> export :type d/name str/upper)])]]))]]]
|
||||||
|
|
||||||
[:div.modal-footer
|
[:& no-selection])]
|
||||||
[:div.action-buttons
|
|
||||||
[:input.cancel-button
|
|
||||||
{:type "button"
|
|
||||||
:value (tr "labels.cancel")
|
|
||||||
:on-click cancel-fn}]
|
|
||||||
|
|
||||||
[:input.accept-button.primary
|
(when (> (count all-exports) 0)
|
||||||
{:class (dom/classnames
|
[:div {:class (stl/css :modal-footer)}
|
||||||
:btn-disabled (or in-progress? all-unchecked?))
|
[:div {:class (stl/css :action-buttons)}
|
||||||
:disabled (or in-progress? all-unchecked?)
|
[:input
|
||||||
:type "button"
|
{:class (stl/css :cancel-button)
|
||||||
:value (if in-progress?
|
:type "button"
|
||||||
(tr "workspace.options.exporting-object")
|
:value (tr "labels.cancel")
|
||||||
(tr "labels.export"))
|
:on-click cancel-fn}]
|
||||||
:on-click (when-not in-progress? accept-fn)}]]]]
|
|
||||||
|
|
||||||
[:& no-selection])]]]])))
|
[:input {:class (stl/css-case :accept-btn true
|
||||||
|
:btn-disabled (or in-progress? all-unchecked?))
|
||||||
|
:disabled (or in-progress? all-unchecked?)
|
||||||
|
:type "button"
|
||||||
|
:value (if in-progress?
|
||||||
|
(tr "workspace.options.exporting-object")
|
||||||
|
(tr "labels.export"))
|
||||||
|
:on-click (when-not in-progress? accept-fn)}]]])]]]))
|
||||||
|
|
||||||
(mf/defc shapes-no-selection []
|
(mf/defc shapes-no-selection []
|
||||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
[:div {:class (stl/css :no-selection)}
|
||||||
(if new-css-system
|
[:p {:class (stl/css :modal-msg)} (tr "dashboard.export-shapes.no-elements")]
|
||||||
[:div {:class (stl/css :no-selection)}
|
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export-shapes.how-to")]
|
||||||
[:p {:class (stl/css :modal-msg)}(tr "dashboard.export-shapes.no-elements")]
|
[:a {:target "_blank"
|
||||||
[:p {:class (stl/css :modal-scd-msg)}(tr "dashboard.export-shapes.how-to")]
|
:class (stl/css :modal-link)
|
||||||
[:a {:target "_blank"
|
:href "https://help.penpot.app/user-guide/exporting/ "}
|
||||||
:class (stl/css :modal-link)
|
(tr "dashboard.export-shapes.how-to-link")]])
|
||||||
:href "https://help.penpot.app/user-guide/exporting/ "}
|
|
||||||
(tr "dashboard.export-shapes.how-to-link")]]
|
|
||||||
|
|
||||||
|
|
||||||
[:div.no-selection
|
|
||||||
[:img {:src "images/export-no-shapes.png" :border "0"}]
|
|
||||||
[:p (tr "dashboard.export-shapes.no-elements")]
|
|
||||||
[:p (tr "dashboard.export-shapes.how-to")]
|
|
||||||
[:p [:a {:target "_blank"
|
|
||||||
:href "https://help.penpot.app/user-guide/exporting/ "}
|
|
||||||
(tr "dashboard.export-shapes.how-to-link")]]])))
|
|
||||||
|
|
||||||
(mf/defc export-shapes-dialog
|
(mf/defc export-shapes-dialog
|
||||||
{::mf/register modal/components
|
{::mf/register modal/components
|
||||||
|
|
@ -323,38 +228,10 @@
|
||||||
toggle-detail-visibility
|
toggle-detail-visibility
|
||||||
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
|
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
|
||||||
|
|
||||||
(if new-css-system
|
[*
|
||||||
(when detail-visible?
|
|
||||||
[:div {:class (stl/css :export-progress-modal-overlay)}
|
|
||||||
[:div {:class (stl/css :export-progress-modal-container)}
|
|
||||||
[:div {:class (stl/css :export-progress-modal-header)}
|
|
||||||
[:p {:class (stl/css :export-progress-modal-title)}
|
|
||||||
[:span {:class (stl/css :title-text)}
|
|
||||||
title]
|
|
||||||
(if error?
|
|
||||||
[:button {:class (stl/css :retry-btn)
|
|
||||||
:on-click retry-last-export} (tr "workspace.options.retry")]
|
|
||||||
[:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
|
|
||||||
|
|
||||||
[:button {:class (stl/css :modal-close-button)
|
|
||||||
:on-click toggle-detail-visibility} i/close-refactor]]
|
|
||||||
|
|
||||||
[:svg {:class (stl/css :progress-bar)
|
|
||||||
:height 5 :width 280}
|
|
||||||
[:g
|
|
||||||
[:path {:d "M0 0 L280 0"
|
|
||||||
:stroke clr/black
|
|
||||||
:stroke-width 30}]
|
|
||||||
[:path {:d (dm/str "M0 0 L280 0")
|
|
||||||
:stroke color
|
|
||||||
:stroke-width 30
|
|
||||||
:fill "transparent"
|
|
||||||
:stroke-dasharray 280
|
|
||||||
:stroke-dashoffset (- 280 pwidth)
|
|
||||||
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])
|
|
||||||
[:*
|
|
||||||
(when widget-visible?
|
(when widget-visible?
|
||||||
[:div.export-progress-widget {:on-click toggle-detail-visibility}
|
[:div {:class (stl/css :export-progress-widget)
|
||||||
|
:on-click toggle-detail-visibility}
|
||||||
[:svg {:width "32" :height "32"}
|
[:svg {:width "32" :height "32"}
|
||||||
[:circle {:r "12"
|
[:circle {:r "12"
|
||||||
:cx "16"
|
:cx "16"
|
||||||
|
|
@ -373,21 +250,27 @@
|
||||||
:transform "rotate(-90 16,16)"
|
:transform "rotate(-90 16,16)"
|
||||||
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
|
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
|
||||||
|
|
||||||
|
|
||||||
(when detail-visible?
|
(when detail-visible?
|
||||||
[:div.export-progress-modal-overlay
|
[:div {:class (stl/css :export-progress-modal-overlay)}
|
||||||
[:div.export-progress-modal-container
|
[:div {:class (stl/css :export-progress-modal-container)}
|
||||||
[:div.export-progress-modal-header
|
[:div {:class (stl/css :export-progress-modal-header)}
|
||||||
[:p.export-progress-modal-title title]
|
[:p {:class (stl/css :export-progress-modal-title)}
|
||||||
(if error?
|
[:span {:class (stl/css :title-text)}
|
||||||
[:button.btn-secondary.retry {:on-click retry-last-export} (tr "workspace.options.retry")]
|
title]
|
||||||
[:p.progress (dm/str progress " / " total)])
|
(if error?
|
||||||
|
[:button {:class (stl/css :retry-btn)
|
||||||
|
:on-click retry-last-export} (tr "workspace.options.retry")]
|
||||||
|
[:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
|
||||||
|
|
||||||
[:button.modal-close-button {:on-click toggle-detail-visibility} i/close]]
|
[:button {:class (stl/css :modal-close-button)
|
||||||
|
:on-click toggle-detail-visibility} i/close-refactor]]
|
||||||
|
|
||||||
[:svg.progress-bar {:height 8 :width 280}
|
[:svg {:class (stl/css :progress-bar)
|
||||||
|
:height 5 :width 280}
|
||||||
[:g
|
[:g
|
||||||
[:path {:d "M0 0 L280 0"
|
[:path {:d "M0 0 L280 0"
|
||||||
:stroke clr/gray-10
|
:stroke clr/black
|
||||||
:stroke-width 30}]
|
:stroke-width 30}]
|
||||||
[:path {:d (dm/str "M0 0 L280 0")
|
[:path {:d (dm/str "M0 0 L280 0")
|
||||||
:stroke color
|
:stroke color
|
||||||
|
|
@ -395,5 +278,5 @@
|
||||||
:fill "transparent"
|
:fill "transparent"
|
||||||
:stroke-dasharray 280
|
:stroke-dasharray 280
|
||||||
:stroke-dashoffset (- 280 pwidth)
|
:stroke-dashoffset (- 280 pwidth)
|
||||||
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])))
|
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,211 +16,217 @@
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
z-index: $z-index-20;
|
z-index: $z-index-20;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.export-progress-modal-container {
|
.export-progress-modal-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.export-progress-modal-header {
|
}
|
||||||
display: flex;
|
.export-progress-modal-header {
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: stretch;
|
align-items: center;
|
||||||
padding: $s-8;
|
justify-content: stretch;
|
||||||
.export-progress-modal-title {
|
padding: $s-8;
|
||||||
display: flex;
|
}
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
.title-text {
|
|
||||||
@include flexCenter;
|
|
||||||
@include titleTipography;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
color: var(--modal-title-foreground-color);
|
|
||||||
padding-left: $s-4;
|
|
||||||
}
|
|
||||||
.progress {
|
|
||||||
@include titleTipography;
|
|
||||||
padding-left: $s-8;
|
|
||||||
margin: 0;
|
|
||||||
color: var(--modal-text-foreground-color);
|
|
||||||
}
|
|
||||||
.retry-btn {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
@include titleTipography;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close-button {
|
.export-progress-modal-title {
|
||||||
@extend .button-tertiary;
|
display: flex;
|
||||||
svg {
|
flex-grow: 1;
|
||||||
@extend .button-icon-small;
|
padding: 0;
|
||||||
stroke: var(--icon-foreground);
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
.title-text {
|
||||||
.progress-bar {
|
@include flexCenter;
|
||||||
margin-top: 0;
|
@include titleTipography;
|
||||||
}
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--modal-title-foreground-color);
|
||||||
|
padding-left: $s-4;
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
@include titleTipography;
|
||||||
|
padding-left: $s-8;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--modal-text-foreground-color);
|
||||||
|
}
|
||||||
|
.retry-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
@include titleTipography;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close-button {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon-small;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.progress-bar {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
@extend .modal-overlay-base;
|
@extend .modal-overlay-base;
|
||||||
&.transparent {
|
&.transparent {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.modal-container {
|
}
|
||||||
@extend .modal-container-base;
|
|
||||||
max-height: calc(10 * $s-80);
|
.modal-container {
|
||||||
.modal-header {
|
@extend .modal-container-base;
|
||||||
margin-bottom: $s-24;
|
max-height: calc(10 * $s-80);
|
||||||
.modal-title {
|
}
|
||||||
@include tabTitleTipography;
|
|
||||||
color: var(--modal-title-foreground-color);
|
.modal-header {
|
||||||
}
|
margin-bottom: $s-24;
|
||||||
.modal-close-btn {
|
}
|
||||||
@extend .modal-close-btn-base;
|
|
||||||
|
.modal-title {
|
||||||
|
@include tabTitleTipography;
|
||||||
|
color: var(--modal-title-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close-btn {
|
||||||
|
@extend .modal-close-btn-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content,
|
||||||
|
.no-selection {
|
||||||
|
@include titleTipography;
|
||||||
|
margin-bottom: $s-24;
|
||||||
|
.modal-hint {
|
||||||
|
@include titleTipography;
|
||||||
|
color: var(--modal-text-foreground-color);
|
||||||
|
}
|
||||||
|
.modal-link {
|
||||||
|
@include titleTipography;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--modal-link-foreground-color);
|
||||||
|
}
|
||||||
|
.selection-header {
|
||||||
|
@include flexRow;
|
||||||
|
height: $s-32;
|
||||||
|
margin-bottom: $s-4;
|
||||||
|
.selection-btn {
|
||||||
|
@include buttonStyle;
|
||||||
|
@extend .input-checkbox;
|
||||||
|
@include flexCenter;
|
||||||
|
height: $s-24;
|
||||||
|
width: $s-24;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: $s-16;
|
||||||
|
span {
|
||||||
|
@extend .checkbox-icon;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-content,
|
.selection-title {
|
||||||
.no-selection {
|
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
margin-bottom: $s-24;
|
}
|
||||||
.modal-hint {
|
}
|
||||||
@include titleTipography;
|
.selection-wrapper {
|
||||||
color: var(--modal-text-foreground-color);
|
position: relative;
|
||||||
}
|
width: 100%;
|
||||||
.modal-link {
|
height: fit-content;
|
||||||
@include titleTipography;
|
}
|
||||||
text-decoration: none;
|
.selection-shadow {
|
||||||
cursor: pointer;
|
width: 100%;
|
||||||
color: var(--modal-link-foreground-color);
|
height: 100%;
|
||||||
}
|
&:after {
|
||||||
.selection-header {
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
|
||||||
|
content: "";
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selection-list {
|
||||||
|
@include flexColumn;
|
||||||
|
max-height: $s-400;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: $s-12;
|
||||||
|
.selection-row {
|
||||||
|
@include flexRow;
|
||||||
|
background-color: var(--entry-background-color);
|
||||||
|
min-height: $s-40;
|
||||||
|
border-radius: $br-8;
|
||||||
|
.selection-btn {
|
||||||
|
@include buttonStyle;
|
||||||
@include flexRow;
|
@include flexRow;
|
||||||
height: $s-32;
|
width: 100%;
|
||||||
margin-bottom: $s-4;
|
height: 10%;
|
||||||
.selection-btn {
|
gap: $s-8;
|
||||||
@include buttonStyle;
|
padding: 0 $s-16;
|
||||||
|
.checkbox-wrapper {
|
||||||
@extend .input-checkbox;
|
@extend .input-checkbox;
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
height: $s-24;
|
height: $s-24;
|
||||||
width: $s-24;
|
width: $s-24;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: $s-16;
|
.checkobox-tick {
|
||||||
span {
|
|
||||||
@extend .checkbox-icon;
|
@extend .checkbox-icon;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.selection-title {
|
.selection-name {
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
|
@include textEllipsis;
|
||||||
|
flex-grow: 1;
|
||||||
|
color: var(--modal-text-foreground-color);
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
.selection-scale {
|
||||||
|
@include titleTipography;
|
||||||
|
@include textEllipsis;
|
||||||
|
min-width: $s-108;
|
||||||
|
padding: $s-12;
|
||||||
|
color: var(--modal-text-foreground-color);
|
||||||
|
}
|
||||||
|
.selection-extension {
|
||||||
|
@include titleTipography;
|
||||||
|
@include textEllipsis;
|
||||||
|
min-width: $s-72;
|
||||||
|
padding: $s-12;
|
||||||
|
color: var(--modal-text-foreground-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.selection-wrapper {
|
.image-wrapper {
|
||||||
position: relative;
|
@include flexCenter;
|
||||||
width: 100%;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
.selection-shadow {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
&:after {
|
min-height: $s-32;
|
||||||
position: absolute;
|
min-width: $s-32;
|
||||||
bottom: 0;
|
background-color: var(--white);
|
||||||
left: 0;
|
border-radius: $br-6;
|
||||||
width: 100%;
|
margin: auto 0;
|
||||||
height: 50px;
|
img,
|
||||||
background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
|
svg {
|
||||||
content: "";
|
object-fit: contain;
|
||||||
pointer-events: none;
|
max-height: $s-40;
|
||||||
}
|
|
||||||
}
|
|
||||||
.selection-list {
|
|
||||||
@include flexColumn;
|
|
||||||
max-height: $s-400;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-bottom: $s-12;
|
|
||||||
.selection-row {
|
|
||||||
@include flexRow;
|
|
||||||
background-color: var(--entry-background-color);
|
|
||||||
min-height: $s-40;
|
|
||||||
border-radius: $br-8;
|
|
||||||
.selection-btn {
|
|
||||||
@include buttonStyle;
|
|
||||||
@include flexRow;
|
|
||||||
width: 100%;
|
|
||||||
height: 10%;
|
|
||||||
gap: $s-8;
|
|
||||||
padding: 0 $s-16;
|
|
||||||
.checkbox-wrapper {
|
|
||||||
@extend .input-checkbox;
|
|
||||||
@include flexCenter;
|
|
||||||
height: $s-24;
|
|
||||||
width: $s-24;
|
|
||||||
padding: 0;
|
|
||||||
.checkobox-tick {
|
|
||||||
@extend .checkbox-icon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.selection-name {
|
|
||||||
@include titleTipography;
|
|
||||||
@include textEllipsis;
|
|
||||||
flex-grow: 1;
|
|
||||||
color: var(--modal-text-foreground-color);
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
.selection-scale {
|
|
||||||
@include titleTipography;
|
|
||||||
@include textEllipsis;
|
|
||||||
min-width: $s-108;
|
|
||||||
padding: $s-12;
|
|
||||||
color: var(--modal-text-foreground-color);
|
|
||||||
}
|
|
||||||
.selection-extension {
|
|
||||||
@include titleTipography;
|
|
||||||
@include textEllipsis;
|
|
||||||
min-width: $s-72;
|
|
||||||
padding: $s-12;
|
|
||||||
color: var(--modal-text-foreground-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.image-wrapper {
|
|
||||||
@include flexCenter;
|
|
||||||
height: 100%;
|
|
||||||
min-height: $s-32;
|
|
||||||
min-width: $s-32;
|
|
||||||
background-color: var(--white);
|
|
||||||
border-radius: $br-6;
|
|
||||||
margin: auto 0;
|
|
||||||
img,
|
|
||||||
svg {
|
|
||||||
object-fit: contain;
|
|
||||||
max-height: $s-40;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal-footer {
|
|
||||||
.action-buttons {
|
|
||||||
@extend .modal-action-btns;
|
|
||||||
.cancel-button {
|
|
||||||
@extend .modal-cancel-btn;
|
|
||||||
}
|
|
||||||
.accept-btn {
|
|
||||||
@extend .modal-accept-btn;
|
|
||||||
&.danger {
|
|
||||||
@extend .modal-danger-btn;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
@extend .modal-action-btns;
|
||||||
|
}
|
||||||
|
.cancel-button {
|
||||||
|
@extend .modal-cancel-btn;
|
||||||
|
}
|
||||||
|
.accept-btn {
|
||||||
|
@extend .modal-accept-btn;
|
||||||
|
&.danger {
|
||||||
|
@extend .modal-danger-btn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.modal-scd-msg,
|
.modal-scd-msg,
|
||||||
.modal-subtitle,
|
.modal-subtitle,
|
||||||
.modal-msg {
|
.modal-msg {
|
||||||
|
|
|
||||||
|
|
@ -283,11 +283,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-option {
|
.zoom-option {
|
||||||
@extend .menu-item;
|
@extend .menu-item-base;
|
||||||
.shortcuts {
|
.shortcuts {
|
||||||
@extend .shortcut;
|
@extend .shortcut-base;
|
||||||
.shortcut-key {
|
.shortcut-key {
|
||||||
@extend .shortcut-key;
|
@extend .shortcut-key-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
;; Copyright (c) KALEIDOS INC
|
;; Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
(ns app.main.ui.workspace
|
(ns app.main.ui.workspace
|
||||||
(:require-macros [app.main.style :refer [css]])
|
(:require-macros [app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.main.data.messages :as msg]
|
[app.main.data.messages :as msg]
|
||||||
|
|
@ -24,7 +24,6 @@
|
||||||
[app.main.ui.workspace.colorpicker]
|
[app.main.ui.workspace.colorpicker]
|
||||||
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
||||||
[app.main.ui.workspace.coordinates :as coordinates]
|
[app.main.ui.workspace.coordinates :as coordinates]
|
||||||
[app.main.ui.workspace.header :refer [header]]
|
|
||||||
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
||||||
[app.main.ui.workspace.libraries]
|
[app.main.ui.workspace.libraries]
|
||||||
[app.main.ui.workspace.nudge]
|
[app.main.ui.workspace.nudge]
|
||||||
|
|
@ -135,10 +134,8 @@
|
||||||
|
|
||||||
(mf/defc workspace-loader
|
(mf/defc workspace-loader
|
||||||
[]
|
[]
|
||||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
[:div {:class (stl/css :workspace-loader)}
|
||||||
[:div {:class (if new-css-system (css :workspace-loader)
|
i/loader-pencil])
|
||||||
(dom/classnames :workspace-loader true))}
|
|
||||||
i/loader-pencil]))
|
|
||||||
|
|
||||||
(mf/defc workspace-page
|
(mf/defc workspace-page
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
|
|
@ -216,33 +213,14 @@
|
||||||
[:& (mf/provider ctx/components-v2) {:value components-v2?}
|
[:& (mf/provider ctx/components-v2) {:value components-v2?}
|
||||||
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
|
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
|
||||||
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
||||||
(if new-css-system
|
[:section#workspace-refactor {:class (stl/css :workspace)
|
||||||
[:section#workspace-refactor {:class (css :workspace)
|
:style {:background-color background-color
|
||||||
:style {:background-color background-color
|
:touch-action "none"}}
|
||||||
:touch-action "none"}}
|
[:& context-menu]
|
||||||
[:& context-menu]
|
|
||||||
|
|
||||||
(if ^boolean file-ready?
|
(if ^boolean file-ready?
|
||||||
[:& workspace-page {:page-id page-id
|
[:& workspace-page {:page-id page-id
|
||||||
:file file
|
:file file
|
||||||
:wglobal wglobal
|
:wglobal wglobal
|
||||||
:layout layout}]
|
:layout layout}]
|
||||||
[:& workspace-loader])]
|
[:& workspace-loader])]]]]]]]]))
|
||||||
|
|
||||||
|
|
||||||
[:section#workspace {:style {:background-color background-color
|
|
||||||
:touch-action "none"}}
|
|
||||||
(when (not (:hide-ui layout))
|
|
||||||
[:& header {:file file
|
|
||||||
:page-id page-id
|
|
||||||
:project project
|
|
||||||
:layout layout}])
|
|
||||||
|
|
||||||
[:& context-menu]
|
|
||||||
|
|
||||||
(if ^boolean file-ready?
|
|
||||||
[:& workspace-page {:page-id page-id
|
|
||||||
:file file
|
|
||||||
:wglobal wglobal
|
|
||||||
:layout layout}]
|
|
||||||
[:& workspace-loader])])]]]]]]]))
|
|
||||||
|
|
|
||||||
|
|
@ -1,692 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) KALEIDOS INC
|
|
||||||
|
|
||||||
(ns app.main.ui.workspace.header
|
|
||||||
(:require
|
|
||||||
[app.common.files.helpers :as cfh]
|
|
||||||
[app.common.uuid :as uuid]
|
|
||||||
[app.config :as cf]
|
|
||||||
[app.main.data.common :refer [show-shared-dialog]]
|
|
||||||
[app.main.data.events :as ev]
|
|
||||||
[app.main.data.exports :as de]
|
|
||||||
[app.main.data.modal :as modal]
|
|
||||||
[app.main.data.workspace :as dw]
|
|
||||||
[app.main.data.workspace.common :as dwc]
|
|
||||||
[app.main.data.workspace.libraries :as dwl]
|
|
||||||
[app.main.data.workspace.shortcuts :as sc]
|
|
||||||
[app.main.refs :as refs]
|
|
||||||
[app.main.repo :as rp]
|
|
||||||
[app.main.store :as st]
|
|
||||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
|
||||||
[app.main.ui.context :as ctx]
|
|
||||||
[app.main.ui.export :refer [export-progress-widget]]
|
|
||||||
[app.main.ui.formats :as fmt]
|
|
||||||
[app.main.ui.hooks.resize :as r]
|
|
||||||
[app.main.ui.icons :as i]
|
|
||||||
[app.main.ui.workspace.presence :refer [active-sessions]]
|
|
||||||
[app.util.dom :as dom]
|
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
|
||||||
[app.util.keyboard :as kbd]
|
|
||||||
[app.util.router :as rt]
|
|
||||||
[beicon.v2.core :as rx]
|
|
||||||
[cuerdas.core :as str]
|
|
||||||
[okulary.core :as l]
|
|
||||||
[potok.v2.core :as ptk]
|
|
||||||
[rumext.v2 :as mf]))
|
|
||||||
|
|
||||||
(def ref:workspace-persistence
|
|
||||||
(l/derived :workspace-persistence st/state))
|
|
||||||
|
|
||||||
;; --- Persistence state Widget
|
|
||||||
|
|
||||||
(mf/defc persistence-state-widget
|
|
||||||
{::mf/wrap [mf/memo]}
|
|
||||||
[]
|
|
||||||
(let [{:keys [status]} (mf/deref ref:workspace-persistence)]
|
|
||||||
[:div.persistence-status-widget
|
|
||||||
(case status
|
|
||||||
:pending
|
|
||||||
[:div.pending
|
|
||||||
[:span.label (tr "workspace.header.unsaved")]]
|
|
||||||
|
|
||||||
:saving
|
|
||||||
[:div.saving
|
|
||||||
[:span.icon i/toggle]
|
|
||||||
[:span.label (tr "workspace.header.saving")]]
|
|
||||||
|
|
||||||
:saved
|
|
||||||
[:div.saved
|
|
||||||
[:span.icon i/tick]
|
|
||||||
[:span.label (tr "workspace.header.saved")]]
|
|
||||||
|
|
||||||
:error
|
|
||||||
[:div.error {:title "There was an error saving the data. Please refresh if this persists."}
|
|
||||||
[:span.icon i/msg-warning]
|
|
||||||
[:span.label (tr "workspace.header.save-error")]]
|
|
||||||
|
|
||||||
nil)]))
|
|
||||||
|
|
||||||
;; --- Zoom Widget
|
|
||||||
|
|
||||||
(mf/defc zoom-widget-workspace
|
|
||||||
{::mf/wrap [mf/memo]
|
|
||||||
::mf/wrap-props false}
|
|
||||||
[{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}]
|
|
||||||
(let [open* (mf/use-state false)
|
|
||||||
open? (deref open*)
|
|
||||||
|
|
||||||
open-dropdown
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(reset! open* true)))
|
|
||||||
|
|
||||||
close-dropdown
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(reset! open* false)))
|
|
||||||
|
|
||||||
on-increase
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps on-increase)
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(on-increase)))
|
|
||||||
|
|
||||||
on-decrease
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps on-decrease)
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(on-decrease)))
|
|
||||||
|
|
||||||
zoom (fmt/format-percent zoom {:precision 0})]
|
|
||||||
|
|
||||||
[:div.zoom-widget {:on-click open-dropdown}
|
|
||||||
[:span.label zoom]
|
|
||||||
[:span.icon i/arrow-down]
|
|
||||||
[:& dropdown {:show open? :on-close close-dropdown}
|
|
||||||
[:ul.dropdown
|
|
||||||
[:li.basic-zoom-bar
|
|
||||||
[:span.zoom-btns
|
|
||||||
[:button {:on-click on-decrease} "-"]
|
|
||||||
[:p.zoom-size zoom]
|
|
||||||
[:button {:on-click on-increase} "+"]]
|
|
||||||
[:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]]
|
|
||||||
[:li.separator]
|
|
||||||
[:li {:on-click on-zoom-fit}
|
|
||||||
(tr "workspace.header.zoom-fit-all") [:span (sc/get-tooltip :fit-all)]]
|
|
||||||
[:li {:on-click on-zoom-selected}
|
|
||||||
(tr "workspace.header.zoom-selected") [:span (sc/get-tooltip :zoom-selected)]]]]]))
|
|
||||||
|
|
||||||
;; --- Header Users
|
|
||||||
|
|
||||||
(mf/defc help-info-menu
|
|
||||||
{::mf/wrap-props false
|
|
||||||
::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [layout on-close]}]
|
|
||||||
(let [nav-to-helpc-center
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://help.penpot.app"))
|
|
||||||
|
|
||||||
nav-to-community
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://community.penpot.app"))
|
|
||||||
|
|
||||||
nav-to-youtube
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://www.youtube.com/c/Penpot"))
|
|
||||||
|
|
||||||
nav-to-templates
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://penpot.app/libraries-templates"))
|
|
||||||
|
|
||||||
nav-to-github
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://github.com/penpot/penpot"))
|
|
||||||
|
|
||||||
nav-to-terms
|
|
||||||
(mf/use-fn #(dom/open-new-window "https://penpot.app/terms"))
|
|
||||||
|
|
||||||
nav-to-feedback
|
|
||||||
(mf/use-fn #(st/emit! (rt/nav-new-window* {:rname :settings-feedback})))
|
|
||||||
|
|
||||||
show-shortcuts
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps layout)
|
|
||||||
(fn []
|
|
||||||
(when (contains? layout :collapse-left-sidebar)
|
|
||||||
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
|
|
||||||
|
|
||||||
(st/emit!
|
|
||||||
(-> (dw/toggle-layout-flag :shortcuts)
|
|
||||||
(vary-meta assoc ::ev/origin "workspace-header")))))
|
|
||||||
|
|
||||||
show-release-notes
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(let [version (:main cf/version)]
|
|
||||||
(st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
|
|
||||||
(if (and (kbd/alt? event) (kbd/mod? event))
|
|
||||||
(st/emit! (modal/show {:type :onboarding}))
|
|
||||||
(st/emit! (modal/show {:type :release-notes :version version}))))))]
|
|
||||||
|
|
||||||
[:& dropdown {:show true :on-close on-close}
|
|
||||||
[:ul.sub-menu.help-info
|
|
||||||
[:li {:on-click nav-to-helpc-center}
|
|
||||||
[:span (tr "labels.help-center")]]
|
|
||||||
[:li {:on-click nav-to-community}
|
|
||||||
[:span (tr "labels.community")]]
|
|
||||||
[:li {:on-click nav-to-youtube}
|
|
||||||
[:span (tr "labels.tutorials")]]
|
|
||||||
[:li {:on-click show-release-notes}
|
|
||||||
[:span (tr "labels.release-notes")]]
|
|
||||||
[:li.separator {:on-click nav-to-templates}
|
|
||||||
[:span (tr "labels.libraries-and-templates")]]
|
|
||||||
[:li {:on-click nav-to-github}
|
|
||||||
[:span (tr "labels.github-repo")]]
|
|
||||||
[:li {:on-click nav-to-terms}
|
|
||||||
[:span (tr "auth.terms-of-service")]]
|
|
||||||
[:li.separator {:on-click show-shortcuts}
|
|
||||||
[:span (tr "label.shortcuts")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :show-shortcuts)]]
|
|
||||||
|
|
||||||
(when (contains? cf/flags :user-feedback)
|
|
||||||
[:*
|
|
||||||
[:li.feedback {:on-click nav-to-feedback}
|
|
||||||
[:span (tr "labels.give-feedback")]]])]]))
|
|
||||||
|
|
||||||
(mf/defc preferences-menu
|
|
||||||
{::mf/wrap-props false
|
|
||||||
::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [layout toggle-flag on-close]}]
|
|
||||||
(let [show-nudge-options (mf/use-fn #(modal/show! {:type :nudge-option}))]
|
|
||||||
|
|
||||||
[:& dropdown {:show true :on-close on-close}
|
|
||||||
[:ul.sub-menu.preferences
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "scale-text"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :scale-text)
|
|
||||||
(tr "workspace.header.menu.disable-scale-content")
|
|
||||||
(tr "workspace.header.menu.enable-scale-content"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-scale-text)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "snap-guides"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :snap-guides)
|
|
||||||
(tr "workspace.header.menu.disable-snap-guides")
|
|
||||||
(tr "workspace.header.menu.enable-snap-guides"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-snap-guide)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "snap-grid"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :snap-grid)
|
|
||||||
(tr "workspace.header.menu.disable-snap-grid")
|
|
||||||
(tr "workspace.header.menu.enable-snap-grid"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "dynamic-alignment"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :dynamic-alignment)
|
|
||||||
(tr "workspace.header.menu.disable-dynamic-alignment")
|
|
||||||
(tr "workspace.header.menu.enable-dynamic-alignment"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-alignment)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "snap-pixel-grid"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :snap-pixel-grid)
|
|
||||||
(tr "workspace.header.menu.disable-snap-pixel-grid")
|
|
||||||
(tr "workspace.header.menu.enable-snap-pixel-grid"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :snap-pixel-grid)]]
|
|
||||||
|
|
||||||
[:li {:on-click show-nudge-options}
|
|
||||||
[:span (tr "modals.nudge-title")]]]]))
|
|
||||||
|
|
||||||
(mf/defc view-menu
|
|
||||||
{::mf/wrap-props false
|
|
||||||
::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [layout toggle-flag on-close]}]
|
|
||||||
(let [read-only? (mf/use-ctx ctx/workspace-read-only?)
|
|
||||||
|
|
||||||
toggle-color-palette
|
|
||||||
(mf/use-fn
|
|
||||||
(fn []
|
|
||||||
(r/set-resize-type! :bottom)
|
|
||||||
(st/emit! (dw/remove-layout-flag :textpalette)
|
|
||||||
(-> (dw/toggle-layout-flag :colorpalette)
|
|
||||||
(vary-meta assoc ::ev/origin "workspace-menu")))))
|
|
||||||
|
|
||||||
toggle-text-palette
|
|
||||||
(mf/use-fn
|
|
||||||
(fn []
|
|
||||||
(r/set-resize-type! :bottom)
|
|
||||||
(st/emit! (dw/remove-layout-flag :colorpalette)
|
|
||||||
(-> (dw/toggle-layout-flag :textpalette)
|
|
||||||
(vary-meta assoc ::ev/origin "workspace-menu")))))]
|
|
||||||
|
|
||||||
[:& dropdown {:show true :on-close on-close}
|
|
||||||
[:ul.sub-menu.view
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "rules"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :rules)
|
|
||||||
(tr "workspace.header.menu.hide-rules")
|
|
||||||
(tr "workspace.header.menu.show-rules"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-rules)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "display-grid"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :display-grid)
|
|
||||||
(tr "workspace.header.menu.hide-grid")
|
|
||||||
(tr "workspace.header.menu.show-grid"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-grid)]]
|
|
||||||
|
|
||||||
(when-not ^boolean read-only?
|
|
||||||
[:*
|
|
||||||
[:li {:on-click toggle-color-palette}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :colorpalette)
|
|
||||||
(tr "workspace.header.menu.hide-palette")
|
|
||||||
(tr "workspace.header.menu.show-palette"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-colorpalette)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-text-palette}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :textpalette)
|
|
||||||
(tr "workspace.header.menu.hide-textpalette")
|
|
||||||
(tr "workspace.header.menu.show-textpalette"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :toggle-textpalette)]]])
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "display-artboard-names"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :display-artboard-names)
|
|
||||||
(tr "workspace.header.menu.hide-artboard-names")
|
|
||||||
(tr "workspace.header.menu.show-artboard-names"))]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "show-pixel-grid"}
|
|
||||||
[:span
|
|
||||||
(if (contains? layout :show-pixel-grid)
|
|
||||||
(tr "workspace.header.menu.hide-pixel-grid")
|
|
||||||
(tr "workspace.header.menu.show-pixel-grid"))]
|
|
||||||
[:span.shortcut (sc/get-tooltip :show-pixel-grid)]]
|
|
||||||
|
|
||||||
[:li {:on-click toggle-flag
|
|
||||||
:data-flag "hide-ui"}
|
|
||||||
[:span
|
|
||||||
(tr "workspace.shape.menu.hide-ui")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :hide-ui)]]]]))
|
|
||||||
|
|
||||||
(mf/defc edit-menu
|
|
||||||
{::mf/wrap-props false
|
|
||||||
::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [on-close]}]
|
|
||||||
(let [select-all (mf/use-fn #(st/emit! (dw/select-all)))
|
|
||||||
undo (mf/use-fn #(st/emit! dwc/undo))
|
|
||||||
redo (mf/use-fn #(st/emit! dwc/redo))]
|
|
||||||
[:& dropdown {:show true :on-close on-close}
|
|
||||||
[:ul.sub-menu.edit
|
|
||||||
[:li {:on-click select-all}
|
|
||||||
[:span (tr "workspace.header.menu.select-all")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :select-all)]]
|
|
||||||
|
|
||||||
[:li {:on-click undo}
|
|
||||||
[:span (tr "workspace.header.menu.undo")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :undo)]]
|
|
||||||
|
|
||||||
[:li {:on-click redo}
|
|
||||||
[:span (tr "workspace.header.menu.redo")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :redo)]]]]))
|
|
||||||
|
|
||||||
(mf/defc file-menu
|
|
||||||
{::mf/wrap-props false}
|
|
||||||
[{:keys [on-close file team-id]}]
|
|
||||||
(let [file-id (:id file)
|
|
||||||
shared? (:is-shared file)
|
|
||||||
|
|
||||||
objects (mf/deref refs/workspace-page-objects)
|
|
||||||
frames (->> (cfh/get-immediate-children objects uuid/zero)
|
|
||||||
(filterv cfh/frame-shape?))
|
|
||||||
|
|
||||||
add-shared-fn
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file-id)
|
|
||||||
#(st/emit! (dwl/set-file-shared file-id true)))
|
|
||||||
|
|
||||||
on-add-shared
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file-id add-shared-fn)
|
|
||||||
#(st/emit! (show-shared-dialog file-id add-shared-fn)))
|
|
||||||
|
|
||||||
on-remove-shared
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file-id)
|
|
||||||
(fn [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(modal/show!
|
|
||||||
{:type :delete-shared-libraries
|
|
||||||
:origin :unpublish
|
|
||||||
:ids #{file-id}
|
|
||||||
:on-accept #(st/emit! (dwl/set-file-shared file-id false))
|
|
||||||
:count-libraries 1})))
|
|
||||||
|
|
||||||
on-export-shapes
|
|
||||||
(mf/use-fn #(st/emit! (de/show-workspace-export-dialog)))
|
|
||||||
|
|
||||||
;; WARNING: this is broken, but as it is unused code because
|
|
||||||
;; it belongs to the pre styles/v2 feature which is enabled by
|
|
||||||
;; default right now. THIS CODE IS PENDING TO BE DELETED
|
|
||||||
|
|
||||||
on-export-file
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file)
|
|
||||||
(fn [event-name binary?]
|
|
||||||
(st/emit! (ptk/event ::ev/event {::ev/name event-name
|
|
||||||
::ev/origin "workspace"
|
|
||||||
:num-files 1}))
|
|
||||||
|
|
||||||
(->> (rx/of file)
|
|
||||||
(rx/merge-map
|
|
||||||
(fn [file]
|
|
||||||
(->> (rp/cmd! :has-file-libraries {:file-id (:id file)})
|
|
||||||
(rx/map #(assoc file :has-libraries? %)))))
|
|
||||||
(rx/reduce conj [])
|
|
||||||
(rx/subs!
|
|
||||||
(fn [files]
|
|
||||||
(modal/show!
|
|
||||||
{:type :export
|
|
||||||
:team-id team-id
|
|
||||||
:has-libraries? (->> files (some :has-libraries?))
|
|
||||||
:files files
|
|
||||||
:binary? binary?}))))))
|
|
||||||
|
|
||||||
on-export-binary-file
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps on-export-file)
|
|
||||||
(partial on-export-file "export-binary-files" true))
|
|
||||||
|
|
||||||
on-export-standard-file
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps on-export-file)
|
|
||||||
(partial on-export-file "export-standard-files" false))
|
|
||||||
|
|
||||||
on-export-frames
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps frames)
|
|
||||||
(fn [_]
|
|
||||||
(st/emit! (de/show-workspace-export-frames-dialog (reverse frames)))))]
|
|
||||||
|
|
||||||
[:& dropdown {:show true :on-close on-close}
|
|
||||||
[:ul.sub-menu.file
|
|
||||||
(if ^boolean shared?
|
|
||||||
[:li {:on-click on-remove-shared}
|
|
||||||
[:span (tr "dashboard.unpublish-shared")]]
|
|
||||||
[:li {:on-click on-add-shared}
|
|
||||||
[:span (tr "dashboard.add-shared")]])
|
|
||||||
[:li.export-file {:on-click on-export-shapes}
|
|
||||||
[:span (tr "dashboard.export-shapes")]
|
|
||||||
[:span.shortcut (sc/get-tooltip :export-shapes)]]
|
|
||||||
[:li.separator.export-file {:on-click on-export-binary-file}
|
|
||||||
[:span (tr "dashboard.download-binary-file")]]
|
|
||||||
[:li.export-file {:on-click on-export-standard-file}
|
|
||||||
[:span (tr "dashboard.download-standard-file")]]
|
|
||||||
(when (seq frames)
|
|
||||||
[:li.separator.export-file {:on-click on-export-frames}
|
|
||||||
[:span (tr "dashboard.export-frames")]])]]))
|
|
||||||
|
|
||||||
(mf/defc menu
|
|
||||||
{::mf/wrap-props false}
|
|
||||||
[{:keys [layout file team-id]}]
|
|
||||||
(let [show-menu* (mf/use-state false)
|
|
||||||
show-menu? (deref show-menu*)
|
|
||||||
sub-menu* (mf/use-state false)
|
|
||||||
sub-menu (deref sub-menu*)
|
|
||||||
|
|
||||||
open-menu
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(reset! show-menu* true)))
|
|
||||||
|
|
||||||
close-menu
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(reset! show-menu* false)))
|
|
||||||
|
|
||||||
close-sub-menu
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(reset! sub-menu* nil)))
|
|
||||||
|
|
||||||
on-menu-click
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(let [menu (-> (dom/get-target event)
|
|
||||||
(dom/get-data "menu")
|
|
||||||
(keyword))]
|
|
||||||
(reset! sub-menu* menu))))
|
|
||||||
|
|
||||||
toggle-flag
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(let [flag (-> (dom/get-current-target event)
|
|
||||||
(dom/get-data "flag")
|
|
||||||
(keyword))]
|
|
||||||
(st/emit!
|
|
||||||
(-> (dw/toggle-layout-flag flag)
|
|
||||||
(vary-meta assoc ::ev/origin "workspace-menu"))))))]
|
|
||||||
|
|
||||||
|
|
||||||
[:*
|
|
||||||
[:div.btn-icon-dark.btn-small {:on-click open-menu} i/actions]
|
|
||||||
|
|
||||||
[:& dropdown {:show show-menu? :on-close close-menu}
|
|
||||||
[:ul.menu
|
|
||||||
[:li {:on-click on-menu-click
|
|
||||||
:on-pointer-enter on-menu-click
|
|
||||||
:data-menu "file"}
|
|
||||||
[:span (tr "workspace.header.menu.option.file")]
|
|
||||||
[:span i/arrow-slide]]
|
|
||||||
[:li {:on-click on-menu-click
|
|
||||||
:on-pointer-enter on-menu-click
|
|
||||||
:data-menu "edit"}
|
|
||||||
[:span (tr "workspace.header.menu.option.edit")]
|
|
||||||
[:span i/arrow-slide]]
|
|
||||||
[:li {:on-click on-menu-click
|
|
||||||
:on-pointer-enter on-menu-click
|
|
||||||
:data-menu :view}
|
|
||||||
[:span (tr "workspace.header.menu.option.view")]
|
|
||||||
[:span i/arrow-slide]]
|
|
||||||
[:li {:on-click on-menu-click
|
|
||||||
:on-pointer-enter on-menu-click
|
|
||||||
:data-menu "preferences"}
|
|
||||||
[:span (tr "workspace.header.menu.option.preferences")]
|
|
||||||
[:span i/arrow-slide]]
|
|
||||||
[:li.info {:on-click on-menu-click
|
|
||||||
:on-pointer-enter on-menu-click
|
|
||||||
:data-menu "help-info"}
|
|
||||||
[:span (tr "workspace.header.menu.option.help-info")]
|
|
||||||
[:span i/arrow-slide]]]]
|
|
||||||
|
|
||||||
(case sub-menu
|
|
||||||
:file
|
|
||||||
[:& file-menu
|
|
||||||
{:file file
|
|
||||||
:team-id team-id
|
|
||||||
:on-close close-sub-menu}]
|
|
||||||
|
|
||||||
:edit
|
|
||||||
[:& edit-menu
|
|
||||||
{:on-close close-sub-menu}]
|
|
||||||
|
|
||||||
:view
|
|
||||||
[:& view-menu
|
|
||||||
{:layout layout
|
|
||||||
:toggle-flag toggle-flag
|
|
||||||
:on-close close-sub-menu}]
|
|
||||||
|
|
||||||
:preferences
|
|
||||||
[:& preferences-menu
|
|
||||||
{:layout layout
|
|
||||||
:toggle-flag toggle-flag
|
|
||||||
:on-close close-sub-menu}]
|
|
||||||
|
|
||||||
:help-info
|
|
||||||
[:& help-info-menu
|
|
||||||
{:layout layout
|
|
||||||
:on-close close-sub-menu}]
|
|
||||||
|
|
||||||
nil)]))
|
|
||||||
|
|
||||||
;; --- Header Component
|
|
||||||
|
|
||||||
(mf/defc header
|
|
||||||
{::mf/wrap-props false}
|
|
||||||
[{:keys [file layout project page-id]}]
|
|
||||||
(let [file-id (:id file)
|
|
||||||
file-name (:name file)
|
|
||||||
project-id (:id project)
|
|
||||||
team-id (:team-id project)
|
|
||||||
shared? (:is-shared file)
|
|
||||||
|
|
||||||
zoom (mf/deref refs/selected-zoom)
|
|
||||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
|
||||||
|
|
||||||
on-increase (mf/use-fn #(st/emit! (dw/increase-zoom nil)))
|
|
||||||
on-decrease (mf/use-fn #(st/emit! (dw/decrease-zoom nil)))
|
|
||||||
on-zoom-reset (mf/use-fn #(st/emit! dw/reset-zoom))
|
|
||||||
on-zoom-fit (mf/use-fn #(st/emit! dw/zoom-to-fit-all))
|
|
||||||
on-zoom-selected (mf/use-fn #(st/emit! dw/zoom-to-selected-shape))
|
|
||||||
|
|
||||||
|
|
||||||
editing* (mf/use-state false)
|
|
||||||
editing? (deref editing*)
|
|
||||||
|
|
||||||
input-ref (mf/use-ref nil)
|
|
||||||
|
|
||||||
handle-blur
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file-id)
|
|
||||||
(fn [_]
|
|
||||||
(let [value (str/trim (-> input-ref mf/ref-val dom/get-value))]
|
|
||||||
(when (not= value "")
|
|
||||||
(st/emit! (dw/rename-file file-id value)))
|
|
||||||
(reset! editing* false))))
|
|
||||||
|
|
||||||
handle-name-keydown
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps handle-blur)
|
|
||||||
(fn [event]
|
|
||||||
(when (kbd/enter? event)
|
|
||||||
(handle-blur event))))
|
|
||||||
|
|
||||||
start-editing-name
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(reset! editing* true)))
|
|
||||||
|
|
||||||
go-back
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps project)
|
|
||||||
(fn []
|
|
||||||
(st/emit! (dw/go-to-dashboard project))))
|
|
||||||
|
|
||||||
nav-to-viewer
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps file-id page-id)
|
|
||||||
(fn []
|
|
||||||
(let [params {:page-id page-id
|
|
||||||
:file-id file-id
|
|
||||||
:section "interactions"}]
|
|
||||||
(st/emit! (dw/go-to-viewer params)))))
|
|
||||||
|
|
||||||
nav-to-project
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps team-id project-id)
|
|
||||||
#(st/emit! (rt/nav-new-window* {:rname :dashboard-files
|
|
||||||
:path-params {:team-id team-id
|
|
||||||
:project-id project-id}})))
|
|
||||||
|
|
||||||
toggle-history
|
|
||||||
(mf/use-fn
|
|
||||||
#(st/emit! (-> (dw/toggle-layout-flag :document-history)
|
|
||||||
(vary-meta assoc ::ev/origin "workspace-header"))))]
|
|
||||||
|
|
||||||
(mf/with-effect [editing?]
|
|
||||||
(when ^boolean editing?
|
|
||||||
(dom/select-text! (mf/ref-val input-ref))))
|
|
||||||
|
|
||||||
[:header.workspace-header
|
|
||||||
[:div.left-area
|
|
||||||
[:div.main-icon
|
|
||||||
[:a {:on-click go-back} i/logo-icon]]
|
|
||||||
|
|
||||||
[:div.menu-section
|
|
||||||
[:& menu {:layout layout
|
|
||||||
:file file
|
|
||||||
:read-only? read-only?
|
|
||||||
:team-id team-id
|
|
||||||
:page-id page-id}]
|
|
||||||
|
|
||||||
[:div.project-tree {:alt (tr "workspace.sitemap")}
|
|
||||||
[:span.project-name
|
|
||||||
{:on-click nav-to-project}
|
|
||||||
(:name project) " /"]
|
|
||||||
|
|
||||||
(if ^boolean editing?
|
|
||||||
[:input.file-name
|
|
||||||
{:type "text"
|
|
||||||
:ref input-ref
|
|
||||||
:on-blur handle-blur
|
|
||||||
:on-key-down handle-name-keydown
|
|
||||||
:auto-focus true
|
|
||||||
:default-value (:name file "")}]
|
|
||||||
[:span
|
|
||||||
{:on-double-click start-editing-name}
|
|
||||||
file-name])]
|
|
||||||
|
|
||||||
(when ^boolean shared?
|
|
||||||
[:div.shared-badge i/library])]]
|
|
||||||
|
|
||||||
[:div.center-area
|
|
||||||
[:div.users-section
|
|
||||||
[:& active-sessions]]]
|
|
||||||
|
|
||||||
[:div.right-area
|
|
||||||
[:div.options-section
|
|
||||||
[:& persistence-state-widget]
|
|
||||||
[:& export-progress-widget]
|
|
||||||
(when-not ^boolean read-only?
|
|
||||||
[:button.document-history
|
|
||||||
{:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
|
|
||||||
:aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
|
|
||||||
:class (when (contains? layout :document-history) "selected")
|
|
||||||
:on-click toggle-history}
|
|
||||||
i/recent])]
|
|
||||||
|
|
||||||
[:div.options-section
|
|
||||||
[:& zoom-widget-workspace
|
|
||||||
{:zoom zoom
|
|
||||||
:on-increase on-increase
|
|
||||||
:on-decrease on-decrease
|
|
||||||
:on-zoom-reset on-zoom-reset
|
|
||||||
:on-zoom-fit on-zoom-fit
|
|
||||||
:on-zoom-selected on-zoom-selected}]
|
|
||||||
|
|
||||||
[:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
|
|
||||||
{:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
|
|
||||||
:on-click nav-to-viewer}
|
|
||||||
i/play]]]]))
|
|
||||||
|
|
||||||
|
|
@ -319,7 +319,8 @@
|
||||||
|
|
||||||
(when-not ^boolean read-only?
|
(when-not ^boolean read-only?
|
||||||
[:*
|
[:*
|
||||||
[:> dropdown-menu-item* {:class (stl/css :submenu-item) :on-click toggle-color-palette
|
[:> dropdown-menu-item* {:class (stl/css :submenu-item)
|
||||||
|
:on-click toggle-color-palette
|
||||||
:on-key-down (fn [event]
|
:on-key-down (fn [event]
|
||||||
(when (kbd/enter? event)
|
(when (kbd/enter? event)
|
||||||
(toggle-color-palette event)))
|
(toggle-color-palette event)))
|
||||||
|
|
@ -332,7 +333,8 @@
|
||||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))]
|
(for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))]
|
||||||
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]
|
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]
|
||||||
|
|
||||||
[:> dropdown-menu-item* {:class (stl/css :submenu-item) :on-click toggle-text-palette
|
[:> dropdown-menu-item* {:class (stl/css :submenu-item)
|
||||||
|
:on-click toggle-text-palette
|
||||||
:on-key-down (fn [event]
|
:on-key-down (fn [event]
|
||||||
(when (kbd/enter? event)
|
(when (kbd/enter? event)
|
||||||
(toggle-text-palette event)))
|
(toggle-text-palette event)))
|
||||||
|
|
|
||||||
|
|
@ -11,169 +11,163 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: $s-48;
|
height: $s-48;
|
||||||
padding: $s-8 $s-8 $s-4 $s-8;
|
padding: $s-8 $s-8 $s-4 $s-8;
|
||||||
.main-icon {
|
}
|
||||||
@include flexCenter;
|
|
||||||
width: $s-32;
|
.main-icon {
|
||||||
|
@include flexCenter;
|
||||||
|
width: $s-32;
|
||||||
|
height: $s-32;
|
||||||
|
margin-right: $s-4;
|
||||||
|
svg {
|
||||||
height: $s-32;
|
height: $s-32;
|
||||||
margin-right: $s-4;
|
fill: var(--icon-foreground-hover);
|
||||||
svg {
|
|
||||||
height: $s-32;
|
|
||||||
fill: var(--icon-foreground-hover);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.project-tree {
|
}
|
||||||
flex-grow: 1;
|
|
||||||
max-width: calc(100% - $s-64);
|
.project-tree {
|
||||||
position: relative;
|
position: relative;
|
||||||
.project-name,
|
flex-grow: 1;
|
||||||
.file-name {
|
max-width: calc(100% - $s-64);
|
||||||
@include tabTitleTipography;
|
}
|
||||||
@include textEllipsis;
|
|
||||||
height: $s-16;
|
.project-name,
|
||||||
width: 100%;
|
.file-name {
|
||||||
padding-bottom: $s-2;
|
@include tabTitleTipography;
|
||||||
margin-top: -2px;
|
@include textEllipsis;
|
||||||
color: var(--title-foreground-color);
|
height: $s-16;
|
||||||
cursor: pointer;
|
width: 100%;
|
||||||
}
|
padding-bottom: $s-2;
|
||||||
.file-name {
|
margin-top: calc(-1 * $s-2);
|
||||||
@include medTitleTipography;
|
color: var(--title-foreground-color);
|
||||||
text-transform: none;
|
cursor: pointer;
|
||||||
color: var(--title-foreground-color-hover);
|
}
|
||||||
}
|
|
||||||
.file-name-input {
|
.file-name {
|
||||||
@include flexCenter;
|
@include medTitleTipography;
|
||||||
height: 100%;
|
text-transform: none;
|
||||||
width: 100%;
|
color: var(--title-foreground-color-hover);
|
||||||
margin: 0;
|
}
|
||||||
border: 0;
|
|
||||||
border-radius: $br-4;
|
.file-name-input {
|
||||||
background-color: var(--input-background-color);
|
@include flexCenter;
|
||||||
font-size: $fs-14;
|
height: 100%;
|
||||||
color: var(--input-foreground-color);
|
width: 100%;
|
||||||
z-index: 20;
|
margin: 0;
|
||||||
white-space: break-spaces;
|
border: 0;
|
||||||
&:focus {
|
border-radius: $br-4;
|
||||||
outline: none;
|
background-color: var(--input-background-color);
|
||||||
}
|
font-size: $fs-14;
|
||||||
}
|
color: var(--input-foreground-color);
|
||||||
|
z-index: $z-index-20;
|
||||||
|
white-space: break-spaces;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
.shared-badge {
|
}
|
||||||
@include flexCenter;
|
|
||||||
|
.shared-badge {
|
||||||
|
@include flexCenter;
|
||||||
|
width: $s-16;
|
||||||
|
height: $s-32;
|
||||||
|
margin-right: $s-4;
|
||||||
|
svg {
|
||||||
|
stroke: var(--button-secondary-foreground-color-rest);
|
||||||
|
fill: none;
|
||||||
|
height: $s-16;
|
||||||
width: $s-16;
|
width: $s-16;
|
||||||
height: $s-32;
|
|
||||||
margin-right: $s-4;
|
|
||||||
svg {
|
|
||||||
stroke: var(--button-secondary-foreground-color-rest);
|
|
||||||
fill: none;
|
|
||||||
height: $s-16;
|
|
||||||
width: $s-16;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.menu-btn {
|
}
|
||||||
@extend .button-tertiary;
|
|
||||||
height: $s-32;
|
.menu-btn {
|
||||||
width: calc($s-24 + $s-4);
|
@extend .button-tertiary;
|
||||||
padding: 0;
|
height: $s-32;
|
||||||
border-radius: $br-8;
|
width: calc($s-24 + $s-4);
|
||||||
|
padding: 0;
|
||||||
|
border-radius: $br-8;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
@extend .menu-dropdown;
|
||||||
|
top: $s-48;
|
||||||
|
left: calc(var(--width, $s-256) - $s-16);
|
||||||
|
width: $s-192;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
@extend .menu-item-base;
|
||||||
|
cursor: pointer;
|
||||||
|
.open-arrow {
|
||||||
|
@include flexCenter;
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon;
|
@extend .button-icon;
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.menu {
|
&:hover {
|
||||||
@extend .menu-dropdown;
|
color: var(--menu-foreground-color-hover);
|
||||||
top: $s-48;
|
.open-arrow {
|
||||||
left: calc(var(--width, $s-256) - $s-16);
|
svg {
|
||||||
width: $s-192;
|
stroke: var(--menu-foreground-color-hover);
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
@extend .menu-item;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.separator {
|
|
||||||
margin-top: $s-8;
|
|
||||||
height: $s-4;
|
|
||||||
border-top: 1px solid $db-secondary;
|
|
||||||
}
|
|
||||||
.shortcut {
|
|
||||||
@extend .shortcut;
|
|
||||||
}
|
|
||||||
.shortcut-key {
|
|
||||||
@extend .shortcut-key;
|
|
||||||
}
|
|
||||||
.menu-item {
|
|
||||||
@extend .menu-item;
|
|
||||||
.open-arrow {
|
|
||||||
@include flexCenter;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: var(--menu-foreground-color-hover);
|
|
||||||
.open-arrow {
|
|
||||||
svg {
|
|
||||||
stroke: var(--menu-foreground-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shortcut-key {
|
|
||||||
color: var(--menu-shortcut-foreground-color-hover);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.sub-menu {
|
|
||||||
@extend .menu-dropdown;
|
|
||||||
left: calc(var(--width, $s-256) + $s-180);
|
|
||||||
width: $s-192;
|
|
||||||
min-width: calc($s-272 - $s-2);
|
|
||||||
width: 110%;
|
|
||||||
.shortcut {
|
|
||||||
@extend .shortcut;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcut-key {
|
.shortcut-key {
|
||||||
@extend .shortcut-key;
|
color: var(--menu-shortcut-foreground-color-hover);
|
||||||
}
|
|
||||||
.submenu-item {
|
|
||||||
@extend .menu-item;
|
|
||||||
&:hover {
|
|
||||||
color: var(--menu-foreground-color-hover);
|
|
||||||
.shortcut-key {
|
|
||||||
color: var(--menu-shortcut-foreground-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcut {
|
|
||||||
@extend .shortcut;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcut-key {
|
|
||||||
@extend .shortcut-key;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.file {
|
|
||||||
top: $s-48;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.edit {
|
|
||||||
top: $s-76;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.view {
|
|
||||||
top: $s-116;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.preferences {
|
|
||||||
top: $s-148;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.help-info {
|
|
||||||
top: $s-196;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
margin-top: $s-8;
|
||||||
|
height: $s-4;
|
||||||
|
border-top: $s-1 solid $db-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
@extend .shortcut-base;
|
||||||
|
}
|
||||||
|
.shortcut-key {
|
||||||
|
@extend .shortcut-key-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
@extend .menu-dropdown;
|
||||||
|
left: calc(var(--width, $s-256) + $s-180);
|
||||||
|
width: $s-192;
|
||||||
|
min-width: calc($s-272 - $s-2);
|
||||||
|
width: 110%;
|
||||||
|
|
||||||
|
.submenu-item {
|
||||||
|
@extend .menu-item-base;
|
||||||
|
&:hover {
|
||||||
|
color: var(--menu-foreground-color-hover);
|
||||||
|
.shortcut-key {
|
||||||
|
color: var(--menu-shortcut-foreground-color-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.file {
|
||||||
|
top: $s-48;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.edit {
|
||||||
|
top: $s-76;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.view {
|
||||||
|
top: $s-116;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.preferences {
|
||||||
|
top: $s-148;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.help-info {
|
||||||
|
top: $s-196;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.config :as cfg]
|
[app.config :as cfg]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.ui.context :as ctx]
|
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.timers :as tm]
|
[app.util.timers :as tm]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
@ -32,8 +31,7 @@
|
||||||
(mf/defc active-sessions
|
(mf/defc active-sessions
|
||||||
{::mf/wrap [mf/memo]}
|
{::mf/wrap [mf/memo]}
|
||||||
[]
|
[]
|
||||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
(let [users (mf/deref refs/users)
|
||||||
users (mf/deref refs/users)
|
|
||||||
presence (mf/deref refs/workspace-presence)
|
presence (mf/deref refs/workspace-presence)
|
||||||
user-ids (vals presence)
|
user-ids (vals presence)
|
||||||
num-users (count user-ids)
|
num-users (count user-ids)
|
||||||
|
|
@ -48,39 +46,30 @@
|
||||||
#(dom/focus! (dom/get-element "users-close")))))
|
#(dom/focus! (dom/get-element "users-close")))))
|
||||||
close-users-widget (mf/use-fn #(reset! open* false))]
|
close-users-widget (mf/use-fn #(reset! open* false))]
|
||||||
|
|
||||||
(if new-css-system
|
[:*
|
||||||
[:*
|
(when (and (> num-users 2) open?)
|
||||||
(when (and (> num-users 2) open?)
|
[:button {:id "users-close"
|
||||||
[:button
|
:class (stl/css :active-users-opened)
|
||||||
{:id "users-close"
|
:on-click close-users-widget
|
||||||
:class (stl/css :active-users-opened)
|
:on-blur close-users-widget}
|
||||||
:on-click close-users-widget
|
|
||||||
:on-blur close-users-widget}
|
|
||||||
[:ul {:class (stl/css :active-users-list)}
|
|
||||||
(for [session user-ids]
|
|
||||||
[:& session-widget
|
|
||||||
{:session session
|
|
||||||
:index 0
|
|
||||||
:profile (get users (:profile-id session))
|
|
||||||
:key (:id session)}])]])
|
|
||||||
|
|
||||||
[:button {:class (stl/css-case :active-users true)
|
|
||||||
:on-click open-users-widget}
|
|
||||||
|
|
||||||
[:ul {:class (stl/css :active-users-list)}
|
[:ul {:class (stl/css :active-users-list)}
|
||||||
(when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))])
|
(for [session user-ids]
|
||||||
(for [[index session] (d/enumerate first-users)]
|
|
||||||
[:& session-widget
|
[:& session-widget
|
||||||
{:session session
|
{:session session
|
||||||
:index index
|
:index 0
|
||||||
:profile (get users (:profile-id session))
|
:profile (get users (:profile-id session))
|
||||||
:key (:id session)}])]]]
|
:key (:id session)}])]])
|
||||||
|
|
||||||
[:ul.active-users
|
[:button {:class (stl/css-case :active-users true)
|
||||||
(for [session (vals presence)]
|
:on-click open-users-widget}
|
||||||
|
|
||||||
|
[:ul {:class (stl/css :active-users-list)}
|
||||||
|
(when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))])
|
||||||
|
(for [[index session] (d/enumerate first-users)]
|
||||||
[:& session-widget
|
[:& session-widget
|
||||||
{:session session
|
{:session session
|
||||||
|
:index index
|
||||||
:profile (get users (:profile-id session))
|
:profile (get users (:profile-id session))
|
||||||
:key (:id session)}])])))
|
:key (:id session)}])]]]))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,206 +13,218 @@
|
||||||
padding: $s-8;
|
padding: $s-8;
|
||||||
gap: $s-8;
|
gap: $s-8;
|
||||||
background-color: var(--panel-background-color);
|
background-color: var(--panel-background-color);
|
||||||
.users-section {
|
}
|
||||||
position: relative;
|
|
||||||
min-width: $s-32;
|
|
||||||
max-width: $s-72;
|
|
||||||
padding: $s-4 $s-6;
|
|
||||||
}
|
|
||||||
.separator {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.zoom-section {
|
|
||||||
.zoom-widget {
|
|
||||||
@include buttonStyle;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: $s-28;
|
|
||||||
max-width: $s-48;
|
|
||||||
width: $s-48;
|
|
||||||
border-radius: $br-8;
|
|
||||||
.label {
|
|
||||||
@include titleTipography;
|
|
||||||
color: var(--button-tertiary-foreground-color-rest);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
.users-section {
|
||||||
.label {
|
position: relative;
|
||||||
color: var(--button-tertiary-foreground-color-focus);
|
min-width: $s-32;
|
||||||
}
|
max-width: $s-72;
|
||||||
}
|
padding: $s-4 $s-6;
|
||||||
&.selected {
|
}
|
||||||
.label {
|
|
||||||
color: var(--button-tertiary-foreground-color-focus);
|
.separator {
|
||||||
}
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.dropdown {
|
.zoom-widget {
|
||||||
@extend .menu-dropdown;
|
@include buttonStyle;
|
||||||
right: $s-2;
|
display: flex;
|
||||||
top: calc($s-2 + $s-48);
|
align-items: center;
|
||||||
width: $s-272;
|
justify-content: center;
|
||||||
.basic-zoom-bar {
|
height: $s-28;
|
||||||
display: flex;
|
max-width: $s-48;
|
||||||
justify-content: space-between;
|
width: $s-48;
|
||||||
padding: $s-6;
|
border-radius: $br-8;
|
||||||
cursor: auto;
|
.label {
|
||||||
.zoom-btns {
|
@include titleTipography;
|
||||||
display: flex;
|
color: var(--button-tertiary-foreground-color-rest);
|
||||||
.zoom-btn {
|
}
|
||||||
@extend .button-tertiary;
|
|
||||||
height: $s-28;
|
&:hover {
|
||||||
width: $s-28;
|
.label {
|
||||||
border-radius: $br-8;
|
color: var(--button-tertiary-foreground-color-focus);
|
||||||
.zoom-icon {
|
|
||||||
@include flexCenter;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.zoom-icon svg {
|
|
||||||
stroke: var(--button-tertiary-foreground-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zoom-text {
|
|
||||||
@include flexCenter;
|
|
||||||
height: 100%;
|
|
||||||
min-width: $s-48;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 $s-2;
|
|
||||||
color: var(--modal-title-foreground-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.reset-btn {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
color: var(--button-tertiary-foreground-color-hover);
|
|
||||||
height: $s-28;
|
|
||||||
border-radius: $br-8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zoom-option {
|
|
||||||
@extend .menu-item;
|
|
||||||
.shortcuts {
|
|
||||||
@extend .shortcut;
|
|
||||||
.shortcut-key {
|
|
||||||
@extend .shortcut-key;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: var(--menu-foreground-color-hover);
|
|
||||||
.shortcuts {
|
|
||||||
.shortcut-key {
|
|
||||||
color: var(--menu-foreground-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.comments-section {
|
&.selected {
|
||||||
.comments-btn {
|
.label {
|
||||||
@extend .button-tertiary;
|
color: var(--button-tertiary-foreground-color-focus);
|
||||||
border-radius: $br-8;
|
|
||||||
margin: 0;
|
|
||||||
height: $s-28;
|
|
||||||
width: $s-28;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
height: $s-16;
|
|
||||||
width: $s-16;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
&.selected {
|
|
||||||
background-color: var(--button-tertiary-background-color-selected);
|
|
||||||
border: $s-2 solid var(--button-tertiary-border-color-selected);
|
|
||||||
svg {
|
|
||||||
stroke: var(--button-tertiary-foreground-color-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.history-section {
|
|
||||||
.history-button {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
border-radius: $br-8;
|
|
||||||
margin: 0;
|
|
||||||
height: $s-28;
|
|
||||||
width: $s-28;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
height: $s-16;
|
|
||||||
width: $s-16;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
&.selected {
|
|
||||||
background-color: var(--button-tertiary-background-color-selected);
|
|
||||||
border: $s-2 solid var(--button-tertiary-border-color-selected);
|
|
||||||
svg {
|
|
||||||
stroke: var(--button-tertiary-foreground-color-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.persistence-status-widget {
|
|
||||||
@include flexCenter;
|
|
||||||
width: $s-28;
|
|
||||||
height: $s-28;
|
|
||||||
.status-icon {
|
|
||||||
@include flexCenter;
|
|
||||||
margin: 0;
|
|
||||||
width: $s-16;
|
|
||||||
height: $s-16;
|
|
||||||
border-radius: $br-circle;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
height: $s-12;
|
|
||||||
width: $s-12;
|
|
||||||
stroke: var(--status-icon-foreground-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.pending-status {
|
|
||||||
background-color: var(--status-warning-background-color);
|
|
||||||
}
|
|
||||||
.saving-status {
|
|
||||||
background-color: var(--status-pending-background-color);
|
|
||||||
svg {
|
|
||||||
animation: spin-animation 1s infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.saved-status {
|
|
||||||
background-color: var(--status-ok-background-color);
|
|
||||||
}
|
|
||||||
.error-status {
|
|
||||||
background-color: var(--status-error-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.viewer-btn {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
border-radius: $br-8;
|
|
||||||
margin: 0;
|
|
||||||
width: $s-28;
|
|
||||||
height: $s-28;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
height: $s-16;
|
|
||||||
width: $s-16;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
@extend .menu-dropdown;
|
||||||
|
right: $s-2;
|
||||||
|
top: calc($s-2 + $s-48);
|
||||||
|
width: $s-272;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-zoom-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $s-6;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-btns {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
height: $s-28;
|
||||||
|
width: $s-28;
|
||||||
|
border-radius: $br-8;
|
||||||
|
.zoom-icon {
|
||||||
|
@include flexCenter;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.zoom-icon svg {
|
||||||
|
stroke: var(--button-tertiary-foreground-color-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-text {
|
||||||
|
@include flexCenter;
|
||||||
|
height: 100%;
|
||||||
|
min-width: $s-48;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 $s-2;
|
||||||
|
color: var(--modal-title-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
color: var(--button-tertiary-foreground-color-hover);
|
||||||
|
height: $s-28;
|
||||||
|
border-radius: $br-8;
|
||||||
|
}
|
||||||
|
.zoom-option {
|
||||||
|
@extend .menu-item-base;
|
||||||
|
.shortcuts {
|
||||||
|
@extend .shortcut-base;
|
||||||
|
.shortcut-key {
|
||||||
|
@extend .shortcut-key-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: var(--menu-foreground-color-hover);
|
||||||
|
.shortcuts {
|
||||||
|
.shortcut-key {
|
||||||
|
color: var(--menu-foreground-color-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
border-radius: $br-8;
|
||||||
|
margin: 0;
|
||||||
|
height: $s-28;
|
||||||
|
width: $s-28;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
height: $s-16;
|
||||||
|
width: $s-16;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&.selected {
|
||||||
|
background-color: var(--button-tertiary-background-color-selected);
|
||||||
|
border: $s-2 solid var(--button-tertiary-border-color-selected);
|
||||||
|
svg {
|
||||||
|
stroke: var(--button-tertiary-foreground-color-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-button {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
border-radius: $br-8;
|
||||||
|
margin: 0;
|
||||||
|
height: $s-28;
|
||||||
|
width: $s-28;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
height: $s-16;
|
||||||
|
width: $s-16;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&.selected {
|
||||||
|
background-color: var(--button-tertiary-background-color-selected);
|
||||||
|
border: $s-2 solid var(--button-tertiary-border-color-selected);
|
||||||
|
svg {
|
||||||
|
stroke: var(--button-tertiary-foreground-color-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.persistence-status-widget {
|
||||||
|
@include flexCenter;
|
||||||
|
width: $s-28;
|
||||||
|
height: $s-28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
@include flexCenter;
|
||||||
|
width: $s-16;
|
||||||
|
height: $s-16;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: $br-circle;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
height: $s-12;
|
||||||
|
width: $s-12;
|
||||||
|
stroke: var(--status-icon-foreground-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pending-status {
|
||||||
|
background-color: var(--status-warning-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.saving-status {
|
||||||
|
background-color: var(--status-pending-background-color);
|
||||||
|
svg {
|
||||||
|
animation: spin-animation 1s infinite;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.saved-status {
|
||||||
|
background-color: var(--status-ok-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-status {
|
||||||
|
background-color: var(--status-error-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
border-radius: $br-8;
|
||||||
|
margin: 0;
|
||||||
|
width: $s-28;
|
||||||
|
height: $s-28;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
height: $s-16;
|
||||||
|
width: $s-16;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue