mirror of
https://github.com/penpot/penpot.git
synced 2025-04-11 06:21:30 -05:00
♻️ Remove new-css-system from right sidebar elements
This commit is contained in:
Eva
parent
b3684990f1
commit
7a3525febc
23 changed files with 800 additions and 1081 deletions
|
|
@ -305,6 +305,11 @@
|
|||
--resize-area-background-color: var(--color-background-primary);
|
||||
--resize-area-border-color: var(--color-background-quaternary);
|
||||
|
||||
--flow-tag-background-color: var(--color-background-tertiary);
|
||||
--flow-tag-foreground-color: var(--color-foreground-secondary);
|
||||
--flow-tag-background-color-hover: var(--color-accent-primary);
|
||||
--flow-tag-foreground-color-hover: var(--color-background-primary);
|
||||
|
||||
// VIEWER
|
||||
--viewer-background-color: var(--color-background-secondary);
|
||||
--viewer-paginator-background-color: var(--color-background-tertiary);
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@
|
|||
@import "main/partials/loader";
|
||||
@import "main/partials/project-bar";
|
||||
@import "main/partials/sidebar";
|
||||
@import "main/partials/sidebar-document-history";
|
||||
@import "main/partials/tab-container";
|
||||
@import "main/partials/tool-bar";
|
||||
@import "main/partials/user-settings";
|
||||
|
|
|
|||
|
|
@ -4,136 +4,136 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
.history-debug-overlay {
|
||||
background: $color-gray-50;
|
||||
bottom: 0;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
z-index: 1000;
|
||||
}
|
||||
// .history-debug-overlay {
|
||||
// background: $color-gray-50;
|
||||
// bottom: 0;
|
||||
// max-height: 500px;
|
||||
// overflow-y: auto;
|
||||
// position: absolute;
|
||||
// width: 500px;
|
||||
// z-index: 1000;
|
||||
// }
|
||||
|
||||
.history-toolbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
// .history-toolbox {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
.history-toolbox-title {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
// .history-toolbox-title {
|
||||
// color: $color-gray-10;
|
||||
// font-size: $fs14;
|
||||
// padding: 0.5rem;
|
||||
// }
|
||||
|
||||
.history-entry-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
// .history-entry-empty {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// padding: 1rem;
|
||||
|
||||
.history-entry-empty-icon {
|
||||
margin-bottom: 1rem;
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
}
|
||||
// .history-entry-empty-icon {
|
||||
// margin-bottom: 1rem;
|
||||
// svg {
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// fill: $color-gray-40;
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entry-empty-msg {
|
||||
color: $color-gray-30;
|
||||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
// .history-entry-empty-msg {
|
||||
// color: $color-gray-30;
|
||||
// font-size: $fs12;
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entries {
|
||||
font-size: $fs12;
|
||||
color: $color-gray-20;
|
||||
fill: $color-gray-20;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
// .history-entries {
|
||||
// font-size: $fs12;
|
||||
// color: $color-gray-20;
|
||||
// fill: $color-gray-20;
|
||||
// height: 100%;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto;
|
||||
// }
|
||||
|
||||
.history-entry {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br4;
|
||||
margin: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
// .history-entry {
|
||||
// border: 1px solid $color-gray-60;
|
||||
// border-radius: $br4;
|
||||
// margin: 0.5rem;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 0.5rem;
|
||||
// cursor: pointer;
|
||||
|
||||
transition: border 0.2s;
|
||||
// transition: border 0.2s;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
// &.disabled {
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
|
||||
&.current {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
// &.current {
|
||||
// background-color: $color-gray-60;
|
||||
// }
|
||||
|
||||
&.hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
// &.hover {
|
||||
// border-color: $color-primary;
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entry-summary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
// .history-entry-summary {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
// * {
|
||||
// display: flex;
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entry-summary-icon {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
// .history-entry-summary-icon {
|
||||
// svg {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entry-summary-text {
|
||||
flex: 1;
|
||||
margin: 0 0.5rem;
|
||||
margin-top: 2px;
|
||||
}
|
||||
// .history-entry-summary-text {
|
||||
// flex: 1;
|
||||
// margin: 0 0.5rem;
|
||||
// margin-top: 2px;
|
||||
// }
|
||||
|
||||
.history-entry-summary-button {
|
||||
opacity: 0;
|
||||
transition: transform 0.2s;
|
||||
// .history-entry-summary-button {
|
||||
// opacity: 0;
|
||||
// transition: transform 0.2s;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
// svg {
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// }
|
||||
|
||||
.show-detail &,
|
||||
.hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
// .show-detail &,
|
||||
// .hover & {
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
.show-detail & {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
// .show-detail & {
|
||||
// transform: rotate(90deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
.history-entry-detail {
|
||||
display: none;
|
||||
// .history-entry-detail {
|
||||
// display: none;
|
||||
|
||||
.show-detail & {
|
||||
display: block;
|
||||
padding: 1rem 0 0.5rem 0;
|
||||
}
|
||||
// .show-detail & {
|
||||
// display: block;
|
||||
// padding: 1rem 0 0.5rem 0;
|
||||
// }
|
||||
|
||||
.history-entry-details-list {
|
||||
margin: 0;
|
||||
// .history-entry-details-list {
|
||||
// margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// li {
|
||||
// margin-bottom: 0.5rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.viewer.inspect.annotation :refer [annotation]]
|
||||
[app.main.ui.viewer.inspect.attributes.blur :refer [blur-panel]]
|
||||
|
|
@ -36,65 +35,35 @@
|
|||
|
||||
(mf/defc attributes
|
||||
[{:keys [page-id file-id shapes frame from libraries share-id objects]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (hooks/use-equal-memo shapes)
|
||||
(let [shapes (hooks/use-equal-memo shapes)
|
||||
type (if (= (count shapes) 1) (-> shapes first :type) :multiple)
|
||||
options (type->options type)
|
||||
content (when (= (count shapes) 1)
|
||||
(ctkl/get-component-annotation (first shapes) libraries))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-options)}
|
||||
(for [[idx option] (map-indexed vector options)]
|
||||
[:> (case option
|
||||
:geometry geometry-panel
|
||||
:layout layout-panel
|
||||
:layout-element layout-element-panel
|
||||
:fill fill-panel
|
||||
:stroke stroke-panel
|
||||
:shadow shadow-panel
|
||||
:blur blur-panel
|
||||
:image image-panel
|
||||
:text text-panel
|
||||
:svg svg-panel)
|
||||
{:key idx
|
||||
:shapes shapes
|
||||
:objects objects
|
||||
:frame frame
|
||||
:from from}])
|
||||
(when content
|
||||
[:& annotation {:content content}])
|
||||
[:& exports
|
||||
{:shapes shapes
|
||||
:type type
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:share-id share-id}]]
|
||||
|
||||
|
||||
[:div.element-options
|
||||
(for [[idx option] (map-indexed vector options)]
|
||||
[:> (case option
|
||||
:geometry geometry-panel
|
||||
:layout layout-panel
|
||||
:layout-element layout-element-panel
|
||||
:fill fill-panel
|
||||
:stroke stroke-panel
|
||||
:shadow shadow-panel
|
||||
:blur blur-panel
|
||||
:image image-panel
|
||||
:text text-panel
|
||||
:svg svg-panel)
|
||||
{:key idx
|
||||
:shapes shapes
|
||||
:objects objects
|
||||
:frame frame
|
||||
:from from}])
|
||||
(when content
|
||||
[:& annotation {:content content}])
|
||||
[:& exports
|
||||
{:shapes shapes
|
||||
:type type
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:share-id share-id}]])))
|
||||
[:div {:class (stl/css :element-options)}
|
||||
(for [[idx option] (map-indexed vector options)]
|
||||
[:> (case option
|
||||
:geometry geometry-panel
|
||||
:layout layout-panel
|
||||
:layout-element layout-element-panel
|
||||
:fill fill-panel
|
||||
:stroke stroke-panel
|
||||
:shadow shadow-panel
|
||||
:blur blur-panel
|
||||
:image image-panel
|
||||
:text text-panel
|
||||
:svg svg-panel)
|
||||
{:key idx
|
||||
:shapes shapes
|
||||
:objects objects
|
||||
:frame frame
|
||||
:from from}])
|
||||
(when content
|
||||
[:& annotation {:content content}])
|
||||
[:& exports
|
||||
{:shapes shapes
|
||||
:type type
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:share-id share-id}]]))
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
[app.main.ui.components.code-block :refer [code-block]]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||
[app.main.ui.icons :as i]
|
||||
|
|
@ -100,8 +99,7 @@
|
|||
|
||||
(mf/defc code
|
||||
[{:keys [shapes frame on-expand from]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
style-type* (mf/use-state "css")
|
||||
(let [style-type* (mf/use-state "css")
|
||||
markup-type* (mf/use-state "html")
|
||||
fontfaces-css* (mf/use-state nil)
|
||||
images-data* (mf/use-state nil)
|
||||
|
|
@ -232,135 +230,80 @@
|
|||
(fn [result]
|
||||
(reset! images-data* result)))))
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-options)}
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:button {:class (stl/css :download-button)
|
||||
:on-click handle-copy-all-code}
|
||||
"Copy all code"]]
|
||||
[:div {:class (stl/css :element-options)}
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:button {:class (stl/css :download-button)
|
||||
:on-click handle-copy-all-code}
|
||||
"Copy all code"]]
|
||||
|
||||
#_[:div.attributes-block
|
||||
[:button.download-button {:on-click handle-open-review}
|
||||
"Preview"]]
|
||||
#_[:div.attributes-block
|
||||
[:button.download-button {:on-click handle-open-review}
|
||||
"Preview"]]
|
||||
|
||||
[:div {:class (stl/css :code-block)}
|
||||
[:div {:class (stl/css :code-row-lang)}
|
||||
[:button {:class (stl/css :toggle-btn)
|
||||
:data-type "css"
|
||||
:on-click handle-collapse}
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed-css?)}
|
||||
i/arrow-refactor]]
|
||||
[:div {:class (stl/css :code-block)}
|
||||
[:div {:class (stl/css :code-row-lang)}
|
||||
[:button {:class (stl/css :toggle-btn)
|
||||
:data-type "css"
|
||||
:on-click handle-collapse}
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed-css?)}
|
||||
i/arrow-refactor]]
|
||||
|
||||
[:& select {:default-value style-type
|
||||
:class (stl/css :code-lang-select)
|
||||
:options [{:label "CSS" :value "css"}]}]
|
||||
[:& select {:default-value style-type
|
||||
:class (stl/css :code-lang-select)
|
||||
:on-change set-style
|
||||
:options [{:label "CSS" :value "css"}]}]
|
||||
|
||||
[:div {:class (stl/css :action-btns)}
|
||||
[:button {:class (stl/css :expand-button)
|
||||
:on-click on-expand}
|
||||
i/code-refactor]
|
||||
[:div {:class (stl/css :action-btns)}
|
||||
[:button {:class (stl/css :expand-button)
|
||||
:on-click on-expand}
|
||||
i/code-refactor]
|
||||
|
||||
[:& copy-button {:data #(replace-map style-code images-data)
|
||||
:on-copied on-style-copied}]]]
|
||||
[:& copy-button {:data #(replace-map style-code images-data)
|
||||
:on-copied on-style-copied}]]]
|
||||
|
||||
(when-not collapsed-css?
|
||||
[:div {:class (stl/css :code-row-display)
|
||||
:style #js {"--code-height" (str (or style-size 400) "px")}}
|
||||
[:& code-block {:type style-type
|
||||
:code style-code}]])
|
||||
|
||||
[:div {:class (stl/css :resize-area)
|
||||
:on-pointer-down on-style-pointer-down
|
||||
:on-lost-pointer-capture on-style-lost-pointer-capture
|
||||
:on-pointer-move on-style-pointer-move}]]
|
||||
|
||||
[:div {:class (stl/css :code-block)}
|
||||
[:div {:class (stl/css :code-row-lang)}
|
||||
[:button {:class (stl/css :toggle-btn)
|
||||
:data-type "markup"
|
||||
:on-click handle-collapse}
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed-markup?)}
|
||||
i/arrow-refactor]]
|
||||
[:& select {:default-value markup-type
|
||||
:class (stl/css :code-lang-select)
|
||||
:options [{:label "HTML" :value "html"}
|
||||
{:label "SVG" :value "svg"}]
|
||||
:on-change set-markup}]
|
||||
|
||||
[:div {:class (stl/css :action-btns)}
|
||||
[:button {:class (stl/css :expand-button)
|
||||
:on-click on-expand}
|
||||
i/code-refactor]
|
||||
|
||||
[:& copy-button {:data #(replace-map markup-code images-data)
|
||||
:on-copied on-markup-copied}]]]
|
||||
|
||||
(when-not collapsed-markup?
|
||||
[:div {:class (stl/css :code-row-display)
|
||||
:style #js {"--code-height" (str (or markup-size 400) "px")}}
|
||||
[:& code-block {:type markup-type
|
||||
:code markup-code}]])
|
||||
|
||||
[:div {:class (stl/css :resize-area)
|
||||
:on-pointer-down on-markup-pointer-down
|
||||
:on-lost-pointer-capture on-markup-lost-pointer-capture
|
||||
:on-pointer-move on-markup-pointer-move}]]]
|
||||
|
||||
|
||||
|
||||
[:div.element-options
|
||||
[:div.attributes-block
|
||||
[:button.download-button {:on-click handle-copy-all-code}
|
||||
"Copy all code"]]
|
||||
|
||||
#_[:div.attributes-block
|
||||
[:button.download-button {:on-click handle-open-review}
|
||||
"Preview"]]
|
||||
|
||||
[:div.code-block
|
||||
[:div.code-row-lang
|
||||
[:& select {:default-value style-type
|
||||
:class "custom-select"
|
||||
:options [{:label "CSS" :value "css"}]
|
||||
:on-change set-style}]
|
||||
[:button.expand-button
|
||||
{:on-click on-expand}
|
||||
i/full-screen]
|
||||
|
||||
[:& copy-button {:data #(replace-map style-code images-data)
|
||||
:on-copied on-style-copied}]]
|
||||
|
||||
[:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}}
|
||||
(when-not collapsed-css?
|
||||
[:div {:class (stl/css :code-row-display)
|
||||
:style #js {"--code-height" (str (or style-size 400) "px")}}
|
||||
[:& code-block {:type style-type
|
||||
:code style-code}]]
|
||||
:code style-code}]])
|
||||
|
||||
[:div.resize-area {:on-pointer-down on-style-pointer-down
|
||||
:on-lost-pointer-capture on-style-lost-pointer-capture
|
||||
:on-pointer-move on-style-pointer-move}]]
|
||||
[:div {:class (stl/css :resize-area)
|
||||
:on-pointer-down on-style-pointer-down
|
||||
:on-lost-pointer-capture on-style-lost-pointer-capture
|
||||
:on-pointer-move on-style-pointer-move}]]
|
||||
|
||||
[:div.code-block
|
||||
[:div.code-row-lang
|
||||
[:& select {:default-value markup-type
|
||||
:class "input-option"
|
||||
:options [{:label "HTML" :value "html"}
|
||||
{:label "SVG" :value "svg"}]
|
||||
:on-change set-markup}]
|
||||
[:div {:class (stl/css :code-block)}
|
||||
[:div {:class (stl/css :code-row-lang)}
|
||||
[:button {:class (stl/css :toggle-btn)
|
||||
:data-type "markup"
|
||||
:on-click handle-collapse}
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed-markup?)}
|
||||
i/arrow-refactor]]
|
||||
[:& select {:default-value markup-type
|
||||
:class (stl/css :code-lang-select)
|
||||
:options [{:label "HTML" :value "html"}
|
||||
{:label "SVG" :value "svg"}]
|
||||
:on-change set-markup}]
|
||||
|
||||
[:button.expand-button
|
||||
{:on-click on-expand}
|
||||
i/full-screen]
|
||||
[:div {:class (stl/css :action-btns)}
|
||||
[:button {:class (stl/css :expand-button)
|
||||
:on-click on-expand}
|
||||
i/code-refactor]
|
||||
|
||||
[:& copy-button {:data #(replace-map markup-code images-data)
|
||||
:on-copied on-markup-copied}]]
|
||||
[:& copy-button {:data #(replace-map markup-code images-data)
|
||||
:on-copied on-markup-copied}]]]
|
||||
|
||||
[:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}}
|
||||
(when-not collapsed-markup?
|
||||
[:div {:class (stl/css :code-row-display)
|
||||
:style #js {"--code-height" (str (or markup-size 400) "px")}}
|
||||
[:& code-block {:type markup-type
|
||||
:code markup-code}]]
|
||||
:code markup-code}]])
|
||||
|
||||
[:div.resize-area {:on-pointer-down on-markup-pointer-down
|
||||
:on-lost-pointer-capture on-markup-lost-pointer-capture
|
||||
:on-pointer-move on-markup-pointer-move}]]])))
|
||||
[:div {:class (stl/css :resize-area)
|
||||
:on-pointer-down on-markup-pointer-down
|
||||
:on-lost-pointer-capture on-markup-lost-pointer-capture
|
||||
:on-pointer-move on-markup-pointer-move}]]]))
|
||||
|
|
|
|||
|
|
@ -12,80 +12,85 @@
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding-bottom: $s-16;
|
||||
}
|
||||
|
||||
.attributes-block {
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin: $s-8 0;
|
||||
}
|
||||
}
|
||||
.code-block {
|
||||
@include codeTypography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin: $s-8 0;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
@include codeTypography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 $s-4 $s-8 0;
|
||||
|
||||
pre {
|
||||
border-radius: $br-8;
|
||||
padding: $s-16;
|
||||
max-height: var(--code-height);
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 $s-4 $s-8 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: $br-8;
|
||||
padding: $s-16;
|
||||
max-height: var(--code-height);
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
// Overrides background setted in the theme
|
||||
:global(.hljs) {
|
||||
background: $db-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Overrides background setted in the theme
|
||||
:global(.hljs) {
|
||||
background: $db-tertiary;
|
||||
}
|
||||
}
|
||||
.code-row-lang {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: $s-4;
|
||||
width: 100%;
|
||||
}
|
||||
.code-lang {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.action-btns {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
flex: 1;
|
||||
justify-content: end;
|
||||
.expand-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.code-lang-select {
|
||||
@include tabTitleTipography;
|
||||
width: $s-72;
|
||||
border: $s-1 solid transparent;
|
||||
background-color: transparent;
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
.code-row-display {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: $s-8;
|
||||
.code-row-lang {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: $s-4;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
flex: 1;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.code-lang-select {
|
||||
@include tabTitleTipography;
|
||||
width: $s-72;
|
||||
border: $s-1 solid transparent;
|
||||
background-color: transparent;
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
|
||||
.code-row-display {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: $s-8;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
@include buttonStyle;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,8 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.components.shape-icon-refactor :as sir]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.components.tabs-container :refer [tabs-container tabs-element]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.viewer.inspect.attributes :refer [attributes]]
|
||||
[app.main.ui.viewer.inspect.code :refer [code]]
|
||||
|
|
@ -44,8 +41,7 @@
|
|||
(mf/defc right-sidebar
|
||||
[{:keys [frame page objects file selected shapes page-id file-id share-id from on-change-section on-expand]
|
||||
:or {from :inspect}}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
section (mf/use-state :info #_:code)
|
||||
(let [section (mf/use-state :info #_:code)
|
||||
objects (or objects (:objects page))
|
||||
shapes (or shapes
|
||||
(resolve-shapes objects selected))
|
||||
|
|
@ -86,113 +82,60 @@
|
|||
(when-not (seq shapes)
|
||||
(handle-change-tab :info))))
|
||||
|
||||
(if new-css-system
|
||||
[:aside {:class (stl/css-case :settings-bar-right true
|
||||
:viewer-code (= from :inspect))}
|
||||
(if (seq shapes)
|
||||
[:div {:class (stl/css :tool-windows)}
|
||||
[:div {:class (stl/css :shape-row)}
|
||||
(if (> (count shapes) 1)
|
||||
[:*
|
||||
[:span {:class (stl/css :layers-icon)} i/layers-refactor]
|
||||
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
|
||||
[:*
|
||||
[:span {:class (stl/css :shape-icon)}
|
||||
[:& sir/element-icon-refactor {:shape first-shape :main-instance? main-instance?}]]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.tabs.code.selected.circle
|
||||
;; inspect.tabs.code.selected.component
|
||||
;; inspect.tabs.code.selected.curve
|
||||
;; inspect.tabs.code.selected.frame
|
||||
;; inspect.tabs.code.selected.group
|
||||
;; inspect.tabs.code.selected.image
|
||||
;; inspect.tabs.code.selected.mask
|
||||
;; inspect.tabs.code.selected.path
|
||||
;; inspect.tabs.code.selected.rect
|
||||
;; inspect.tabs.code.selected.svg-raw
|
||||
;; inspect.tabs.code.selected.text
|
||||
[:span {:class (stl/css :layer-title)} (:name first-shape)]])]
|
||||
[:div {:class (stl/css :inspect-content)}
|
||||
[:& tab-container {:on-change-tab handle-change-tab
|
||||
:selected @section}
|
||||
[:& tab-element {:id :info :title (tr "inspect.tabs.info")}
|
||||
[:& attributes {:page-id page-id
|
||||
:objects objects
|
||||
:file-id file-id
|
||||
:frame frame
|
||||
:shapes shapes
|
||||
:from from
|
||||
:libraries libraries
|
||||
:share-id share-id}]]
|
||||
[:aside {:class (stl/css-case :settings-bar-right true
|
||||
:viewer-code (= from :inspect))}
|
||||
(if (seq shapes)
|
||||
[:div {:class (stl/css :tool-windows)}
|
||||
[:div {:class (stl/css :shape-row)}
|
||||
(if (> (count shapes) 1)
|
||||
[:*
|
||||
[:span {:class (stl/css :layers-icon)} i/layers-refactor]
|
||||
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
|
||||
[:*
|
||||
[:span {:class (stl/css :shape-icon)}
|
||||
[:& sir/element-icon-refactor {:shape first-shape :main-instance? main-instance?}]]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.tabs.code.selected.circle
|
||||
;; inspect.tabs.code.selected.component
|
||||
;; inspect.tabs.code.selected.curve
|
||||
;; inspect.tabs.code.selected.frame
|
||||
;; inspect.tabs.code.selected.group
|
||||
;; inspect.tabs.code.selected.image
|
||||
;; inspect.tabs.code.selected.mask
|
||||
;; inspect.tabs.code.selected.path
|
||||
;; inspect.tabs.code.selected.rect
|
||||
;; inspect.tabs.code.selected.svg-raw
|
||||
;; inspect.tabs.code.selected.text
|
||||
[:span {:class (stl/css :layer-title)} (:name first-shape)]])]
|
||||
[:div {:class (stl/css :inspect-content)}
|
||||
[:& tab-container {:on-change-tab handle-change-tab
|
||||
:selected @section}
|
||||
[:& tab-element {:id :info :title (tr "inspect.tabs.info")}
|
||||
[:& attributes {:page-id page-id
|
||||
:objects objects
|
||||
:file-id file-id
|
||||
:frame frame
|
||||
:shapes shapes
|
||||
:from from
|
||||
:libraries libraries
|
||||
:share-id share-id}]]
|
||||
|
||||
[:& tab-element {:id :code :title (tr "inspect.tabs.code")}
|
||||
[:& code {:frame frame
|
||||
:shapes shapes
|
||||
:on-expand handle-expand
|
||||
:from from}]]]]]
|
||||
[:div {:class (stl/css :empty)}
|
||||
[:div {:class (stl/css :code-info)}
|
||||
[:span {:class (stl/css :placeholder-icon)}
|
||||
i/code-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "inspect.empty.select")]]
|
||||
[:div {:class (stl/css :help-info)}
|
||||
[:span {:class (stl/css :placeholder-icon)}
|
||||
i/help-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "inspect.empty.help")]]
|
||||
[:button {:class (stl/css :more-info-btn)
|
||||
:on-click navigate-to-help}
|
||||
(tr "inspect.empty.more-info")]])]
|
||||
|
||||
|
||||
[:aside.settings-bar.settings-bar-right
|
||||
[:div.settings-bar-inside
|
||||
(if (seq shapes)
|
||||
[:div.tool-window
|
||||
[:div.tool-window-bar.big
|
||||
(if (> (count shapes) 1)
|
||||
[:*
|
||||
[:span.tool-window-bar-icon i/layers]
|
||||
[:span.tool-window-bar-title (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
|
||||
[:*
|
||||
[:span.tool-window-bar-icon
|
||||
[:& si/element-icon {:shape first-shape :main-instance? main-instance?}]]
|
||||
;; Execution time translation strings:
|
||||
;; inspect.tabs.code.selected.circle
|
||||
;; inspect.tabs.code.selected.component
|
||||
;; inspect.tabs.code.selected.curve
|
||||
;; inspect.tabs.code.selected.frame
|
||||
;; inspect.tabs.code.selected.group
|
||||
;; inspect.tabs.code.selected.image
|
||||
;; inspect.tabs.code.selected.mask
|
||||
;; inspect.tabs.code.selected.path
|
||||
;; inspect.tabs.code.selected.rect
|
||||
;; inspect.tabs.code.selected.svg-raw
|
||||
;; inspect.tabs.code.selected.text
|
||||
[:span.tool-window-bar-title (:name first-shape)]])]
|
||||
[:div.tool-window-content.inspect
|
||||
[:& tabs-container {:on-change-tab handle-change-tab
|
||||
:selected @section}
|
||||
[:& tabs-element {:id :info :title (tr "inspect.tabs.info")}
|
||||
[:& attributes {:page-id page-id
|
||||
:objects objects
|
||||
:file-id file-id
|
||||
:frame frame
|
||||
:shapes shapes
|
||||
:from from
|
||||
:libraries libraries
|
||||
:share-id share-id}]]
|
||||
|
||||
[:& tabs-element {:id :code :title (tr "inspect.tabs.code")}
|
||||
[:& code {:frame frame
|
||||
:shapes shapes
|
||||
:on-expand handle-expand
|
||||
:from from}]]]]]
|
||||
[:div.empty
|
||||
[:span.tool-window-bar-icon i/code]
|
||||
[:div (tr "inspect.empty.select")]
|
||||
[:span.tool-window-bar-icon i/help]
|
||||
[:div (tr "inspect.empty.help")]
|
||||
[:button.btn-primary.action {:on-click navigate-to-help} (tr "inspect.empty.more-info")]])]])
|
||||
))
|
||||
[:& tab-element {:id :code :title (tr "inspect.tabs.code")}
|
||||
[:& code {:frame frame
|
||||
:shapes shapes
|
||||
:on-expand handle-expand
|
||||
:from from}]]]]]
|
||||
[:div {:class (stl/css :empty)}
|
||||
[:div {:class (stl/css :code-info)}
|
||||
[:span {:class (stl/css :placeholder-icon)}
|
||||
i/code-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "inspect.empty.select")]]
|
||||
[:div {:class (stl/css :help-info)}
|
||||
[:span {:class (stl/css :placeholder-icon)}
|
||||
i/help-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "inspect.empty.help")]]
|
||||
[:button {:class (stl/css :more-info-btn)
|
||||
:on-click navigate-to-help}
|
||||
(tr "inspect.empty.more-info")]])]))
|
||||
|
|
|
|||
|
|
@ -16,63 +16,73 @@
|
|||
grid-area: right-sidebar;
|
||||
padding-top: $s-8;
|
||||
padding-left: $s-12;
|
||||
.tool-windows {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.shape-row {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
align-items: center;
|
||||
margin-bottom: $s-16;
|
||||
.layers-icon,
|
||||
.shape-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.layer-title {
|
||||
@include titleTipography;
|
||||
color: $df-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-40;
|
||||
padding-top: $s-24;
|
||||
.code-info,
|
||||
.help-info {
|
||||
@include flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: $s-8;
|
||||
.placeholder-icon {
|
||||
@extend .empty-icon;
|
||||
}
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
text-align: center;
|
||||
width: $s-200;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
.more-info-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 $s-24;
|
||||
}
|
||||
}
|
||||
.inspect-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.viewer-code {
|
||||
height: calc(100vh - $s-48);
|
||||
}
|
||||
}
|
||||
|
||||
.tool-windows {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shape-row {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
align-items: center;
|
||||
margin-bottom: $s-16;
|
||||
}
|
||||
|
||||
.layers-icon,
|
||||
.shape-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-title {
|
||||
@include titleTipography;
|
||||
color: $df-primary;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-40;
|
||||
padding-top: $s-24;
|
||||
}
|
||||
|
||||
.code-info,
|
||||
.help-info {
|
||||
@include flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
@extend .empty-icon;
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
text-align: center;
|
||||
width: $s-200;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
.more-info-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 $s-24;
|
||||
}
|
||||
|
||||
.inspect-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,12 +90,12 @@
|
|||
{:key (dm/str "workspace-" page-id)
|
||||
:ref node-ref}
|
||||
|
||||
[:section.workspace-viewport
|
||||
[:section {:class (stl/css :workspace-viewport)}
|
||||
(when (dbg/enabled? :coordinates)
|
||||
[:& coordinates/coordinates {:colorpalette? colorpalette?}])
|
||||
|
||||
(when (dbg/enabled? :history-overlay)
|
||||
[:div.history-debug-overlay
|
||||
[:div {:class (stl/css :history-debug-overlay)}
|
||||
[:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"]
|
||||
[:& history-toolbox]])
|
||||
|
||||
|
|
|
|||
|
|
@ -40,3 +40,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
grid-area: viewport;
|
||||
}
|
||||
|
||||
.history-debug-overlay {
|
||||
bottom: 0;
|
||||
max-height: $s-500;
|
||||
width: $s-500;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
z-index: $z-index-modal;
|
||||
}
|
||||
|
||||
.workspace-viewport {
|
||||
overflow: hidden;
|
||||
transition: none;
|
||||
display: grid;
|
||||
grid-template-rows: $s-20 1fr;
|
||||
grid-template-columns: $s-20 1fr;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@
|
|||
|
||||
(mf/defc sidebar-options
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
{cmode :mode cshow :show} (mf/deref refs/comments-local)
|
||||
(let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
|
||||
update-mode
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
|
|
@ -45,53 +44,30 @@
|
|||
(let [mode (if (= :pending cshow) :all :pending)]
|
||||
(st/emit! (dcm/update-filters {:show mode})))))]
|
||||
|
||||
(if new-css-system
|
||||
[:ul {:class (stl/css :comment-mode-dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (or (= :all cmode) (nil? cmode)))
|
||||
:data-value "all"
|
||||
:on-click update-mode}
|
||||
[:ul {:class (stl/css :comment-mode-dropdown)}
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (or (= :all cmode) (nil? cmode)))
|
||||
:data-value "all"
|
||||
:on-click update-mode}
|
||||
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (= :yours cmode))
|
||||
:data-value "yours"
|
||||
:on-click update-mode}
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]
|
||||
[:li {:class (stl/css :separator)}]
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (= :pending cshow))
|
||||
:on-click update-show}
|
||||
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]]
|
||||
|
||||
|
||||
[: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))
|
||||
:on-click update-show}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.hide-resolved-comments")]]])))
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (= :yours cmode))
|
||||
:data-value "yours"
|
||||
:on-click update-mode}
|
||||
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]
|
||||
[:li {:class (stl/css :separator)}]
|
||||
[:li {:class (stl/css-case :dropdown-item true
|
||||
:selected (= :pending cshow))
|
||||
:on-click update-show}
|
||||
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]]]))
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[{:keys [users threads page-id from-viewer]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
threads-map (mf/deref refs/threads-ref)
|
||||
(let [threads-map (mf/deref refs/threads-ref)
|
||||
profile (mf/deref refs/profile)
|
||||
users-refs (mf/deref refs/current-file-comments-users)
|
||||
users (or users users-refs)
|
||||
|
|
@ -139,75 +115,41 @@
|
|||
(dwcm/center-to-comment-thread thread)
|
||||
(-> (dcm/open-thread thread)
|
||||
(with-meta {::ev/origin "workspace"})))))))]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :comments-section)}
|
||||
[:div {:class (stl/css :comments-section-title)}
|
||||
[:span (tr "labels.comments")]
|
||||
[:button {:class (stl/css :close-button)
|
||||
:on-click close-section}
|
||||
i/close-refactor]]
|
||||
[:div {:class (stl/css :comments-section)}
|
||||
[:div {:class (stl/css :comments-section-title)}
|
||||
[:span (tr "labels.comments")]
|
||||
[:button {:class (stl/css :close-button)
|
||||
:on-click close-section}
|
||||
i/close-refactor]]
|
||||
|
||||
[:button {:class (stl/css :mode-dropdown-wrapper)
|
||||
:on-click toggle-mode-selector}
|
||||
[:button {:class (stl/css :mode-dropdown-wrapper)
|
||||
:on-click toggle-mode-selector}
|
||||
|
||||
[:span {:class (stl/css :mode-label)} (case (:mode local)
|
||||
(nil :all) (tr "labels.show-all-comments")
|
||||
:yours (tr "labels.show-your-comments"))]
|
||||
[:div {:class (stl/css :icon)} i/arrow-refactor]]
|
||||
[:span {:class (stl/css :mode-label)} (case (:mode local)
|
||||
(nil :all) (tr "labels.show-all-comments")
|
||||
:yours (tr "labels.show-your-comments"))]
|
||||
[:div {:class (stl/css :icon)} i/arrow-refactor]]
|
||||
|
||||
[:& dropdown {:show options?
|
||||
:on-close #(reset! state* false)}
|
||||
[:& sidebar-options {:local local}]]
|
||||
[:& dropdown {:show options?
|
||||
:on-close #(reset! state* false)}
|
||||
[:& sidebar-options {:local local}]]
|
||||
|
||||
[:div {:class (stl/css :comments-section-content)}
|
||||
[:div {:class (stl/css :comments-section-content)}
|
||||
|
||||
(if (seq tgroups)
|
||||
[:div {:class (stl/css :thread-groups)}
|
||||
(if (seq tgroups)
|
||||
[:div {:class (stl/css :thread-groups)}
|
||||
[:& cmt/comment-thread-group
|
||||
{:group (first tgroups)
|
||||
:on-thread-click on-thread-click
|
||||
:users users}]
|
||||
(for [tgroup (rest tgroups)]
|
||||
[:& cmt/comment-thread-group
|
||||
{:group (first tgroups)
|
||||
{:group tgroup
|
||||
:on-thread-click on-thread-click
|
||||
:users users}]
|
||||
(for [tgroup (rest tgroups)]
|
||||
[:& cmt/comment-thread-group
|
||||
{:group tgroup
|
||||
:on-thread-click on-thread-click
|
||||
:users users
|
||||
:key (:page-id tgroup)}])]
|
||||
:users users
|
||||
:key (:page-id tgroup)}])]
|
||||
|
||||
[:div {:class (stl/css :thread-group-placeholder)}
|
||||
[:span {:class (stl/css :placeholder-icon)} i/comments-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "labels.no-comments-available")]])]]
|
||||
|
||||
|
||||
[:div.comments-section.comment-threads-section
|
||||
[:div.workspace-comment-threads-sidebar-header
|
||||
[:div.label (tr "labels.comments")]
|
||||
[:div.options {:on-click toggle-mode-selector}
|
||||
[:div.label (case (:mode local)
|
||||
(nil :all) (tr "labels.all")
|
||||
:yours (tr "labels.only-yours"))]
|
||||
[:div.icon i/arrow-down]]
|
||||
|
||||
[:& dropdown {:show options?
|
||||
:on-close #(reset! state* false)}
|
||||
[:& sidebar-options {:local local}]]]
|
||||
|
||||
(if (seq tgroups)
|
||||
[:div.thread-groups
|
||||
[:& cmt/comment-thread-group
|
||||
{:group (first tgroups)
|
||||
:on-thread-click on-thread-click
|
||||
:users users}]
|
||||
(for [tgroup (rest tgroups)]
|
||||
[:*
|
||||
[:hr]
|
||||
[:& cmt/comment-thread-group
|
||||
{:group tgroup
|
||||
:on-thread-click on-thread-click
|
||||
:users users
|
||||
:key (:page-id tgroup)}]])]
|
||||
|
||||
[:div.thread-groups-placeholder
|
||||
i/chat
|
||||
(tr "labels.no-comments-available")])])))
|
||||
[:div {:class (stl/css :thread-group-placeholder)}
|
||||
[:span {:class (stl/css :placeholder-icon)} i/comments-refactor]
|
||||
[:span {:class (stl/css :placeholder-label)}
|
||||
(tr "labels.no-comments-available")]])]]))
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@
|
|||
@include titleTipography;
|
||||
text-align: center;
|
||||
width: $s-184;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,23 +147,6 @@
|
|||
(t locale "workspace.undo.entry.unknown" value))))
|
||||
|
||||
(defn entry->icon [{:keys [type]}]
|
||||
(case type
|
||||
:page i/file-html
|
||||
:shape i/layers
|
||||
:rect i/box
|
||||
:circle i/circle
|
||||
:text i/text
|
||||
:path i/curve
|
||||
:frame i/artboard
|
||||
:group i/folder
|
||||
:color i/palette
|
||||
:typography i/titlecase
|
||||
:component i/component
|
||||
:media i/image
|
||||
:image i/image
|
||||
i/layers))
|
||||
|
||||
(defn entry->icon-refactor [{:keys [type]}]
|
||||
(case type
|
||||
:page i/document-refactor
|
||||
:shape i/svg-refactor
|
||||
|
|
@ -310,9 +293,10 @@
|
|||
:on-pointer-enter #(reset! hover? true)
|
||||
:on-pointer-leave #(reset! hover? false)
|
||||
:on-click #(st/emit! (dwc/undo-to-index idx-entry))}
|
||||
|
||||
[:div {:class (stl/css :history-entry-summary)}
|
||||
[:div {:class (stl/css :history-entry-summary-icon)}
|
||||
(entry->icon-refactor entry)]
|
||||
(entry->icon entry)]
|
||||
[:div {:class (stl/css :history-entry-summary-text)} (entry->message locale entry)]
|
||||
(when (:detail entry)
|
||||
[:div {:class (stl/css-case :history-entry-summary-button true
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
.history-entry-empty-msg {
|
||||
@include titleTipography;
|
||||
color: var(--title-foreground-secondary);
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
.history-entries {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -23,40 +22,24 @@
|
|||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
options (mf/deref refs/workspace-page-options)
|
||||
(let [options (mf/deref refs/workspace-page-options)
|
||||
on-change (mf/use-fn #(st/emit! (dw/change-canvas-color %)))
|
||||
on-open (mf/use-fn #(st/emit! (dwu/start-undo-transaction :options)))
|
||||
on-close (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :options)))]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.options.canvas-background")
|
||||
:class (stl/css :title-spacing-page)}]]
|
||||
[:div {:class (stl/css :element-content)}
|
||||
[:& color-row
|
||||
{:disable-gradient true
|
||||
:disable-opacity true
|
||||
:disable-image true
|
||||
:title (tr "workspace.options.canvas-background")
|
||||
:color {:color (get options :background clr/canvas)
|
||||
:opacity 1}
|
||||
:on-change on-change
|
||||
:on-open on-open
|
||||
:on-close on-close}]]]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-title (tr "workspace.options.canvas-background")]
|
||||
[:div.element-set-content
|
||||
[:& color-row
|
||||
{:disable-gradient true
|
||||
:disable-opacity true
|
||||
:disable-image true
|
||||
:title (tr "workspace.options.canvas-background")
|
||||
:color {:color (get options :background clr/canvas)
|
||||
:opacity 1}
|
||||
:on-change on-change
|
||||
:on-open on-open
|
||||
:on-close on-close}]]])))
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (tr "workspace.options.canvas-background")
|
||||
:class (stl/css :title-spacing-page)}]]
|
||||
[:div {:class (stl/css :element-content)}
|
||||
[:& color-row
|
||||
{:disable-gradient true
|
||||
:disable-opacity true
|
||||
:disable-image true
|
||||
:title (tr "workspace.options.canvas-background")
|
||||
:color {:color (get options :background clr/canvas)
|
||||
:opacity 1}
|
||||
:on-change on-change
|
||||
:on-open on-open
|
||||
:on-close on-close}]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :as cb]
|
||||
[app.main.ui.components.color-bullet-new :as cbn]
|
||||
[app.main.ui.components.color-input :refer [color-input*]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
|
|
@ -43,10 +42,9 @@
|
|||
|
||||
(mf/defc color-row
|
||||
[{:keys [index color disable-gradient disable-opacity disable-image on-change
|
||||
on-reorder on-detach on-open on-close title on-remove
|
||||
on-reorder on-detach on-open on-close on-remove
|
||||
disable-drag on-focus on-blur select-only select-on-focus]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
(let [current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
hover-detach (mf/use-state false)
|
||||
|
|
@ -186,152 +184,87 @@
|
|||
(when (not= prev-color color)
|
||||
(modal/update-props! :colorpicker {:data (parse-color color)})))
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css-case
|
||||
:color-data true
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))
|
||||
:ref dref}
|
||||
[:span {:class (stl/css :color-info)}
|
||||
[:span {:class (stl/css-case :color-name-wrapper true
|
||||
:no-opacity (or disable-opacity
|
||||
(not opacity?))
|
||||
:library-name-wrapper library-color?
|
||||
:editing editing-text?
|
||||
:gradient-name-wrapper gradient-color?)}
|
||||
[:span {:class (stl/css :color-bullet-wrapper)}
|
||||
[:& cbn/color-bullet {:color (cond-> color
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
:file-id nil))
|
||||
:mini? true
|
||||
:on-click handle-click-color}]]
|
||||
(cond
|
||||
;; Rendering a color with ID
|
||||
library-color?
|
||||
[:*
|
||||
[:div {:class (stl/css :color-name)
|
||||
:title (str color-name)}
|
||||
|
||||
(str color-name)]
|
||||
(when on-detach
|
||||
[:button
|
||||
{:class (stl/css :detach-btn)
|
||||
:title (tr "settings.detach")
|
||||
:on-pointer-enter #(reset! hover-detach true)
|
||||
:on-pointer-leave #(reset! hover-detach false)
|
||||
:on-click detach-value}
|
||||
i/detach-refactor])]
|
||||
|
||||
;; Rendering a gradient
|
||||
gradient-color?
|
||||
[:*
|
||||
[:div {:class (stl/css :color-name)}
|
||||
(uc/gradient-type->string (get-in color [:gradient :type]))]]
|
||||
|
||||
;; Rendering an image
|
||||
image-color?
|
||||
[:*
|
||||
[:div {:class (stl/css :color-name)}
|
||||
(tr "media.image")]]
|
||||
|
||||
;; Rendering a plain color
|
||||
:else
|
||||
[:span {:class (stl/css :color-input-wrapper)}
|
||||
[:> color-input* {:value (if multiple-colors?
|
||||
""
|
||||
(-> color :color cc/remove-hash))
|
||||
:placeholder (tr "settings.multiple")
|
||||
:className (stl/css :color-input)
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change handle-value-change}]])]
|
||||
|
||||
(when opacity?
|
||||
[:div {:class (stl/css :opacity-element-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)}
|
||||
"%"]
|
||||
[:> numeric-input* {:value (-> color :opacity opacity->string)
|
||||
:className (stl/css :opacity-input)
|
||||
:placeholder "--"
|
||||
:select-on-focus select-on-focus
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change handle-opacity-change
|
||||
:min 0
|
||||
:max 100}]])]
|
||||
|
||||
(when (some? on-remove)
|
||||
[:button {:class (stl/css :remove-btn)
|
||||
:on-click on-remove} i/remove-refactor])
|
||||
(when select-only
|
||||
[:button {:class (stl/css :select-btn)
|
||||
:on-click handle-select}
|
||||
i/move-refactor])]
|
||||
|
||||
;; OLD CSS
|
||||
[:div.row-flex.color-data {:title title
|
||||
:class (dom/classnames
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))
|
||||
:ref dref}
|
||||
[:& cb/color-bullet {:color (cond-> color
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
:file-id nil))
|
||||
:on-click handle-click-color}]
|
||||
|
||||
[:div {:class (stl/css-case
|
||||
:color-data true
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))
|
||||
:ref dref}
|
||||
[:span {:class (stl/css :color-info)}
|
||||
[:span {:class (stl/css-case :color-name-wrapper true
|
||||
:no-opacity (or disable-opacity
|
||||
(not opacity?))
|
||||
:library-name-wrapper library-color?
|
||||
:editing editing-text?
|
||||
:gradient-name-wrapper gradient-color?)}
|
||||
[:span {:class (stl/css :color-bullet-wrapper)}
|
||||
[:& cbn/color-bullet {:color (cond-> color
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
:file-id nil))
|
||||
:mini? true
|
||||
:on-click handle-click-color}]]
|
||||
(cond
|
||||
;; Rendering a color with ID
|
||||
;; Rendering a color with ID
|
||||
library-color?
|
||||
[:*
|
||||
[:div.color-info
|
||||
[:div.color-name (str color-name)]]
|
||||
[:div {:class (stl/css :color-name)
|
||||
:title (str color-name)}
|
||||
|
||||
(str color-name)]
|
||||
(when on-detach
|
||||
[:div.element-set-actions-button
|
||||
{:on-pointer-enter #(reset! hover-detach true)
|
||||
[:button
|
||||
{:class (stl/css :detach-btn)
|
||||
:title (tr "settings.detach")
|
||||
:on-pointer-enter #(reset! hover-detach true)
|
||||
:on-pointer-leave #(reset! hover-detach false)
|
||||
:on-click detach-value}
|
||||
(if @hover-detach i/unchain i/chain)])]
|
||||
i/detach-refactor])]
|
||||
|
||||
;; Rendering a gradient
|
||||
;; Rendering a gradient
|
||||
gradient-color?
|
||||
[:*
|
||||
[:div.color-info
|
||||
[:div.color-name (uc/gradient-type->string (get-in color [:gradient :type]))]]
|
||||
(when select-only
|
||||
[:div.element-set-actions-button {:on-click handle-select}
|
||||
i/pointer-inner])]
|
||||
[:div {:class (stl/css :color-name)}
|
||||
(uc/gradient-type->string (get-in color [:gradient :type]))]]
|
||||
|
||||
;; Rendering a plain color/opacity
|
||||
:else
|
||||
;; Rendering an image
|
||||
image-color?
|
||||
[:*
|
||||
[:div.color-info
|
||||
[:> color-input* {:value (if multiple-colors?
|
||||
""
|
||||
(-> color :color cc/remove-hash))
|
||||
:placeholder (tr "settings.multiple")
|
||||
[:div {:class (stl/css :color-name)}
|
||||
(tr "media.image")]]
|
||||
|
||||
;; Rendering a plain color
|
||||
:else
|
||||
[:span {:class (stl/css :color-input-wrapper)}
|
||||
[:> color-input* {:value (if multiple-colors?
|
||||
""
|
||||
(-> color :color cc/remove-hash))
|
||||
:placeholder (tr "settings.multiple")
|
||||
:className (stl/css :color-input)
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change handle-value-change}]])]
|
||||
|
||||
(when opacity?
|
||||
[:div {:class (stl/css :opacity-element-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)}
|
||||
"%"]
|
||||
[:> numeric-input* {:value (-> color :opacity opacity->string)
|
||||
:className (stl/css :opacity-input)
|
||||
:placeholder "--"
|
||||
:select-on-focus select-on-focus
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change handle-value-change}]]
|
||||
:on-change handle-opacity-change
|
||||
:min 0
|
||||
:max 100}]])]
|
||||
|
||||
(when (and (not disable-opacity)
|
||||
(not (:gradient color)))
|
||||
[:div.input-element
|
||||
{:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
|
||||
[:> numeric-input* {:value (-> color :opacity opacity->string)
|
||||
:placeholder (tr "settings.multiple")
|
||||
:select-on-focus select-on-focus
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change handle-opacity-change
|
||||
:min 0
|
||||
:max 100}]])
|
||||
(when select-only
|
||||
[:div.element-set-actions-button {:on-click handle-select}
|
||||
i/pointer-inner])])
|
||||
(when (some? on-remove)
|
||||
[:div.element-set-actions-button.remove {:on-click on-remove} i/minus])])
|
||||
(when (some? on-remove)
|
||||
[:button {:class (stl/css :remove-btn)
|
||||
:on-click on-remove} i/remove-refactor])
|
||||
(when select-only
|
||||
[:button {:class (stl/css :select-btn)
|
||||
:on-click handle-select}
|
||||
i/move-refactor])]
|
||||
|
||||
))
|
||||
|
||||
|
|
|
|||
|
|
@ -8,155 +8,6 @@
|
|||
|
||||
.color-data {
|
||||
@include flexRow;
|
||||
.color-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-2;
|
||||
border-radius: $s-8;
|
||||
background-color: var(--input-details-color);
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
.color-name-wrapper {
|
||||
@extend .input-element;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
gap: $s-4;
|
||||
input {
|
||||
padding: 0;
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
height: $s-28;
|
||||
padding: 0 $s-2 0 $s-8;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.color-name {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-8;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
.detach-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
display: none;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: 0 $s-0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-0;
|
||||
}
|
||||
&.no-opacity {
|
||||
border-radius: $br-8;
|
||||
.color-input-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-background-color-hover);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
.detach-btn {
|
||||
display: flex;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
.gradient-name-wrapper {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.color-name {
|
||||
@include flexRow;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
}
|
||||
}
|
||||
.library-name-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
.opacity-element-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.opacity-input {
|
||||
padding: 0;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
min-width: $s-28;
|
||||
}
|
||||
.icon-text {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
padding-top: $s-2;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.detach-btn,
|
||||
.select-btn {
|
||||
background-color: transparent;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.remove-btn,
|
||||
.select-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.dnd-over-top {
|
||||
border-top: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
|
|
@ -165,3 +16,155 @@
|
|||
border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
|
||||
.color-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-2;
|
||||
border-radius: $s-8;
|
||||
background-color: var(--input-details-color);
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
.color-name-wrapper {
|
||||
@extend .input-element;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
gap: $s-4;
|
||||
input {
|
||||
padding: 0;
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
height: $s-28;
|
||||
padding: 0 $s-2 0 $s-8;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.color-name {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-8;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
.detach-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
display: none;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: 0 $s-0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-0;
|
||||
}
|
||||
&.no-opacity {
|
||||
border-radius: $br-8;
|
||||
.color-input-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-background-color-hover);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
.detach-btn {
|
||||
display: flex;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
.gradient-name-wrapper {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.color-name {
|
||||
@include flexRow;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
}
|
||||
}
|
||||
.library-name-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
.opacity-element-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.opacity-input {
|
||||
padding: 0;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
min-width: $s-28;
|
||||
}
|
||||
.icon-text {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
padding-top: $s-2;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.detach-btn,
|
||||
.select-btn {
|
||||
background-color: transparent;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn,
|
||||
.select-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.options.rows.input-row
|
||||
(:require
|
||||
[app.main.ui.components.editable-select :refer [editable-select]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.util.object :as obj]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc input-row
|
||||
[{:keys [label options value class min max on-change type placeholder default nillable on-focus select-on-focus]}]
|
||||
[:div.row-flex.input-row
|
||||
[:span.element-set-subtitle label]
|
||||
[:div.input-element {:class class}
|
||||
|
||||
(case type
|
||||
:select
|
||||
[:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
|
||||
:default-value value
|
||||
:class "input-option"
|
||||
:options options
|
||||
:on-change on-change}]
|
||||
|
||||
:editable-select
|
||||
[:& editable-select {:value value
|
||||
:class "input-option"
|
||||
:options options
|
||||
:type "number"
|
||||
:min min
|
||||
:max max
|
||||
:placeholder placeholder
|
||||
:on-change on-change}]
|
||||
|
||||
:text
|
||||
[:input {:value value
|
||||
:class "input-text"
|
||||
:on-change on-change} ]
|
||||
|
||||
[:> numeric-input*
|
||||
{:placeholder placeholder
|
||||
:min min
|
||||
:max max
|
||||
:default default
|
||||
:nillable nillable
|
||||
:on-change on-change
|
||||
:on-focus on-focus
|
||||
:select-on-focus select-on-focus
|
||||
:value (or value "")}])]])
|
||||
|
||||
|
||||
;; NOTE: (by niwinz) this is a new version of input-row, I didn't
|
||||
;; touched the original one because it is used in many sites and I
|
||||
;; don't have intention to refactor all the code right now. We should
|
||||
;; consider to use the new one and once we have migrated all to the
|
||||
;; new component, we can proceed to rename it and delete the old one.
|
||||
|
||||
(mf/defc input-row-v2
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [label (obj/get props "label")
|
||||
class (obj/get props "class")
|
||||
children (obj/get props "children")]
|
||||
[:div.row-flex.input-row
|
||||
[:span.element-set-subtitle label]
|
||||
[:div.input-element {:class class}
|
||||
children]]))
|
||||
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
|
||||
|
|
@ -33,8 +32,7 @@
|
|||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[props]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shape (unchecked-get props "shape")
|
||||
(let [shape (unchecked-get props "shape")
|
||||
shape-with-children (unchecked-get props "shape-with-children")
|
||||
shared-libs (unchecked-get props "shared-libs")
|
||||
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
|
||||
|
|
@ -69,8 +67,7 @@
|
|||
[layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)]
|
||||
|
||||
|
||||
[:div {:class (stl/css-case new-css-system
|
||||
:options true)}
|
||||
[:div {:class (stl/css :options)}
|
||||
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
|
||||
[:& component-menu {:shapes [shape]}] ;;remove this in components-v2
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
[app.common.types.shape.layout :as ctl]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
|
||||
|
|
@ -268,8 +267,7 @@
|
|||
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children" "page-id" "file-id"]))]
|
||||
::mf/wrap-props false}
|
||||
[props]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
shapes (unchecked-get props "shapes")
|
||||
(let [shapes (unchecked-get props "shapes")
|
||||
shapes-with-children (unchecked-get props "shapes-with-children")
|
||||
|
||||
;; remove children from bool shapes
|
||||
|
|
@ -348,8 +346,7 @@
|
|||
|
||||
components (filter ctk/instance-head? shapes)]
|
||||
|
||||
[:div {:class (stl/css-case new-css-system
|
||||
:options true)}
|
||||
[:div {:class (stl/css :options)}
|
||||
(when-not (empty? layer-ids)
|
||||
[:& layer-menu {:type type :ids layer-ids :values layer-values}])
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]]
|
||||
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -21,30 +20,19 @@
|
|||
|
||||
(mf/defc view-only-actions
|
||||
[]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
handle-close-view-mode
|
||||
(let [handle-close-view-mode
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
(st/emit! :interrupt
|
||||
(dw/set-options-mode :design)
|
||||
(dw/set-workspace-read-only false))))]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :viewport-actions)}
|
||||
[:div {:class (stl/css :viewport-actions-container)}
|
||||
[:div {:class (stl/css :viewport-actions-title)}
|
||||
[:& i18n/tr-html {:tag-name "span"
|
||||
:label "workspace.top-bar.read-only"}]]
|
||||
[:button {:class (stl/css :done-btn)
|
||||
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]
|
||||
|
||||
;; OLD
|
||||
[:div.viewport-actions
|
||||
[:div.viewport-actions-container
|
||||
[:div.viewport-actions-title
|
||||
[:& i18n/tr-html {:tag-name "span"
|
||||
:label "workspace.top-bar.read-only"}]]
|
||||
[:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
|
||||
[:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]])))
|
||||
[:div {:class (stl/css :viewport-actions)}
|
||||
[:div {:class (stl/css :viewport-actions-container)}
|
||||
[:div {:class (stl/css :viewport-actions-title)}
|
||||
[:& i18n/tr-html {:tag-name "span"
|
||||
:label "workspace.top-bar.read-only"}]]
|
||||
[:button {:class (stl/css :done-btn)
|
||||
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]))
|
||||
|
||||
(mf/defc top-bar
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.viewport.widgets
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -251,12 +252,14 @@
|
|||
:width 100000
|
||||
:height 24
|
||||
:transform (vwu/text-transform flow-pos zoom)}
|
||||
[:div.flow-badge {:class (dom/classnames :selected selected?)}
|
||||
[:div.content {:on-pointer-down on-pointer-down
|
||||
[:div {:class (stl/css-case :flow-badge true
|
||||
:selected selected?)}
|
||||
[:div {:class (stl/css :content)
|
||||
:on-pointer-down on-pointer-down
|
||||
:on-double-click on-double-click
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave}
|
||||
i/play
|
||||
i/play-refactor
|
||||
[:span (:name flow)]]]]))
|
||||
|
||||
(mf/defc frame-flows
|
||||
|
|
|
|||
64
frontend/src/app/main/ui/workspace/viewport/widgets.scss
Normal file
64
frontend/src/app/main/ui/workspace/viewport/widgets.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// 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";
|
||||
|
||||
.flow-element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.element-label {
|
||||
}
|
||||
|
||||
.flow-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& input.element-name {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-badge {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
.content {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-24;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--flow-tag-background-color);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-24;
|
||||
width: $s-12;
|
||||
stroke: var(--icon-foreground);
|
||||
margin: 0 $s-8;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $s-8;
|
||||
color: var(--flow-tag-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected .content,
|
||||
&:hover .content {
|
||||
background-color: var(--flow-tag-background-color-hover);
|
||||
svg {
|
||||
stroke: var(--flow-tag-foreground-color-hover);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--flow-tag-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue