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