From 7a3525febc4c064689bb0a50332c0289699028ee Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 3 Jan 2024 12:04:56 +0100 Subject: [PATCH] :recycle: Remove new-css-system from right sidebar elements --- .../styles/common/refactor/design-tokens.scss | 5 + frontend/resources/styles/main-default.scss | 1 - .../partials/sidebar-document-history.scss | 220 ++++++------- .../main/ui/viewer/inspect/attributes.cljs | 85 ++--- .../src/app/main/ui/viewer/inspect/code.cljs | 185 ++++------- .../src/app/main/ui/viewer/inspect/code.scss | 139 ++++---- .../main/ui/viewer/inspect/right_sidebar.cljs | 171 ++++------ .../main/ui/viewer/inspect/right_sidebar.scss | 122 +++---- frontend/src/app/main/ui/workspace.cljs | 4 +- frontend/src/app/main/ui/workspace.scss | 22 ++ .../src/app/main/ui/workspace/comments.cljs | 160 +++------- .../src/app/main/ui/workspace/comments.scss | 1 + .../main/ui/workspace/sidebar/history.cljs | 20 +- .../main/ui/workspace/sidebar/history.scss | 2 +- .../ui/workspace/sidebar/options/page.cljs | 51 +-- .../sidebar/options/rows/color_row.cljs | 205 ++++-------- .../sidebar/options/rows/color_row.scss | 301 +++++++++--------- .../sidebar/options/rows/input_row.cljs | 72 ----- .../sidebar/options/shapes/group.cljs | 7 +- .../sidebar/options/shapes/multiple.cljs | 7 +- .../main/ui/workspace/viewport/top_bar.cljs | 28 +- .../main/ui/workspace/viewport/widgets.cljs | 9 +- .../main/ui/workspace/viewport/widgets.scss | 64 ++++ 23 files changed, 800 insertions(+), 1081 deletions(-) delete mode 100644 frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs create mode 100644 frontend/src/app/main/ui/workspace/viewport/widgets.scss diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index f9c95e3f09..c9717d2e24 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -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); diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 32288c6278..4ce046332b 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -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"; diff --git a/frontend/resources/styles/main/partials/sidebar-document-history.scss b/frontend/resources/styles/main/partials/sidebar-document-history.scss index a8e00d41cc..582d7f300d 100644 --- a/frontend/resources/styles/main/partials/sidebar-document-history.scss +++ b/frontend/resources/styles/main/partials/sidebar-document-history.scss @@ -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; +// } +// } +// } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs index 74bf4bcf98..9798af6777 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs @@ -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}]])) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index b80df099dd..205ff04f32 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index 3524f40a03..9f7c37b5e7 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -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; diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs index d5fe584b74..ea62c3111b 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs @@ -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")]])])) diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss index f002dc630b..c5267edbfc 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss @@ -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; +} diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 045d1d533c..ff447eb017 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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]]) diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index 72633f95ce..410c831862 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -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; +} diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index 121ca11d98..35df73bdd8 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/frontend/src/app/main/ui/workspace/comments.cljs @@ -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")]])]])) diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 7c45491e67..b742ea5890 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -133,6 +133,7 @@ @include titleTipography; text-align: center; width: $s-184; + color: var(--empty-message-foreground-color); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index c4fb5650ea..4c292d905d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index bafe0cff74..19d9af08d5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -60,7 +60,7 @@ .history-entry-empty-msg { @include titleTipography; - color: var(--title-foreground-secondary); + color: var(--empty-message-foreground-color); } .history-entries { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs index dbdd285075..9a99b7dbfd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index cad09c56ac..15be74946d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -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])] )) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 83f32b627a..5285303c5f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -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; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs deleted file mode 100644 index f0aca9d255..0000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs +++ /dev/null @@ -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]])) - diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 2b661b1096..558e86b416 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 8309844a76..a562269aec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -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}]) diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs index c3efb32784..04eeb79d1f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -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]} diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 58fde157b7..ec646a9665 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss new file mode 100644 index 0000000000..2fc2a81daf --- /dev/null +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss @@ -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); + } + } +}