3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 15:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Remove new-css-system from viewer

Browse source
This commit is contained in:
Eva 2024-01-04 13:05:06 +01:00 • committed by Andrey Antukh
parent 1433ec5dad
commit 480251c41c
40 changed files with 1299 additions and 3272 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -408,6 +408,8 @@
border-radius: $br-4; border-radius: $br-4;
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%); box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
svg { svg {
width: $s-16;
height: $s-16;
display: none; display: none;
stroke: var(--input-checkbox-inactive-foreground-color); stroke: var(--input-checkbox-inactive-foreground-color);
} }

4
frontend/resources/styles/main-default.scss
View file

@ -53,9 +53,6 @@
// Partials // Partials
//################################################# //#################################################
@import "main/partials/viewer";
@import "main/partials/viewer-header";
@import "main/partials/viewer-thumbnails";
@import "main/partials/activity-bar"; @import "main/partials/activity-bar";
@import "main/partials/debug-icons-preview"; @import "main/partials/debug-icons-preview";
@import "main/partials/editable-label"; @import "main/partials/editable-label";
@ -67,6 +64,5 @@
@import "main/partials/user-settings"; @import "main/partials/user-settings";
@import "main/partials/workspace"; @import "main/partials/workspace";
@import "main/partials/color-bullet"; @import "main/partials/color-bullet";
@import "main/partials/inspect";
@import "main/partials/exception-page"; @import "main/partials/exception-page";
@import "main/partials/signup-questions"; @import "main/partials/signup-questions";

487
frontend/resources/styles/main/partials/inspect.scss
View file

@ -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;
}
}

234
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -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;
}
}
}
}

192
frontend/resources/styles/main/partials/viewer-thumbnails.scss
View file

@ -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;
}
}

214
frontend/resources/styles/main/partials/viewer.scss
View file

@ -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;
}
}
}

468
frontend/src/app/main/ui/viewer.cljs
View file

@ -92,45 +92,29 @@
(mf/defc viewer-pagination (mf/defc viewer-pagination
[{:keys [index num-frames left-bar right-bar comment-sidebar] :as props}] [{:keys [index num-frames left-bar right-bar comment-sidebar] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [go-prev-frame (mf/use-fn #(st/emit! dv/select-prev-frame))
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-next-frame (mf/use-fn #(st/emit! dv/select-next-frame))
go-first-frame (mf/use-fn #(st/emit! dv/select-first-frame))] go-first-frame (mf/use-fn #(st/emit! dv/select-first-frame))]
(if new-css-system [:*
[:* (when (pos? index)
(when (pos? index) [:button {:class (stl/css-case :viewer-go-prev true
[:button {:class (stl/css-case :viewer-go-prev true :left-bar left-bar)
:left-bar left-bar) :on-click go-prev-frame}
:on-click go-prev-frame} i/arrow-refactor])
i/arrow-refactor]) (when (< (+ index 1) num-frames)
(when (< (+ index 1) num-frames) [:button {:class (stl/css-case :viewer-go-next true
[:button {:class (stl/css-case :viewer-go-next true :comment-sidebar comment-sidebar
:comment-sidebar comment-sidebar :right-bar right-bar)
:right-bar right-bar) :on-click go-next-frame}
:on-click go-next-frame} i/arrow-refactor])
i/arrow-refactor]) [:div {:class (stl/css-case :viewer-bottom true
[:div {:class (stl/css-case :viewer-bottom true :left-bar left-bar)}
:left-bar left-bar)} [:button {:on-click go-first-frame
[:button {:on-click go-first-frame :class (stl/css :reset-button)}
:class (stl/css :reset-button)} i/reload-refactor]
i/reload-refactor] [:span {:class (stl/css :counter)}
[:span {:class (stl/css :counter)} (str/join " / " [(+ index 1) num-frames])]
(str/join " / " [(+ index 1) num-frames])] [:span]]]))
[: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]]])))
(mf/defc viewer-pagination-and-sidebar (mf/defc viewer-pagination-and-sidebar
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
@ -175,21 +159,21 @@
[:* [:*
(when (or close-click-outside? background-overlay?) (when (or close-click-outside? background-overlay?)
[:div.viewer-overlay-background [:div {:class (stl/css-case :viewer-overlay-background true
{:class (dom/classnames :visible background-overlay?) :visible background-overlay?)
:style {:width (:width wrapper-size) :style {:width (:width wrapper-size)
:height (:height wrapper-size) :height (:height wrapper-size)
:position "absolute" :position "absolute"
:left 0 :left 0
:top 0} :top 0}
:on-click on-click}]) :on-click on-click}])
[:div.viewport-container.viewer-overlay [:div {:class (stl/css :viewer-overlay :viewport-container)
{:id (dm/str "overlay-" (:id overlay-frame)) :id (dm/str "overlay-" (:id overlay-frame))
:style {:width (:width size) :style {:width (:width size)
:height (:height size) :height (:height size)
:left (* (:x overlay-position) zoom) :left (* (:x overlay-position) zoom)
:top (* (:y overlay-position) zoom)}} :top (* (:y overlay-position) zoom)}}
[:& interactions/viewport [:& interactions/viewport
{:frame overlay-frame {:frame overlay-frame
@ -205,141 +189,72 @@
[{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref [{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
size frame interactions-mode overlays zoom section index]}] 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
[:& viewer-pagination-and-sidebar :index index
{:section section :page page
:index index :users users
:page page :frame frame
:users users :interactions-mode interactions-mode}]
:frame frame
:interactions-mode interactions-mode}]
[:div {:class (stl/css :viewer-wrapper) [:div {:class (stl/css :viewer-wrapper)
:style {:width (:width wrapper-size) :style {:width (:width wrapper-size)
:height (:height wrapper-size)}} :height (:height wrapper-size)}}
[:div {:class (stl/css :viewer-clipper)} [:div {:class (stl/css :viewer-clipper)}
(when orig-frame (when orig-frame
[:div {:class (stl/css :viewport-container) [:div {:class (stl/css :viewport-container)
:ref orig-viewport-ref :ref orig-viewport-ref
:style {:width (:width orig-size) :style {:width (:width orig-size)
:height (:height orig-size) :height (:height orig-size)
:position "relative"}} :position "relative"}}
[:& interactions/viewport [:& interactions/viewport
{:frame orig-frame {:frame orig-frame
:base-frame orig-frame :base-frame orig-frame
:frame-offset (gpt/point 0 0) :frame-offset (gpt/point 0 0)
:size orig-size :size orig-size
:page page :page page
:users users :users users
:interactions-mode interactions-mode}]]) :interactions-mode interactions-mode}]])
[:div {:class (stl/css :viewport-container) [:div {:class (stl/css :viewport-container)
:ref current-viewport-ref :ref current-viewport-ref
:style {:width (:width size) :style {:width (:width size)
:height (:height size) :height (:height size)
:position "relative"}} :position "relative"}}
[:& interactions/viewport [:& interactions/viewport
{:frame frame {:frame frame
:base-frame frame :base-frame frame
:frame-offset (gpt/point 0 0) :frame-offset (gpt/point 0 0)
:size size :size size
:page page :page page
:interactions-mode interactions-mode}] :interactions-mode interactions-mode}]
(for [overlay overlays] (for [overlay overlays]
[:& viewer-overlay [:& viewer-overlay
{:overlay overlay {:overlay overlay
:key (dm/str (:id overlay)) :key (dm/str (:id overlay))
:page page :page page
:frame frame :frame frame
:zoom zoom :zoom zoom
:wrapper-size wrapper-size :wrapper-size wrapper-size
:interactions-mode interactions-mode}])]] :interactions-mode interactions-mode}])]]
(when (= section :comments) (when (= section :comments)
[:& comments-layer {:file file [:& comments-layer {:file file
:users users :users users
:frame frame :frame frame
:page page :page page
:zoom zoom}])]] :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}])]])))
(mf/defc viewer-content (mf/defc viewer-content
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [data page-id share-id section index interactions-mode] :as props}] [{:keys [data page-id share-id section index interactions-mode] :as props}]
(let [{:keys [file users project permissions]} data (let [{:keys [file users project permissions]} data
new-css-system (mf/use-ctx ctx/new-css-system)
allowed (or allowed (or
(= section :interactions) (= section :interactions)
(and (= section :comments) (and (= section :comments)
@ -597,153 +512,80 @@
fonts (into #{} (keep :font-id) text-nodes)] fonts (into #{} (keep :font-id) text-nodes)]
(run! fonts/ensure-loaded! fonts)))) (run! fonts/ensure-loaded! fonts))))
(if new-css-system [:div#viewer-layout
[:div#viewer-layout {:class (stl/css-case
{:class (stl/css-case :force-visible (:show-thumbnails local)
:force-visible (:show-thumbnails local) :viewer-layout (not= section :inspect)
:viewer-layout (not= section :inspect) :inspect-layout (= section :inspect)
:inspect-layout (= section :inspect) :fullscreen fullscreen?)}
:fullscreen fullscreen?)}
[:div {:class (stl/css :viewer-content)} [:div {:class (stl/css :viewer-content)}
[:& header/header {:project project [:& header/header {:project project
:index index :index index
:file file :file file
:page page :page page
:frame frame :frame frame
:permissions permissions :permissions permissions
:zoom zoom :zoom zoom
:section section :section section
:interactions-mode interactions-mode}] :interactions-mode interactions-mode}]
[:button {:on-click on-thumbnails-close [:button {:on-click on-thumbnails-close
:class (stl/css-case :thumbnails-close true :class (stl/css-case :thumbnails-close true
:invisible (not (:show-thumbnails local false)))}] :invisible (not (:show-thumbnails local false)))}]
[:& thumbnails-panel {:frames frames [:& thumbnails-panel {:frames frames
:show? (:show-thumbnails local false) :show? (:show-thumbnails local false)
:page page :page page
:index index :index index
:thumbnail-data (:thumbnails file)}] :thumbnail-data (:thumbnails file)}]
[:section {:id "viewer-section" [:section {:id "viewer-section"
:ref viewer-section-ref :ref viewer-section-ref
:class (stl/css-case :viewer-section true :class (stl/css-case :viewer-section true
:fulscreen fullscreen?) :fulscreen fullscreen?)
:on-click click-on-screen} :on-click click-on-screen}
(cond (cond
(empty? frames) (empty? frames)
[:section {:class (stl/css :empty-state)} [:section {:class (stl/css :empty-state)}
[:span (tr "viewer.empty-state")]] [:span (tr "viewer.empty-state")]]
(nil? frame) (nil? frame)
[:section {:class (stl/css :empty-state)} [:section {:class (stl/css :empty-state)}
(when (some? index) (when (some? index)
[:span (tr "viewer.frame-not-found")])] [:span (tr "viewer.frame-not-found")])]
(some? frame) (some? frame)
(if (= :inspect section) (if (= :inspect section)
[:& inspect/viewport [:& inspect/viewport
{:frame frame {:frame frame
:page page :page page
:file file :file file
:section section :section section
:local local :local local
:size size :size size
:index index :index index
:viewer-pagination viewer-pagination :viewer-pagination viewer-pagination
:interactions-mode interactions-mode :interactions-mode interactions-mode
:share-id share-id}] :share-id share-id}]
[:& (mf/provider ctx/current-zoom) {:value zoom} [:& (mf/provider ctx/current-zoom) {:value zoom}
[:& viewer-wrapper [:& viewer-wrapper
{:wrapper-size wrapper-size {:wrapper-size wrapper-size
:orig-frame orig-frame :orig-frame orig-frame
:orig-viewport-ref orig-viewport-ref :orig-viewport-ref orig-viewport-ref
:orig-size orig-size :orig-size orig-size
:page page :page page
:file file :file file
:users users :users users
:current-viewport-ref current-viewport-ref :current-viewport-ref current-viewport-ref
:size size :size size
:frame frame :frame frame
:interactions-mode interactions-mode :interactions-mode interactions-mode
:overlays overlays :overlays overlays
:zoom zoom :zoom zoom
:section section :section section
:index index}]]))]]] :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}]]))]]])))
;; --- Component: Viewer ;; --- Component: Viewer

38
frontend/src/app/main/ui/viewer.scss
View file

@ -124,6 +124,7 @@
border-radius: $br-8; border-radius: $br-8;
width: $s-64; width: $s-64;
height: $s-32; height: $s-32;
color: var(--viewer-thumbnails-control-foreground-color);
background-color: var(--viewer-controls-background-color); background-color: var(--viewer-controls-background-color);
} }
@ -140,3 +141,40 @@
align-items: center; align-items: center;
overflow: hidden; 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);
}

232
frontend/src/app/main/ui/viewer/comments.cljs
View file

@ -18,7 +18,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.comments :as cmt] [app.main.ui.comments :as cmt]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.comments :as wc] [app.main.ui.workspace.comments :as wc]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -31,7 +30,6 @@
::mf/wrap-props false} ::mf/wrap-props false}
[] []
(let [{cmode :mode cshow :show show-sidebar? :show-sidebar?} (mf/deref refs/comments-local) (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) show-dropdown? (mf/use-state false)
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
@ -54,103 +52,67 @@
update-options update-options
(mf/use-callback (mf/use-callback
(mf/deps show-sidebar?)
(fn [event] (fn [event]
(let [mode (-> (dom/get-target event) (let [mode (-> (dom/get-target event)
(dom/get-data "value") (dom/get-data "value")
(boolean))] (boolean))
(st/emit! (dcm/update-options {:show-sidebar? mode})))))] _ (prn mode)]
(st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
(if new-css-system [:div {:class (stl/css :view-options)
[:div {:class (stl/css :view-options) :on-click toggle-dropdown}
:on-click toggle-dropdown} [:span {:class (stl/css :dropdown-title)}
[:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
(tr "labels.comments")] [:span {:class (stl/css :icon-dropdown)}
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
i/arrow-refactor] [:& dropdown {:show @show-dropdown?
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
:on-close hide-dropdown} [:ul {:class (stl/css :dropdown)}
[:ul {:class (stl/css :dropdown)} [:li {:class (stl/css-case :dropdown-element true
[:li {:class (stl/css-case :dropdown-element true :selected (or (= :all cmode) (nil? cmode)))
:selected (or (= :all cmode) (nil? cmode))) :data-value :all
:data-value :all :on-click update-mode}
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")] [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
(when (or (= :all cmode) (nil? cmode)) (when (or (= :all cmode) (nil? cmode))
[:span {:class (stl/css :icon)} i/tick-refactor])] [:span {:class (stl/css :icon)} i/tick-refactor])]
[:li {:class (stl/css-case :dropdown-element true [:li {:class (stl/css-case :dropdown-element true
:selected (= :yours cmode)) :selected (= :yours cmode))
:data-value :yours :data-value :yours
:on-click update-mode} :on-click update-mode}
[:span {:class (stl/css :label)} [:span {:class (stl/css :label)}
(tr "labels.show-your-comments")] (tr "labels.show-your-comments")]
(when (= :yours cmode) (when (= :yours cmode)
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/tick-refactor])] i/tick-refactor])]
[:li {:class (stl/css :separator)}] [:li {:class (stl/css :separator)}]
[:li {:class (stl/css-case :dropdown-element true [:li {:class (stl/css-case :dropdown-element true
:selected (= :pending cshow)) :selected (= :pending cshow))
:data-value (if (= :pending cshow) :all :pending) :data-value (if (= :pending cshow) :all :pending)
:on-click update-show} :on-click update-show}
[:span {:class (stl/css :label)} [:span {:class (stl/css :label)}
(tr "labels.hide-resolved-comments")] (tr "labels.hide-resolved-comments")]
(when (= :pending cshow) (when (= :pending cshow)
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/tick-refactor])] i/tick-refactor])]
[:li {:class (stl/css :separator)}] [:li {:class (stl/css :separator)}]
[:li {:class (stl/css-case :dropdown-element true [:li {:class (stl/css-case :dropdown-element true
:selected show-sidebar?) :selected show-sidebar?)
:data-value (not show-sidebar?) :data-value show-sidebar?
:on-click update-options} :on-click update-options}
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")] [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
(when show-sidebar? (when show-sidebar?
[:span {:class (stl/css :icon)} i/tick-refactor])]]]] [: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")]]]]])))
(defn- update-thread-position [positions {:keys [id] :as thread}] (defn- update-thread-position [positions {:keys [id] :as thread}]
@ -162,8 +124,7 @@
(mf/defc comments-layer (mf/defc comments-layer
[{:keys [zoom file users frame page] :as props}] [{:keys [zoom file users frame page] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [profile (mf/deref refs/profile)
profile (mf/deref refs/profile)
local (mf/deref refs/comments-local) local (mf/deref refs/comments-local)
open-thread-id (:open local) open-thread-id (:open local)
@ -234,81 +195,44 @@
(st/emit! (dcm/create-thread-on-viewer params) (st/emit! (dcm/create-thread-on-viewer params)
(dcm/close-thread)))))] (dcm/close-thread)))))]
(if new-css-system [:div {:class (stl/css :comments-section)
[:div {:class (stl/css :comments-section) :on-click on-click}
:on-click on-click} [:div {:class (stl/css :viewer-comments-container)}
[:div {:class (stl/css :viewer-comments-container)} [:div {:class (stl/css :threads)}
[:div {:class (stl/css :threads)} (for [item threads]
(for [item threads] [:& cmt/thread-bubble
[:& cmt/thread-bubble {:thread item
{:thread item :position-modifier modifier1
:position-modifier modifier1 :zoom zoom
:zoom zoom :on-click on-bubble-click
:on-click on-bubble-click :open? (= (:id item) (:open local))
:open? (= (:id item) (:open local)) :key (:seqn item)
:key (:seqn item) :origin :viewer}])
:origin :viewer}])
(when-let [thread (get threads-map open-thread-id)] (when-let [thread (get threads-map open-thread-id)]
[:& cmt/thread-comments [:& cmt/thread-comments
{:thread thread {:thread thread
:position-modifier modifier1 :position-modifier modifier1
:users users :users users
:zoom zoom}]) :zoom zoom}])
(when-let [draft (:draft local)] (when-let [draft (:draft local)]
[:& cmt/draft-thread [:& cmt/draft-thread
{:draft draft {:draft draft
:position-modifier modifier1 :position-modifier modifier1
:on-cancel on-draft-cancel :on-cancel on-draft-cancel
:on-submit on-draft-submit :on-submit on-draft-submit
:zoom zoom}])]]] :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}])]]])))
(mf/defc comments-sidebar (mf/defc comments-sidebar
[{:keys [users frame page]}] [{:keys [users frame page]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [profile (mf/deref refs/profile)
profile (mf/deref refs/profile)
local (mf/deref refs/comments-local) local (mf/deref refs/comments-local)
threads-map (mf/deref refs/comment-threads) threads-map (mf/deref refs/comment-threads)
threads (->> (vals threads-map) threads (->> (vals threads-map)
(dcm/apply-filters local profile) (dcm/apply-filters local profile)
(filter (fn [{:keys [position]}] (filter (fn [{:keys [position]}]
(gsh/has-point? frame position))))] (gsh/has-point? frame position))))]
(if new-css-system [:aside {:class (stl/css :comments-sidebar)}
[:aside {:class (stl/css :comments-sidebar)} [:div {:class (stl/css :settings-bar-inside)}
[:div {:class (stl/css :settings-bar-inside)} [:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]]))
[:& 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)}]]])))

456
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -14,7 +14,6 @@
[app.main.data.viewer.shortcuts :as sc] [app.main.data.viewer.shortcuts :as sc]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.export :refer [export-progress-widget]] [app.main.ui.export :refer [export-progress-widget]]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
@ -45,8 +44,7 @@
on-zoom-fill] on-zoom-fill]
:as props}] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [open* (mf/use-state false)
open* (mf/use-state false)
open? (deref open*) open? (deref open*)
open-dropdown open-dropdown
(mf/use-fn (mf/use-fn
@ -72,92 +70,57 @@
(mf/deps on-decrease) (mf/deps on-decrease)
(fn [event] (fn [event]
(dom/stop-propagation 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 [:li {:class (stl/css :zoom-option)
[:div {:class (stl/css-case :zoom-widget true :on-click on-zoom-fit}
:selected open?) (tr "workspace.header.zoom-fit")
:on-click open-dropdown [:span {:class (stl/css :shortcuts)}
:title (tr "workspace.header.zoom")} (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
[:span {:class (stl/css :label)} (fmt/format-percent zoom)] [:span {:class (stl/css :shortcut-key)
[:& dropdown {:show open? :key (str "zoom-fit-" sc)} sc])]]
:on-close close-dropdown} [:li {:class (stl/css :zoom-option)
[:ul {:class (stl/css :dropdown)} :on-click on-zoom-fill}
[:li {:class (stl/css :basic-zoom-bar)} (tr "workspace.header.zoom-fill")
[:span {:class (stl/css :zoom-btns)} [:span {:class (stl/css :shortcuts)}
[:button {:class (stl/css :zoom-btn) (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
:on-click on-decrease} [:span {:class (stl/css :shortcut-key)
[:span {:class (stl/css :zoom-icon)} :key (str "zoom-fill-" sc)} sc])]]
i/remove-refactor]] [:li {:class (stl/css :zoom-option)
[:p {:class (stl/css :zoom-text)} :on-click on-fullscreen}
(fmt/format-percent zoom)] (tr "workspace.header.zoom-full-screen")
[:button {:class (stl/css :zoom-btn) [:span {:class (stl/css :shortcuts)}
:on-click on-increase} (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
[:span {:class (stl/css :zoom-icon)} [:span {:class (stl/css :shortcut-key)
i/add-refactor]]] :key (str "zoom-fullscreen-" sc)} sc])]]]]]))
[: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)]]]]])))
(mf/defc header-options (mf/defc header-options
[{:keys [section zoom page file index permissions interactions-mode]}] [{:keys [section zoom page file index permissions interactions-mode]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [fullscreen? (mf/deref fullscreen-ref)
fullscreen? (mf/deref fullscreen-ref)
toggle-fullscreen toggle-fullscreen
(mf/use-callback (mf/use-callback
@ -196,89 +159,49 @@
(mf/use-fn (mf/use-fn
#(st/emit! dv/zoom-to-fit))] #(st/emit! dv/zoom-to-fit))]
(if new-css-system [:div {:class (stl/css :options-zone)}
[:div {:class (stl/css :options-zone)} (case section
(case section :interactions [:*
:interactions [:* (when index
(when index [:& flows-menu {:page page :index index}])
[:& flows-menu {:page page :index index}]) [:& interactions-menu {:interactions-mode interactions-mode}]]
[:& interactions-menu {:interactions-mode interactions-mode}]] :comments [:& comments-menu]
:comments [:& comments-menu] [:div {:class (stl/css :view-options)}])
[:div {:class (stl/css :view-options)}])
[:& export-progress-widget] [:& export-progress-widget]
[:& zoom-widget [:& zoom-widget
{:zoom zoom {:zoom zoom
:on-increase handle-increase :on-increase handle-increase
:on-decrease handle-decrease :on-decrease handle-decrease
:on-zoom-reset handle-zoom-reset :on-zoom-reset handle-zoom-reset
:on-zoom-fill handle-zoom-fill :on-zoom-fill handle-zoom-fill
:on-zoom-fit handle-zoom-fit :on-zoom-fit handle-zoom-fit
:on-fullscreen toggle-fullscreen}] :on-fullscreen toggle-fullscreen}]
(when (:can-edit permissions) (when (:can-edit permissions)
[:span {:on-click go-to-workspace [:span {:on-click go-to-workspace
:class (stl/css :edit-btn)} :class (stl/css :edit-btn)}
i/curve-refactor]) i/curve-refactor])
[:span {:title (tr "viewer.header.fullscreen") [:span {:title (tr "viewer.header.fullscreen")
:class (stl/css-case :fullscreen-btn true :class (stl/css-case :fullscreen-btn true
:selected fullscreen?) :selected fullscreen?)
:on-click toggle-fullscreen} :on-click toggle-fullscreen}
i/expand-refactor] i/expand-refactor]
(when (:is-admin permissions) (when (:is-admin permissions)
[:button {:on-click open-share-dialog [:button {:on-click open-share-dialog
:class (stl/css :share-btn)} :class (stl/css :share-btn)}
(tr "labels.share")]) (tr "labels.share")])
(when-not (:is-logged permissions) (when-not (:is-logged permissions)
[:span {:on-click open-login-dialog [:span {:on-click open-login-dialog
:class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])] :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")])])))
(mf/defc header-sitemap (mf/defc header-sitemap
[{:keys [project file page frame] :as props}] [{:keys [project file page frame] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [project-name (:name project)
project-name (:name project)
file-name (:name file) file-name (:name file)
page-name (:name page) page-name (:name page)
page-id (:id page) page-id (:id page)
@ -306,66 +229,37 @@
(st/emit! (dv/go-to-page page-id)) (st/emit! (dv/go-to-page page-id))
(reset! show-dropdown? false)))] (reset! show-dropdown? false)))]
(if new-css-system [:div {:class (stl/css :sitemap-zone)
[:div {:class (stl/css :sitemap-zone) :title (tr "viewer.header.sitemap")}
:title (tr "viewer.header.sitemap")} [:span {:class (stl/css :project-name)} project-name]
[:span {:class (stl/css :project-name)} project-name] [:div {:class (stl/css :sitemap-text)}
[:div {:class (stl/css :sitemap-text)} [:div {:class (stl/css :breadcrumb)
[:div {:class (stl/css :breadcrumb) :on-click open-dropdown}
:on-click open-dropdown} [:span {:class (stl/css :breadcrumb-text)}
[:span {:class (stl/css :breadcrumb-text)} (dm/str file-name " / " page-name)]
(dm/str file-name " / " page-name)] [:span {:class (stl/css :icon)} i/arrow-refactor]
[:span {:class (stl/css :icon)} i/arrow-refactor] [:span "/"]
[:span "/"] [:& dropdown {:show @show-dropdown?
[:& dropdown {:show @show-dropdown? :on-close close-dropdown}
:on-close close-dropdown} [:ul {:class (stl/css :dropdown-sitemap)}
[:ul {:class (stl/css :dropdown-sitemap)} (for [id (get-in file [:data :pages])]
(for [id (get-in file [:data :pages])] [:li {:class (stl/css-case :dropdown-element true
[:li {:class (stl/css-case :dropdown-element true :selected (= page-id id))
:selected (= page-id id)) :id (str id)
:id (str id) :key (str id)
:key (str id) :on-click (partial navigate-to id)}
:on-click (partial navigate-to id)} [:span {:class (stl/css :label)}
[:span {:class (stl/css :label)} (get-in file [:data :pages-index id :name])]
(get-in file [:data :pages-index id :name])] (when (= page-id id)
(when (= page-id id) [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
[:span {:class (stl/css :icon-check)} i/tick-refactor])])]]] [:div {:class (stl/css :current-frame)
[:div {:class (stl/css :current-frame) :on-click toggle-thumbnails}
:on-click toggle-thumbnails} [:span {:class (stl/css :frame-name)} frame-name]
[:span {:class (stl/css :frame-name)} frame-name] [:span {:class (stl/css :icon)} i/arrow-refactor]]]]))
[: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]])))
(mf/defc header (mf/defc header
[{:keys [project file page frame zoom section permissions index interactions-mode]}] [{:keys [project file page frame zoom section permissions index interactions-mode]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [go-to-dashboard
go-to-dashboard
(mf/use-fn (mf/use-fn
#(st/emit! (dv/go-to-dashboard))) #(st/emit! (dv/go-to-dashboard)))
@ -389,98 +283,52 @@
(st/emit! (dv/go-to-section section)) (st/emit! (dv/go-to-section section))
(open-login-dialog)))))] (open-login-dialog)))))]
(if new-css-system [:header {:class (stl/css :viewer-header)}
[:header {:class (stl/css :viewer-header)} [:div {:class (stl/css :nav-zone)}
[: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
;; If the user doesn't have permission we disable the link ;; If the user doesn't have permission we disable the link
[:div.main-icon {:style {:cursor (when-not (:can-edit permissions) "auto")}} [:a {:class (stl/css :home-link)
[:a {:on-click go-to-dashboard :on-click go-to-dashboard
:style {:pointer-events (when-not (:can-edit permissions) "none")}} i/logo-icon]] :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 [:div {:class (stl/css :mode-zone)}
[:button.mode-zone-button.tooltip.tooltip-bottom [:button {:on-click navigate
{:on-click navigate :data-value :interactions
:data-value :interactions :class (stl/css-case :mode-zone-btn true
:class (dom/classnames :active (= section :interactions)) :selected (= section :interactions))
:alt (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
i/play] i/play-refactor]
(when (or (:can-edit permissions) (when (or (:can-edit permissions)
(= (:who-comment permissions) "all")) (= (:who-comment permissions) "all"))
[:button.mode-zone-button.tooltip.tooltip-bottom [:button {:on-click navigate
{:on-click navigate :data-value :comments
:data-value :comments :class (stl/css-case :mode-zone-btn true
:class (dom/classnames :active (= section :comments)) :selected (= section :comments))
:alt (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
i/chat]) i/comments-refactor])
(when (or (= (:type permissions) :membership) (when (or (= (:type permissions) :membership)
(and (= (:type permissions) :share-link) (and (= (:type permissions) :share-link)
(= (:who-inspect permissions) "all"))) (= (:who-inspect permissions) "all")))
[:button.mode-zone-button.tooltip.tooltip-bottom [:button {:on-click go-to-inspect
{:on-click go-to-inspect :class (stl/css-case :mode-zone-btn true
:class (dom/classnames :active (= section :inspect)) :selected (= section :inspect))
:alt (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
i/code])] i/code-refactor])]
[:& header-options {:section section [:& header-options {:section section
:permissions permissions :permissions permissions
:page page :page page
:file file :file file
:index index :index index
:zoom zoom :zoom zoom
:interactions-mode interactions-mode}]]))) :interactions-mode interactions-mode}]]))

1
frontend/src/app/main/ui/viewer/header.scss
View file

@ -53,6 +53,7 @@
.project-name { .project-name {
@include tabTitleTipography; @include tabTitleTipography;
color: var(--title-foreground-color);
} }
.sitemap-text { .sitemap-text {

12
frontend/src/app/main/ui/viewer/inspect/annotation.cljs
View file

@ -5,15 +5,19 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.inspect.annotation (ns app.main.ui.viewer.inspect.annotation
(:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.components.copy-button :refer [copy-button]] [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]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc annotation (mf/defc annotation
[{:keys [content] :as props}] [{:keys [content] :as props}]
[:div.attributes-block.inspect-annotation [:div {:class (stl/css :attributes-block)}
[:div.attributes-block-title [:& title-bar {:collapsable? false
[:div.attributes-block-title-text (tr "workspace.options.component.annotation")] :title (tr "workspace.options.component.annotation")
:class (stl/css :title-spacing-annotation)}
[:& copy-button {:data content}]] [:& 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
View 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);
}

49
frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
View file

@ -9,7 +9,6 @@
(:require (:require
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [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.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -19,36 +18,20 @@
(mf/defc blur-panel (mf/defc blur-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shapes (->> shapes (filter has-blur?))]
shapes (->> shapes (filter has-blur?))] (when (seq shapes)
(if new-css-system [:div {:class (stl/css :attributes-block)}
(when (seq shapes) [:& title-bar {:collapsable? false
[:div {:class (stl/css :attributes-block)} :title (tr "inspect.attributes.blur")
[:& title-bar {:collapsable? false :class (stl/css :title-spacing-blur)}
:title (tr "inspect.attributes.blur") (when (= (count shapes) 1)
:class (stl/css :title-spacing-blur)} [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}
(for [shape shapes] (for [shape shapes]
[:div {:class (stl/css :blur-row)} [:div {:class (stl/css :blur-row)}
[:div {:class (stl/css :global/attr-label)} "Filter"] [:div {:class (stl/css :global/attr-label)} "Filter"]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape :filter)} [:& copy-button {:data (css/get-css-property objects shape :filter)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(css/get-css-value objects shape :filter)]]]])]]) (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)}]])]))))

21
frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
View file

@ -8,15 +8,16 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-blur {
@extend .attr-title;
}
} }
.attributes-content {
.blur-row { .title-spacing-blur {
@extend .attr-row; @extend .attr-title;
} }
.button-children {
@extend .copy-button-children; .blur-row {
} @extend .attr-row;
}
.button-children {
@extend .copy-button-children;
} }

214
frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -12,12 +12,9 @@
[app.config :as cf] [app.config :as cf]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [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.color-bullet-new :as cbn]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
@ -47,147 +44,94 @@
(or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors))) (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
(mf/defc color-row [{:keys [color format copy-data on-change-format]}] (mf/defc color-row [{:keys [color format copy-data on-change-format]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [colors-library (get-colors-library color)
colors-library (get-colors-library color)
file-colors (get-file-colors) file-colors (get-file-colors)
color-library-name (get-in (or colors-library file-colors) [(:id color) :name]) color-library-name (get-in (or colors-library file-colors) [(:id color) :name])
color (assoc color :color-library-name color-library-name) color (assoc color :color-library-name color-library-name)
image (:image color)] image (:image color)]
(if new-css-system [:*
[:* [:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :attributes-color-row)} [:div {:class (stl/css :bullet-wrapper)
[:div {:class (stl/css :bullet-wrapper) :style #js {"--bullet-size" "16px"}}
:style #js {"--bullet-size" "16px"}} [:& cbn/color-bullet {:color color
[:& cbn/color-bullet {:color color :mini? true}]]
: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)) "%")])])
(when-not image
[:div {:class (stl/css :format-wrapper)}
(when-not (and on-change-format (or (:gradient color) image)) (when-not (and on-change-format (or (:gradient color) image))
[:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} [:div {:class (stl/css :select-format-wrapper)}
[:option {:value "hex"} [:& select
(tr "inspect.attributes.color.hex")] {: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"} (if (and copy-data (not image))
(tr "inspect.attributes.color.rgba")] [:& 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"} (when-not (:gradient color)
(tr "inspect.attributes.color.hsla")]])] [:span {:class (stl/css :opacity-info)}
(str (* 100 (:opacity color)) "%")])]]
(when (and copy-data (not image)) (when color-library-name
[:& copy-button {:data copy-data}])] [:div {:class (stl/css :second-row)}
[:div {:class (stl/css :color-name-library)}
color-library-name]])]]
(when image [:div {:class (stl/css :color-info)}
(let [mtype (-> image :mtype) [:div {:class (stl/css :first-row)}
name (or (:name image) (tr "media.image")) [:div {:class (stl/css :name-opacity)}
extension (cm/mtype->extension mtype)] [:span {:class (stl/css-case :color-value-wrapper true
[:a.download-button {:target "_blank" :gradient-name (:gradient color))}
:download (cond-> name extension (str/concat extension)) (if (:gradient color)
:href (cf/resolve-file-media image)} [:& cbn/color-name {:color color
(tr "inspect.attributes.image.download")]))]))) :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")]))]))

196
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -10,70 +10,45 @@
display: grid; display: grid;
grid-template-columns: $s-16 $s-72 $s-156; grid-template-columns: $s-16 $s-72 $s-156;
gap: $s-4; gap: $s-4;
.bullet-wrapper { }
@include flexCenter;
height: $s-32; .bullet-wrapper {
} @include flexCenter;
.format-wrapper { height: $s-32;
width: $s-72; }
height: $s-32;
.select-format-wrapper { .format-wrapper {
width: 100%; width: $s-72;
div { height: $s-32;
background-color: transparent; }
border: none;
padding-left: $s-2; .select-format-wrapper {
color: var(--menu-foreground-color-rest); width: 100%;
} div {
} background-color: transparent;
.format-info { border: none;
@include tabTitleTipography; padding-left: $s-2;
display: flex; color: var(--menu-foreground-color-rest);
align-items: center;
width: 100%;
height: 100%;
padding-left: $s-2;
font-size: $fs-12;
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 { .color-info {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: $s-4; gap: $s-4;
flex-grow: 1; 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 { button {
visibility: hidden; visibility: hidden;
min-width: $s-28; 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-info,
.color-row-copy-btn { .color-row-copy-btn {
@include copyWrapper; @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 { .first-row {
min-height: $s-16; display: grid;
padding-right: $s-8; grid-template-columns: 1fr $s-20;
width: 100%; grid-template-areas: "name button";
text-align: left; height: fit-content;
margin: 0; width: 100%;
padding: 0; padding: 0;
.color-name-library { margin: 0;
@include inspectValue; }
color: var(--menu-foreground-color-rest);
} .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 { .download-button {
@extend .button-secondary; @extend .button-secondary;

70
frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
View file

@ -8,7 +8,6 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.components.title-bar :refer [title-bar]] [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.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -34,8 +33,7 @@
(mf/defc fill-block (mf/defc fill-block
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [objects shape]}] [{:keys [objects shape]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [format* (mf/use-state :hex)
format* (mf/use-state :hex)
format (deref format*) format (deref format*)
color (shape->color shape) color (shape->color shape)
@ -43,54 +41,28 @@
(mf/use-fn (mf/use-fn
(fn [format] (fn [format]
(reset! format* format)))] (reset! format* format)))]
(if new-css-system [:div {:class (stl/css :attributes-fill-block)}
[:div {:class (stl/css :attributes-fill-block)} [:& color-row
[:& color-row {:color color
{:color color :format format
:format format :on-change-format on-change
:on-change-format on-change :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))
: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)}]])))
(mf/defc fill-panel (mf/defc fill-panel
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [shapes]}] [{:keys [shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shapes (filter has-fill? shapes)]
shapes (filter has-fill? shapes)] (when (seq shapes)
(if new-css-system [:div {:class (stl/css :attributes-block)}
(when (seq shapes) [:& title-bar {:collapsable? false
[:div {:class (stl/css :attributes-block)} :title (tr "inspect.attributes.fill")
[:& title-bar {:collapsable? false :class (stl/css :title-spacing-fill)}]
:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}
(for [shape shapes] (for [shape shapes]
(if (seq (:fills shape)) (if (seq (:fills shape))
(for [value (:fills shape [])] (for [value (:fills shape [])]
[:& fill-block {:key (str "fill-block-" (:id shape) value) [:& fill-block {:key (str "fill-block-" (:id shape) value)
:shape value}]) :shape value}])
[:& fill-block {:key (str "fill-block-only" (:id shape)) [:& fill-block {:key (str "fill-block-only" (:id shape))
:shape 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}]))]]))))

7
frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
View file

@ -8,7 +8,8 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-fill { }
@extend .attr-title;
} .title-spacing-fill {
@extend .attr-title;
} }

61
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
View file

@ -10,7 +10,6 @@
[app.common.data :as d] [app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [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.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -19,51 +18,27 @@
(mf/defc geometry-block (mf/defc geometry-block
[{:keys [objects shape]}] [{: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)]
(for [property properties] [:div {:class (stl/css :geometry-row)}
(when-let [value (css/get-css-value objects shape property)] [:div {:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :geometry-row)} [:div {:class (stl/css :global/attr-value)}
[:div {:class (stl/css :global/attr-label)} (d/name property)] [:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :button-children)} 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)}]]))])))
(mf/defc geometry-panel (mf/defc geometry-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] [:div {:class (stl/css :attributes-block)}
(if new-css-system [:& title-bar {:collapsable? false
[:div {:class (stl/css :attributes-block)} :title (tr "inspect.attributes.size")
[:& title-bar {:collapsable? false :class (stl/css :title-spacing-geometry)}
:title (tr "inspect.attributes.size")
:class (stl/css :title-spacing-geometry)}
(when (= (count shapes) 1) (when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
(for [shape shapes] (for [shape shapes]
[:& geometry-block {:shape shape [:& geometry-block {:shape shape
:objects objects :objects objects
:key (:id shape)}])] :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)}])])))

14
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
View file

@ -8,14 +8,16 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-geometry { }
@extend .attr-title;
} .title-spacing-geometry {
@extend .attr-title;
} }
.geometry-row { .geometry-row {
@extend .attr-row; @extend .attr-row;
.button-children { }
@extend .copy-button-children;
} .button-children {
@extend .copy-button-children;
} }

78
frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
View file

@ -11,7 +11,6 @@
[app.common.media :as cm] [app.common.media :as cm]
[app.config :as cf] [app.config :as cf]
[app.main.ui.components.copy-button :refer [copy-button]] [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.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -22,58 +21,31 @@
(mf/defc image-panel (mf/defc image-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] (for [shape (filter cfh/image-shape? shapes)]
(if new-css-system [:div {:class (stl/css :attributes-block)
(for [shape (filter cfh/image-shape? shapes)] :key (str "image-" (:id shape))}
[:div {:class (stl/css :attributes-block) [:div {:class (stl/css :image-wrapper)}
:key (str "image-" (:id shape))} [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
[:div {:class (stl/css :image-wrapper)}
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
[:div {:class (stl/css :image-row)} [:div {:class (stl/css :image-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.image.width")] (tr "inspect.attributes.image.width")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)} [:& 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 :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
[:div {:class (stl/css :image-row)} [:div {:class (stl/css :image-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.image.height")] (tr "inspect.attributes.image.height")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)} [:& 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 :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
(let [mtype (-> shape :metadata :mtype) (let [mtype (-> shape :metadata :mtype)
name (:name shape) name (:name shape)
extension (cm/mtype->extension mtype)] extension (cm/mtype->extension mtype)]
[:a {:class (stl/css :download-button) [:a {:class (stl/css :download-button)
:target "_blank" :target "_blank"
:download (cond-> name extension (str/concat extension)) :download (cond-> name extension (str/concat extension))
:href (cf/resolve-file-media (-> shape :metadata))} :href (cf/resolve-file-media (-> shape :metadata))}
(tr "inspect.attributes.image.download")])]) (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")])]))))

58
frontend/src/app/main/ui/viewer/inspect/attributes/image.scss
View file

@ -9,33 +9,37 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
margin-bottom: $s-16; 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 { .image-wrapper {
height: 100%; background-color: var(--menu-background-color);
width: 100%; position: relative;
object-fit: contain; @include flexCenter;
} width: $s-248;
} height: $s-160;
.image-row { max-height: $s-160;
@extend .attr-row; max-width: $s-248;
.button-children { margin: $s-8 0;
@extend .copy-button-children; border-radius: $br-8;
}
} img {
.download-button { height: 100%;
@extend .button-secondary; width: 100%;
@include tabTitleTipography; object-fit: contain;
height: $s-32;
margin-top: $s-4;
} }
} }
.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;
}

68
frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
View file

@ -11,7 +11,6 @@
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [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.code-gen.style-css :as css]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -30,57 +29,30 @@
(mf/defc layout-block (mf/defc layout-block
[{:keys [objects shape]}] [{: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 [:& 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 {: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)}]]))])))
(mf/defc layout-panel (mf/defc layout-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
(let [shapes (->> shapes (filter ctl/any-layout?)) (let [shapes (->> shapes (filter ctl/any-layout?))]
new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system (when (seq shapes)
(when (seq shapes) [:div {:class (stl/css :attributes-block)}
[:div {:class (stl/css :attributes-block)} [:& title-bar {:collapsable? false
[:& title-bar {:collapsable? false :title "Layout"
:title "Layout" :class (stl/css :title-spacing-layout)}
:class (stl/css :title-spacing-layout)}
(when (= (count shapes) 1) (when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
(for [shape shapes] (for [shape shapes]
[:& layout-block {:shape shape [:& layout-block {:shape shape
:objects objects :objects objects
:key (:id shape)}])]) :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)}])]))))

14
frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
View file

@ -8,14 +8,16 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-layout { }
@extend .attr-title;
} .title-spacing-layout {
@extend .attr-title;
} }
.layout-row { .layout-row {
@extend .attr-row; @extend .attr-row;
.button-children { }
@extend .copy-button-children;
} .button-children {
@extend .copy-button-children;
} }

65
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
View file

@ -11,7 +11,6 @@
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [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.code-gen.style-css :as css]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -23,7 +22,6 @@
:min-width :min-width
:align-self :align-self
:justify-self :justify-self
:flex-shrink :flex-shrink
:flex :flex
@ -33,30 +31,18 @@
(mf/defc layout-element-block (mf/defc layout-element-block
[{:keys [objects shape]}] [{:keys [objects shape]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] (for [property properties]
(if new-css-system (when-let [value (css/get-css-value objects shape property)]
[:* [:div {:class (stl/css :layout-element-row)}
(for [property properties] [:div {:class (stl/css :global/attr-label)} (d/name property)]
(when-let [value (css/get-css-value objects shape property)] [:div {:class (stl/css :global/attr-value)}
[: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)} [:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))] [: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)}]]))])))
(mf/defc layout-element-panel (mf/defc layout-element-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes) only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes)
only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes) only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)
@ -75,28 +61,15 @@
:else :else
"Layout element")] "Layout element")]
(if new-css-system (when some-layout-prop?
(when some-layout-prop? [:div {:class (stl/css :attributes-block)}
[:div {:class (stl/css :attributes-block)} [:& title-bar {:collapsable? false
[:& title-bar {:collapsable? false :title menu-title
:title menu-title :class (stl/css :title-spacing-layout-element)}
:class (stl/css :title-spacing-layout-element)} (when (= (count shapes) 1)
(when (= (count shapes) 1) [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
(for [shape shapes] (for [shape shapes]
[:& layout-element-block {:shape shape [:& layout-element-block {:shape shape
:objects objects :objects objects
:key (:id shape)}])]) :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)}])]))))

14
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
View file

@ -8,14 +8,16 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-layout-element { }
@extend .attr-title;
} .title-spacing-layout-element {
@extend .attr-title;
} }
.layout-element-row { .layout-element-row {
@extend .attr-row; @extend .attr-row;
.button-children { }
@extend .copy-button-children;
} .button-children {
@extend .copy-button-children;
} }

36
frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
View file

@ -11,7 +11,6 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [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.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -50,29 +49,16 @@
:on-change-format #(reset! color-format %)}]])) :on-change-format #(reset! color-format %)}]]))
(mf/defc shadow-panel [{:keys [shapes]}] (mf/defc shadow-panel [{:keys [shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shapes (->> shapes (filter has-shadow?))]
shapes (->> shapes (filter has-shadow?))]
(if new-css-system (when (and (seq shapes) (> (count shapes) 0))
(when (and (seq shapes) (> (count shapes) 0)) [:div {:class (stl/css :attributes-block)}
[:div {:class (stl/css :attributes-block)} [:& title-bar {:collapsable? false
[:& title-bar {:collapsable? false :title (tr "inspect.attributes.shadow")
:title (tr "inspect.attributes.shadow") :class (stl/css :title-spacing-shadow)}]
:class (stl/css :title-spacing-shadow)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}
(for [shape shapes] (for [shape shapes]
(for [shadow (:shadow shape)] (for [shadow (:shadow shape)]
[:& shadow-block {:shape shape [:& shadow-block {:shape shape
:shadow shadow}]))]]) :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}]))]]))))

21
frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss
View file

@ -8,15 +8,16 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-shadow {
@extend .attr-title;
}
} }
.attributes-shadow-block {
.shadow-row { .title-spacing-shadow {
@extend .attr-row; @extend .attr-title;
.button-children { }
@extend .copy-button-children;
} .shadow-row {
} @extend .attr-row;
}
.button-children {
@extend .copy-button-children;
} }

102
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
View file

@ -11,7 +11,6 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css-formats :as cssf] [app.util.code-gen.style-css-formats :as cssf]
@ -33,82 +32,41 @@
(mf/defc stroke-block (mf/defc stroke-block
[{:keys [stroke]}] [{:keys [stroke]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [color-format (mf/use-state :hex)
color-format (mf/use-state :hex)
color (stroke->color stroke)] color (stroke->color stroke)]
(if new-css-system [:div {:class (stl/css :attributes-stroke-block)}
[:div {:class (stl/css :attributes-stroke-block)} (let [{:keys [stroke-style stroke-alignment]} stroke
(let [{:keys [stroke-style stroke-alignment]} stroke stroke-style (if (= stroke-style :svg) :solid stroke-style)
stroke-style (if (= stroke-style :svg) :solid stroke-style) stroke-alignment (or stroke-alignment :center)
stroke-alignment (or stroke-alignment :center) stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
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.style." (or (d/name stroke-style) "none"))) " " (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
(tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
[:* [:*
[:& color-row {:color color [:& color-row {:color color
:format @color-format :format @color-format
:copy-data (uc/color->background color) :copy-data (uc/color->background color)
:on-change-format #(reset! color-format %)}] :on-change-format #(reset! color-format %)}]
[:div {:class (stl/css :stroke-row)} [:div {:class (stl/css :stroke-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
"Border"] "Border"]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))} [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
[:div {:class (stl/css :button-children)} stroke-def]]]]])] [: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 %)}]])))
(mf/defc stroke-panel (mf/defc stroke-panel
[{:keys [shapes]}] [{:keys [shapes]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shapes (->> shapes (filter has-stroke?))]
shapes (->> shapes (filter has-stroke?))] (when (seq shapes)
(if new-css-system [:div {:class (stl/css :attributes-block)}
(when (seq shapes) [:& title-bar {:collapsable? false
[:div {:class (stl/css :attributes-block)} :title (tr "inspect.attributes.stroke")
[:& title-bar {:collapsable? false :class (stl/css :title-spacing-stroke)}]
:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}
(for [shape shapes] (for [shape shapes]
(for [value (:strokes shape)] (for [value (:strokes shape)]
[:& stroke-block {:key (str "stroke-color-" (:id shape) value) [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
:stroke 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}]))]]))))

22
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
View file

@ -8,16 +8,20 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-stroke {
@extend .attr-title;
}
} }
.title-spacing-stroke {
@extend .attr-title;
}
.attributes-stroke-block { .attributes-stroke-block {
@include flexColumn; @include flexColumn;
.stroke-row { }
@extend .attr-row;
.button-children { .stroke-row {
@extend .copy-button-children; @extend .attr-row;
} }
}
.button-children {
@extend .copy-button-children;
} }

66
frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -21,38 +21,20 @@
(str/join "; "))) (str/join "; ")))
(mf/defc svg-attr [{:keys [attr value]}] (mf/defc svg-attr [{:keys [attr value]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] (if (map? value)
(if new-css-system [:*
[:div {:class (stl/css :attributes-subtitle)}
[:span (d/name attr)]
[:& copy-button {:data (map->css value)}]]
(if (map? value) (for [[attr-key attr-value] value]
[:* [:& svg-attr {:attr attr-key :value attr-value}])]
[:div {:class (stl/css :attributes-subtitle)}
[:span (d/name attr)]
[:& copy-button {:data (map->css value)}]]
(for [[attr-key attr-value] value] [:div {:class (stl/css :svg-row)}
[:& svg-attr {:attr attr-key :value attr-value}])] [:div {:class (stl/css :global/attr-label)} (d/name attr)]
[:div {:class (stl/css :global/attr-value)}
[:div {:class (stl/css :svg-row)} [:& copy-button {:data (d/name value)}
[:div {:class (stl/css :global/attr-label)} (d/name attr)] [:div {:class (stl/css :button-children)} (str value)]]]]))
[: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)}]]))))
(mf/defc svg-block (mf/defc svg-block
[{:keys [shape]}] [{:keys [shape]}]
@ -63,20 +45,10 @@
(mf/defc svg-panel (mf/defc svg-panel
[{:keys [shapes]}] [{:keys [shapes]}]
(let [shape (first shapes)]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (when (seq (:svg-attrs shape))
shape (first shapes)] [:div {:class (stl/css :attributes-block)}
(if new-css-system [:& title-bar {:collapsable? false
(when (seq (:svg-attrs shape)) :title (tr "workspace.sidebar.options.svg-attrs.title")
[:div {:class (stl/css :attributes-block)} :class (stl/css :title-spacing-svg)}]
[:& title-bar {:collapsable? false [:& svg-block {:shape shape}]])))
: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}]]))))

16
frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss
View file

@ -8,16 +8,20 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-svg {
@extend .attr-title;
}
} }
.title-spacing-svg {
@extend .attr-title;
}
.svg-row { .svg-row {
@extend .attr-row; @extend .attr-row;
.button-children {
@extend .copy-button-children;
}
} }
.button-children {
@extend .copy-button-children;
}
.attributes-subtitle { .attributes-subtitle {
@include tabTitleTipography; @include tabTitleTipography;
display: flex; display: flex;

309
frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
View file

@ -15,7 +15,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -51,8 +50,7 @@
(mf/defc typography-block (mf/defc typography-block
[{:keys [text style]}] [{:keys [text style]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [typography-library-ref
typography-library-ref
(mf/use-memo (mf/use-memo
(mf/deps (:typography-ref-file style)) (mf/deps (:typography-ref-file style))
(make-typographies-library-ref (: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)] 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)}
[:div {:class (stl/css :attributes-content)} (when (:fills style)
(when (:fills style) (for [[idx fill] (map-indexed vector (:fills style))]
(for [[idx fill] (map-indexed vector (:fills style))] [:& color-row {:key idx
[:& color-row {:key idx :format @color-format
:format @color-format :color (fill->color fill)
:color (fill->color fill) :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
:copy-data (copy-style-data fill :fill-color :fill-color-gradient) :on-change-format #(reset! color-format %)}]))
:on-change-format #(reset! color-format %)}]))
(when (:typography-ref-id style) (when (:typography-ref-id style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography")] (tr "inspect.attributes.typography")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)} [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
[:div {:class (stl/css :button-children)} (:name typography)]]]]) [:div {:class (stl/css :button-children)} (:name typography)]]]])
(when (:font-id style) (when (:font-id style)
[:div {:class (stl/css :text-row)} [: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-label)} (tr "inspect.attributes.typography.font-family")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-family)} [:& copy-button {:data (copy-style-data style :font-family)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(-> style :font-id fonts/get-font-data :name)]]]]) (-> style :font-id fonts/get-font-data :name)]]]])
(when (:font-style style) (when (:font-style style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-style")] (tr "inspect.attributes.typography.font-style")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-style)} [:& copy-button {:data (copy-style-data style :font-style)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(str (:font-style style))]]]]) (str (:font-style style))]]]])
(when (:font-size style) (when (:font-size style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-size")] (tr "inspect.attributes.typography.font-size")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-size)} [:& copy-button {:data (copy-style-data style :font-size)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(fmt/format-pixels (:font-size style))]]]]) (fmt/format-pixels (:font-size style))]]]])
(when (:font-weight style) (when (:font-weight style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-weight")] (tr "inspect.attributes.typography.font-weight")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-weight)} [:& copy-button {:data (copy-style-data style :font-weight)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(str (:font-weight style))]]]]) (str (:font-weight style))]]]])
(when (:line-height style) (when (:line-height style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.line-height")] (tr "inspect.attributes.typography.line-height")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :line-height)} [:& copy-button {:data (copy-style-data style :line-height)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(fmt/format-number (:line-height style))]]]]) (fmt/format-number (:line-height style))]]]])
(when (:letter-spacing style) (when (:letter-spacing style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.letter-spacing")] (tr "inspect.attributes.typography.letter-spacing")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :letter-spacing)} [:& copy-button {:data (copy-style-data style :letter-spacing)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(fmt/format-pixels (:letter-spacing style))]]]]) (fmt/format-pixels (:letter-spacing style))]]]])
(when (:text-decoration style) (when (:text-decoration style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.text-decoration")] (tr "inspect.attributes.typography.text-decoration")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-decoration.none ;; inspect.attributes.typography.text-decoration.none
;; inspect.attributes.typography.text-decoration.strikethrough ;; inspect.attributes.typography.text-decoration.strikethrough
;; inspect.attributes.typography.text-decoration.underline ;; inspect.attributes.typography.text-decoration.underline
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :text-decoration)} [:& copy-button {:data (copy-style-data style :text-decoration)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]]) (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
(when (:text-transform style) (when (:text-transform style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.text-transform")] (tr "inspect.attributes.typography.text-transform")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-transform.lowercase ;; inspect.attributes.typography.text-transform.lowercase
;; inspect.attributes.typography.text-transform.none ;; inspect.attributes.typography.text-transform.none
;; inspect.attributes.typography.text-transform.titlecase ;; inspect.attributes.typography.text-transform.titlecase
;; inspect.attributes.typography.text-transform.uppercase ;; inspect.attributes.typography.text-transform.uppercase
;; inspect.attributes.typography.text-transform.unset ;; inspect.attributes.typography.text-transform.unset
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :text-transform)} [:& copy-button {:data (copy-style-data style :text-transform)}
[:div {:class (stl/css :button-children)} [:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]]) (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
[:& copy-button {:data (str/trim text) [:& copy-button {:data (str/trim text)
:class (stl/css :attributes-content-row)} :class (stl/css :attributes-content-row)}
[:span {:class (stl/css :content) [:span {:class (stl/css :content)
:style {:font-family (:font-family style) :style {:font-family (:font-family style)
:font-weight (:font-weight style) :font-weight (:font-weight style)
:font-style (:font-style style)}} :font-style (:font-style style)}}
(str/trim text)]]] (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)}]]])))
(mf/defc text-block [{:keys [shape]}] (mf/defc text-block [{:keys [shape]}]
@ -281,21 +188,11 @@
(mf/defc text-panel (mf/defc text-panel
[{:keys [shapes]}] [{:keys [shapes]}]
(when-let [shapes (seq (filter has-text? shapes))] (when-let [shapes (seq (filter has-text? shapes))]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] [:div {:class (stl/css :attributes-block)}
(if new-css-system [:& title-bar {:collapsable? false
[:div {:class (stl/css :attributes-block)} :title (tr "inspect.attributes.typography")
[:& title-bar {:collapsable? false :class (stl/css :title-spacing-text)}]
:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]
(for [shape shapes] (for [shape shapes]
[:& text-block {:shape shape [:& text-block {:shape shape
:key (str "text-block" (:id 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))}])]))))

67
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -8,41 +8,46 @@
.attributes-block { .attributes-block {
@include flexColumn; @include flexColumn;
.title-spacing-text {
@extend .attr-title;
}
} }
.title-spacing-text {
@extend .attr-title;
}
.attributes-content { .attributes-content {
@include flexColumn; @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 { .text-row {
border: $s-1 solid var(--color-background-tertiary); @extend .attr-row;
background-color: var(--menu-background-color); :global(.attr-value) {
.content { align-items: center;
color: var(--menu-foreground-color-hover); }
} }
.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);
} }
} }
} }

161
frontend/src/app/main/ui/viewer/inspect/exports.cljs
View file

@ -13,7 +13,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr c]] [app.util.i18n :refer [tr c]]
@ -23,8 +22,7 @@
(mf/defc exports (mf/defc exports
{::mf/wrap [#(mf/memo % =)]} {::mf/wrap [#(mf/memo % =)]}
[{:keys [shapes page-id file-id share-id type] :as props}] [{:keys [shapes page-id file-id share-id type] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [exports (mf/use-state [])
exports (mf/use-state [])
xstate (mf/deref refs/export) xstate (mf/deref refs/export)
vstate (mf/deref refs/viewer-data) vstate (mf/deref refs/viewer-data)
page (get-in vstate [:pages page-id]) page (get-in vstate [:pages page-id])
@ -136,111 +134,64 @@
flatten flatten
distinct distinct
vec)))) vec))))
(if new-css-system [:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)}
[:div {:class (stl/css :element-title)} [:& title-bar {:collapsable? false
[:& title-bar {:collapsable? false :title (tr "workspace.options.export")
:title (tr "workspace.options.export") :class (stl/css :title-spacing-export-viewer)}
:class (stl/css :title-spacing-export-viewer)} [:button {:class (stl/css :add-export)
[:button {:class (stl/css :add-export) :on-click add-export} i/add-refactor]]]
:on-click add-export} i/add-refactor]]]
(cond (cond
(= :multiple exports) (= :multiple exports)
[:div {:class (stl/css :multiple-exports)} [:div {:class (stl/css :multiple-exports)}
[:div {:class (stl/css :label)} (tr "settings.multiple")] [:div {:class (stl/css :label)} (tr "settings.multiple")]
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click ()} :on-click ()}
i/remove-refactor]]] i/remove-refactor]]]
(seq @exports) (seq @exports)
[:div {:class (stl/css :element-set-content)} [:div {:class (stl/css :element-set-content)}
(for [[index export] (d/enumerate @exports)] (for [[index export] (d/enumerate @exports)]
[:div {:class (stl/css :element-group) [:div {:class (stl/css :element-group)
:key index} :key index}
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:div {:class (stl/css :format-select)} [: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 [:& select
{:default-value (d/name (:type export)) {:default-value (str (:scale export))
:options format-options :options size-options
:dropdown-class (stl/css :dropdown-upwards) :dropdown-class (stl/css :dropdown-upwards)
:on-change (partial on-type-change index)}]] :on-change (partial on-scale-change index)}]])
(when (scale-enabled? export) [:label {:class (stl/css :suffix-input)
[:div {:class (stl/css :size-select)} :for "suffix-export-input"}
[:& select [:input {:class (stl/css :type-input)
{:default-value (str (:scale export)) :id "suffix-export-input"
:options size-options :type "text"
:dropdown-class (stl/css :dropdown-upwards) :value (:suffix export)
:on-change (partial on-scale-change index)}]]) :placeholder (tr "workspace.options.export.suffix")
[:label {:class (stl/css :suffix-input) :data-value index
:for "suffix-export-input"} :on-change on-suffix-change
[:input {:class (stl/css :type-input) :on-key-down manage-key-down}]]]
: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) [:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)} :on-click (partial delete-export index)}
i/remove-refactor]]) i/remove-refactor]])])
]) (when (or (= :multiple exports) (seq @exports))
(when (or (= :multiple exports) (seq @exports)) [:button
[:button {:on-click (when-not in-progress? on-download)
{:on-click (when-not in-progress? on-download) :class (stl/css-case
:class (stl/css-case :export-btn true
:export-btn true :btn-disabled in-progress?)
:btn-disabled in-progress?) :disabled in-progress?}
:disabled in-progress?} (if in-progress?
(if in-progress? (tr "workspace.options.exporting-object")
(tr "workspace.options.exporting-object") (tr "workspace.options.export-object" (c (count shapes))))])]))
(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))))]])])))

158
frontend/src/app/main/ui/viewer/inspect/exports.scss
View file

@ -9,83 +9,85 @@
.element-set { .element-set {
padding-bottom: $s-16; padding-bottom: $s-16;
margin: 0; margin: 0;
.element-title { }
margin: 0;
.title-spacing-export-viewer { .element-title {
@extend .attr-title; margin: 0;
margin: 0; }
}
.add-export { .title-spacing-export-viewer {
@extend .button-tertiary; @extend .attr-title;
height: $s-32; margin: 0;
width: $s-28; }
svg {
@extend .button-icon; .add-export {
} @extend .button-tertiary;
} height: $s-32;
} width: $s-28;
.element-set-content { svg {
@include flexColumn; @extend .button-icon;
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-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;
}

144
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -19,7 +19,6 @@
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.viewer.shapes :as shapes] [app.main.ui.viewer.shapes :as shapes]
@ -193,8 +192,7 @@
(mf/defc flows-menu (mf/defc flows-menu
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [page index]}] [{:keys [page index]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [flows (dm/get-in page [:options :flows])
flows (dm/get-in page [:options :flows])
frames (:frames page) frames (:frames page)
frame (get frames index) frame (get frames index)
current-flow* (mf/use-state current-flow* (mf/use-state
@ -217,47 +215,28 @@
(st/emit! (dv/go-to-frame (:starting-frame flow))))))] (st/emit! (dv/go-to-frame (:starting-frame flow))))))]
(when (seq flows) (when (seq flows)
(if new-css-system [:div {:on-click toggle-dropdown
[:div {:on-click toggle-dropdown :class (stl/css :view-options)}
:class (stl/css :view-options)} [:span {:class (stl/css :icon)} i/play-refactor]
[:span {:class (stl/css :icon)} i/play-refactor] [:span {:class (stl/css :dropdown-title)} (:name current-flow)]
[:span {:class (stl/css :dropdown-title)} (:name current-flow)] [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] [:& dropdown {:show show-dropdown?
[:& dropdown {:show show-dropdown? :on-close hide-dropdown}
:on-close hide-dropdown} [:ul {:class (stl/css :dropdown)}
[:ul {:class (stl/css :dropdown)} (for [[index flow] (d/enumerate flows)]
(for [[index flow] (d/enumerate flows)] [:li {:key (dm/str "flow-" (:id flow) "-" index)
[:li {:key (dm/str "flow-" (:id flow) "-" index) :class (stl/css-case :dropdown-element true
:class (stl/css-case :dropdown-element true :selected (= (:id flow) (:id current-flow)))
:selected (= (:id flow) (:id current-flow))) ;; This is not a best practise, is not very performant Do not reproduce
;; This is not a best practise, is not very performant Do not reproduce :data-value (pr-str flow)
:data-value (pr-str flow) :on-click select-flow}
:on-click select-flow} [:span {:class (stl/css :label)} (:name flow)]
[:span {:class (stl/css :label)} (:name flow)] (when (= (:id flow) (:id current-flow))
(when (= (:id flow) (:id current-flow)) [:span {:class (stl/css :icon)} i/tick-refactor])])]]])))
[: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)]])]]]))))
(mf/defc interactions-menu (mf/defc interactions-menu
[{:keys [interactions-mode]}] [{:keys [interactions-mode]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [show-dropdown? (mf/use-state false)
show-dropdown? (mf/use-state false)
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
@ -269,67 +248,40 @@
(keyword))] (keyword))]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dv/set-interactions-mode mode)))))] (st/emit! (dv/set-interactions-mode mode)))))]
(if new-css-system [:div {:on-click toggle-dropdown
[:div {:on-click toggle-dropdown :class (stl/css :view-options)}
:class (stl/css :view-options)} [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")] [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] [:& dropdown {:show @show-dropdown?
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
:on-close hide-dropdown} [:ul {:class (stl/css :dropdown)}
[:ul {:class (stl/css :dropdown)} [:li {:class (stl/css-case :dropdown-element true
[:li {:class (stl/css-case :dropdown-element true :selected (= interactions-mode :hide))
:selected (= interactions-mode :hide)) :on-click select-mode
:on-click select-mode :data-mode :hide}
:data-mode :hide}
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")] [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
(when (= interactions-mode :hide) (when (= interactions-mode :hide)
[:span {:class (stl/css :icon)} i/tick-refactor])] [:span {:class (stl/css :icon)} i/tick-refactor])]
[:li {:class (stl/css-case :dropdown-element true [:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show)) :selected (= interactions-mode :show))
:on-click select-mode :on-click select-mode
:data-mode :show} :data-mode :show}
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")] [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
(when (= interactions-mode :show) (when (= interactions-mode :show)
[:span {:class (stl/css :icon)} i/tick-refactor])] [:span {:class (stl/css :icon)} i/tick-refactor])]
[:li {:class (stl/css-case :dropdown-element true [:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show-on-click)) :selected (= interactions-mode :show-on-click))
:on-click select-mode :on-click select-mode
:data-mode :show-on-click} :data-mode :show-on-click}
[:span {:class (stl/css :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) (when (= interactions-mode :show-on-click)
[:span {:class (stl/css :icon)} i/tick-refactor])]]]] [: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")]]]]])))
(defn animate-go-to-frame (defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size] [animation current-viewport orig-viewport current-size orig-size wrapper-size]

2
frontend/src/app/main/ui/viewer/share_link.scss
View file

@ -46,10 +46,12 @@
.hint-wrapper { .hint-wrapper {
@include flexRow; @include flexRow;
} }
.hint { .hint {
flex-grow: 1; flex-grow: 1;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.custon-input-wrapper { .custon-input-wrapper {
@include flexRow; @include flexRow;
border-radius: $br-8; border-radius: $br-8;

178
frontend/src/app/main/ui/viewer/thumbnails.cljs
View file

@ -14,9 +14,7 @@
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.render :as render] [app.main.render :as render]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.timers :as ts] [app.util.timers :as ts]
@ -24,8 +22,7 @@
(mf/defc thumbnails-content (mf/defc thumbnails-content
[{:keys [children expanded? total] :as props}] [{:keys [children expanded? total] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [container (mf/use-ref)
container (mf/use-ref)
width (mf/use-var (.. js/document -documentElement -clientWidth)) width (mf/use-var (.. js/document -documentElement -clientWidth))
element-width (mf/use-var 152) element-width (mf/use-var 152)
@ -59,96 +56,58 @@
(reset! width (obj/get dom "clientWidth"))))] (reset! width (obj/get dom "clientWidth"))))]
(mf/use-effect on-mount) (mf/use-effect on-mount)
(if new-css-system (if expanded?
(if expanded? [:div {:class (stl/css :thumbnails-content)}
[:div {:class (stl/css :thumbnails-content)} [:div {:class (stl/css :thumbnails-list-expanded)} children]]
[:div {:class (stl/css :thumbnails-list-expanded)} children]]
[:div {:class (stl/css :thumbnails-content)} [:div {:class (stl/css :thumbnails-content)}
[:button {:class (stl/css :left-scroll-handler) [:button {:class (stl/css :left-scroll-handler)
:on-click on-left-arrow-click} i/arrow-refactor] :on-click on-left-arrow-click} i/arrow-refactor]
[:button {:class (stl/css :right-scroll-handler) [:button {:class (stl/css :right-scroll-handler)
:on-click on-right-arrow-click} i/arrow-refactor] :on-click on-right-arrow-click} i/arrow-refactor]
[:div {:class (stl/css :thumbnails-list) [:div {:class (stl/css :thumbnails-list)
:ref container :ref container
:on-wheel on-scroll} :on-wheel on-scroll}
[:div {:class (stl/css :thumbnails-list-inside) [:div {:class (stl/css :thumbnails-list-inside)
:style {:right (str (* @offset 152) "px")}} :style {:right (str (* @offset 152) "px")}}
children]]]) 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]]]))))
(mf/defc thumbnails-summary (mf/defc thumbnails-summary
[{:keys [on-toggle-expand on-close total] :as props}] [{:keys [on-toggle-expand on-close total] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] [:div {:class (stl/css :thumbnails-summary)}
(if new-css-system [:span {:class (stl/css :counter)}
[:div {:class (stl/css :thumbnails-summary)} (tr "labels.num-of-frames" (i18n/c total))]
[:span {:class (stl/css :counter)} [:span {:class (stl/css :actions)}
(tr "labels.num-of-frames" (i18n/c total))] [:button {:class (stl/css :expand-btn)
[:span {:class (stl/css :actions)} :on-click on-toggle-expand} i/arrow-refactor]
[:button {:class (stl/css :expand-btn) [:button {:class (stl/css :close-btn)
:on-click on-toggle-expand} i/arrow-refactor] :on-click on-close} i/close-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]]])))
(mf/defc thumbnail-item (mf/defc thumbnail-item
{::mf/wrap [mf/memo {::mf/wrap [mf/memo
#(mf/deferred % ts/idle-then-raf)]} #(mf/deferred % ts/idle-then-raf)]}
[{:keys [selected? frame on-click index objects page-id thumbnail-data]}] [{:keys [selected? frame on-click index objects page-id thumbnail-data]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [children-ids (cfh/get-children-ids objects (:id frame))
children-ids (cfh/get-children-ids objects (:id frame))
children-bounds (gsh/shapes->rect (concat [frame] (->> children-ids (keep (d/getf objects)))))] children-bounds (gsh/shapes->rect (concat [frame] (->> children-ids (keep (d/getf objects)))))]
(if new-css-system [:button {:class (stl/css :thumbnail-item)
[:button {:class (stl/css :thumbnail-item) :on-click #(on-click % index)}
:on-click #(on-click % index)} [:div {:class (stl/css-case :thumbnail-preview true
[:div {:class (stl/css-case :thumbnail-preview true :selected selected?)}
:selected selected?)} [:& render/frame-svg {:frame (-> frame
[:& render/frame-svg {:frame (-> frame (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
(assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))) (assoc :children-bounds children-bounds))
(assoc :children-bounds children-bounds)) :objects objects
:objects objects :use-thumbnails true}]]
:use-thumbnails true}]] [:div {:class (stl/css :thumbnail-info)
[:div {:class (stl/css :thumbnail-info) :title (:name frame)}
:title (:name frame)} (: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)]]])))
(mf/defc thumbnails-panel (mf/defc thumbnails-panel
[{:keys [frames page index show? thumbnail-data] :as props}] [{:keys [frames page index show? thumbnail-data] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [expanded? (mf/use-state false)
expanded? (mf/use-state false)
container (mf/use-ref) container (mf/use-ref)
objects (:objects page) objects (:objects page)
@ -163,48 +122,23 @@
(st/emit! (dv/go-to-frame-by-index index)) (st/emit! (dv/go-to-frame-by-index index))
(when @expanded? (when @expanded?
(on-close))))] (on-close))))]
(if new-css-system [:section {:class (stl/css-case :viewer-thumbnails true
[:section :expanded @expanded?)
{:class (stl/css-case :viewer-thumbnails true ;; This is better as an inline-style so it won't make a reflow of every frame inside
:expanded @expanded?) :style {:display (when (not show?) "none")}
;; This is better as an inline-style so it won't make a reflow of every frame inside :ref container}
:style {:display (when (not show?) "none")}
:ref container}
[:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
:on-close on-close :on-close on-close
:total (count frames)}] :total (count frames)}]
[:& thumbnails-content {:expanded? @expanded? [:& thumbnails-content {:expanded? @expanded?
:total (count frames)} :total (count frames)}
(for [[i frame] (d/enumerate frames)] (for [[i frame] (d/enumerate frames)]
[:& thumbnail-item {:index i [:& thumbnail-item {:index i
:key (dm/str (:id frame) "-" i) :key (dm/str (:id frame) "-" i)
:frame frame :frame frame
:page-id (:id page) :page-id (:id page)
:objects objects :objects objects
:on-click on-item-click :on-click on-item-click
:selected? (= i index) :selected? (= i index)
:thumbnail-data thumbnail-data}])]] :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}])]])))