mirror of
https://github.com/penpot/penpot.git
synced 2025-01-21 06:02:32 -05:00
♻️ Remove new-css-system from viewer
This commit is contained in:
Eva
parent
56c9e55607
commit
08e13d7b44
40 changed files with 1299 additions and 3272 deletions
|
|
@ -408,6 +408,8 @@
|
|||
border-radius: $br-4;
|
||||
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
|
||||
svg {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
display: none;
|
||||
stroke: var(--input-checkbox-inactive-foreground-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,9 +53,6 @@
|
|||
// Partials
|
||||
//#################################################
|
||||
|
||||
@import "main/partials/viewer";
|
||||
@import "main/partials/viewer-header";
|
||||
@import "main/partials/viewer-thumbnails";
|
||||
@import "main/partials/activity-bar";
|
||||
@import "main/partials/debug-icons-preview";
|
||||
@import "main/partials/editable-label";
|
||||
|
|
@ -67,6 +64,5 @@
|
|||
@import "main/partials/user-settings";
|
||||
@import "main/partials/workspace";
|
||||
@import "main/partials/color-bullet";
|
||||
@import "main/partials/inspect";
|
||||
@import "main/partials/exception-page";
|
||||
@import "main/partials/signup-questions";
|
||||
|
|
|
|||
|
|
@ -1,487 +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
|
||||
|
||||
.inspect-svg-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expand-button,
|
||||
.copy-button {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
position: absolute;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.code-block & {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $color-gray-20;
|
||||
transition: fill 0.3s;
|
||||
|
||||
&:hover {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
right: 24px;
|
||||
top: -1px;
|
||||
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
.copy-button {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attributes-block {
|
||||
user-select: text;
|
||||
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: $fs12;
|
||||
|
||||
.attributes-text-block {
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.attributes-label {
|
||||
color: $color-gray-20;
|
||||
}
|
||||
|
||||
.attributes-value {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.attributes-block-title {
|
||||
position: relative;
|
||||
color: $color-gray-10;
|
||||
padding: 0.5rem;
|
||||
font-size: $fs14;
|
||||
|
||||
.copy-button {
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-unit-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.6rem 1.6rem 0.6rem 0.5rem;
|
||||
|
||||
.attributes-label,
|
||||
.attributes-value {
|
||||
margin-right: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 50%;
|
||||
.items {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.copy-button {
|
||||
padding: 0.6rem 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-color-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
|
||||
.attributes-color-id {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.attributes-color-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
width: 3rem;
|
||||
text-transform: uppercase;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attributes-color-display {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $color-gray-30;
|
||||
}
|
||||
|
||||
.hide-color .color-bullet {
|
||||
visibility: hidden;
|
||||
}
|
||||
.copy-button {
|
||||
padding: 1rem 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: $fs12;
|
||||
margin: 0;
|
||||
background: none;
|
||||
color: $color-gray-20;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-30;
|
||||
padding: 0 1rem 0.25rem 0.25rem;
|
||||
margin-top: 2px;
|
||||
background-image: url("/images/icons/arrow-down-white.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 95% 48%;
|
||||
background-size: 10px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 1rem;
|
||||
background-color: $color-gray-50;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-content-row {
|
||||
position: relative;
|
||||
margin: 0.5rem;
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
.attributes-content {
|
||||
overflow-y: auto;
|
||||
max-height: 5rem;
|
||||
background: $color-gray-60;
|
||||
border-radius: $br4;
|
||||
padding: 1rem 0.5rem;
|
||||
color: $color-gray-10;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-image-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
background: $color-gray-60;
|
||||
border-radius: $br4;
|
||||
|
||||
width: calc(100% - 1rem);
|
||||
min-height: 5rem;
|
||||
|
||||
img {
|
||||
max-height: 8rem;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-shadow-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0.5rem;
|
||||
padding-right: 2rem;
|
||||
justify-content: space-between;
|
||||
|
||||
& > :first-child {
|
||||
color: $color-gray-10;
|
||||
}
|
||||
|
||||
.attributes-shadow {
|
||||
display: flex;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-stroke-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0.5rem;
|
||||
padding-right: 2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.attributes-typography-name-row {
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: $br4;
|
||||
margin: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.copy-button {
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-typography-row {
|
||||
position: relative;
|
||||
margin: 0.5rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
.typography-sample {
|
||||
font-size: $fs16;
|
||||
}
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: block;
|
||||
text-align: center;
|
||||
border: 1px solid $color-gray-60;
|
||||
background-color: $color-gray-60;
|
||||
padding: 0.5rem 1rem;
|
||||
color: $color-gray-10;
|
||||
width: calc(100% - 1rem);
|
||||
border-radius: $br4;
|
||||
margin: 0.5rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-block-title,
|
||||
.attributes-unit-row,
|
||||
.attributes-color-row,
|
||||
.attributes-shadow-row,
|
||||
.attributes-stroke-row,
|
||||
.attributes-typography-row,
|
||||
.attributes-content-row,
|
||||
.attributes-typography-name-row {
|
||||
&:hover {
|
||||
.expand-button,
|
||||
.copy-button {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-shadow-block,
|
||||
.attributes-stroke-block,
|
||||
.attributes-fill-block {
|
||||
border-top: 1px solid $color-gray-60;
|
||||
}
|
||||
|
||||
.attributes-shadow-blocks :first-child,
|
||||
.attributes-stroke-blocks :first-child,
|
||||
.attributes-fill-blocks :first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.code-block {
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
border-top: 1px solid $color-gray-60;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.code-row-lang {
|
||||
.expand-button,
|
||||
.copy-button {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-row-lang {
|
||||
color: $color-gray-10;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $fs14;
|
||||
margin: 0.5rem;
|
||||
|
||||
.expand-button,
|
||||
.copy-button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
border: 1px solid $color-gray-40;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 1.5rem 0.25rem 0.25rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.dropdown-button {
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 7px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-40;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
background-color: $color-white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: 0;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
top: 30px;
|
||||
z-index: 12;
|
||||
|
||||
li {
|
||||
color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
gap: 0 10px;
|
||||
justify-content: flex-start;
|
||||
padding: 0.5rem;
|
||||
|
||||
.checked-element {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: none;
|
||||
margin: 0.25rem;
|
||||
fill: $color-black;
|
||||
}
|
||||
|
||||
.is-selected svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-row-display {
|
||||
line-height: 1;
|
||||
margin: 0.5rem;
|
||||
font-size: $fs14;
|
||||
max-height: var(--code-height, 400px);
|
||||
overflow: auto;
|
||||
|
||||
.code-display {
|
||||
font-family: monospace;
|
||||
border-radius: $br4;
|
||||
padding: 0.5rem 1rem;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
min-width: fit-content;
|
||||
background: $color-gray-60;
|
||||
user-select: text;
|
||||
|
||||
.hljs-attr {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.hljs-comment {
|
||||
color: $color-gray-30;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #66d9ef;
|
||||
}
|
||||
}
|
||||
}
|
||||
.resize-area {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
height: 18px;
|
||||
z-index: 1;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.element-options > :first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.inspect-annotation {
|
||||
.content {
|
||||
background-color: $color-gray-60;
|
||||
color: $color-white;
|
||||
margin: 0 10px;
|
||||
padding: 10px;
|
||||
font-size: $fs14;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
.viewer-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 130px 1fr;
|
||||
height: 48px;
|
||||
padding: 0 $size-4 0 55px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
|
||||
a {
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.nav-zone {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 48px;
|
||||
|
||||
a {
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options-zone {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
> * {
|
||||
margin-left: $size-5;
|
||||
@media only screen and (max-width: 1366px) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 1366px) {
|
||||
padding: 0 0.5rem;
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-options {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
margin-right: $size-1;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 295px;
|
||||
top: 45px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sitemap-zone {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $size-1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
margin-right: $size-2;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: grid;
|
||||
grid-template-columns: auto 10px auto 10px auto;
|
||||
}
|
||||
|
||||
.breadcrumb,
|
||||
.current-frame {
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
color: $color-gray-20;
|
||||
margin-right: $size-1;
|
||||
font-size: $fs14;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
top: 45px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.current-frame {
|
||||
display: grid;
|
||||
grid-template-columns: 14px 1fr;
|
||||
span {
|
||||
color: $color-white;
|
||||
margin-right: $size-1;
|
||||
}
|
||||
|
||||
.counters {
|
||||
color: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mode-zone {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.mode-zone-button {
|
||||
background: inherit;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $color-gray-60;
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.users-zone {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
.viewer-thumbnails {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
|
||||
background-color: $color-gray-50;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 11;
|
||||
|
||||
&.invisible {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
grid-row: 1 / span 2;
|
||||
|
||||
.btn-expand svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails-summary {
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50px;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
color: $color-gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails-content {
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto 40px;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.left-scroll-handler {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
background-color: $color-gray-50;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-scroll-handler {
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
background-color: $color-gray-50;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails-list {
|
||||
grid-column: 1 / span 3;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.thumbnails-list-inside {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails-list-expanded {
|
||||
grid-column: 1 / span 3;
|
||||
grid-row: 1 / span 1;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
background-color: $color-gray-40;
|
||||
width: 120px;
|
||||
min-height: 120px;
|
||||
height: 120px;
|
||||
border: 1px solid $color-gray-20;
|
||||
border-radius: $br2;
|
||||
padding: 4px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
outline: 2px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-info {
|
||||
padding: 0.5rem 0;
|
||||
width: 120px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-close {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
z-index: 11;
|
||||
|
||||
&.invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
.viewer-content {
|
||||
background-color: black;
|
||||
display: grid;
|
||||
grid-template-rows: 232px auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.fullscreen.viewer-layout {
|
||||
.viewer-section {
|
||||
& .viewer-go-prev,
|
||||
& .viewer-go-next {
|
||||
.arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fullscreen.viewer-layout.force-visible {
|
||||
.viewer-section {
|
||||
& .viewer-go-prev,
|
||||
& .viewer-go-next {
|
||||
.arrow {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-loader {
|
||||
svg#loader-pencil {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-section {
|
||||
height: calc(100vh - 48px);
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: wrap;
|
||||
overflow: auto;
|
||||
|
||||
&.fullscreen {
|
||||
height: 100vh;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& .viewer-go-prev,
|
||||
& .viewer-go-next {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 53px;
|
||||
z-index: 2;
|
||||
.arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $br12;
|
||||
background: $color-gray-50;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
fill: $color-gray-30;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-next {
|
||||
right: 8px;
|
||||
width: 46px;
|
||||
svg {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-next.right-bar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
& .viewer-go-prev {
|
||||
left: 0;
|
||||
padding-left: 29px;
|
||||
svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-prev.left-bar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
|
||||
&.left-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: $br12;
|
||||
background: $color-gray-50;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
fill: $color-gray-30;
|
||||
margin-left: 29px;
|
||||
|
||||
svg {
|
||||
margin-left: 4px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $br12;
|
||||
background: $color-gray-50;
|
||||
width: 67px;
|
||||
height: 25px;
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& .viewer-clipper {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-wrapper-out {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& .comments-right-sidebar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 256px;
|
||||
height: calc(100vh - 48px);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-container {
|
||||
clip-path: inset(0 0 0 0);
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 1 / 1;
|
||||
|
||||
.not-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
|
||||
.frame-children g {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -92,45 +92,29 @@
|
|||
|
||||
(mf/defc viewer-pagination
|
||||
[{:keys [index num-frames left-bar right-bar comment-sidebar] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
go-prev-frame (mf/use-fn #(st/emit! dv/select-prev-frame))
|
||||
(let [go-prev-frame (mf/use-fn #(st/emit! dv/select-prev-frame))
|
||||
go-next-frame (mf/use-fn #(st/emit! dv/select-next-frame))
|
||||
go-first-frame (mf/use-fn #(st/emit! dv/select-first-frame))]
|
||||
(if new-css-system
|
||||
[:*
|
||||
(when (pos? index)
|
||||
[:button {:class (stl/css-case :viewer-go-prev true
|
||||
:left-bar left-bar)
|
||||
:on-click go-prev-frame}
|
||||
i/arrow-refactor])
|
||||
(when (< (+ index 1) num-frames)
|
||||
[:button {:class (stl/css-case :viewer-go-next true
|
||||
:comment-sidebar comment-sidebar
|
||||
:right-bar right-bar)
|
||||
:on-click go-next-frame}
|
||||
i/arrow-refactor])
|
||||
[:div {:class (stl/css-case :viewer-bottom true
|
||||
:left-bar left-bar)}
|
||||
[:button {:on-click go-first-frame
|
||||
:class (stl/css :reset-button)}
|
||||
i/reload-refactor]
|
||||
[:span {:class (stl/css :counter)}
|
||||
(str/join " / " [(+ index 1) num-frames])]
|
||||
[:span]]]
|
||||
|
||||
|
||||
;; OLD
|
||||
[:*
|
||||
(when (pos? index)
|
||||
[:div.viewer-go-prev {:class (when left-bar "left-bar")}
|
||||
[:div.arrow {:on-click go-prev-frame} i/go-prev]])
|
||||
(when (< (+ index 1) num-frames)
|
||||
[:div.viewer-go-next {:class (when right-bar "right-bar")}
|
||||
[:div.arrow {:on-click go-next-frame} i/go-next]])
|
||||
[:div.viewer-bottom {:class (when left-bar "left-bar")}
|
||||
[:div.reset {:on-click go-first-frame} i/reset]
|
||||
[:div.counter (str/join " / " [(+ index 1) num-frames])]
|
||||
[:span]]])))
|
||||
[:*
|
||||
(when (pos? index)
|
||||
[:button {:class (stl/css-case :viewer-go-prev true
|
||||
:left-bar left-bar)
|
||||
:on-click go-prev-frame}
|
||||
i/arrow-refactor])
|
||||
(when (< (+ index 1) num-frames)
|
||||
[:button {:class (stl/css-case :viewer-go-next true
|
||||
:comment-sidebar comment-sidebar
|
||||
:right-bar right-bar)
|
||||
:on-click go-next-frame}
|
||||
i/arrow-refactor])
|
||||
[:div {:class (stl/css-case :viewer-bottom true
|
||||
:left-bar left-bar)}
|
||||
[:button {:on-click go-first-frame
|
||||
:class (stl/css :reset-button)}
|
||||
i/reload-refactor]
|
||||
[:span {:class (stl/css :counter)}
|
||||
(str/join " / " [(+ index 1) num-frames])]
|
||||
[:span]]]))
|
||||
|
||||
(mf/defc viewer-pagination-and-sidebar
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
@ -175,21 +159,21 @@
|
|||
|
||||
[:*
|
||||
(when (or close-click-outside? background-overlay?)
|
||||
[:div.viewer-overlay-background
|
||||
{:class (dom/classnames :visible background-overlay?)
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)
|
||||
:position "absolute"
|
||||
:left 0
|
||||
:top 0}
|
||||
:on-click on-click}])
|
||||
[:div {:class (stl/css-case :viewer-overlay-background true
|
||||
:visible background-overlay?)
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)
|
||||
:position "absolute"
|
||||
:left 0
|
||||
:top 0}
|
||||
:on-click on-click}])
|
||||
|
||||
[:div.viewport-container.viewer-overlay
|
||||
{:id (dm/str "overlay-" (:id overlay-frame))
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:left (* (:x overlay-position) zoom)
|
||||
:top (* (:y overlay-position) zoom)}}
|
||||
[:div {:class (stl/css :viewer-overlay :viewport-container)
|
||||
:id (dm/str "overlay-" (:id overlay-frame))
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:left (* (:x overlay-position) zoom)
|
||||
:top (* (:y overlay-position) zoom)}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame overlay-frame
|
||||
|
|
@ -205,141 +189,72 @@
|
|||
[{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
|
||||
size frame interactions-mode overlays zoom section index]}]
|
||||
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:*
|
||||
[:& viewer-pagination-and-sidebar
|
||||
{:section section
|
||||
:index index
|
||||
:page page
|
||||
:users users
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode}]
|
||||
[:*
|
||||
[:& viewer-pagination-and-sidebar
|
||||
{:section section
|
||||
:index index
|
||||
:page page
|
||||
:users users
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
[:div {:class (stl/css :viewer-wrapper)
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)}}
|
||||
[:div {:class (stl/css :viewer-clipper)}
|
||||
[:div {:class (stl/css :viewer-wrapper)
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)}}
|
||||
[:div {:class (stl/css :viewer-clipper)}
|
||||
|
||||
(when orig-frame
|
||||
[:div {:class (stl/css :viewport-container)
|
||||
:ref orig-viewport-ref
|
||||
:style {:width (:width orig-size)
|
||||
:height (:height orig-size)
|
||||
:position "relative"}}
|
||||
(when orig-frame
|
||||
[:div {:class (stl/css :viewport-container)
|
||||
:ref orig-viewport-ref
|
||||
:style {:width (:width orig-size)
|
||||
:height (:height orig-size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame orig-frame
|
||||
:base-frame orig-frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size orig-size
|
||||
:page page
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]])
|
||||
[:& interactions/viewport
|
||||
{:frame orig-frame
|
||||
:base-frame orig-frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size orig-size
|
||||
:page page
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]])
|
||||
|
||||
[:div {:class (stl/css :viewport-container)
|
||||
:ref current-viewport-ref
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:position "relative"}}
|
||||
[:div {:class (stl/css :viewport-container)
|
||||
:ref current-viewport-ref
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:interactions-mode interactions-mode}]
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
(for [overlay overlays]
|
||||
[:& viewer-overlay
|
||||
{:overlay overlay
|
||||
:key (dm/str (:id overlay))
|
||||
:page page
|
||||
:frame frame
|
||||
:zoom zoom
|
||||
:wrapper-size wrapper-size
|
||||
:interactions-mode interactions-mode}])]]
|
||||
(for [overlay overlays]
|
||||
[:& viewer-overlay
|
||||
{:overlay overlay
|
||||
:key (dm/str (:id overlay))
|
||||
:page page
|
||||
:frame frame
|
||||
:zoom zoom
|
||||
:wrapper-size wrapper-size
|
||||
:interactions-mode interactions-mode}])]]
|
||||
|
||||
|
||||
(when (= section :comments)
|
||||
[:& comments-layer {:file file
|
||||
:users users
|
||||
:frame frame
|
||||
:page page
|
||||
:zoom zoom}])]]
|
||||
|
||||
|
||||
|
||||
;; OLD
|
||||
[:*
|
||||
[:& viewer-pagination-and-sidebar
|
||||
{:section section
|
||||
:index index
|
||||
:page page
|
||||
:users users
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
[:div.viewer-wrapper
|
||||
{:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)}}
|
||||
[:div.viewer-clipper
|
||||
(when orig-frame
|
||||
[:div.viewport-container
|
||||
{:ref orig-viewport-ref
|
||||
:style {:width (:width orig-size)
|
||||
:height (:height orig-size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame orig-frame
|
||||
:base-frame orig-frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size orig-size
|
||||
:page page
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]])
|
||||
|
||||
[:div.viewport-container
|
||||
{:ref current-viewport-ref
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
(for [overlay overlays]
|
||||
[:& viewer-overlay
|
||||
{:overlay overlay
|
||||
:key (dm/str (:id overlay))
|
||||
:page page
|
||||
:frame frame
|
||||
:zoom zoom
|
||||
:wrapper-size wrapper-size
|
||||
:interactions-mode interactions-mode}])]]
|
||||
|
||||
|
||||
(when (= section :comments)
|
||||
[:& comments-layer {:file file
|
||||
:users users
|
||||
:frame frame
|
||||
:page page
|
||||
:zoom zoom}])]])))
|
||||
(when (= section :comments)
|
||||
[:& comments-layer {:file file
|
||||
:users users
|
||||
:frame frame
|
||||
:page page
|
||||
:zoom zoom}])]])
|
||||
|
||||
(mf/defc viewer-content
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [data page-id share-id section index interactions-mode] :as props}]
|
||||
(let [{:keys [file users project permissions]} data
|
||||
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
|
||||
allowed (or
|
||||
(= section :interactions)
|
||||
(and (= section :comments)
|
||||
|
|
@ -597,153 +512,80 @@
|
|||
fonts (into #{} (keep :font-id) text-nodes)]
|
||||
(run! fonts/ensure-loaded! fonts))))
|
||||
|
||||
(if new-css-system
|
||||
[:div#viewer-layout
|
||||
{:class (stl/css-case
|
||||
:force-visible (:show-thumbnails local)
|
||||
:viewer-layout (not= section :inspect)
|
||||
:inspect-layout (= section :inspect)
|
||||
:fullscreen fullscreen?)}
|
||||
[:div#viewer-layout
|
||||
{:class (stl/css-case
|
||||
:force-visible (:show-thumbnails local)
|
||||
:viewer-layout (not= section :inspect)
|
||||
:inspect-layout (= section :inspect)
|
||||
:fullscreen fullscreen?)}
|
||||
|
||||
[:div {:class (stl/css :viewer-content)}
|
||||
[:& header/header {:project project
|
||||
:index index
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:permissions permissions
|
||||
:zoom zoom
|
||||
:section section
|
||||
:interactions-mode interactions-mode}]
|
||||
[:div {:class (stl/css :viewer-content)}
|
||||
[:& header/header {:project project
|
||||
:index index
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:permissions permissions
|
||||
:zoom zoom
|
||||
:section section
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
[:button {:on-click on-thumbnails-close
|
||||
:class (stl/css-case :thumbnails-close true
|
||||
:invisible (not (:show-thumbnails local false)))}]
|
||||
[:button {:on-click on-thumbnails-close
|
||||
:class (stl/css-case :thumbnails-close true
|
||||
:invisible (not (:show-thumbnails local false)))}]
|
||||
|
||||
[:& thumbnails-panel {:frames frames
|
||||
:show? (:show-thumbnails local false)
|
||||
:page page
|
||||
:index index
|
||||
:thumbnail-data (:thumbnails file)}]
|
||||
[:& thumbnails-panel {:frames frames
|
||||
:show? (:show-thumbnails local false)
|
||||
:page page
|
||||
:index index
|
||||
:thumbnail-data (:thumbnails file)}]
|
||||
|
||||
[:section {:id "viewer-section"
|
||||
:ref viewer-section-ref
|
||||
:class (stl/css-case :viewer-section true
|
||||
:fulscreen fullscreen?)
|
||||
:on-click click-on-screen}
|
||||
(cond
|
||||
(empty? frames)
|
||||
[:section {:class (stl/css :empty-state)}
|
||||
[:span (tr "viewer.empty-state")]]
|
||||
[:section {:id "viewer-section"
|
||||
:ref viewer-section-ref
|
||||
:class (stl/css-case :viewer-section true
|
||||
:fulscreen fullscreen?)
|
||||
:on-click click-on-screen}
|
||||
(cond
|
||||
(empty? frames)
|
||||
[:section {:class (stl/css :empty-state)}
|
||||
[:span (tr "viewer.empty-state")]]
|
||||
|
||||
(nil? frame)
|
||||
[:section {:class (stl/css :empty-state)}
|
||||
(when (some? index)
|
||||
[:span (tr "viewer.frame-not-found")])]
|
||||
(nil? frame)
|
||||
[:section {:class (stl/css :empty-state)}
|
||||
(when (some? index)
|
||||
[:span (tr "viewer.frame-not-found")])]
|
||||
|
||||
(some? frame)
|
||||
(if (= :inspect section)
|
||||
[:& inspect/viewport
|
||||
{:frame frame
|
||||
:page page
|
||||
:file file
|
||||
:section section
|
||||
:local local
|
||||
:size size
|
||||
:index index
|
||||
:viewer-pagination viewer-pagination
|
||||
:interactions-mode interactions-mode
|
||||
:share-id share-id}]
|
||||
(some? frame)
|
||||
(if (= :inspect section)
|
||||
[:& inspect/viewport
|
||||
{:frame frame
|
||||
:page page
|
||||
:file file
|
||||
:section section
|
||||
:local local
|
||||
:size size
|
||||
:index index
|
||||
:viewer-pagination viewer-pagination
|
||||
:interactions-mode interactions-mode
|
||||
:share-id share-id}]
|
||||
|
||||
[:& (mf/provider ctx/current-zoom) {:value zoom}
|
||||
[:& viewer-wrapper
|
||||
{:wrapper-size wrapper-size
|
||||
:orig-frame orig-frame
|
||||
:orig-viewport-ref orig-viewport-ref
|
||||
:orig-size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:current-viewport-ref current-viewport-ref
|
||||
:size size
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode
|
||||
:overlays overlays
|
||||
:zoom zoom
|
||||
:section section
|
||||
:index index}]]))]]]
|
||||
|
||||
;; OLD
|
||||
[:div#viewer-layout
|
||||
{:class (dom/classnames
|
||||
:force-visible (:show-thumbnails local)
|
||||
:viewer-layout (not= section :inspect)
|
||||
:inspect-layout (= section :inspect)
|
||||
:fullscreen fullscreen?)}
|
||||
|
||||
[:div.viewer-content
|
||||
[:& header/header {:project project
|
||||
:index index
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:permissions permissions
|
||||
:zoom zoom
|
||||
:section section
|
||||
:interactions-mode interactions-mode}]
|
||||
[:div.thumbnail-close {:on-click on-thumbnails-close
|
||||
:class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
|
||||
[:& thumbnails-panel {:frames frames
|
||||
:show? (:show-thumbnails local false)
|
||||
:page page
|
||||
:index index
|
||||
:thumbnail-data (:thumbnails file)}]
|
||||
[:section.viewer-section {:id "viewer-section"
|
||||
:ref viewer-section-ref
|
||||
:class (if fullscreen? "fullscreen" "")
|
||||
:on-click click-on-screen}
|
||||
(cond
|
||||
(empty? frames)
|
||||
[:section.empty-state
|
||||
[:span (tr "viewer.empty-state")]]
|
||||
|
||||
(nil? frame)
|
||||
[:section.empty-state
|
||||
(when (some? index)
|
||||
[:span (tr "viewer.frame-not-found")])]
|
||||
|
||||
(some? frame)
|
||||
(if (= :inspect section)
|
||||
[:& inspect/viewport
|
||||
{:frame frame
|
||||
:page page
|
||||
:file file
|
||||
:section section
|
||||
:local local
|
||||
:size size
|
||||
:index index
|
||||
:viewer-pagination viewer-pagination
|
||||
:interactions-mode interactions-mode
|
||||
:share-id share-id}]
|
||||
|
||||
|
||||
[:& (mf/provider ctx/current-zoom) {:value zoom}
|
||||
[:& viewer-wrapper
|
||||
{:wrapper-size wrapper-size
|
||||
:orig-frame orig-frame
|
||||
:orig-viewport-ref orig-viewport-ref
|
||||
:orig-size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:current-viewport-ref current-viewport-ref
|
||||
:size size
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode
|
||||
:overlays overlays
|
||||
:zoom zoom
|
||||
:section section
|
||||
:index index}]]))]]])))
|
||||
[:& (mf/provider ctx/current-zoom) {:value zoom}
|
||||
[:& viewer-wrapper
|
||||
{:wrapper-size wrapper-size
|
||||
:orig-frame orig-frame
|
||||
:orig-viewport-ref orig-viewport-ref
|
||||
:orig-size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:current-viewport-ref current-viewport-ref
|
||||
:size size
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode
|
||||
:overlays overlays
|
||||
:zoom zoom
|
||||
:section section
|
||||
:index index}]]))]]]))
|
||||
|
||||
;; --- Component: Viewer
|
||||
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@
|
|||
border-radius: $br-8;
|
||||
width: $s-64;
|
||||
height: $s-32;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
background-color: var(--viewer-controls-background-color);
|
||||
}
|
||||
|
||||
|
|
@ -140,3 +141,40 @@
|
|||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-overlay-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&.visible {
|
||||
background-color: rgb(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.viewport-container {
|
||||
clip-path: inset(0 0 0 0);
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 1 / 1;
|
||||
|
||||
.not-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
|
||||
.frame-children g {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(svg#loader-pencil) {
|
||||
fill: var(--icon-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.comments :as cmt]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.comments :as wc]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -31,7 +30,6 @@
|
|||
::mf/wrap-props false}
|
||||
[]
|
||||
(let [{cmode :mode cshow :show show-sidebar? :show-sidebar?} (mf/deref refs/comments-local)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
show-dropdown? (mf/use-state false)
|
||||
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
|
||||
hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
|
||||
|
|
@ -54,103 +52,67 @@
|
|||
|
||||
update-options
|
||||
(mf/use-callback
|
||||
(mf/deps show-sidebar?)
|
||||
(fn [event]
|
||||
(let [mode (-> (dom/get-target event)
|
||||
(dom/get-data "value")
|
||||
(boolean))]
|
||||
(st/emit! (dcm/update-options {:show-sidebar? mode})))))]
|
||||
(boolean))
|
||||
_ (prn mode)]
|
||||
(st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :view-options)
|
||||
:on-click toggle-dropdown}
|
||||
[:span {:class (stl/css :dropdown-title)}
|
||||
(tr "labels.comments")]
|
||||
[:span {:class (stl/css :icon-dropdown)}
|
||||
i/arrow-refactor]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (or (= :all cmode) (nil? cmode)))
|
||||
:data-value :all
|
||||
:on-click update-mode}
|
||||
[:div {:class (stl/css :view-options)
|
||||
:on-click toggle-dropdown}
|
||||
[:span {:class (stl/css :dropdown-title)}
|
||||
(tr "labels.comments")]
|
||||
[:span {:class (stl/css :icon-dropdown)}
|
||||
i/arrow-refactor]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (or (= :all cmode) (nil? cmode)))
|
||||
:data-value :all
|
||||
:on-click update-mode}
|
||||
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
|
||||
(when (or (= :all cmode) (nil? cmode))
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
|
||||
(when (or (= :all cmode) (nil? cmode))
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= :yours cmode))
|
||||
:data-value :yours
|
||||
:on-click update-mode}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= :yours cmode))
|
||||
:data-value :yours
|
||||
:on-click update-mode}
|
||||
|
||||
[:span {:class (stl/css :label)}
|
||||
(tr "labels.show-your-comments")]
|
||||
[:span {:class (stl/css :label)}
|
||||
(tr "labels.show-your-comments")]
|
||||
|
||||
(when (= :yours cmode)
|
||||
[:span {:class (stl/css :icon)}
|
||||
i/tick-refactor])]
|
||||
(when (= :yours cmode)
|
||||
[:span {:class (stl/css :icon)}
|
||||
i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css :separator)}]
|
||||
[:li {:class (stl/css :separator)}]
|
||||
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= :pending cshow))
|
||||
:data-value (if (= :pending cshow) :all :pending)
|
||||
:on-click update-show}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= :pending cshow))
|
||||
:data-value (if (= :pending cshow) :all :pending)
|
||||
:on-click update-show}
|
||||
|
||||
[:span {:class (stl/css :label)}
|
||||
(tr "labels.hide-resolved-comments")]
|
||||
(when (= :pending cshow)
|
||||
[:span {:class (stl/css :icon)}
|
||||
i/tick-refactor])]
|
||||
[:span {:class (stl/css :label)}
|
||||
(tr "labels.hide-resolved-comments")]
|
||||
(when (= :pending cshow)
|
||||
[:span {:class (stl/css :icon)}
|
||||
i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css :separator)}]
|
||||
[:li {:class (stl/css :separator)}]
|
||||
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected show-sidebar?)
|
||||
:data-value (not show-sidebar?)
|
||||
:on-click update-options}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected show-sidebar?)
|
||||
:data-value show-sidebar?
|
||||
:on-click update-options}
|
||||
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
|
||||
(when show-sidebar?
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]
|
||||
|
||||
|
||||
|
||||
; OLD
|
||||
[:div.view-options {:on-click toggle-dropdown}
|
||||
[:span.label (tr "labels.comments")]
|
||||
[:span.icon i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
|
||||
[:ul.dropdown.with-check
|
||||
[:li {:class (dom/classnames :selected (or (= :all cmode) (nil? cmode)))
|
||||
:data-value :all
|
||||
:on-click update-mode}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.show-all-comments")]]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= :yours cmode))
|
||||
:data-value :yours
|
||||
:on-click update-mode}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.show-your-comments")]]
|
||||
|
||||
[:hr]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= :pending cshow))
|
||||
:data-value (if (= :pending cshow) :all :pending)
|
||||
:on-click update-show}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.hide-resolved-comments")]]
|
||||
|
||||
[:hr]
|
||||
[:li {:class (dom/classnames :selected show-sidebar?)
|
||||
:data-value (not show-sidebar?)
|
||||
:on-click update-options}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.show-comments-list")]]]]])))
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
|
||||
(when show-sidebar?
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
|
||||
|
||||
|
||||
(defn- update-thread-position [positions {:keys [id] :as thread}]
|
||||
|
|
@ -162,8 +124,7 @@
|
|||
|
||||
(mf/defc comments-layer
|
||||
[{:keys [zoom file users frame page] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
profile (mf/deref refs/profile)
|
||||
(let [profile (mf/deref refs/profile)
|
||||
local (mf/deref refs/comments-local)
|
||||
|
||||
open-thread-id (:open local)
|
||||
|
|
@ -234,81 +195,44 @@
|
|||
(st/emit! (dcm/create-thread-on-viewer params)
|
||||
(dcm/close-thread)))))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :comments-section)
|
||||
:on-click on-click}
|
||||
[:div {:class (stl/css :viewer-comments-container)}
|
||||
[:div {:class (stl/css :threads)}
|
||||
(for [item threads]
|
||||
[:& cmt/thread-bubble
|
||||
{:thread item
|
||||
:position-modifier modifier1
|
||||
:zoom zoom
|
||||
:on-click on-bubble-click
|
||||
:open? (= (:id item) (:open local))
|
||||
:key (:seqn item)
|
||||
:origin :viewer}])
|
||||
[:div {:class (stl/css :comments-section)
|
||||
:on-click on-click}
|
||||
[:div {:class (stl/css :viewer-comments-container)}
|
||||
[:div {:class (stl/css :threads)}
|
||||
(for [item threads]
|
||||
[:& cmt/thread-bubble
|
||||
{:thread item
|
||||
:position-modifier modifier1
|
||||
:zoom zoom
|
||||
:on-click on-bubble-click
|
||||
:open? (= (:id item) (:open local))
|
||||
:key (:seqn item)
|
||||
:origin :viewer}])
|
||||
|
||||
(when-let [thread (get threads-map open-thread-id)]
|
||||
[:& cmt/thread-comments
|
||||
{:thread thread
|
||||
:position-modifier modifier1
|
||||
:users users
|
||||
:zoom zoom}])
|
||||
(when-let [thread (get threads-map open-thread-id)]
|
||||
[:& cmt/thread-comments
|
||||
{:thread thread
|
||||
:position-modifier modifier1
|
||||
:users users
|
||||
:zoom zoom}])
|
||||
|
||||
(when-let [draft (:draft local)]
|
||||
[:& cmt/draft-thread
|
||||
{:draft draft
|
||||
:position-modifier modifier1
|
||||
:on-cancel on-draft-cancel
|
||||
:on-submit on-draft-submit
|
||||
:zoom zoom}])]]]
|
||||
|
||||
|
||||
[:div.comments-section {:on-click on-click}
|
||||
[:div.viewer-comments-container
|
||||
[:div.threads
|
||||
(for [item threads]
|
||||
[:& cmt/thread-bubble
|
||||
{:thread item
|
||||
:position-modifier modifier1
|
||||
:zoom zoom
|
||||
:on-click on-bubble-click
|
||||
:open? (= (:id item) (:open local))
|
||||
:key (:seqn item)
|
||||
:origin :viewer}])
|
||||
|
||||
(when-let [thread (get threads-map open-thread-id)]
|
||||
[:& cmt/thread-comments
|
||||
{:thread thread
|
||||
:position-modifier modifier1
|
||||
:users users
|
||||
:zoom zoom}])
|
||||
|
||||
(when-let [draft (:draft local)]
|
||||
[:& cmt/draft-thread
|
||||
{:draft draft
|
||||
:position-modifier modifier1
|
||||
:on-cancel on-draft-cancel
|
||||
:on-submit on-draft-submit
|
||||
:zoom zoom}])]]])))
|
||||
(when-let [draft (:draft local)]
|
||||
[:& cmt/draft-thread
|
||||
{:draft draft
|
||||
:position-modifier modifier1
|
||||
:on-cancel on-draft-cancel
|
||||
:on-submit on-draft-submit
|
||||
:zoom zoom}])]]]))
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[{:keys [users frame page]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
profile (mf/deref refs/profile)
|
||||
(let [profile (mf/deref refs/profile)
|
||||
local (mf/deref refs/comments-local)
|
||||
threads-map (mf/deref refs/comment-threads)
|
||||
threads (->> (vals threads-map)
|
||||
(dcm/apply-filters local profile)
|
||||
(filter (fn [{:keys [position]}]
|
||||
(gsh/has-point? frame position))))]
|
||||
(if new-css-system
|
||||
[:aside {:class (stl/css :comments-sidebar)}
|
||||
[:div {:class (stl/css :settings-bar-inside)}
|
||||
[:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]]
|
||||
|
||||
|
||||
[:aside.settings-bar.settings-bar-right.comments-right-sidebar
|
||||
[:div.settings-bar-inside
|
||||
[:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]])))
|
||||
[:aside {:class (stl/css :comments-sidebar)}
|
||||
[:div {:class (stl/css :settings-bar-inside)}
|
||||
[:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]]))
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
[app.main.data.viewer.shortcuts :as sc]
|
||||
[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.icons :as i]
|
||||
|
|
@ -45,8 +44,7 @@
|
|||
on-zoom-fill]
|
||||
:as props}]
|
||||
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
open* (mf/use-state false)
|
||||
(let [open* (mf/use-state false)
|
||||
open? (deref open*)
|
||||
open-dropdown
|
||||
(mf/use-fn
|
||||
|
|
@ -72,92 +70,57 @@
|
|||
(mf/deps on-decrease)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(on-decrease)))
|
||||
(on-decrease)))]
|
||||
|
||||
show-dropdown? (mf/use-state false)]
|
||||
[:div {:class (stl/css-case :zoom-widget true
|
||||
:selected open?)
|
||||
:on-click open-dropdown
|
||||
:title (tr "workspace.header.zoom")}
|
||||
[:span {:class (stl/css :label)} (fmt/format-percent zoom)]
|
||||
[:& dropdown {:show open?
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css :basic-zoom-bar)}
|
||||
[:span {:class (stl/css :zoom-btns)}
|
||||
[:button {:class (stl/css :zoom-btn)
|
||||
:on-click on-decrease}
|
||||
[:span {:class (stl/css :zoom-icon)}
|
||||
i/remove-refactor]]
|
||||
[:p {:class (stl/css :zoom-text)}
|
||||
(fmt/format-percent zoom)]
|
||||
[:button {:class (stl/css :zoom-btn)
|
||||
:on-click on-increase}
|
||||
[:span {:class (stl/css :zoom-icon)}
|
||||
i/add-refactor]]]
|
||||
[:button {:class (stl/css :reset-btn)
|
||||
:on-click on-zoom-reset}
|
||||
(tr "workspace.header.reset-zoom")]]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css-case :zoom-widget true
|
||||
:selected open?)
|
||||
:on-click open-dropdown
|
||||
:title (tr "workspace.header.zoom")}
|
||||
[:span {:class (stl/css :label)} (fmt/format-percent zoom)]
|
||||
[:& dropdown {:show open?
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css :basic-zoom-bar)}
|
||||
[:span {:class (stl/css :zoom-btns)}
|
||||
[:button {:class (stl/css :zoom-btn)
|
||||
:on-click on-decrease}
|
||||
[:span {:class (stl/css :zoom-icon)}
|
||||
i/remove-refactor]]
|
||||
[:p {:class (stl/css :zoom-text)}
|
||||
(fmt/format-percent zoom)]
|
||||
[:button {:class (stl/css :zoom-btn)
|
||||
:on-click on-increase}
|
||||
[:span {:class (stl/css :zoom-icon)}
|
||||
i/add-refactor]]]
|
||||
[:button {:class (stl/css :reset-btn)
|
||||
:on-click on-zoom-reset}
|
||||
(tr "workspace.header.reset-zoom")]]
|
||||
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-zoom-fit}
|
||||
(tr "workspace.header.zoom-fit")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fit-" sc)} sc])]]
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-zoom-fill}
|
||||
(tr "workspace.header.zoom-fill")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fill-" sc)} sc])]]
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-fullscreen}
|
||||
(tr "workspace.header.zoom-full-screen")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fullscreen-" sc)} sc])]]]]]
|
||||
|
||||
|
||||
;; OLD
|
||||
[:div.zoom-widget {:on-click
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! show-dropdown? true))}
|
||||
[:span.label (fmt/format-percent zoom)]
|
||||
[:span.icon i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close #(reset! show-dropdown? false)}
|
||||
[:ul.dropdown
|
||||
[:li.basic-zoom-bar
|
||||
[:span.zoom-btns
|
||||
[:button {:on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(on-decrease))} "-"]
|
||||
[:p.zoom-size (fmt/format-percent zoom)]
|
||||
[:button {:on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(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") [:span (sc/get-tooltip :toggle-zoom-style)]]
|
||||
[:li {:on-click on-zoom-fill}
|
||||
(tr "workspace.header.zoom-fill") [:span (sc/get-tooltip :toggle-zoom-style)]]
|
||||
[:li {:on-click on-fullscreen}
|
||||
(tr "workspace.header.zoom-full-screen") [:span (sc/get-tooltip :toggle-fullscreen)]]]]])))
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-zoom-fit}
|
||||
(tr "workspace.header.zoom-fit")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fit-" sc)} sc])]]
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-zoom-fill}
|
||||
(tr "workspace.header.zoom-fill")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fill-" sc)} sc])]]
|
||||
[:li {:class (stl/css :zoom-option)
|
||||
:on-click on-fullscreen}
|
||||
(tr "workspace.header.zoom-full-screen")
|
||||
[:span {:class (stl/css :shortcuts)}
|
||||
(for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
|
||||
[:span {:class (stl/css :shortcut-key)
|
||||
:key (str "zoom-fullscreen-" sc)} sc])]]]]]))
|
||||
|
||||
(mf/defc header-options
|
||||
[{:keys [section zoom page file index permissions interactions-mode]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
fullscreen? (mf/deref fullscreen-ref)
|
||||
(let [fullscreen? (mf/deref fullscreen-ref)
|
||||
|
||||
toggle-fullscreen
|
||||
(mf/use-callback
|
||||
|
|
@ -196,89 +159,49 @@
|
|||
(mf/use-fn
|
||||
#(st/emit! dv/zoom-to-fit))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :options-zone)}
|
||||
(case section
|
||||
:interactions [:*
|
||||
(when index
|
||||
[:& flows-menu {:page page :index index}])
|
||||
[:& interactions-menu {:interactions-mode interactions-mode}]]
|
||||
:comments [:& comments-menu]
|
||||
[:div {:class (stl/css :view-options)}])
|
||||
[:div {:class (stl/css :options-zone)}
|
||||
(case section
|
||||
:interactions [:*
|
||||
(when index
|
||||
[:& flows-menu {:page page :index index}])
|
||||
[:& interactions-menu {:interactions-mode interactions-mode}]]
|
||||
:comments [:& comments-menu]
|
||||
[:div {:class (stl/css :view-options)}])
|
||||
|
||||
[:& export-progress-widget]
|
||||
[:& export-progress-widget]
|
||||
|
||||
[:& zoom-widget
|
||||
{:zoom zoom
|
||||
:on-increase handle-increase
|
||||
:on-decrease handle-decrease
|
||||
:on-zoom-reset handle-zoom-reset
|
||||
:on-zoom-fill handle-zoom-fill
|
||||
:on-zoom-fit handle-zoom-fit
|
||||
:on-fullscreen toggle-fullscreen}]
|
||||
[:& zoom-widget
|
||||
{:zoom zoom
|
||||
:on-increase handle-increase
|
||||
:on-decrease handle-decrease
|
||||
:on-zoom-reset handle-zoom-reset
|
||||
:on-zoom-fill handle-zoom-fill
|
||||
:on-zoom-fit handle-zoom-fit
|
||||
:on-fullscreen toggle-fullscreen}]
|
||||
|
||||
(when (:can-edit permissions)
|
||||
[:span {:on-click go-to-workspace
|
||||
:class (stl/css :edit-btn)}
|
||||
i/curve-refactor])
|
||||
(when (:can-edit permissions)
|
||||
[:span {:on-click go-to-workspace
|
||||
:class (stl/css :edit-btn)}
|
||||
i/curve-refactor])
|
||||
|
||||
[:span {:title (tr "viewer.header.fullscreen")
|
||||
:class (stl/css-case :fullscreen-btn true
|
||||
:selected fullscreen?)
|
||||
:on-click toggle-fullscreen}
|
||||
i/expand-refactor]
|
||||
[:span {:title (tr "viewer.header.fullscreen")
|
||||
:class (stl/css-case :fullscreen-btn true
|
||||
:selected fullscreen?)
|
||||
:on-click toggle-fullscreen}
|
||||
i/expand-refactor]
|
||||
|
||||
(when (:is-admin permissions)
|
||||
[:button {:on-click open-share-dialog
|
||||
:class (stl/css :share-btn)}
|
||||
(tr "labels.share")])
|
||||
(when (:is-admin permissions)
|
||||
[:button {:on-click open-share-dialog
|
||||
:class (stl/css :share-btn)}
|
||||
(tr "labels.share")])
|
||||
|
||||
(when-not (:is-logged permissions)
|
||||
[:span {:on-click open-login-dialog
|
||||
:class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]
|
||||
|
||||
|
||||
;; OLD
|
||||
[:div.options-zone
|
||||
(case section
|
||||
:interactions [:*
|
||||
(when index
|
||||
[:& flows-menu {:page page :index index}])
|
||||
[:& interactions-menu {:interactions-mode interactions-mode}]]
|
||||
:comments [:& comments-menu]
|
||||
|
||||
[:div.view-options])
|
||||
|
||||
[:& export-progress-widget]
|
||||
[:& zoom-widget
|
||||
{:zoom zoom
|
||||
:on-increase handle-increase
|
||||
:on-decrease handle-decrease
|
||||
:on-zoom-reset handle-zoom-reset
|
||||
:on-zoom-fill handle-zoom-fill
|
||||
:on-zoom-fit handle-zoom-fit
|
||||
:on-fullscreen toggle-fullscreen}]
|
||||
|
||||
[:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
|
||||
{:alt (tr "viewer.header.fullscreen")
|
||||
:on-click toggle-fullscreen}
|
||||
(if fullscreen?
|
||||
i/full-screen-off
|
||||
i/full-screen)]
|
||||
|
||||
(when (:is-admin permissions)
|
||||
[:span.btn-primary.tooltip.tooltip-bottom-left {:on-click open-share-dialog :alt (tr "labels.share-prototype")} i/export [:span (tr "labels.share-prototype")]])
|
||||
|
||||
(when (:can-edit permissions)
|
||||
[:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")])
|
||||
|
||||
(when-not (:is-logged permissions)
|
||||
[:span.btn-text-dark {:on-click open-login-dialog} (tr "labels.log-or-sign")])])))
|
||||
(when-not (:is-logged permissions)
|
||||
[:span {:on-click open-login-dialog
|
||||
:class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]))
|
||||
|
||||
(mf/defc header-sitemap
|
||||
[{:keys [project file page frame] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
project-name (:name project)
|
||||
(let [project-name (:name project)
|
||||
file-name (:name file)
|
||||
page-name (:name page)
|
||||
page-id (:id page)
|
||||
|
|
@ -306,66 +229,37 @@
|
|||
(st/emit! (dv/go-to-page page-id))
|
||||
(reset! show-dropdown? false)))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :sitemap-zone)
|
||||
:title (tr "viewer.header.sitemap")}
|
||||
[:span {:class (stl/css :project-name)} project-name]
|
||||
[:div {:class (stl/css :sitemap-text)}
|
||||
[:div {:class (stl/css :breadcrumb)
|
||||
:on-click open-dropdown}
|
||||
[:span {:class (stl/css :breadcrumb-text)}
|
||||
(dm/str file-name " / " page-name)]
|
||||
[:span {:class (stl/css :icon)} i/arrow-refactor]
|
||||
[:span "/"]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :dropdown-sitemap)}
|
||||
(for [id (get-in file [:data :pages])]
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= page-id id))
|
||||
:id (str id)
|
||||
:key (str id)
|
||||
:on-click (partial navigate-to id)}
|
||||
[:span {:class (stl/css :label)}
|
||||
(get-in file [:data :pages-index id :name])]
|
||||
(when (= page-id id)
|
||||
[:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
|
||||
[:div {:class (stl/css :current-frame)
|
||||
:on-click toggle-thumbnails}
|
||||
[:span {:class (stl/css :frame-name)} frame-name]
|
||||
[:span {:class (stl/css :icon)} i/arrow-refactor]]]]
|
||||
|
||||
|
||||
;; OLD
|
||||
[:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
|
||||
[:div.breadcrumb
|
||||
{:on-click open-dropdown}
|
||||
[:span.project-name project-name]
|
||||
[:span "/"]
|
||||
[:span.file-name file-name]
|
||||
[:span "/"]
|
||||
|
||||
[:span.page-name page-name]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close close-dropdown}
|
||||
[:ul.dropdown
|
||||
(for [id (get-in file [:data :pages])]
|
||||
[:li {:id (str id)
|
||||
:key (str id)
|
||||
:on-click (partial navigate-to id)}
|
||||
(get-in file [:data :pages-index id :name])])]]]
|
||||
|
||||
[:span.icon {:on-click open-dropdown} i/arrow-down]
|
||||
[:div.current-frame
|
||||
{:on-click toggle-thumbnails}
|
||||
[:span.label "/"]
|
||||
[:span.label frame-name]]
|
||||
[:span.icon {:on-click toggle-thumbnails} i/arrow-down]])))
|
||||
[:div {:class (stl/css :sitemap-zone)
|
||||
:title (tr "viewer.header.sitemap")}
|
||||
[:span {:class (stl/css :project-name)} project-name]
|
||||
[:div {:class (stl/css :sitemap-text)}
|
||||
[:div {:class (stl/css :breadcrumb)
|
||||
:on-click open-dropdown}
|
||||
[:span {:class (stl/css :breadcrumb-text)}
|
||||
(dm/str file-name " / " page-name)]
|
||||
[:span {:class (stl/css :icon)} i/arrow-refactor]
|
||||
[:span "/"]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :dropdown-sitemap)}
|
||||
(for [id (get-in file [:data :pages])]
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= page-id id))
|
||||
:id (str id)
|
||||
:key (str id)
|
||||
:on-click (partial navigate-to id)}
|
||||
[:span {:class (stl/css :label)}
|
||||
(get-in file [:data :pages-index id :name])]
|
||||
(when (= page-id id)
|
||||
[:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
|
||||
[:div {:class (stl/css :current-frame)
|
||||
:on-click toggle-thumbnails}
|
||||
[:span {:class (stl/css :frame-name)} frame-name]
|
||||
[:span {:class (stl/css :icon)} i/arrow-refactor]]]]))
|
||||
|
||||
(mf/defc header
|
||||
[{:keys [project file page frame zoom section permissions index interactions-mode]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
go-to-dashboard
|
||||
(let [go-to-dashboard
|
||||
(mf/use-fn
|
||||
#(st/emit! (dv/go-to-dashboard)))
|
||||
|
||||
|
|
@ -389,98 +283,52 @@
|
|||
(st/emit! (dv/go-to-section section))
|
||||
(open-login-dialog)))))]
|
||||
|
||||
(if new-css-system
|
||||
[:header {:class (stl/css :viewer-header)}
|
||||
[:div {:class (stl/css :nav-zone)}
|
||||
;; If the user doesn't have permission we disable the link
|
||||
[:a {:class (stl/css :home-link)
|
||||
:on-click go-to-dashboard
|
||||
:style {:cursor (when-not (:can-edit permissions) "auto")
|
||||
:pointer-events (when-not (:can-edit permissions) "none")}}
|
||||
[:span {:class (stl/css :logo-icon)}
|
||||
i/logo-icon]]
|
||||
|
||||
[:& header-sitemap {:project project
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:index index}]]
|
||||
|
||||
[:div {:class (stl/css :mode-zone)}
|
||||
[:button {:on-click navigate
|
||||
:data-value :interactions
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :interactions))
|
||||
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
|
||||
i/play-refactor]
|
||||
|
||||
(when (or (:can-edit permissions)
|
||||
(= (:who-comment permissions) "all"))
|
||||
[:button {:on-click navigate
|
||||
:data-value :comments
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :comments))
|
||||
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
|
||||
i/comments-refactor])
|
||||
|
||||
(when (or (= (:type permissions) :membership)
|
||||
(and (= (:type permissions) :share-link)
|
||||
(= (:who-inspect permissions) "all")))
|
||||
[:button {:on-click go-to-inspect
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :inspect))
|
||||
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
|
||||
i/code-refactor])]
|
||||
|
||||
[:& header-options {:section section
|
||||
:permissions permissions
|
||||
:page page
|
||||
:file file
|
||||
:index index
|
||||
:zoom zoom
|
||||
:interactions-mode interactions-mode}]]
|
||||
|
||||
|
||||
;; OLD
|
||||
[:header.viewer-header
|
||||
[:div.nav-zone
|
||||
[:header {:class (stl/css :viewer-header)}
|
||||
[:div {:class (stl/css :nav-zone)}
|
||||
;; If the user doesn't have permission we disable the link
|
||||
[:div.main-icon {:style {:cursor (when-not (:can-edit permissions) "auto")}}
|
||||
[:a {:on-click go-to-dashboard
|
||||
:style {:pointer-events (when-not (:can-edit permissions) "none")}} i/logo-icon]]
|
||||
[:a {:class (stl/css :home-link)
|
||||
:on-click go-to-dashboard
|
||||
:style {:cursor (when-not (:can-edit permissions) "auto")
|
||||
:pointer-events (when-not (:can-edit permissions) "none")}}
|
||||
[:span {:class (stl/css :logo-icon)}
|
||||
i/logo-icon]]
|
||||
|
||||
[:& header-sitemap {:project project :file file :page page :frame frame :index index}]]
|
||||
[:& header-sitemap {:project project
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:index index}]]
|
||||
|
||||
[:div.mode-zone
|
||||
[:button.mode-zone-button.tooltip.tooltip-bottom
|
||||
{:on-click navigate
|
||||
:data-value :interactions
|
||||
:class (dom/classnames :active (= section :interactions))
|
||||
:alt (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
|
||||
i/play]
|
||||
[:div {:class (stl/css :mode-zone)}
|
||||
[:button {:on-click navigate
|
||||
:data-value :interactions
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :interactions))
|
||||
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
|
||||
i/play-refactor]
|
||||
|
||||
(when (or (:can-edit permissions)
|
||||
(= (:who-comment permissions) "all"))
|
||||
[:button.mode-zone-button.tooltip.tooltip-bottom
|
||||
{:on-click navigate
|
||||
:data-value :comments
|
||||
:class (dom/classnames :active (= section :comments))
|
||||
:alt (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
|
||||
i/chat])
|
||||
(when (or (:can-edit permissions)
|
||||
(= (:who-comment permissions) "all"))
|
||||
[:button {:on-click navigate
|
||||
:data-value :comments
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :comments))
|
||||
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
|
||||
i/comments-refactor])
|
||||
|
||||
(when (or (= (:type permissions) :membership)
|
||||
(and (= (:type permissions) :share-link)
|
||||
(= (:who-inspect permissions) "all")))
|
||||
[:button.mode-zone-button.tooltip.tooltip-bottom
|
||||
{:on-click go-to-inspect
|
||||
:class (dom/classnames :active (= section :inspect))
|
||||
:alt (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
|
||||
i/code])]
|
||||
(when (or (= (:type permissions) :membership)
|
||||
(and (= (:type permissions) :share-link)
|
||||
(= (:who-inspect permissions) "all")))
|
||||
[:button {:on-click go-to-inspect
|
||||
:class (stl/css-case :mode-zone-btn true
|
||||
:selected (= section :inspect))
|
||||
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
|
||||
i/code-refactor])]
|
||||
|
||||
[:& header-options {:section section
|
||||
:permissions permissions
|
||||
:page page
|
||||
:file file
|
||||
:index index
|
||||
:zoom zoom
|
||||
:interactions-mode interactions-mode}]])))
|
||||
[:& header-options {:section section
|
||||
:permissions permissions
|
||||
:page page
|
||||
:file file
|
||||
:index index
|
||||
:zoom zoom
|
||||
:interactions-mode interactions-mode}]]))
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
|
||||
.project-name {
|
||||
@include tabTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.sitemap-text {
|
||||
|
|
|
|||
|
|
@ -5,15 +5,19 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.viewer.inspect.annotation
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc annotation
|
||||
[{:keys [content] :as props}]
|
||||
[:div.attributes-block.inspect-annotation
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "workspace.options.component.annotation")]
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.options.component.annotation")
|
||||
:class (stl/css :title-spacing-annotation)}
|
||||
[:& copy-button {:data content}]]
|
||||
[:div.content content]])
|
||||
|
||||
[:div {:class (stl/css :annotation-content)} content]])
|
||||
|
|
|
|||
20
frontend/src/app/main/ui/viewer/inspect/annotation.scss
Normal file
20
frontend/src/app/main/ui/viewer/inspect/annotation.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// 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
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-annotation {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.annotation-content {
|
||||
@include titleTipography;
|
||||
color: var(--entry-foreground-color);
|
||||
}
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
(:require
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -19,36 +18,20 @@
|
|||
|
||||
(mf/defc blur-panel
|
||||
[{:keys [objects shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (->> shapes (filter has-blur?))]
|
||||
(if new-css-system
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.blur")
|
||||
:class (stl/css :title-spacing-blur)}
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
|
||||
(let [shapes (->> shapes (filter has-blur?))]
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.blur")
|
||||
:class (stl/css :title-spacing-blur)}
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
[:div {:class (stl/css :blur-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} "Filter"]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects shape :filter)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(css/get-css-value objects shape :filter)]]]])]])
|
||||
|
||||
|
||||
(when (seq shapes)
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.blur")]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.blur.value")]
|
||||
[:div.attributes-value (css/get-css-value objects shape :filter)]
|
||||
[:& copy-button {:data (css/get-css-property objects shape :filter)}]])]))))
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
[:div {:class (stl/css :blur-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} "Filter"]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects shape :filter)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(css/get-css-value objects shape :filter)]]]])]])))
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-blur {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
.attributes-content {
|
||||
.blur-row {
|
||||
@extend .attr-row;
|
||||
}
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
||||
.title-spacing-blur {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.blur-row {
|
||||
@extend .attr-row;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,9 @@
|
|||
[app.config :as cf]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]
|
||||
[app.main.ui.components.color-bullet-new :as cbn]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
|
|
@ -47,147 +44,94 @@
|
|||
(or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
|
||||
|
||||
(mf/defc color-row [{:keys [color format copy-data on-change-format]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
colors-library (get-colors-library color)
|
||||
(let [colors-library (get-colors-library color)
|
||||
file-colors (get-file-colors)
|
||||
color-library-name (get-in (or colors-library file-colors) [(:id color) :name])
|
||||
color (assoc color :color-library-name color-library-name)
|
||||
image (:image color)]
|
||||
|
||||
(if new-css-system
|
||||
[:*
|
||||
[:div {:class (stl/css :attributes-color-row)}
|
||||
[:div {:class (stl/css :bullet-wrapper)
|
||||
:style #js {"--bullet-size" "16px"}}
|
||||
[:& cbn/color-bullet {:color color
|
||||
:mini? true}]]
|
||||
|
||||
(when-not image
|
||||
[:div {:class (stl/css :format-wrapper)}
|
||||
(when-not (and on-change-format (or (:gradient color) image))
|
||||
[:div {:class (stl/css :select-format-wrapper)}
|
||||
[:& select
|
||||
{:default-value format
|
||||
:options [{:value :hex :label (tr "inspect.attributes.color.hex")}
|
||||
{:value :rgba :label (tr "inspect.attributes.color.rgba")}
|
||||
{:value :hsla :label (tr "inspect.attributes.color.hsla")}]
|
||||
:on-change on-change-format}]])
|
||||
(when (:gradient color)
|
||||
[:div {:class (stl/css :format-info)} "rgba"])])
|
||||
|
||||
(if (and copy-data (not image))
|
||||
[:& copy-button {:data copy-data
|
||||
:class (stl/css :color-row-copy-btn)}
|
||||
[:*
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:div {:class (stl/css :name-opacity)}
|
||||
[:span {:class (stl/css-case :color-value-wrapper true
|
||||
:gradient-name (:gradient color))}
|
||||
(if (:gradient color)
|
||||
[:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
(case format
|
||||
:hex [:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
|
||||
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
|
||||
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
|
||||
result (cc/format-hsla [h s l a])]
|
||||
[:* result])))]
|
||||
|
||||
(when-not (:gradient color)
|
||||
[:span {:class (stl/css :opacity-info)}
|
||||
(str (* 100 (:opacity color)) "%")])]]
|
||||
|
||||
(when color-library-name
|
||||
[:div {:class (stl/css :second-row)}
|
||||
[:div {:class (stl/css :color-name-library)}
|
||||
color-library-name]])]]
|
||||
|
||||
[:div {:class (stl/css :color-info)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:div {:class (stl/css :name-opacity)}
|
||||
[:span {:class (stl/css-case :color-value-wrapper true
|
||||
:gradient-name (:gradient color))}
|
||||
(if (:gradient color)
|
||||
[:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
(case format
|
||||
:hex [:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
|
||||
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
|
||||
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
|
||||
result (cc/format-hsla [h s l a])]
|
||||
[:* result])))]
|
||||
|
||||
(when-not (:gradient color)
|
||||
[:span {:class (stl/css :opacity-info)}
|
||||
(str (* 100 (:opacity color)) "%")])]]
|
||||
|
||||
(when color-library-name
|
||||
[:div {:class (stl/css :second-row)}
|
||||
[:div {:class (stl/css :color-name-library)}
|
||||
color-library-name]])])]
|
||||
|
||||
(when image
|
||||
(let [mtype (-> image :mtype)
|
||||
name (or (:name image) (tr "media.image"))
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a {:class (stl/css :download-button)
|
||||
:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media image)}
|
||||
(tr "inspect.attributes.image.download")]))]
|
||||
|
||||
[:*
|
||||
[:div.attributes-color-row
|
||||
(when color-library-name
|
||||
[:div.attributes-color-id
|
||||
[:& color-bullet {:color color}]
|
||||
[:div color-library-name]])
|
||||
|
||||
[:div.attributes-color-value {:class (when color-library-name "hide-color")}
|
||||
[:& color-bullet {:color color}]
|
||||
|
||||
(cond
|
||||
(:gradient color)
|
||||
[:& color-name {:color color}]
|
||||
|
||||
(= format :rgba)
|
||||
(let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
|
||||
[:div (str/fmt "%s, %s, %s, %s" r g b a)])
|
||||
|
||||
(= format :hsla)
|
||||
(let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
|
||||
result (cc/format-hsla [h s l a])]
|
||||
[:div result])
|
||||
|
||||
:else
|
||||
[:*
|
||||
[:& color-name {:color color}]
|
||||
(when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])])
|
||||
[:*
|
||||
[:div {:class (stl/css :attributes-color-row)}
|
||||
[:div {:class (stl/css :bullet-wrapper)
|
||||
:style #js {"--bullet-size" "16px"}}
|
||||
[:& cbn/color-bullet {:color color
|
||||
:mini? true}]]
|
||||
|
||||
(when-not image
|
||||
[:div {:class (stl/css :format-wrapper)}
|
||||
(when-not (and on-change-format (or (:gradient color) image))
|
||||
[:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
|
||||
[:option {:value "hex"}
|
||||
(tr "inspect.attributes.color.hex")]
|
||||
[:div {:class (stl/css :select-format-wrapper)}
|
||||
[:& select
|
||||
{:default-value format
|
||||
:options [{:value :hex :label (tr "inspect.attributes.color.hex")}
|
||||
{:value :rgba :label (tr "inspect.attributes.color.rgba")}
|
||||
{:value :hsla :label (tr "inspect.attributes.color.hsla")}]
|
||||
:on-change on-change-format}]])
|
||||
(when (:gradient color)
|
||||
[:div {:class (stl/css :format-info)} "rgba"])])
|
||||
|
||||
[:option {:value "rgba"}
|
||||
(tr "inspect.attributes.color.rgba")]
|
||||
(if (and copy-data (not image))
|
||||
[:& copy-button {:data copy-data
|
||||
:class (stl/css :color-row-copy-btn)}
|
||||
[:*
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:div {:class (stl/css :name-opacity)}
|
||||
[:span {:class (stl/css-case :color-value-wrapper true
|
||||
:gradient-name (:gradient color))}
|
||||
(if (:gradient color)
|
||||
[:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
(case format
|
||||
:hex [:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
|
||||
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
|
||||
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
|
||||
result (cc/format-hsla [h s l a])]
|
||||
[:* result])))]
|
||||
|
||||
[:option {:value "hsla"}
|
||||
(tr "inspect.attributes.color.hsla")]])]
|
||||
(when-not (:gradient color)
|
||||
[:span {:class (stl/css :opacity-info)}
|
||||
(str (* 100 (:opacity color)) "%")])]]
|
||||
|
||||
(when (and copy-data (not image))
|
||||
[:& copy-button {:data copy-data}])]
|
||||
(when color-library-name
|
||||
[:div {:class (stl/css :second-row)}
|
||||
[:div {:class (stl/css :color-name-library)}
|
||||
color-library-name]])]]
|
||||
|
||||
(when image
|
||||
(let [mtype (-> image :mtype)
|
||||
name (or (:name image) (tr "media.image"))
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a.download-button {:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media image)}
|
||||
(tr "inspect.attributes.image.download")]))])))
|
||||
[:div {:class (stl/css :color-info)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:div {:class (stl/css :name-opacity)}
|
||||
[:span {:class (stl/css-case :color-value-wrapper true
|
||||
:gradient-name (:gradient color))}
|
||||
(if (:gradient color)
|
||||
[:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
(case format
|
||||
:hex [:& cbn/color-name {:color color
|
||||
:size 80}]
|
||||
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
|
||||
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
|
||||
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
|
||||
result (cc/format-hsla [h s l a])]
|
||||
[:* result])))]
|
||||
|
||||
(when-not (:gradient color)
|
||||
[:span {:class (stl/css :opacity-info)}
|
||||
(str (* 100 (:opacity color)) "%")])]]
|
||||
|
||||
(when color-library-name
|
||||
[:div {:class (stl/css :second-row)}
|
||||
[:div {:class (stl/css :color-name-library)}
|
||||
color-library-name]])])]
|
||||
|
||||
(when image
|
||||
(let [mtype (-> image :mtype)
|
||||
name (or (:name image) (tr "media.image"))
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a {:class (stl/css :download-button)
|
||||
:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media image)}
|
||||
(tr "inspect.attributes.image.download")]))]))
|
||||
|
||||
|
|
|
|||
|
|
@ -10,70 +10,45 @@
|
|||
display: grid;
|
||||
grid-template-columns: $s-16 $s-72 $s-156;
|
||||
gap: $s-4;
|
||||
.bullet-wrapper {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
}
|
||||
.format-wrapper {
|
||||
width: $s-72;
|
||||
height: $s-32;
|
||||
.select-format-wrapper {
|
||||
width: 100%;
|
||||
div {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding-left: $s-2;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
}
|
||||
.format-info {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: $s-2;
|
||||
font-size: $fs-12;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-wrapper {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
}
|
||||
|
||||
.format-wrapper {
|
||||
width: $s-72;
|
||||
height: $s-32;
|
||||
}
|
||||
|
||||
.select-format-wrapper {
|
||||
width: 100%;
|
||||
div {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding-left: $s-2;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
}
|
||||
|
||||
.format-info {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: $s-2;
|
||||
font-size: $fs-12;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
|
||||
.color-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $s-4;
|
||||
flex-grow: 1;
|
||||
|
||||
.color-name-wrapper {
|
||||
@include titleTipography;
|
||||
@include flexColumn;
|
||||
padding: $s-8 $s-4 $s-8 $s-8;
|
||||
height: $s-32;
|
||||
max-width: $s-80;
|
||||
&.gradient-color {
|
||||
max-width: $s-124;
|
||||
}
|
||||
.color-name-library {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
text-align: left;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
.color-value-wrapper {
|
||||
@include titleTipography;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-info {
|
||||
@include titleTipography;
|
||||
color: var(--menu-foreground-color);
|
||||
padding: $s-8 0;
|
||||
}
|
||||
|
||||
button {
|
||||
visibility: hidden;
|
||||
min-width: $s-28;
|
||||
|
|
@ -83,51 +58,84 @@
|
|||
}
|
||||
}
|
||||
|
||||
.color-name-wrapper {
|
||||
@include titleTipography;
|
||||
@include flexColumn;
|
||||
padding: $s-8 $s-4 $s-8 $s-8;
|
||||
height: $s-32;
|
||||
max-width: $s-80;
|
||||
&.gradient-color {
|
||||
max-width: $s-124;
|
||||
}
|
||||
.color-name-library {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
text-align: left;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
.color-value-wrapper {
|
||||
@include titleTipography;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-info {
|
||||
@include titleTipography;
|
||||
color: var(--menu-foreground-color);
|
||||
padding: $s-8 0;
|
||||
}
|
||||
|
||||
.color-info,
|
||||
.color-row-copy-btn {
|
||||
@include copyWrapper;
|
||||
.first-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-20;
|
||||
grid-template-areas: "name button";
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.name-opacity {
|
||||
grid-area: name;
|
||||
height: fit-content;
|
||||
max-width: $s-124;
|
||||
line-height: $s-16;
|
||||
.color-value-wrapper {
|
||||
@include inspectValue;
|
||||
text-transform: uppercase;
|
||||
max-width: $s-124;
|
||||
padding-right: $s-8;
|
||||
&.gradient-name {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.opacity-info {
|
||||
@include inspectValue;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second-row {
|
||||
min-height: $s-16;
|
||||
padding-right: $s-8;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.color-name-library {
|
||||
@include inspectValue;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
.first-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-20;
|
||||
grid-template-areas: "name button";
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.name-opacity {
|
||||
grid-area: name;
|
||||
height: fit-content;
|
||||
max-width: $s-124;
|
||||
line-height: $s-16;
|
||||
}
|
||||
|
||||
.color-value-wrapper {
|
||||
@include inspectValue;
|
||||
text-transform: uppercase;
|
||||
max-width: $s-124;
|
||||
padding-right: $s-8;
|
||||
&.gradient-name {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.opacity-info {
|
||||
@include inspectValue;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
min-height: $s-16;
|
||||
padding-right: $s-8;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-name-library {
|
||||
@include inspectValue;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -34,8 +33,7 @@
|
|||
(mf/defc fill-block
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [objects shape]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
format* (mf/use-state :hex)
|
||||
(let [format* (mf/use-state :hex)
|
||||
format (deref format*)
|
||||
|
||||
color (shape->color shape)
|
||||
|
|
@ -43,54 +41,28 @@
|
|||
(mf/use-fn
|
||||
(fn [format]
|
||||
(reset! format* format)))]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :attributes-fill-block)}
|
||||
[:& color-row
|
||||
{:color color
|
||||
:format format
|
||||
:on-change-format on-change
|
||||
:copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]
|
||||
|
||||
|
||||
[:div.attributes-fill-block
|
||||
[:& color-row
|
||||
{:color color
|
||||
:format format
|
||||
:on-change-format on-change
|
||||
:copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]])))
|
||||
[:div {:class (stl/css :attributes-fill-block)}
|
||||
[:& color-row
|
||||
{:color color
|
||||
:format format
|
||||
:on-change-format on-change
|
||||
:copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))
|
||||
|
||||
(mf/defc fill-panel
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (filter has-fill? shapes)]
|
||||
(if new-css-system
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.fill")
|
||||
:class (stl/css :title-spacing-fill)}]
|
||||
(let [shapes (filter has-fill? shapes)]
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.fill")
|
||||
:class (stl/css :title-spacing-fill)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(if (seq (:fills shape))
|
||||
(for [value (:fills shape [])]
|
||||
[:& fill-block {:key (str "fill-block-" (:id shape) value)
|
||||
:shape value}])
|
||||
[:& fill-block {:key (str "fill-block-only" (:id shape))
|
||||
:shape shape}]))]])
|
||||
|
||||
|
||||
(when (seq shapes)
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.fill")]]
|
||||
|
||||
[:div.attributes-fill-blocks
|
||||
(for [shape shapes]
|
||||
(if (seq (:fills shape))
|
||||
(for [value (:fills shape [])]
|
||||
[:& fill-block {:key (str "fill-block-" (:id shape) value)
|
||||
:shape value}])
|
||||
[:& fill-block {:key (str "fill-block-only" (:id shape))
|
||||
:shape shape}]))]]))))
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(if (seq (:fills shape))
|
||||
(for [value (:fills shape [])]
|
||||
[:& fill-block {:key (str "fill-block-" (:id shape) value)
|
||||
:shape value}])
|
||||
[:& fill-block {:key (str "fill-block-only" (:id shape))
|
||||
:shape shape}]))]])))
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-fill {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-fill {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
[app.common.data :as d]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -19,51 +18,27 @@
|
|||
|
||||
(mf/defc geometry-block
|
||||
[{:keys [objects shape]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :geometry-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]]))]
|
||||
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (d/name property)]
|
||||
[:div.attributes-value value]
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :geometry-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]]))])
|
||||
|
||||
|
||||
(mf/defc geometry-panel
|
||||
[{:keys [objects shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.size")
|
||||
:class (stl/css :title-spacing-geometry)}
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.size")
|
||||
:class (stl/css :title-spacing-geometry)}
|
||||
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& geometry-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])]
|
||||
|
||||
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.size")]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& geometry-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])))
|
||||
(for [shape shapes]
|
||||
[:& geometry-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-geometry {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-geometry {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.geometry-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.media :as cm]
|
||||
[app.config :as cf]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -22,58 +21,31 @@
|
|||
|
||||
(mf/defc image-panel
|
||||
[{:keys [objects shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
(for [shape (filter cfh/image-shape? shapes)]
|
||||
[:div {:class (stl/css :attributes-block)
|
||||
:key (str "image-" (:id shape))}
|
||||
[:div {:class (stl/css :image-wrapper)}
|
||||
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
|
||||
(for [shape (filter cfh/image-shape? shapes)]
|
||||
[:div {:class (stl/css :attributes-block)
|
||||
:key (str "image-" (:id shape))}
|
||||
[:div {:class (stl/css :image-wrapper)}
|
||||
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
|
||||
|
||||
[:div {:class (stl/css :image-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.image.width")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}
|
||||
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
|
||||
[:div {:class (stl/css :image-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.image.width")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}
|
||||
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
|
||||
|
||||
[:div {:class (stl/css :image-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.image.height")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}
|
||||
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
|
||||
[:div {:class (stl/css :image-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.image.height")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}
|
||||
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
|
||||
|
||||
(let [mtype (-> shape :metadata :mtype)
|
||||
name (:name shape)
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a {:class (stl/css :download-button)
|
||||
:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media (-> shape :metadata))}
|
||||
(tr "inspect.attributes.image.download")])])
|
||||
|
||||
|
||||
(for [shape (filter cfh/image-shape? shapes)]
|
||||
[:div.attributes-block {:key (str "image-" (:id shape))}
|
||||
[:div.attributes-image-row
|
||||
[:div.attributes-image
|
||||
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]]
|
||||
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.image.width")]
|
||||
[:div.attributes-value (css/get-css-value objects (:metadata shape) :width)]
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}]]
|
||||
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.image.height")]
|
||||
[:div.attributes-value (css/get-css-value objects (:metadata shape) :height)]
|
||||
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}]]
|
||||
|
||||
(let [mtype (-> shape :metadata :mtype)
|
||||
name (:name shape)
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a.download-button {:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media (-> shape :metadata))}
|
||||
(tr "inspect.attributes.image.download")])]))))
|
||||
(let [mtype (-> shape :metadata :mtype)
|
||||
name (:name shape)
|
||||
extension (cm/mtype->extension mtype)]
|
||||
[:a {:class (stl/css :download-button)
|
||||
:target "_blank"
|
||||
:download (cond-> name extension (str/concat extension))
|
||||
:href (cf/resolve-file-media (-> shape :metadata))}
|
||||
(tr "inspect.attributes.image.download")])]))
|
||||
|
|
|
|||
|
|
@ -9,33 +9,37 @@
|
|||
.attributes-block {
|
||||
@include flexColumn;
|
||||
margin-bottom: $s-16;
|
||||
.image-wrapper {
|
||||
background-color: var(--menu-background-color);
|
||||
position: relative;
|
||||
@include flexCenter;
|
||||
width: $s-248;
|
||||
height: $s-160;
|
||||
max-height: $s-160;
|
||||
max-width: $s-248;
|
||||
margin: $s-8 0;
|
||||
border-radius: $br-8;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.image-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
margin-top: $s-4;
|
||||
.image-wrapper {
|
||||
background-color: var(--menu-background-color);
|
||||
position: relative;
|
||||
@include flexCenter;
|
||||
width: $s-248;
|
||||
height: $s-160;
|
||||
max-height: $s-160;
|
||||
max-width: $s-248;
|
||||
margin: $s-8 0;
|
||||
border-radius: $br-8;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.image-row {
|
||||
@extend .attr-row;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
margin-top: $s-4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.types.shape.layout :as ctl]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -30,57 +29,30 @@
|
|||
|
||||
(mf/defc layout-block
|
||||
[{:keys [objects shape]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :layout-row)}
|
||||
[:div {:title (d/name property)
|
||||
:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
|
||||
(if new-css-system
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :layout-row)}
|
||||
[:div {:title (d/name property)
|
||||
:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]]))]
|
||||
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label {:title (d/name property)} (d/name property)]
|
||||
[:div.attributes-value value]
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]])))
|
||||
|
||||
(mf/defc layout-panel
|
||||
[{:keys [objects shapes]}]
|
||||
(let [shapes (->> shapes (filter ctl/any-layout?))
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(let [shapes (->> shapes (filter ctl/any-layout?))]
|
||||
|
||||
(if new-css-system
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title "Layout"
|
||||
:class (stl/css :title-spacing-layout)}
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title "Layout"
|
||||
:class (stl/css :title-spacing-layout)}
|
||||
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& layout-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])
|
||||
|
||||
|
||||
(when (seq shapes)
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text "Layout"]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& layout-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])]))))
|
||||
(for [shape shapes]
|
||||
[:& layout-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])))
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-layout {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-layout {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.types.shape.layout :as ctl]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -23,7 +22,6 @@
|
|||
:min-width
|
||||
:align-self
|
||||
:justify-self
|
||||
|
||||
:flex-shrink
|
||||
:flex
|
||||
|
||||
|
|
@ -33,30 +31,18 @@
|
|||
|
||||
(mf/defc layout-element-block
|
||||
[{:keys [objects shape]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :layout-element-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div {:class (stl/css :layout-element-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name property)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]]))]
|
||||
|
||||
[:*
|
||||
(for [property properties]
|
||||
(when-let [value (css/get-css-value objects shape property)]
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (d/name property)]
|
||||
[:div.attributes-value value]
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
|
||||
[:& copy-button {:data (css/get-css-property objects shape property)}
|
||||
[:div {:class (stl/css :button-children)} value]]]])))
|
||||
|
||||
(mf/defc layout-element-panel
|
||||
[{:keys [objects shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
|
||||
(let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
|
||||
only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes)
|
||||
only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)
|
||||
|
||||
|
|
@ -75,28 +61,15 @@
|
|||
:else
|
||||
"Layout element")]
|
||||
|
||||
(if new-css-system
|
||||
(when some-layout-prop?
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title menu-title
|
||||
:class (stl/css :title-spacing-layout-element)}
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
(when some-layout-prop?
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title menu-title
|
||||
:class (stl/css :title-spacing-layout-element)}
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& layout-element-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])
|
||||
|
||||
(when some-layout-prop?
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text menu-title]
|
||||
(when (= (count shapes) 1)
|
||||
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& layout-element-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])]))))
|
||||
(for [shape shapes]
|
||||
[:& layout-element-block {:shape shape
|
||||
:objects objects
|
||||
:key (:id shape)}])])))
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-layout-element {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-layout-element {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.layout-element-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
|
||||
[app.util.code-gen.style-css :as css]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -50,29 +49,16 @@
|
|||
:on-change-format #(reset! color-format %)}]]))
|
||||
|
||||
(mf/defc shadow-panel [{:keys [shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (->> shapes (filter has-shadow?))]
|
||||
(let [shapes (->> shapes (filter has-shadow?))]
|
||||
|
||||
(if new-css-system
|
||||
(when (and (seq shapes) (> (count shapes) 0))
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.shadow")
|
||||
:class (stl/css :title-spacing-shadow)}]
|
||||
(when (and (seq shapes) (> (count shapes) 0))
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.shadow")
|
||||
:class (stl/css :title-spacing-shadow)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(for [shadow (:shadow shape)]
|
||||
[:& shadow-block {:shape shape
|
||||
:shadow shadow}]))]])
|
||||
|
||||
(when (and (seq shapes) (> (count shapes) 0))
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.shadow")]]
|
||||
|
||||
[:div.attributes-shadow-blocks
|
||||
(for [shape shapes]
|
||||
(for [shadow (:shadow shape)]
|
||||
[:& shadow-block {:shape shape
|
||||
:shadow shadow}]))]]))))
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(for [shadow (:shadow shape)]
|
||||
[:& shadow-block {:shape shape
|
||||
:shadow shadow}]))]])))
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-shadow {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
.attributes-shadow-block {
|
||||
.shadow-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-shadow {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.shadow-row {
|
||||
@extend .attr-row;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.formats :as fmt]
|
||||
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
|
||||
[app.util.code-gen.style-css-formats :as cssf]
|
||||
|
|
@ -33,82 +32,41 @@
|
|||
|
||||
(mf/defc stroke-block
|
||||
[{:keys [stroke]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
color-format (mf/use-state :hex)
|
||||
(let [color-format (mf/use-state :hex)
|
||||
color (stroke->color stroke)]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :attributes-stroke-block)}
|
||||
(let [{:keys [stroke-style stroke-alignment]} stroke
|
||||
stroke-style (if (= stroke-style :svg) :solid stroke-style)
|
||||
stroke-alignment (or stroke-alignment :center)
|
||||
stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
|
||||
(tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
|
||||
(tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
|
||||
[:div {:class (stl/css :attributes-stroke-block)}
|
||||
(let [{:keys [stroke-style stroke-alignment]} stroke
|
||||
stroke-style (if (= stroke-style :svg) :solid stroke-style)
|
||||
stroke-alignment (or stroke-alignment :center)
|
||||
stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
|
||||
(tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
|
||||
(tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
|
||||
|
||||
[:*
|
||||
[:& color-row {:color color
|
||||
:format @color-format
|
||||
:copy-data (uc/color->background color)
|
||||
:on-change-format #(reset! color-format %)}]
|
||||
[:*
|
||||
[:& color-row {:color color
|
||||
:format @color-format
|
||||
:copy-data (uc/color->background color)
|
||||
:on-change-format #(reset! color-format %)}]
|
||||
|
||||
[:div {:class (stl/css :stroke-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
"Border"]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:div {:class (stl/css :stroke-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
"Border"]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
|
||||
[:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
|
||||
[:div {:class (stl/css :button-children)} stroke-def]]]]])]
|
||||
|
||||
|
||||
[:div.attributes-stroke-block
|
||||
(let [{:keys [stroke-style stroke-alignment]} stroke
|
||||
stroke-style (if (= stroke-style :svg) :solid stroke-style)
|
||||
stroke-alignment (or stroke-alignment :center)]
|
||||
[:div.attributes-stroke-row
|
||||
[:div.attributes-label (tr "inspect.attributes.stroke.width")]
|
||||
[:div.attributes-value (fmt/format-pixels (:stroke-width stroke))]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.stroke.style.dotted
|
||||
;; inspect.attributes.stroke.style.mixed
|
||||
;; inspect.attributes.stroke.style.none
|
||||
;; inspect.attributes.stroke.style.solid
|
||||
[:div.attributes-value (tr (dm/str "inspect.attributes.stroke.style." (d/name stroke-style)))]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.stroke.alignment.center
|
||||
;; inspect.attributes.stroke.alignment.inner
|
||||
;; inspect.attributes.stroke.alignment.outer
|
||||
[:div.attributes-label (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment)))]
|
||||
[:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}]])
|
||||
[:& color-row {:color color
|
||||
:format @color-format
|
||||
:copy-data (uc/color->background color)
|
||||
:on-change-format #(reset! color-format %)}]])))
|
||||
[:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
|
||||
[:div {:class (stl/css :button-children)} stroke-def]]]]])]))
|
||||
|
||||
(mf/defc stroke-panel
|
||||
[{:keys [shapes]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (->> shapes (filter has-stroke?))]
|
||||
(if new-css-system
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.stroke")
|
||||
:class (stl/css :title-spacing-stroke)}]
|
||||
(let [shapes (->> shapes (filter has-stroke?))]
|
||||
(when (seq shapes)
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.stroke")
|
||||
:class (stl/css :title-spacing-stroke)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(for [value (:strokes shape)]
|
||||
[:& stroke-block {:key (str "stroke-color-" (:id shape) value)
|
||||
:stroke value}]))]])
|
||||
|
||||
|
||||
(when (seq shapes)
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.stroke")]]
|
||||
|
||||
[:div.attributes-stroke-blocks
|
||||
(for [shape shapes]
|
||||
(for [value (:strokes shape)]
|
||||
[:& stroke-block {:key (str "stroke-color-" (:id shape) value)
|
||||
:stroke value}]))]]))))
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
(for [value (:strokes shape)]
|
||||
[:& stroke-block {:key (str "stroke-color-" (:id shape) value)
|
||||
:stroke value}]))]])))
|
||||
|
|
|
|||
|
|
@ -8,16 +8,20 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-stroke {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-stroke {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.attributes-stroke-block {
|
||||
@include flexColumn;
|
||||
.stroke-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stroke-row {
|
||||
@extend .attr-row;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,38 +21,20 @@
|
|||
(str/join "; ")))
|
||||
|
||||
(mf/defc svg-attr [{:keys [attr value]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
(if (map? value)
|
||||
[:*
|
||||
[:div {:class (stl/css :attributes-subtitle)}
|
||||
[:span (d/name attr)]
|
||||
[:& copy-button {:data (map->css value)}]]
|
||||
|
||||
(if (map? value)
|
||||
[:*
|
||||
[:div {:class (stl/css :attributes-subtitle)}
|
||||
[:span (d/name attr)]
|
||||
[:& copy-button {:data (map->css value)}]]
|
||||
(for [[attr-key attr-value] value]
|
||||
[:& svg-attr {:attr attr-key :value attr-value}])]
|
||||
|
||||
(for [[attr-key attr-value] value]
|
||||
[:& svg-attr {:attr attr-key :value attr-value}])]
|
||||
|
||||
[:div {:class (stl/css :svg-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name attr)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (d/name value)}
|
||||
[:div {:class (stl/css :button-children)} (str value)]]]])
|
||||
|
||||
|
||||
(if (map? value)
|
||||
[:*
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (d/name attr)]
|
||||
[:& copy-button {:data (map->css value)}]]
|
||||
|
||||
(for [[attr-key attr-value] value]
|
||||
[:& svg-attr {:attr attr-key :value attr-value}])]
|
||||
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (d/name attr)]
|
||||
[:div.attributes-value (str value)]
|
||||
[:& copy-button {:data (d/name value)}]]))))
|
||||
[:div {:class (stl/css :svg-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (d/name attr)]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (d/name value)}
|
||||
[:div {:class (stl/css :button-children)} (str value)]]]]))
|
||||
|
||||
(mf/defc svg-block
|
||||
[{:keys [shape]}]
|
||||
|
|
@ -63,20 +45,10 @@
|
|||
|
||||
(mf/defc svg-panel
|
||||
[{:keys [shapes]}]
|
||||
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shape (first shapes)]
|
||||
(if new-css-system
|
||||
(when (seq (:svg-attrs shape))
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.sidebar.options.svg-attrs.title")
|
||||
:class (stl/css :title-spacing-svg)}]
|
||||
[:& svg-block {:shape shape}]])
|
||||
|
||||
|
||||
(when (seq (:svg-attrs shape))
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "workspace.sidebar.options.svg-attrs.title")]]
|
||||
[:& svg-block {:shape shape}]]))))
|
||||
(let [shape (first shapes)]
|
||||
(when (seq (:svg-attrs shape))
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.sidebar.options.svg-attrs.title")
|
||||
:class (stl/css :title-spacing-svg)}]
|
||||
[:& svg-block {:shape shape}]])))
|
||||
|
|
|
|||
|
|
@ -8,16 +8,20 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-svg {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-svg {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.svg-row {
|
||||
@extend .attr-row;
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
||||
.attributes-subtitle {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.formats :as fmt]
|
||||
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -51,8 +50,7 @@
|
|||
|
||||
(mf/defc typography-block
|
||||
[{:keys [text style]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
typography-library-ref
|
||||
(let [typography-library-ref
|
||||
(mf/use-memo
|
||||
(mf/deps (:typography-ref-file style))
|
||||
(make-typographies-library-ref (:typography-ref-file style)))
|
||||
|
|
@ -68,202 +66,111 @@
|
|||
|
||||
typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(when (:fills style)
|
||||
(for [[idx fill] (map-indexed vector (:fills style))]
|
||||
[:& color-row {:key idx
|
||||
:format @color-format
|
||||
:color (fill->color fill)
|
||||
:copy-data (copy-style-data fill :fill-color :fill-color-gradient)
|
||||
:on-change-format #(reset! color-format %)}]))
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(when (:fills style)
|
||||
(for [[idx fill] (map-indexed vector (:fills style))]
|
||||
[:& color-row {:key idx
|
||||
:format @color-format
|
||||
:color (fill->color fill)
|
||||
:copy-data (copy-style-data fill :fill-color :fill-color-gradient)
|
||||
:on-change-format #(reset! color-format %)}]))
|
||||
|
||||
(when (:typography-ref-id style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
|
||||
[:div {:class (stl/css :button-children)} (:name typography)]]]])
|
||||
(when (:typography-ref-id style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
|
||||
[:div {:class (stl/css :button-children)} (:name typography)]]]])
|
||||
|
||||
(when (:font-id style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-family)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(-> style :font-id fonts/get-font-data :name)]]]])
|
||||
(when (:font-id style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-family)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(-> style :font-id fonts/get-font-data :name)]]]])
|
||||
|
||||
(when (:font-style style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-style")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-style)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(str (:font-style style))]]]])
|
||||
(when (:font-style style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-style")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-style)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(str (:font-style style))]]]])
|
||||
|
||||
(when (:font-size style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-size")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-size)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-pixels (:font-size style))]]]])
|
||||
(when (:font-size style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-size")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-size)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-pixels (:font-size style))]]]])
|
||||
|
||||
(when (:font-weight style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-weight")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-weight)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(str (:font-weight style))]]]])
|
||||
(when (:font-weight style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.font-weight")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :font-weight)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(str (:font-weight style))]]]])
|
||||
|
||||
(when (:line-height style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.line-height")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :line-height)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-number (:line-height style))]]]])
|
||||
(when (:line-height style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.line-height")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :line-height)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-number (:line-height style))]]]])
|
||||
|
||||
(when (:letter-spacing style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.letter-spacing")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :letter-spacing)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-pixels (:letter-spacing style))]]]])
|
||||
(when (:letter-spacing style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.letter-spacing")]
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :letter-spacing)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(fmt/format-pixels (:letter-spacing style))]]]])
|
||||
|
||||
(when (:text-decoration style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.text-decoration")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-decoration.none
|
||||
;; inspect.attributes.typography.text-decoration.strikethrough
|
||||
;; inspect.attributes.typography.text-decoration.underline
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :text-decoration)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
|
||||
(when (:text-decoration style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.text-decoration")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-decoration.none
|
||||
;; inspect.attributes.typography.text-decoration.strikethrough
|
||||
;; inspect.attributes.typography.text-decoration.underline
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :text-decoration)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
|
||||
|
||||
(when (:text-transform style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.text-transform")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-transform.lowercase
|
||||
;; inspect.attributes.typography.text-transform.none
|
||||
;; inspect.attributes.typography.text-transform.titlecase
|
||||
;; inspect.attributes.typography.text-transform.uppercase
|
||||
;; inspect.attributes.typography.text-transform.unset
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :text-transform)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
|
||||
(when (:text-transform style)
|
||||
[:div {:class (stl/css :text-row)}
|
||||
[:div {:class (stl/css :global/attr-label)}
|
||||
(tr "inspect.attributes.typography.text-transform")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-transform.lowercase
|
||||
;; inspect.attributes.typography.text-transform.none
|
||||
;; inspect.attributes.typography.text-transform.titlecase
|
||||
;; inspect.attributes.typography.text-transform.uppercase
|
||||
;; inspect.attributes.typography.text-transform.unset
|
||||
[:div {:class (stl/css :global/attr-value)}
|
||||
[:& copy-button {:data (copy-style-data style :text-transform)}
|
||||
[:div {:class (stl/css :button-children)}
|
||||
(tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
|
||||
|
||||
[:& copy-button {:data (str/trim text)
|
||||
:class (stl/css :attributes-content-row)}
|
||||
[:span {:class (stl/css :content)
|
||||
:style {:font-family (:font-family style)
|
||||
:font-weight (:font-weight style)
|
||||
:font-style (:font-style style)}}
|
||||
(str/trim text)]]]
|
||||
|
||||
|
||||
[:div.attributes-text-block
|
||||
(if (:typography-ref-id style)
|
||||
[:div.attributes-typography-name-row
|
||||
[:div.typography-entry
|
||||
[:div.typography-sample
|
||||
{:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(tr "workspace.assets.typography.text-styles")]]
|
||||
[:div.typography-entry-name (:name typography)]
|
||||
[:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]]
|
||||
|
||||
[:div.attributes-typography-row
|
||||
[:div.typography-sample
|
||||
{:style {:font-family (:font-family style)
|
||||
:font-weight (:font-weight style)
|
||||
:font-style (:font-style style)}}
|
||||
(tr "workspace.assets.typography.text-styles")]
|
||||
[:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]])
|
||||
|
||||
(when (:fills style)
|
||||
(for [[idx fill] (map-indexed vector (:fills style))]
|
||||
[:& color-row {:key idx
|
||||
:format @color-format
|
||||
:color (fill->color fill)
|
||||
:copy-data (copy-style-data fill :fill-color :fill-color-gradient)
|
||||
:on-change-format #(reset! color-format %)}]))
|
||||
|
||||
(when (:font-id style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.font-family")]
|
||||
[:div.attributes-value (-> style :font-id fonts/get-font-data :name)]
|
||||
[:& copy-button {:data (copy-style-data style :font-family)}]])
|
||||
|
||||
(when (:font-style style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.font-style")]
|
||||
[:div.attributes-value (str (:font-style style))]
|
||||
[:& copy-button {:data (copy-style-data style :font-style)}]])
|
||||
|
||||
(when (:font-size style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.font-size")]
|
||||
[:div.attributes-value (fmt/format-pixels (:font-size style))]
|
||||
[:& copy-button {:data (copy-style-data style :font-size)}]])
|
||||
|
||||
(when (:font-weight style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.font-weight")]
|
||||
[:div.attributes-value (str (:font-weight style))]
|
||||
[:& copy-button {:data (copy-style-data style :font-weight)}]])
|
||||
|
||||
(when (:line-height style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.line-height")]
|
||||
[:div.attributes-value (fmt/format-number (:line-height style))]
|
||||
[:& copy-button {:data (copy-style-data style :line-height)}]])
|
||||
|
||||
(when (:letter-spacing style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")]
|
||||
[:div.attributes-value (fmt/format-pixels (:letter-spacing style))]
|
||||
[:& copy-button {:data (copy-style-data style :letter-spacing)}]])
|
||||
|
||||
(when (:text-decoration style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.text-decoration")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-decoration.none
|
||||
;; inspect.attributes.typography.text-decoration.strikethrough
|
||||
;; inspect.attributes.typography.text-decoration.underline
|
||||
[:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]
|
||||
[:& copy-button {:data (copy-style-data style :text-decoration)}]])
|
||||
|
||||
(when (:text-transform style)
|
||||
[:div.attributes-unit-row
|
||||
[:div.attributes-label (tr "inspect.attributes.typography.text-transform")]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.attributes.typography.text-transform.lowercase
|
||||
;; inspect.attributes.typography.text-transform.none
|
||||
;; inspect.attributes.typography.text-transform.titlecase
|
||||
;; inspect.attributes.typography.text-transform.uppercase
|
||||
[:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]
|
||||
[:& copy-button {:data (copy-style-data style :text-transform)}]])
|
||||
|
||||
[:div.attributes-content-row
|
||||
[:pre.attributes-content (str/trim text)]
|
||||
[:& copy-button {:data (str/trim text)}]]])))
|
||||
[:& copy-button {:data (str/trim text)
|
||||
:class (stl/css :attributes-content-row)}
|
||||
[:span {:class (stl/css :content)
|
||||
:style {:font-family (:font-family style)
|
||||
:font-weight (:font-weight style)
|
||||
:font-style (:font-style style)}}
|
||||
(str/trim text)]]]))
|
||||
|
||||
|
||||
(mf/defc text-block [{:keys [shape]}]
|
||||
|
|
@ -281,21 +188,11 @@
|
|||
(mf/defc text-panel
|
||||
[{:keys [shapes]}]
|
||||
(when-let [shapes (seq (filter has-text? shapes))]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.typography")
|
||||
:class (stl/css :title-spacing-text)}]
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "inspect.attributes.typography")
|
||||
:class (stl/css :title-spacing-text)}]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& text-block {:shape shape
|
||||
:key (str "text-block" (:id shape))}])]
|
||||
|
||||
[:div.attributes-block
|
||||
[:div.attributes-block-title
|
||||
[:div.attributes-block-title-text (tr "inspect.attributes.typography")]]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& text-block {:shape shape
|
||||
:key (str "text-block" (:id shape))}])]))))
|
||||
(for [shape shapes]
|
||||
[:& text-block {:shape shape
|
||||
:key (str "text-block" (:id shape))}])]))
|
||||
|
|
|
|||
|
|
@ -8,41 +8,46 @@
|
|||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
.title-spacing-text {
|
||||
@extend .attr-title;
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-text {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.attributes-content {
|
||||
@include flexColumn;
|
||||
.text-row {
|
||||
@extend .attr-row;
|
||||
:global(.attr-value) {
|
||||
align-items: center;
|
||||
}
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
}
|
||||
.attributes-content-row {
|
||||
width: $s-252;
|
||||
max-width: $s-252;
|
||||
min-height: calc($s-2 + $s-32);
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: $s-4;
|
||||
.content {
|
||||
@include titleTipography;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--color-background-tertiary);
|
||||
background-color: var(--menu-background-color);
|
||||
.content {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
.text-row {
|
||||
@extend .attr-row;
|
||||
:global(.attr-value) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
}
|
||||
|
||||
.attributes-content-row {
|
||||
width: $s-252;
|
||||
max-width: $s-252;
|
||||
min-height: calc($s-2 + $s-32);
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: $s-4;
|
||||
.content {
|
||||
@include titleTipography;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--color-background-tertiary);
|
||||
background-color: var(--menu-background-color);
|
||||
.content {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr c]]
|
||||
|
|
@ -23,8 +22,7 @@
|
|||
(mf/defc exports
|
||||
{::mf/wrap [#(mf/memo % =)]}
|
||||
[{:keys [shapes page-id file-id share-id type] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
exports (mf/use-state [])
|
||||
(let [exports (mf/use-state [])
|
||||
xstate (mf/deref refs/export)
|
||||
vstate (mf/deref refs/viewer-data)
|
||||
page (get-in vstate [:pages page-id])
|
||||
|
|
@ -136,111 +134,64 @@
|
|||
flatten
|
||||
distinct
|
||||
vec))))
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.options.export")
|
||||
:class (stl/css :title-spacing-export-viewer)}
|
||||
[:button {:class (stl/css :add-export)
|
||||
:on-click add-export} i/add-refactor]]]
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.options.export")
|
||||
:class (stl/css :title-spacing-export-viewer)}
|
||||
[:button {:class (stl/css :add-export)
|
||||
:on-click add-export} i/add-refactor]]]
|
||||
|
||||
(cond
|
||||
(= :multiple exports)
|
||||
[:div {:class (stl/css :multiple-exports)}
|
||||
[:div {:class (stl/css :label)} (tr "settings.multiple")]
|
||||
[:div {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css :action-btn)
|
||||
:on-click ()}
|
||||
i/remove-refactor]]]
|
||||
(cond
|
||||
(= :multiple exports)
|
||||
[:div {:class (stl/css :multiple-exports)}
|
||||
[:div {:class (stl/css :label)} (tr "settings.multiple")]
|
||||
[:div {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css :action-btn)
|
||||
:on-click ()}
|
||||
i/remove-refactor]]]
|
||||
|
||||
(seq @exports)
|
||||
[:div {:class (stl/css :element-set-content)}
|
||||
(for [[index export] (d/enumerate @exports)]
|
||||
[:div {:class (stl/css :element-group)
|
||||
:key index}
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
[:div {:class (stl/css :format-select)}
|
||||
(seq @exports)
|
||||
[:div {:class (stl/css :element-set-content)}
|
||||
(for [[index export] (d/enumerate @exports)]
|
||||
[:div {:class (stl/css :element-group)
|
||||
:key index}
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
[:div {:class (stl/css :format-select)}
|
||||
[:& select
|
||||
{:default-value (d/name (:type export))
|
||||
:options format-options
|
||||
:dropdown-class (stl/css :dropdown-upwards)
|
||||
:on-change (partial on-type-change index)}]]
|
||||
(when (scale-enabled? export)
|
||||
[:div {:class (stl/css :size-select)}
|
||||
[:& select
|
||||
{:default-value (d/name (:type export))
|
||||
:options format-options
|
||||
{:default-value (str (:scale export))
|
||||
:options size-options
|
||||
:dropdown-class (stl/css :dropdown-upwards)
|
||||
:on-change (partial on-type-change index)}]]
|
||||
(when (scale-enabled? export)
|
||||
[:div {:class (stl/css :size-select)}
|
||||
[:& select
|
||||
{:default-value (str (:scale export))
|
||||
:options size-options
|
||||
:dropdown-class (stl/css :dropdown-upwards)
|
||||
:on-change (partial on-scale-change index)}]])
|
||||
[:label {:class (stl/css :suffix-input)
|
||||
:for "suffix-export-input"}
|
||||
[:input {:class (stl/css :type-input)
|
||||
:id "suffix-export-input"
|
||||
:type "text"
|
||||
:value (:suffix export)
|
||||
:placeholder (tr "workspace.options.export.suffix")
|
||||
:data-value index
|
||||
:on-change on-suffix-change
|
||||
:on-key-down manage-key-down}]]]
|
||||
:on-change (partial on-scale-change index)}]])
|
||||
[:label {:class (stl/css :suffix-input)
|
||||
:for "suffix-export-input"}
|
||||
[:input {:class (stl/css :type-input)
|
||||
:id "suffix-export-input"
|
||||
:type "text"
|
||||
:value (:suffix export)
|
||||
:placeholder (tr "workspace.options.export.suffix")
|
||||
:data-value index
|
||||
:on-change on-suffix-change
|
||||
:on-key-down manage-key-down}]]]
|
||||
|
||||
[:button {:class (stl/css :action-btn)
|
||||
:on-click (partial delete-export index)}
|
||||
i/remove-refactor]])
|
||||
])
|
||||
(when (or (= :multiple exports) (seq @exports))
|
||||
[:button
|
||||
{:on-click (when-not in-progress? on-download)
|
||||
:class (stl/css-case
|
||||
:export-btn true
|
||||
:btn-disabled in-progress?)
|
||||
:disabled in-progress?}
|
||||
(if in-progress?
|
||||
(tr "workspace.options.exporting-object")
|
||||
(tr "workspace.options.export-object" (c (count shapes))))])
|
||||
]
|
||||
|
||||
|
||||
|
||||
[:div.element-set.exports-options
|
||||
[:div.element-set-title
|
||||
[:span (tr "workspace.options.export")]
|
||||
[:div.add-page {:on-click add-export} i/close]]
|
||||
|
||||
(when (seq @exports)
|
||||
[:div.element-set-content
|
||||
(for [[index export] (d/enumerate @exports)]
|
||||
[:div.element-set-options-group
|
||||
{:key index}
|
||||
(when (scale-enabled? export)
|
||||
[:select.input-select {:on-change (partial on-scale-change index)
|
||||
:value (:scale export)}
|
||||
[:option {:value "0.5"} "0.5x"]
|
||||
[:option {:value "0.75"} "0.75x"]
|
||||
[:option {:value "1"} "1x"]
|
||||
[:option {:value "1.5"} "1.5x"]
|
||||
[:option {:value "2"} "2x"]
|
||||
[:option {:value "4"} "4x"]
|
||||
[:option {:value "6"} "6x"]])
|
||||
|
||||
[:input.input-text {:value (:suffix export)
|
||||
:placeholder (tr "workspace.options.export.suffix")
|
||||
:on-change (partial on-suffix-change index)
|
||||
:on-key-down manage-key-down}]
|
||||
[:select.input-select {:value (d/name (:type export))
|
||||
:on-change (partial on-type-change index)}
|
||||
[:option {:value "png"} "PNG"]
|
||||
[:option {:value "jpeg"} "JPEG"]
|
||||
[:option {:value "svg"} "SVG"]
|
||||
[:option {:value "pdf"} "PDF"]]
|
||||
[:div.delete-icon {:on-click (partial delete-export index)}
|
||||
i/minus]])
|
||||
|
||||
[:div.btn-icon-dark.download-button
|
||||
{:on-click (when-not in-progress? on-download)
|
||||
:class (dom/classnames :btn-disabled in-progress?)
|
||||
:disabled in-progress?}
|
||||
(if in-progress?
|
||||
(tr "workspace.options.exporting-object")
|
||||
(tr "workspace.options.export-object" (c (count shapes))))]])])))
|
||||
[:button {:class (stl/css :action-btn)
|
||||
:on-click (partial delete-export index)}
|
||||
i/remove-refactor]])])
|
||||
(when (or (= :multiple exports) (seq @exports))
|
||||
[:button
|
||||
{:on-click (when-not in-progress? on-download)
|
||||
:class (stl/css-case
|
||||
:export-btn true
|
||||
:btn-disabled in-progress?)
|
||||
:disabled in-progress?}
|
||||
(if in-progress?
|
||||
(tr "workspace.options.exporting-object")
|
||||
(tr "workspace.options.export-object" (c (count shapes))))])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,83 +9,85 @@
|
|||
.element-set {
|
||||
padding-bottom: $s-16;
|
||||
margin: 0;
|
||||
.element-title {
|
||||
margin: 0;
|
||||
.title-spacing-export-viewer {
|
||||
@extend .attr-title;
|
||||
margin: 0;
|
||||
}
|
||||
.add-export {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-set-content {
|
||||
@include flexColumn;
|
||||
margin-bottom: $s-4;
|
||||
.multiple-exports {
|
||||
@include flexRow;
|
||||
.label {
|
||||
@extend .mixed-bar;
|
||||
}
|
||||
.actions {
|
||||
@include flexRow;
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-group {
|
||||
@include flexRow;
|
||||
.input-wrapper {
|
||||
@include flexRow;
|
||||
.format-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
width: $s-80;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
.size-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
top: unset;
|
||||
width: $s-80;
|
||||
}
|
||||
}
|
||||
.suffix-input {
|
||||
@extend .input-element;
|
||||
min-width: $s-92;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
width: $s-252;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title-spacing-export-viewer {
|
||||
@extend .attr-title;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.add-export {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
@include flexColumn;
|
||||
margin-bottom: $s-4;
|
||||
}
|
||||
|
||||
.multiple-exports {
|
||||
@include flexRow;
|
||||
}
|
||||
|
||||
.label {
|
||||
@extend .mixed-bar;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.element-group {
|
||||
@include flexRow;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@include flexRow;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
width: $s-80;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.size-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.suffix-input {
|
||||
@extend .input-element;
|
||||
min-width: $s-92;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
width: $s-252;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
[app.main.data.viewer :as dv]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.viewer.shapes :as shapes]
|
||||
|
|
@ -193,8 +192,7 @@
|
|||
(mf/defc flows-menu
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [page index]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
flows (dm/get-in page [:options :flows])
|
||||
(let [flows (dm/get-in page [:options :flows])
|
||||
frames (:frames page)
|
||||
frame (get frames index)
|
||||
current-flow* (mf/use-state
|
||||
|
|
@ -217,47 +215,28 @@
|
|||
(st/emit! (dv/go-to-frame (:starting-frame flow))))))]
|
||||
|
||||
(when (seq flows)
|
||||
(if new-css-system
|
||||
[:div {:on-click toggle-dropdown
|
||||
:class (stl/css :view-options)}
|
||||
[:span {:class (stl/css :icon)} i/play-refactor]
|
||||
[:span {:class (stl/css :dropdown-title)} (:name current-flow)]
|
||||
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
|
||||
[:& dropdown {:show show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
(for [[index flow] (d/enumerate flows)]
|
||||
[:li {:key (dm/str "flow-" (:id flow) "-" index)
|
||||
:class (stl/css-case :dropdown-element true
|
||||
:selected (= (:id flow) (:id current-flow)))
|
||||
;; This is not a best practise, is not very performant Do not reproduce
|
||||
:data-value (pr-str flow)
|
||||
:on-click select-flow}
|
||||
[:span {:class (stl/css :label)} (:name flow)]
|
||||
(when (= (:id flow) (:id current-flow))
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])])]]]
|
||||
|
||||
;; OLD
|
||||
[:div.view-options {:on-click toggle-dropdown}
|
||||
[:span.icon i/play]
|
||||
[:span.label (:name current-flow)]
|
||||
[:span.icon i/arrow-down]
|
||||
[:& dropdown {:show show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul.dropdown.with-check
|
||||
(for [[index flow] (d/enumerate flows)]
|
||||
[:li {:key (dm/str "flow-" (:id flow) "-" index)
|
||||
:class (dom/classnames :selected (= (:id flow) (:id current-flow)))
|
||||
;; This is not a best practise, is not very performant Do not reproduce
|
||||
:data-value (pr-str flow)
|
||||
:on-click select-flow}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (:name flow)]])]]]))))
|
||||
[:div {:on-click toggle-dropdown
|
||||
:class (stl/css :view-options)}
|
||||
[:span {:class (stl/css :icon)} i/play-refactor]
|
||||
[:span {:class (stl/css :dropdown-title)} (:name current-flow)]
|
||||
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
|
||||
[:& dropdown {:show show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
(for [[index flow] (d/enumerate flows)]
|
||||
[:li {:key (dm/str "flow-" (:id flow) "-" index)
|
||||
:class (stl/css-case :dropdown-element true
|
||||
:selected (= (:id flow) (:id current-flow)))
|
||||
;; This is not a best practise, is not very performant Do not reproduce
|
||||
:data-value (pr-str flow)
|
||||
:on-click select-flow}
|
||||
[:span {:class (stl/css :label)} (:name flow)]
|
||||
(when (= (:id flow) (:id current-flow))
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])])]]])))
|
||||
|
||||
(mf/defc interactions-menu
|
||||
[{:keys [interactions-mode]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
show-dropdown? (mf/use-state false)
|
||||
(let [show-dropdown? (mf/use-state false)
|
||||
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
|
||||
hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
|
||||
|
||||
|
|
@ -269,67 +248,40 @@
|
|||
(keyword))]
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dv/set-interactions-mode mode)))))]
|
||||
(if new-css-system
|
||||
[:div {:on-click toggle-dropdown
|
||||
:class (stl/css :view-options)}
|
||||
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
|
||||
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :hide))
|
||||
:on-click select-mode
|
||||
:data-mode :hide}
|
||||
[:div {:on-click toggle-dropdown
|
||||
:class (stl/css :view-options)}
|
||||
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
|
||||
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul {:class (stl/css :dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :hide))
|
||||
:on-click select-mode
|
||||
:data-mode :hide}
|
||||
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
|
||||
(when (= interactions-mode :hide)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
|
||||
(when (= interactions-mode :hide)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :show))
|
||||
:on-click select-mode
|
||||
:data-mode :show}
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
|
||||
(when (= interactions-mode :show)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :show))
|
||||
:on-click select-mode
|
||||
:data-mode :show}
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
|
||||
(when (= interactions-mode :show)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]
|
||||
|
||||
|
||||
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :show-on-click))
|
||||
:on-click select-mode
|
||||
:data-mode :show-on-click}
|
||||
[:li {:class (stl/css-case :dropdown-element true
|
||||
:selected (= interactions-mode :show-on-click))
|
||||
:on-click select-mode
|
||||
:data-mode :show-on-click}
|
||||
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
|
||||
(when (= interactions-mode :show-on-click)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]
|
||||
|
||||
|
||||
|
||||
[:div.view-options {:on-click toggle-dropdown}
|
||||
[:span.label (tr "viewer.header.interactions")]
|
||||
[:span.icon i/arrow-down]
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close hide-dropdown}
|
||||
[:ul.dropdown.with-check
|
||||
[:li {:class (dom/classnames :selected (= interactions-mode :hide))
|
||||
:on-click select-mode
|
||||
:data-mode :hide}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "viewer.header.dont-show-interactions")]]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= interactions-mode :show))
|
||||
:on-click select-mode
|
||||
:data-mode :show}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "viewer.header.show-interactions")]]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= interactions-mode :show-on-click))
|
||||
:on-click select-mode
|
||||
:data-mode :show-on-click}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "viewer.header.show-interactions-on-click")]]]]])))
|
||||
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
|
||||
(when (= interactions-mode :show-on-click)
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
|
||||
|
||||
(defn animate-go-to-frame
|
||||
[animation current-viewport orig-viewport current-size orig-size wrapper-size]
|
||||
|
|
|
|||
|
|
@ -46,10 +46,12 @@
|
|||
.hint-wrapper {
|
||||
@include flexRow;
|
||||
}
|
||||
|
||||
.hint {
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.custon-input-wrapper {
|
||||
@include flexRow;
|
||||
border-radius: $br-8;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@
|
|||
[app.main.data.viewer :as dv]
|
||||
[app.main.render :as render]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.timers :as ts]
|
||||
|
|
@ -24,8 +22,7 @@
|
|||
|
||||
(mf/defc thumbnails-content
|
||||
[{:keys [children expanded? total] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
container (mf/use-ref)
|
||||
(let [container (mf/use-ref)
|
||||
width (mf/use-var (.. js/document -documentElement -clientWidth))
|
||||
element-width (mf/use-var 152)
|
||||
|
||||
|
|
@ -59,96 +56,58 @@
|
|||
(reset! width (obj/get dom "clientWidth"))))]
|
||||
|
||||
(mf/use-effect on-mount)
|
||||
(if new-css-system
|
||||
(if expanded?
|
||||
[:div {:class (stl/css :thumbnails-content)}
|
||||
[:div {:class (stl/css :thumbnails-list-expanded)} children]]
|
||||
(if expanded?
|
||||
[:div {:class (stl/css :thumbnails-content)}
|
||||
[:div {:class (stl/css :thumbnails-list-expanded)} children]]
|
||||
|
||||
[:div {:class (stl/css :thumbnails-content)}
|
||||
[:button {:class (stl/css :left-scroll-handler)
|
||||
:on-click on-left-arrow-click} i/arrow-refactor]
|
||||
[:button {:class (stl/css :right-scroll-handler)
|
||||
:on-click on-right-arrow-click} i/arrow-refactor]
|
||||
[:div {:class (stl/css :thumbnails-content)}
|
||||
[:button {:class (stl/css :left-scroll-handler)
|
||||
:on-click on-left-arrow-click} i/arrow-refactor]
|
||||
[:button {:class (stl/css :right-scroll-handler)
|
||||
:on-click on-right-arrow-click} i/arrow-refactor]
|
||||
|
||||
[:div {:class (stl/css :thumbnails-list)
|
||||
:ref container
|
||||
:on-wheel on-scroll}
|
||||
[:div {:class (stl/css :thumbnails-list-inside)
|
||||
:style {:right (str (* @offset 152) "px")}}
|
||||
children]]])
|
||||
|
||||
|
||||
|
||||
(if expanded?
|
||||
[:div.thumbnails-content
|
||||
[:div.thumbnails-list-expanded children]]
|
||||
|
||||
[:div.thumbnails-content
|
||||
[:div.left-scroll-handler {:on-click on-left-arrow-click} i/arrow-slide]
|
||||
[:div.right-scroll-handler {:on-click on-right-arrow-click} i/arrow-slide]
|
||||
[:div.thumbnails-list {:ref container :on-wheel on-scroll}
|
||||
[:div.thumbnails-list-inside {:style {:right (str (* @offset 152) "px")}}
|
||||
children]]]))))
|
||||
[:div {:class (stl/css :thumbnails-list)
|
||||
:ref container
|
||||
:on-wheel on-scroll}
|
||||
[:div {:class (stl/css :thumbnails-list-inside)
|
||||
:style {:right (str (* @offset 152) "px")}}
|
||||
children]]])))
|
||||
|
||||
(mf/defc thumbnails-summary
|
||||
[{:keys [on-toggle-expand on-close total] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :thumbnails-summary)}
|
||||
[:span {:class (stl/css :counter)}
|
||||
(tr "labels.num-of-frames" (i18n/c total))]
|
||||
[:span {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css :expand-btn)
|
||||
:on-click on-toggle-expand} i/arrow-refactor]
|
||||
[:button {:class (stl/css :close-btn)
|
||||
:on-click on-close} i/close-refactor]]]
|
||||
|
||||
|
||||
[:div.thumbnails-summary
|
||||
[:span.counter (tr "labels.num-of-frames" (i18n/c total))]
|
||||
[:span.buttons
|
||||
[:span.btn-expand {:on-click on-toggle-expand} i/arrow-down]
|
||||
[:span.btn-close {:on-click on-close} i/close]]])))
|
||||
[:div {:class (stl/css :thumbnails-summary)}
|
||||
[:span {:class (stl/css :counter)}
|
||||
(tr "labels.num-of-frames" (i18n/c total))]
|
||||
[:span {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css :expand-btn)
|
||||
:on-click on-toggle-expand} i/arrow-refactor]
|
||||
[:button {:class (stl/css :close-btn)
|
||||
:on-click on-close} i/close-refactor]]])
|
||||
|
||||
(mf/defc thumbnail-item
|
||||
{::mf/wrap [mf/memo
|
||||
#(mf/deferred % ts/idle-then-raf)]}
|
||||
[{:keys [selected? frame on-click index objects page-id thumbnail-data]}]
|
||||
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
children-ids (cfh/get-children-ids objects (:id frame))
|
||||
(let [children-ids (cfh/get-children-ids objects (:id frame))
|
||||
children-bounds (gsh/shapes->rect (concat [frame] (->> children-ids (keep (d/getf objects)))))]
|
||||
|
||||
(if new-css-system
|
||||
[:button {:class (stl/css :thumbnail-item)
|
||||
:on-click #(on-click % index)}
|
||||
[:div {:class (stl/css-case :thumbnail-preview true
|
||||
:selected selected?)}
|
||||
[:& render/frame-svg {:frame (-> frame
|
||||
(assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
|
||||
(assoc :children-bounds children-bounds))
|
||||
:objects objects
|
||||
:use-thumbnails true}]]
|
||||
[:div {:class (stl/css :thumbnail-info)
|
||||
:title (:name frame)}
|
||||
(:name frame)]]
|
||||
|
||||
|
||||
[:div.thumbnail-item {:on-click #(on-click % index)}
|
||||
[:div.thumbnail-preview
|
||||
{:class (dom/classnames :selected selected?)}
|
||||
[:& render/frame-svg {:frame (-> frame
|
||||
(assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
|
||||
(assoc :children-bounds children-bounds))
|
||||
:objects objects
|
||||
:use-thumbnails true}]]
|
||||
[:div.thumbnail-info
|
||||
[:span.name {:title (:name frame)} (:name frame)]]])))
|
||||
[:button {:class (stl/css :thumbnail-item)
|
||||
:on-click #(on-click % index)}
|
||||
[:div {:class (stl/css-case :thumbnail-preview true
|
||||
:selected selected?)}
|
||||
[:& render/frame-svg {:frame (-> frame
|
||||
(assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
|
||||
(assoc :children-bounds children-bounds))
|
||||
:objects objects
|
||||
:use-thumbnails true}]]
|
||||
[:div {:class (stl/css :thumbnail-info)
|
||||
:title (:name frame)}
|
||||
(:name frame)]]))
|
||||
|
||||
(mf/defc thumbnails-panel
|
||||
[{:keys [frames page index show? thumbnail-data] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
expanded? (mf/use-state false)
|
||||
(let [expanded? (mf/use-state false)
|
||||
container (mf/use-ref)
|
||||
|
||||
objects (:objects page)
|
||||
|
|
@ -163,48 +122,23 @@
|
|||
(st/emit! (dv/go-to-frame-by-index index))
|
||||
(when @expanded?
|
||||
(on-close))))]
|
||||
(if new-css-system
|
||||
[:section
|
||||
{:class (stl/css-case :viewer-thumbnails true
|
||||
:expanded @expanded?)
|
||||
;; This is better as an inline-style so it won't make a reflow of every frame inside
|
||||
:style {:display (when (not show?) "none")}
|
||||
:ref container}
|
||||
[:section {:class (stl/css-case :viewer-thumbnails true
|
||||
:expanded @expanded?)
|
||||
;; This is better as an inline-style so it won't make a reflow of every frame inside
|
||||
:style {:display (when (not show?) "none")}
|
||||
:ref container}
|
||||
|
||||
[:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
|
||||
:on-close on-close
|
||||
:total (count frames)}]
|
||||
[:& thumbnails-content {:expanded? @expanded?
|
||||
:total (count frames)}
|
||||
(for [[i frame] (d/enumerate frames)]
|
||||
[:& thumbnail-item {:index i
|
||||
:key (dm/str (:id frame) "-" i)
|
||||
:frame frame
|
||||
:page-id (:id page)
|
||||
:objects objects
|
||||
:on-click on-item-click
|
||||
:selected? (= i index)
|
||||
:thumbnail-data thumbnail-data}])]]
|
||||
|
||||
|
||||
|
||||
[:section.viewer-thumbnails
|
||||
{;; This is better as an inline-style so it won't make a reflow of every frame inside
|
||||
:style {:display (when (not show?) "none")}
|
||||
:class (dom/classnames :expanded @expanded?)
|
||||
:ref container}
|
||||
|
||||
[:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
|
||||
:on-close on-close
|
||||
:total (count frames)}]
|
||||
[:& thumbnails-content {:expanded? @expanded?
|
||||
:total (count frames)}
|
||||
(for [[i frame] (d/enumerate frames)]
|
||||
[:& thumbnail-item {:index i
|
||||
:key (dm/str (:id frame) "-" i)
|
||||
:frame frame
|
||||
:page-id (:id page)
|
||||
:objects objects
|
||||
:on-click on-item-click
|
||||
:selected? (= i index)
|
||||
:thumbnail-data thumbnail-data}])]])))
|
||||
[:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
|
||||
:on-close on-close
|
||||
:total (count frames)}]
|
||||
[:& thumbnails-content {:expanded? @expanded?
|
||||
:total (count frames)}
|
||||
(for [[i frame] (d/enumerate frames)]
|
||||
[:& thumbnail-item {:index i
|
||||
:key (dm/str (:id frame) "-" i)
|
||||
:frame frame
|
||||
:page-id (:id page)
|
||||
:objects objects
|
||||
:on-click on-item-click
|
||||
:selected? (= i index)
|
||||
:thumbnail-data thumbnail-data}])]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue