diff --git a/common/src/app/common/features.cljc b/common/src/app/common/features.cljc index 20c0ab601..f4751da8f 100644 --- a/common/src/app/common/features.cljc +++ b/common/src/app/common/features.cljc @@ -93,7 +93,6 @@ [flag] (case flag :feature-components-v2 "components/v2" - :feature-new-css-system "styles/v2" :feature-styles-v2 "styles/v2" :feature-grid-layout "layout/grid" :feature-fdata-objects-map "fdata/objects-map" diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 8f3bdfff5..08f714c3b 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -7,7 +7,6 @@ (ns app.main.ui (:require [app.config :as cf] - [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] @@ -58,10 +57,8 @@ (mf/defc main-page {::mf/wrap [#(mf/catch % {:fallback on-main-error})]} [{:keys [route profile]}] - (let [{:keys [data params]} route - new-css-system (features/use-feature "styles/v2")] + (let [{:keys [data params]} route] [:& (mf/provider ctx/current-route) {:value route} - [:& (mf/provider ctx/new-css-system) {:value new-css-system} (case (:name data) (:auth-login :auth-register @@ -171,7 +168,7 @@ :frame-preview [:& frame-preview/frame-preview] - nil)]])) + nil)])) (mf/defc app [] diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs index 49cb7f63e..b0e09e246 100644 --- a/frontend/src/app/main/ui/components/copy_button.cljs +++ b/frontend/src/app/main/ui/components/copy_button.cljs @@ -8,7 +8,6 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.timers :as timers] [app.util.webapi :as wapi] @@ -16,8 +15,7 @@ [rumext.v2 :as mf])) (mf/defc copy-button [{:keys [data on-copied children class]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - just-copied (mf/use-state false)] + (let [just-copied (mf/use-state false)] (mf/use-effect (mf/deps @just-copied) (fn [] @@ -27,24 +25,15 @@ (let [sub (timers/schedule 1000 #(reset! just-copied false))] ;; On unmount we dispose the timer #(rx/-dispose sub))))) - (if new-css-system - [:button {:class (dm/str class " " (stl/css-case :copy-button true - :copy-wrapper (some? children))) - :on-click #(when-not @just-copied - (reset! just-copied true) - (wapi/write-to-clipboard (if (fn? data) (data) data)))} + [:button {:class (dm/str class " " (stl/css-case :copy-button true + :copy-wrapper (some? children))) + :on-click #(when-not @just-copied + (reset! just-copied true) + (wapi/write-to-clipboard (if (fn? data) (data) data)))} - (when children - children) - [:span {:class (stl/css :icon-btn)} - (if @just-copied - i/tick-refactor - i/clipboard-refactor)]] - - [:button.copy-button - {:on-click #(when-not @just-copied - (reset! just-copied true) - (wapi/write-to-clipboard (if (fn? data) (data) data)))} - (if @just-copied - i/tick - i/copy)]))) + (when children + children) + [:span {:class (stl/css :icon-btn)} + (if @just-copied + i/tick-refactor + i/clipboard-refactor)]])) diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index 7881e86c1..caa5c5426 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -5,8 +5,9 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.editable-label + (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.context :as ctx] + [app.common.data.macros :as dm] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] @@ -16,16 +17,14 @@ (mf/defc editable-label {::mf/wrap-props false} [props] - (let [display-value (unchecked-get props "display-value") - value (unchecked-get props "value") + (let [value (unchecked-get props "value") on-change (unchecked-get props "on-change") on-cancel (unchecked-get props "on-cancel") editing? (unchecked-get props "editing") dbl-click? (unchecked-get props "disable-dbl-click") class (unchecked-get props "class") - tooltip (unchecked-get props "tooltip") - new-css-system (mf/use-ctx ctx/new-css-system) + final-class (dm/str class " " (stl/css :editable-label)) input-ref (mf/use-ref nil) internal-editing* (mf/use-state false) internal-editing? (deref internal-editing*) @@ -83,20 +82,15 @@ (when (and editing? (not internal-editing?)) (start-edition))) - (if ^boolean internal-editing? - [:div.editable-label {:class class} - [:input.editable-label-input - {:ref input-ref - :default-value value - :on-key-up on-key-up - :on-blur cancel-edition}] + [:div {:class final-class} + [:input + {:class (stl/css :editable-label-input) + :ref input-ref + :default-value value + :on-key-up on-key-up + :on-double-click on-dbl-click + :on-blur cancel-edition}] - [:span.editable-label-close {:on-click cancel-edition} - (if ^boolean new-css-system - i/delete-text-refactor - i/close)]] - [:span.editable-label - {:class class - :title tooltip - :on-double-click on-dbl-click} - display-value]))) + [:span {:class (stl/css :editable-label-close) + :on-click cancel-edition} + i/delete-text-refactor]])) diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 04b36e482..b444a3be7 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -19,3 +19,23 @@ border: $s-1 solid var(--input-border-color-focus); color: var(--layer-row-foreground-color); } + +.editable-label { + display: flex; + + &.is-hidden { + display: none; + } +} + +.editable-label-close { + cursor: pointer; + + svg { + @extend .button-icon; + height: $s-12; + width: $s-12; + stroke: var(--icon-foreground); + margin: 0; + } +} diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index dab4bb13c..a39ea201c 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -13,7 +13,6 @@ [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] @@ -22,8 +21,7 @@ (mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur input-class] :as params}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - state* (mf/use-state {:id (uuid/next) + (let [state* (mf/use-state {:id (uuid/next) :is-open? false :current-value value :top nil @@ -32,9 +30,6 @@ state (deref state*) is-open? (:is-open? state) current-value (:current-value state) - top-value (:top state) - left-value (:left state) - bottom-value (:bottom state) element-id (:id state) min-val (get params :min) @@ -43,11 +38,6 @@ emit-blur? (mf/use-ref nil) font-size-wrapper-ref (mf/use-ref) - open-dropdown - (fn [event] - (dom/stop-propagation event) - (swap! state* assoc :is-open? true)) - toggle-dropdown (mf/use-fn (mf/deps state) @@ -170,81 +160,43 @@ (mf/set-ref-val! emit-blur? (not is-open?))) - (if new-css-system - [:div {:class (dm/str class " " (stl/css :editable-select)) - :ref on-node-load} - (if (= type "number") - [:> numeric-input* {:value (or (some-> current-value value->label) "") - :className input-class - :on-change set-value - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder}] - [:input {:value (or (some-> current-value value->label) "") - :class input-class - :on-change handle-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder - :type type}]) + [:div {:class (dm/str class " " (stl/css :editable-select)) + :ref on-node-load} + (if (= type "number") + [:> numeric-input* {:value (or (some-> current-value value->label) "") + :className input-class + :on-change set-value + :on-focus handle-focus + :on-blur handle-blur + :placeholder placeholder}] + [:input {:value (or (some-> current-value value->label) "") + :class input-class + :on-change handle-change-input + :on-key-down handle-key-down + :on-focus handle-focus + :on-blur handle-blur + :placeholder placeholder + :type type}]) - [:span {:class (stl/css :dropdown-button) - :on-click toggle-dropdown} - i/arrow-refactor] + [:span {:class (stl/css :dropdown-button) + :on-click toggle-dropdown} + i/arrow-refactor] - [:& dropdown {:show (or is-open? false) - :on-close close-dropdown} - [:ul {:class (stl/css :custom-select-dropdown) - :ref font-size-wrapper-ref} - (for [[index item] (map-indexed vector options)] - (if (= :separator item) - [:li {:class (stl/css :separator) - :key (dm/str element-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li - {:key (str element-id "-" index) - :class (stl/css-case :dropdown-element true - :is-selected (= (dm/str value) current-value)) - :data-value value - :on-click select-item} - [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} - i/tick-refactor]])))]]] - - - [:div.editable-select {:class class - :ref on-node-load} - (if (= type "number") - [:> numeric-input* {:value (or (some-> current-value value->label) "") - :on-change set-value - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder}] - [:input.input-text {:value (or (some-> current-value value->label) "") - :on-change handle-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder - :type type}]) - [:span.dropdown-button {:on-click open-dropdown} i/arrow-down] - - [:& dropdown {:show (or is-open? false) - :on-close close-dropdown} - [:ul.custom-select-dropdown {:style {:position "fixed" - :top top-value - :left left-value - :bottom bottom-value} - :ref font-size-wrapper-ref} - (for [[index item] (map-indexed vector options)] - (if (= :separator item) - [:hr {:key (str element-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li.checked-element - {:key (str element-id "-" index) - :class (when (= (str value) current-value) "is-selected") - :data-value value - :on-click select-item} - [:span.check-icon i/tick] - [:span.checked-element-value label]])))]]]))) + [:& dropdown {:show (or is-open? false) + :on-close close-dropdown} + [:ul {:class (stl/css :custom-select-dropdown) + :ref font-size-wrapper-ref} + (for [[index item] (map-indexed vector options)] + (if (= :separator item) + [:li {:class (stl/css :separator) + :key (dm/str element-id "-" index)}] + (let [[value label] (as-key-value item)] + [:li + {:key (str element-id "-" index) + :class (stl/css-case :dropdown-element true + :is-selected (= (dm/str value) current-value)) + :data-value value + :on-click select-item} + [:span {:class (stl/css :label)} label] + [:span {:class (stl/css :check-icon)} + i/tick-refactor]])))]]])) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 70469c23a..2187e81b7 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -10,7 +10,6 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.select :as cs] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -28,9 +27,7 @@ (mf/defc input [{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - input-type (get props :type "text") + (let [input-type (get props :type "text") input-name (get props :name) more-classes (get props :class) auto-focus? (get props :auto-focus? false) @@ -111,98 +108,61 @@ show-valid? (and show-success? touched? (not error)) show-invalid? (and touched? error)] - (if new-css-system - [:div {:class (dm/str more-classes " " - (stl/css-case - :input-wrapper true - :valid show-valid? - :invalid show-invalid? - :checkbox is-checkbox? - :disabled disabled))} - [:* - (cond - (some? label) - [:label {:class (stl/css-case :input-with-label (not is-checkbox?) - :input-label is-text? - :radio-label is-radio? - :checkbox-label is-checkbox?) - :tab-index "-1" - :for (name input-name)} label + [:div {:class (dm/str more-classes " " + (stl/css-case + :input-wrapper true + :valid show-valid? + :invalid show-invalid? + :checkbox is-checkbox? + :disabled disabled))} + [:* + (cond + (some? label) + [:label {:class (stl/css-case :input-with-label (not is-checkbox?) + :input-label is-text? + :radio-label is-radio? + :checkbox-label is-checkbox?) + :tab-index "-1" + :for (name input-name)} label - (when is-checkbox? - [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) + (when is-checkbox? + [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) - (if is-checkbox? - [:> :input props] - - [:div {:class (stl/css :input-and-icon)} - [:> :input props] - (when help-icon' - [:span {:class (stl/css :help-icon) - :on-click (when (= "password" input-type) - swap-text-password)} - help-icon']) - - (when show-valid? - [:span {:class (stl/css :valid-icon)} - i/tick-refactor]) - - (when show-invalid? - [:span {:class (stl/css :invalid-icon)} - i/close-refactor])])] - - (some? children) - [:label {:for (name input-name)} + (if is-checkbox? [:> :input props] - children]) + + [:div {:class (stl/css :input-and-icon)} + [:> :input props] + (when help-icon' + [:span {:class (stl/css :help-icon) + :on-click (when (= "password" input-type) + swap-text-password)} + help-icon']) + + (when show-valid? + [:span {:class (stl/css :valid-icon)} + i/tick-refactor]) + + (when show-invalid? + [:span {:class (stl/css :invalid-icon)} + i/close-refactor])])] + + (some? children) + [:label {:for (name input-name)} + [:> :input props] + children]) - (cond - (and touched? (:message error)) - [:div {:id (dm/str "error-" input-name) - :class (stl/css :error) - :data-test (clojure.string/join [data-test "-error"])} - (tr (:message error))] + (cond + (and touched? (:message error)) + [:div {:id (dm/str "error-" input-name) + :class (stl/css :error) + :data-test (clojure.string/join [data-test "-error"])} + (tr (:message error))] - (string? hint) - [:div {:class (stl/css :hint)} hint])]] - - ;;OLD - [:div - {:class (str more-classes " " - (dom/classnames - :focus @focus? - :valid (and touched? (not error)) - :invalid (and touched? error) - :disabled disabled - :empty (and is-text? (str/empty? value)) - :with-icon (not (nil? help-icon')) - :custom-input is-text? - :input-radio is-radio? - :input-checkbox is-checkbox?))} - [:* - [:> :input props] - (cond - (some? label) - [:label {:for (name input-name)} label] - - (some? children) - [:label {:for (name input-name)} children]) - - (when help-icon' - [:div.help-icon - {:style {:cursor "pointer"} - :on-click (when (= "password" input-type) - swap-text-password)} - help-icon']) - (cond - (and touched? (:message error)) - [:span.error {:id (dm/str "error-" input-name) - :data-test (clojure.string/join [data-test "-error"])} (tr (:message error))] - - (string? hint) - [:span.hint hint])]]))) + (string? hint) + [:div {:class (stl/css :hint)} hint])]])) (mf/defc textarea [{:keys [label disabled form hint trim] :as props}] @@ -259,62 +219,28 @@ [:span.hint hint])]])) (mf/defc select - [{:keys [options disabled label form default data-test] :as props + [{:keys [options disabled form default] :as props :or {default ""}}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - input-name (get props :name) + (let [input-name (get props :name) form (or form (mf/use-ctx form-ctx)) value (or (get-in @form [:data input-name]) default) - cvalue (d/seek #(= value (:value %)) options) - focus? (mf/use-state false) handle-change (fn [event] (let [value (if (string? event) event (dom/get-target-val event))] - (fm/on-input-change form input-name value))) + (fm/on-input-change form input-name value)))] - on-focus - (fn [_] - (reset! focus? true)) - - on-blur - (fn [_] - (reset! focus? false))] - - (if new-css-system - [:div {:class (stl/css :select-wrapper)} - [:& cs/select - {:default-value value - :options options - :on-change handle-change}]] - - - [:div.custom-select - [:select {:value value - :on-change handle-change - :on-focus on-focus - :on-blur on-blur - :disabled disabled - :data-test data-test} - (for [item options] - [:> :option (clj->js (cond-> {:key (:value item) :value (:value item)} - (:disabled item) (assoc :disabled "disabled") - (:hidden item) (assoc :style {:display "none"}))) - (:label item)])] - - [:div.input-container {:class (dom/classnames :disabled disabled :focus @focus?)} - [:div.main-content - [:label label] - [:span.value (:label cvalue "")]] - - [:div.icon - i/arrow-slide]]]))) + [:div {:class (stl/css :select-wrapper)} + [:& cs/select + {:default-value value + :disabled disabled + :options options + :on-change handle-change}]])) (mf/defc radio-buttons {::mf/wrap-props false} [props] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - form (or (unchecked-get props "form") + (let [form (or (unchecked-get props "form") (mf/use-ctx form-ctx)) name (unchecked-get props "name") @@ -337,51 +263,31 @@ (when (fn? on-change) (on-change name value)))))] - (if new-css-system - [:div {:class (stl/css :custom-radio)} - (for [{:keys [image value label]} options] - (let [image? (some? image) - value' (encode-fn value) - checked? (= value current-value) - key (str/ffmt "%-%" name value')] - [:label {:for key - :key key - :style {:background-image (when image? (str/ffmt "url(%)" image))} - :class (stl/css-case :radio-label true - :global/checked checked? - :with-image image?)} - [:input {:on-change on-change' - :type "radio" - :class (stl/css :radio-input) - :id key - :name name - :value value' - :checked checked?}] - (when (not image?) - [:span {:class (stl/css-case :radio-icon true - :global/checked checked?)} - (when checked? [:span {:class (stl/css :radio-dot)}])]) + [:div {:class (stl/css :custom-radio)} + (for [{:keys [image value label]} options] + (let [image? (some? image) + value' (encode-fn value) + checked? (= value current-value) + key (str/ffmt "%-%" name value')] + [:label {:for key + :key key + :style {:background-image (when image? (str/ffmt "url(%)" image))} + :class (stl/css-case :radio-label true + :global/checked checked? + :with-image image?)} + [:input {:on-change on-change' + :type "radio" + :class (stl/css :radio-input) + :id key + :name name + :value value' + :checked checked?}] + (when (not image?) + [:span {:class (stl/css-case :radio-icon true + :global/checked checked?)} + (when checked? [:span {:class (stl/css :radio-dot)}])]) - label]))] - - - - [:div.custom-radio - (for [{:keys [image value label]} options] - (let [image? (some? image) - value' (encode-fn value) - key (str/ffmt "%-%" name value')] - [:div.input-radio {:key key :class (when image? "with-image")} - [:input {:on-change on-change' - :type "radio" - :id key - :name name - :value value' - :checked (= value current-value)}] - [:label {:for key - :style {:background-image (when image? (str/ffmt "url(%)" image))} - :class (when image? "with-image")} - label]]))]))) + label]))])) (mf/defc submit-button* {::mf/wrap-props false} @@ -393,12 +299,11 @@ on-click (unchecked-get props "onClick") children (unchecked-get props "children") - class (unchecked-get props "className") + class (d/nilv (unchecked-get props "className") "btn-primary btn-large") name (d/nilv (unchecked-get props "name") "submit") disabled? (or (and (some? form) (not (:valid @form))) (true? (unchecked-get props "disabled"))) - new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) "")) on-key-down @@ -442,8 +347,7 @@ (mf/defc multi-input [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - form (or form (mf/use-ctx form-ctx)) + (let [form (or form (mf/use-ctx form-ctx)) input-name (get props :name) touched? (get-in @form [:touched input-name]) error (get-in @form [:errors input-name]) @@ -456,17 +360,7 @@ empty? (and (str/empty? @value) (zero? (count @items))) - klass (str (get props :class) " " - (dom/classnames - :focus @focus? - :valid (and touched? (not error)) - :invalid (and touched? error) - :empty empty? - :custom-multi-input true - :custom-input true)) - - - new-css-klass (str (get props :class) " " + klass (str (get props :class) " " (stl/css-case :focus @focus? :valid (and touched? (not error)) @@ -474,11 +368,7 @@ :empty empty? :custom-multi-input true)) - in-klass (str class " " - (dom/classnames - :no-padding (pos? (count @items)))) - - new-css-in-klass (str class " " + in-klass (str class " " (stl/css-case :inside-input true :no-padding (pos? (count @items)))) @@ -549,59 +439,32 @@ values (filterv #(:valid %) values)] (update-form! values))) - (if new-css-system - [:div {:class new-css-klass} - [:input {:id (name input-name) - :class new-css-in-klass - :type "text" - :auto-focus true - :on-focus on-focus - :on-blur on-blur - :on-key-down on-key-down - :value @value - :on-change on-change - :placeholder (when empty? label)}] - [:label {:for (name input-name)} label] + [:div {:class klass} + [:input {:id (name input-name) + :class in-klass + :type "text" + :auto-focus true + :on-focus on-focus + :on-blur on-blur + :on-key-down on-key-down + :value @value + :on-change on-change + :placeholder (when empty? label)}] + [:label {:for (name input-name)} label] - (when-let [items (seq @items)] - [:div {:class (stl/css :selected-items)} - (for [item items] - [:div {:class (stl/css :selected-item) - :key (:text item) - :tab-index "0" - :on-key-down (partial manage-key-down item)} - [:span {:class (stl/css-case :around true - :invalid (not (:valid item)) - :caution (:caution item))} - [:span {:class (stl/css :text)} (:text item)] - [:button {:class (stl/css :icon) - :on-click #(remove-item! item)} i/close-refactor]]])])] - - - - [:div {:class klass} - [:input {:id (name input-name) - :class in-klass - :type "text" - :auto-focus true - :on-focus on-focus - :on-blur on-blur - :on-key-down on-key-down - :value @value - :on-change on-change - :placeholder (when empty? label)}] - [:label {:for (name input-name)} label] - - (when-let [items (seq @items)] - [:div.selected-items - (for [item items] - [:div.selected-item {:key (:text item) - :tab-index "0" - :on-key-down (partial manage-key-down item)} - [:span.around {:class (dom/classnames "invalid" (not (:valid item)) - "caution" (:caution item))} - [:span.text (:text item)] - [:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))) + (when-let [items (seq @items)] + [:div {:class (stl/css :selected-items)} + (for [item items] + [:div {:class (stl/css :selected-item) + :key (:text item) + :tab-index "0" + :on-key-down (partial manage-key-down item)} + [:span {:class (stl/css-case :around true + :invalid (not (:valid item)) + :caution (:caution item))} + [:span {:class (stl/css :text)} (:text item)] + [:button {:class (stl/css :icon) + :on-click #(remove-item! item)} i/close-refactor]]])])])) ;; --- Validators diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 5f00befbc..175cf54ed 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [rumext.v2 :as mf])) @@ -24,8 +23,7 @@ (mf/defc select [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - label-index (mf/with-memo [options] + (let [label-index (mf/with-memo [options] (into {} (map as-key-value) options)) state* (mf/use-state @@ -83,53 +81,33 @@ (mf/with-effect [default-value] (swap! state* assoc :current-value default-value)) - (if new-css-system - [:div {:on-click open-dropdown - :class (dm/str class " " (stl/css-case :custom-select true - :disabled disabled))} - (let [selected-option (first (filter #(= (:value %) default-value) options)) - current-icon (:icon selected-option) - current-icon-ref (i/key->icon current-icon)] - (when (and current-icon current-icon-ref) - [:span {:class (stl/css :current-icon)} @current-icon-ref])) - [:span {:class (stl/css :current-label)} current-label] - [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] - [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} - (for [[index item] (d/enumerate options)] - (if (= :separator item) - [:li {:class (dom/classnames (stl/css :separator) true) - :key (dm/str current-id "-" index)}] - (let [[value label icon] (as-key-value item) - icon-ref (i/key->icon icon)] - [:li - {:key (dm/str current-id "-" index) - :class (dom/classnames - (stl/css :checked-element) true - (stl/css :is-selected) (= value current-value)) - :data-value (pr-str value) - :on-pointer-enter highlight-item - :on-pointer-leave unhighlight-item - :on-click select-item} - (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) - [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]] - - [:div.custom-select {:on-click open-dropdown :class class} - [:span current-label] - [:span.dropdown-button i/arrow-down] - [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul.custom-select-dropdown - (for [[index item] (d/enumerate options)] - (if (= :separator item) - [:hr {:key (dm/str current-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li.checked-element - {:key (dm/str current-id "-" index) - :class (when (= value current-value) "is-selected") - :data-value (pr-str value) - :on-pointer-enter highlight-item - :on-pointer-leave unhighlight-item - :on-click select-item} - [:span.check-icon i/tick] - [:span label]])))]]]))) + [:div {:on-click open-dropdown + :class (dm/str class " " (stl/css-case :custom-select true + :disabled disabled))} + (let [selected-option (first (filter #(= (:value %) default-value) options)) + current-icon (:icon selected-option) + current-icon-ref (i/key->icon current-icon)] + (when (and current-icon current-icon-ref) + [:span {:class (stl/css :current-icon)} @current-icon-ref])) + [:span {:class (stl/css :current-label)} current-label] + [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] + [:& dropdown {:show is-open? :on-close close-dropdown} + [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} + (for [[index item] (d/enumerate options)] + (if (= :separator item) + [:li {:class (dom/classnames (stl/css :separator) true) + :key (dm/str current-id "-" index)}] + (let [[value label icon] (as-key-value item) + icon-ref (i/key->icon icon)] + [:li + {:key (dm/str current-id "-" index) + :class (dom/classnames + (stl/css :checked-element) true + (stl/css :is-selected) (= value current-value)) + :data-value (pr-str value) + :on-pointer-enter highlight-item + :on-pointer-leave unhighlight-item + :on-click select-item} + (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) + [:span {:class (stl/css :label)} label] + [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])) diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index a365ce9f3..0694361ba 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -23,7 +23,6 @@ (def libraries (mf/create-context nil)) (def components-v2 (mf/create-context nil)) -(def new-css-system (mf/create-context nil)) (def current-scroll (mf/create-context nil)) (def current-zoom (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index a7eb37a45..0c59faa26 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -8,9 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.data.modal :as dm] - [app.main.features :as features] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.util.dom :as dom] [app.util.keyboard :as k] [goog.events :as events] @@ -86,9 +84,7 @@ (mf/defc modal {::mf/wrap-props false} [] - (let [modal (mf/deref modal-ref) - new-css-system (features/use-feature "styles/v2")] + (let [modal (mf/deref modal-ref)] (when modal - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - [:& modal-wrapper {:data modal - :key (:id modal)}]]))) + [:& modal-wrapper {:data modal + :key (:id modal)}]))) diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index 04ae73491..e0f9a4581 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -7,9 +7,7 @@ (ns app.main.ui.static (:require-macros [app.main.style :as stl]) (:require - [app.main.features :as features] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.globals :as globals] [app.util.i18n :refer [tr]] @@ -81,16 +79,14 @@ (mf/defc exception-page [{:keys [data] :as props}] - (let [new-css-system (features/use-feature "styles/v2")] - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - (case (:type data) - :not-found - [:& not-found] + (case (:type data) + :not-found + [:& not-found] - :bad-gateway - [:& bad-gateway] + :bad-gateway + [:& bad-gateway] - :service-unavailable - [:& service-unavailable] + :service-unavailable + [:& service-unavailable] - [:& internal-error])])) + [:& internal-error])) diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index 9624d480d..d65351834 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.main.data.viewer :as dv] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]] [app.main.ui.viewer.inspect.render :refer [render-frame-svg]] @@ -42,8 +41,7 @@ (mf/defc viewport [{:keys [local file page frame index viewer-pagination size share-id]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - inspect-svg-container-ref (mf/use-ref nil) + (let [inspect-svg-container-ref (mf/use-ref nil) current-section* (mf/use-state :info) current-section (deref current-section*) @@ -92,60 +90,32 @@ (fn [] (st/emit! (dv/select-shape (:id frame))))) - (if new-css-system - [:* - [:& left-sidebar {:frame frame - :local local - :page page}] - [:div {:class (stl/css :inspect-svg-wrapper) - :data-value (pr-str (:id frame)) - :on-click handle-select-frame} - [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] - [:div {:class (stl/css :inspect-svg-container) - :ref inspect-svg-container-ref} - [:& render-frame-svg {:frame frame :page page :local local :size size}]]] + [:* + [:& left-sidebar {:frame frame + :local local + :page page}] + [:div {:class (stl/css :inspect-svg-wrapper) + :data-value (pr-str (:id frame)) + :on-click handle-select-frame} + [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] + [:div {:class (stl/css :inspect-svg-container) + :ref inspect-svg-container-ref} + [:& render-frame-svg {:frame frame :page page :local local :size size}]]] - [:div {:class (stl/css-case :sidebar-container true - :not-expand (not can-be-expanded?) - :expanded can-be-expanded?) + [:div {:class (stl/css-case :sidebar-container true + :not-expand (not can-be-expanded?) + :expanded can-be-expanded?) - :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} - (when can-be-expanded? - [:div {:class (stl/css :resize-area) - :on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}]) - [:& right-sidebar {:frame frame - :selected (:selected local) - :page page - :file file - :on-change-section handle-change-section - :on-expand handle-expand - :share-id share-id}]]] - - - ;;OLD - [:* - [:& left-sidebar {:frame frame - :local local - :page page}] - [:div.inspect-svg-wrapper {:data-value (pr-str (:id frame)) - :on-click handle-select-frame} - [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] - [:div.inspect-svg-container {:ref inspect-svg-container-ref} - [:& render-frame-svg {:frame frame :page page :local local :size size}]]] - - [:div.sidebar-container - {:class (when (not can-be-expanded?) "not-expand") - :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} - [:div.resize-area - {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}] - [:& right-sidebar {:frame frame - :selected (:selected local) - :page page - :file file - :on-change-section handle-change-section - :on-expand handle-expand - :share-id share-id}]]]))) + :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} + (when can-be-expanded? + [:div {:class (stl/css :resize-area) + :on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move}]) + [:& right-sidebar {:frame frame + :selected (:selected local) + :page page + :file file + :on-change-section handle-change-section + :on-expand handle-expand + :share-id share-id}]]])) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index 5f23fd798..eb5548f54 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -10,7 +10,6 @@ [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) diff --git a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs index 51c3d9dc7..f546a9352 100644 --- a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs @@ -9,17 +9,9 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.files.helpers :as cfh] - [app.common.types.component :as ctk] - [app.common.types.shape.layout :as ctl] [app.main.data.viewer :as dv] - [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.shape-icon :as si] - [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]] - [app.main.ui.workspace.sidebar.layer-name :refer [layer-name]] [app.util.dom :as dom] [app.util.keyboard :as kbd] [okulary.core :as l] @@ -31,24 +23,13 @@ (l/derived st/state))) (mf/defc layer-item - [{:keys [item selected objects disable-collapse? depth component-child? hide-toggle?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - id (:id item) - name (:name item) + [{:keys [item selected objects depth component-child? hide-toggle?] :as props}] + (let [id (:id item) hidden? (:hidden item) - touched? (-> item :touched seq boolean) selected? (contains? selected id) item-ref (mf/use-ref nil) depth (+ depth 1) - file (mf/deref refs/viewer-file) - components-v2 (dm/get-in file [:data :options :components-v2]) - - main-instance? - (if components-v2 - (ctk/main-instance? item) - true) - component-tree? (or component-child? (:component-root item)) collapsed-iref @@ -57,7 +38,6 @@ (make-collapsed-iref id)) expanded? (not (mf/deref collapsed-iref)) - absolute? (ctl/item-absolute? item) toggle-collapse (mf/use-callback @@ -87,102 +67,50 @@ (when (and (= (count selected) 1) selected?) (dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true)))) - (if new-css-system - [:& layer-item-inner - {:ref item-ref - :item item - :depth depth - :read-only? true - :highlighted? false - :selected? selected? - :component-tree? component-tree? - :hidden? hidden? - :filtered? false - :expanded? expanded? - :hide-toggle? hide-toggle? - :on-select-shape select-shape - :on-toggle-collapse toggle-collapse} + [:& layer-item-inner + {:ref item-ref + :item item + :depth depth + :read-only? true + :highlighted? false + :selected? selected? + :component-tree? component-tree? + :hidden? hidden? + :filtered? false + :expanded? expanded? + :hide-toggle? hide-toggle? + :on-select-shape select-shape + :on-toggle-collapse toggle-collapse} - (when (and (:shapes item) expanded?) - [:div {:class (stl/css-case - :element-children true - :parent-selected selected?)} - (for [[index id] (reverse (d/enumerate (:shapes item)))] - (when-let [item (get objects id)] - [:& layer-item - {:item item - :selected selected - :index index - :objects objects - :key (dm/str id) - :depth depth - :component-child? component-tree?}]))])] - - ;; OLD - [:li {:ref item-ref - :class (dom/classnames - :component (not (nil? (:component-id item))) - :masked (:masked-group item) - :selected selected?)} - - [:div.element-list-body {:class (dom/classnames :selected selected? - :icon-layer (= (:type item) :icon)) - :on-click select-shape} - [:div.icon - (when absolute? - [:div.absolute i/position-absolute]) - [:& si/element-icon {:shape item :main-instance? main-instance?}]] - [:& layer-name {:shape-id id - :shape-name name - :shape-touched? touched? - :hidden? hidden? - :selected? selected? - :type-frame (cfh/frame-shape? item) - :disabled-double-click true}] - - (when (and (not disable-collapse?) (:shapes item)) - [:span.toggle-content - {:on-click toggle-collapse - :class (when expanded? "inverse")} - i/arrow-slide])] - - (when (and (:shapes item) expanded?) - [:ul.element-children - (for [[index id] (reverse (d/enumerate (:shapes item)))] - (when-let [item (get objects id)] - [:& layer-item - {:item item - :selected selected - :index index - :objects objects - :key (:id item)}]))])]))) + (when (and (:shapes item) expanded?) + [:div {:class (stl/css-case + :element-children true + :parent-selected selected?)} + (for [[index id] (reverse (d/enumerate (:shapes item)))] + (when-let [item (get objects id)] + [:& layer-item + {:item item + :selected selected + :index index + :objects objects + :key (dm/str id) + :depth depth + :component-child? component-tree?}]))])])) (mf/defc left-sidebar [{:keys [frame page local]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - selected (:selected local) + (let [selected (:selected local) objects (:objects page)] - (if new-css-system - [:aside {:class (stl/css :settings-bar-left)} - [:div {:class (stl/css :settings-bar-inside)} - [:div {:class (stl/css :element-list)} - [:& layer-item - {:item frame - :selected selected - :index 0 - :objects objects - :sortable? false - :filtered? false - :depth -2 - :hide-toggle? true}]]]] - - [:aside.settings-bar.settings-bar-left - [:div.settings-bar-inside - [:ul.element-list - [:& layer-item - {:item frame - :selected selected - :index 0 - :objects objects - :disable-collapse? true}]]]]))) + [:aside {:class (stl/css :settings-bar-left)} + [:div {:class (stl/css :settings-bar-inside)} + [:div {:class (stl/css :element-list)} + [:& layer-item + {:item frame + :selected selected + :index 0 + :objects objects + :sortable? false + :filtered? false + :depth -2 + :hide-toggle? true}]]]])) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index ff447eb01..c12f88a18 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -175,7 +175,6 @@ file-ready? (mf/deref file-ready*) components-v2? (features/use-feature "components/v2") - new-css-system (features/use-feature "styles/v2") background-color (:background-color wglobal)] @@ -201,16 +200,15 @@ [:& (mf/provider ctx/current-team-id) {:value team-id} [:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/components-v2) {:value components-v2?} - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} - [:section#workspace-refactor {:class (stl/css :workspace) - :style {:background-color background-color - :touch-action "none"}} - [:& context-menu] + [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} + [:section#workspace-refactor {:class (stl/css :workspace) + :style {:background-color background-color + :touch-action "none"}} + [:& context-menu] - (if ^boolean file-ready? - [:& workspace-page {:page-id page-id - :file file - :wglobal wglobal - :layout layout}] - [:& workspace-loader])]]]]]]]])) + (if ^boolean file-ready? + [:& workspace-page {:page-id page-id + :file file + :wglobal wglobal + :layout layout}] + [:& workspace-loader])]]]]]]])) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 5164a8f04..e8a74b563 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -16,7 +16,6 @@ [app.common.uuid :as uuid] [app.main.data.modal :as modal] [app.main.data.workspace.libraries :as dwl] - [app.main.features :as features] [app.main.refs :as refs] [app.main.render :refer [component-svg]] [app.main.store :as st] @@ -25,12 +24,10 @@ [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [app.util.keyboard :as kbd] [app.util.strings :refer [matches-search]] [cuerdas.core :as str] [okulary.core :as l] @@ -104,28 +101,12 @@ [:span {:class (stl/css :element-count)} (tr "workspace.libraries.typography" typography-count)])])) -(defn- describe-linked-library - [library] - (let [components-count (count (or (ctkl/components-seq (:data library)) [])) - graphics-count (count (dm/get-in library [:data :media] [])) - colors-count (count (dm/get-in library [:data :colors] [])) - typography-count (count (dm/get-in library [:data :typographies] []))] - (describe-library components-count graphics-count colors-count typography-count))) - -(defn- describe-external-library - [library] - (let [components-count (dm/get-in library [:library-summary :components :count] 0) - graphics-count (dm/get-in library [:library-summary :media :count] 0) - colors-count (dm/get-in library [:library-summary :colors :count] 0) - typography-count (dm/get-in library [:library-summary :typographies :count] 0)] - (describe-library components-count graphics-count colors-count typography-count))) (mf/defc libraries-tab {::mf/wrap-props false} [{:keys [file-id shared? linked-libraries shared-libraries]}] (let [search-term* (mf/use-state "") search-term (deref search-term*) - new-css-system (mf/use-ctx ctx/new-css-system) library-ref (mf/with-memo [file-id] (create-file-library-ref file-id)) library (deref library-ref) @@ -155,41 +136,25 @@ change-search-term (mf/use-fn - (mf/deps new-css-system) (fn [event] - (let [value (if new-css-system - event - (-> (dom/get-target event) - (dom/get-value)))] - (reset! search-term* value)))) - - clear-search-term - (mf/use-fn #(reset! search-term* "")) + (reset! search-term* event))) link-library (mf/use-fn - (mf/deps file-id new-css-system) + (mf/deps file-id) (fn [event] - (let [library-id (if new-css-system - (some-> (dom/get-current-target event) - (dom/get-data "library-id") - (parse-uuid)) - (some-> (dom/get-target event) - (dom/get-data "library-id") - (parse-uuid)))] + (let [library-id (some-> (dom/get-current-target event) + (dom/get-data "library-id") + (parse-uuid))] (st/emit! (dwl/link-file-to-library file-id library-id))))) unlink-library (mf/use-fn (mf/deps file-id) (fn [event] - (let [library-id (if new-css-system - (some-> (dom/get-current-target event) - (dom/get-data "library-id") - (parse-uuid)) - (some-> (dom/get-target event) - (dom/get-data "library-id") - (parse-uuid)))] + (let [library-id (some-> (dom/get-current-target event) + (dom/get-data "library-id") + (parse-uuid))] (st/emit! (dwl/unlink-file-from-library file-id library-id) (dwl/sync-file file-id library-id))))) @@ -230,170 +195,92 @@ :origin :unpublish :on-accept on-delete-accept :on-cancel on-delete-cancel - :count-libraries 1})))) + :count-libraries 1}))))] - handle-key-down - (mf/use-fn - (fn [event] - (let [enter? (kbd/enter? event) - esc? (kbd/esc? event) - input-node (dom/get-target event)] - (when ^boolean enter? - (dom/blur! input-node)) - (when ^boolean esc? - (dom/blur! input-node)))))] + [:* + [:div {:class (stl/css :section)} + [:& title-bar {:collapsable? false + :title (tr "workspace.libraries.in-this-file") + :class (stl/css :title-spacing-lib)}] + [:div {:class (stl/css :section-list)} - (if new-css-system - [:* - [:div {:class (stl/css :section)} - [:& title-bar {:collapsable? false - :title (tr "workspace.libraries.in-this-file") - :class (stl/css :title-spacing-lib)}] - [:div {:class (stl/css :section-list)} + [:div {:class (stl/css :section-list-item)} + [:div + [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] + [:div {:class (stl/css :item-contents)} + [:& describe-library-blocks {:components-count (count components) + :graphics-count (count media) + :colors-count (count colors) + :typography-count (count typographies)}]]] + [:div + (if ^boolean shared? + [:input {:class (stl/css :item-unpublish) + :type "button" + :value (tr "common.unpublish") + :on-click unpublish}] + [:input {:class (stl/css :item-publish) + :type "button" + :value (tr "common.publish") + :on-click publish}])]] - [:div {:class (stl/css :section-list-item)} + (for [{:keys [id name] :as library} linked-libraries] + [:div {:class (stl/css :section-list-item) + :key (dm/str id)} [:div - [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] + [:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-contents)} - [:& describe-library-blocks {:components-count (count components) - :graphics-count (count media) - :colors-count (count colors) - :typography-count (count typographies)}]]] - [:div - (if ^boolean shared? - [:input {:class (stl/css :item-unpublish) - :type "button" - :value (tr "common.unpublish") - :on-click unpublish}] - [:input {:class (stl/css :item-publish) - :type "button" - :value (tr "common.publish") - :on-click publish}])]] + (let [components-count (count (or (ctkl/components-seq (:data library)) [])) + graphics-count (count (dm/get-in library [:data :media] [])) + colors-count (count (dm/get-in library [:data :colors] [])) + typography-count (count (dm/get-in library [:data :typographies] []))] + [:& describe-library-blocks {:components-count components-count + :graphics-count graphics-count + :colors-count colors-count + :typography-count typography-count}])]] - (for [{:keys [id name] :as library} linked-libraries] + [:button {:class (stl/css :item-button) + :type "button" + :data-library-id (dm/str id) + :on-click unlink-library} + i/detach-refactor]])]] + + [:div {:class (stl/css :section)} + [:& title-bar {:collapsable? false + :title (tr "workspace.libraries.shared-libraries") + :class (stl/css :title-spacing-lib)}] + [:div {:class (stl/css :libraries-search)} + [:& search-bar {:on-change change-search-term + :value search-term + :placeholder (tr "workspace.libraries.search-shared-libraries") + :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] + + (if (seq shared-libraries) + [:div {:class (stl/css :section-list-shared)} + (for [{:keys [id name] :as library} shared-libraries] [:div {:class (stl/css :section-list-item) :key (dm/str id)} [:div [:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-contents)} - (let [components-count (count (or (ctkl/components-seq (:data library)) [])) - graphics-count (count (dm/get-in library [:data :media] [])) - colors-count (count (dm/get-in library [:data :colors] [])) - typography-count (count (dm/get-in library [:data :typographies] []))] + (let [components-count (dm/get-in library [:library-summary :components :count] 0) + graphics-count (dm/get-in library [:library-summary :media :count] 0) + colors-count (dm/get-in library [:library-summary :colors :count] 0) + typography-count (dm/get-in library [:library-summary :typographies :count] 0)] [:& describe-library-blocks {:components-count components-count :graphics-count graphics-count :colors-count colors-count :typography-count typography-count}])]] - - [:button {:class (stl/css :item-button) - :type "button" + [:button {:class (stl/css :item-button-shared) :data-library-id (dm/str id) - :on-click unlink-library} - i/detach-refactor]])]] + :on-click link-library} + i/add-refactor]])] - [:div {:class (stl/css :section)} - [:& title-bar {:collapsable? false - :title (tr "workspace.libraries.shared-libraries") - :class (stl/css :title-spacing-lib)}] - [:div {:class (stl/css :libraries-search)} - [:& search-bar {:on-change change-search-term - :value search-term - :placeholder (tr "workspace.libraries.search-shared-libraries") - :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] - - (if (seq shared-libraries) - [:div {:class (stl/css :section-list-shared)} - (for [{:keys [id name] :as library} shared-libraries] - [:div {:class (stl/css :section-list-item) - :key (dm/str id)} - [:div - [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} - (let [components-count (dm/get-in library [:library-summary :components :count] 0) - graphics-count (dm/get-in library [:library-summary :media :count] 0) - colors-count (dm/get-in library [:library-summary :colors :count] 0) - typography-count (dm/get-in library [:library-summary :typographies :count] 0)] - [:& describe-library-blocks {:components-count components-count - :graphics-count graphics-count - :colors-count colors-count - :typography-count typography-count}])]] - [:button {:class (stl/css :item-button-shared) - :data-library-id (dm/str id) - :on-click link-library} - i/add-refactor]])] - - [:div {:class (stl/css :section-list-empty)} - (if (nil? shared-libraries) - i/loader-pencil - (if (str/empty? search-term) - (tr "workspace.libraries.no-shared-libraries-available") - (tr "workspace.libraries.no-matches-for" search-term)))])]] - - [:* - [:div.section - [:div.section-title (tr "workspace.libraries.in-this-file")] - [:div.section-list - - [:div.section-list-item - [:div - [:div.item-name (tr "workspace.libraries.file-library")] - [:div.item-contents (describe-library - (count components) - (count media) - (count colors) - (count typographies))]] - [:div - (if ^boolean shared? - [:input.item-button {:type "button" - :value (tr "common.unpublish") - :on-click unpublish}] - [:input.item-button {:type "button" - :value (tr "common.publish") - :on-click publish}])]] - - (for [{:keys [id name] :as library} linked-libraries] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-linked-library library)] - [:input.item-button {:type "button" - :value (tr "labels.remove") - :data-library-id (dm/str id) - :on-click unlink-library}]])]] - - [:div.section - [:div.section-title (tr "workspace.libraries.shared-libraries")] - [:div.libraries-search - [:input.search-input - {:placeholder (tr "workspace.libraries.search-shared-libraries") - :type "text" - :value search-term - :on-change change-search-term - :on-key-down handle-key-down}] - (if (str/empty? search-term) - [:div.search-icon - i/search] - [:div.search-icon.search-close - {:on-click clear-search-term} - i/close])] - - (if (seq shared-libraries) - [:div.section-list - (for [{:keys [id name] :as library} shared-libraries] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-external-library library)] - [:input.item-button {:type "button" - :value (tr "workspace.libraries.add") - :data-library-id (dm/str id) - :on-click link-library}]])] - - [:div.section-list-empty - (if (nil? shared-libraries) - i/loader-pencil - [:* i/library - (if (str/empty? search-term) - (tr "workspace.libraries.no-shared-libraries-available") - (tr "workspace.libraries.no-matches-for" search-term))])])]]))) + [:div {:class (stl/css :section-list-empty)} + (if (nil? shared-libraries) + i/loader-pencil + (if (str/empty? search-term) + (tr "workspace.libraries.no-shared-libraries-available") + (tr "workspace.libraries.no-matches-for" search-term)))])]])) (defn- extract-assets [file-data library summary?] @@ -457,8 +344,6 @@ (seq colors) (seq typographies)))))) - new-css-system (mf/use-ctx ctx/new-css-system) - update (mf/use-fn (mf/deps file-id) (fn [event] @@ -470,203 +355,111 @@ (dwl/set-updating-library true) (dwl/sync-file file-id library-id))))))] - (if new-css-system - [:div {:class (stl/css :section)} - (if (empty? libs-assets) - [:div {:class (stl/css :section-list-empty)} - (tr "workspace.libraries.no-libraries-need-sync")] - [:* - [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")] + [:div {:class (stl/css :section)} + (if (empty? libs-assets) + [:div {:class (stl/css :section-list-empty)} + (tr "workspace.libraries.no-libraries-need-sync")] + [:* + [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")] - [:div {:class (stl/css :section-list)} - (for [[{:keys [id name] :as library} - exceeded - {:keys [components colors typographies]}] libs-assets] - [:div {:class (stl/css :section-list-item) - :key (dm/str id)} - [:div - [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} (describe-library - (count components) - 0 - (count colors) - (count typographies))]] - [:input {:type "button" - :class (stl/css-case :item-update true - :disabled updating?) - :value (tr "workspace.libraries.update") - :data-library-id (dm/str id) - :on-click update}] + [:div {:class (stl/css :section-list)} + (for [[{:keys [id name] :as library} + exceeded + {:keys [components colors typographies]}] libs-assets] + [:div {:class (stl/css :section-list-item) + :key (dm/str id)} + [:div + [:div {:class (stl/css :item-name)} name] + [:div {:class (stl/css :item-contents)} (describe-library + (count components) + 0 + (count colors) + (count typographies))]] + [:input {:type "button" + :class (stl/css-case :item-update true + :disabled updating?) + :value (tr "workspace.libraries.update") + :data-library-id (dm/str id) + :on-click update}] - [:div {:class (stl/css :libraries-updates)} - (when-not (empty? components) - [:div {:class (stl/css :libraries-updates-column)} - (for [component components] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id component))} - (let [component (ctf/load-component-objects (:data library) component) - root-shape (ctf/get-component-root (:data library) component)] - [:* - [:& component-svg {:root-shape root-shape - :objects (:objects component)}] - [:div {:class (stl/css :name-block)} - [:span {:class (stl/css :item-name) - :title (:name component)} - (:name component)]]])]) - (when (:components exceeded) - [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])]) - - (when-not (empty? colors) - [:div {:class (stl/css :libraries-updates-column) - :style #js {"--bullet-size" "24px"}} - (for [color colors] - (let [default-name (cond - (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) - (:color color) (:color color) - :else (:value color))] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id color))} - [:* - [:& bc/color-bullet {:color {:color (:color color) - :opacity (:opacity color)}}] - [:div {:class (stl/css :name-block)} - [:span {:class (stl/css :item-name) - :title (:name color)} - (:name color)] - (when-not (= (:name color) default-name) - [:span.color-value (:color color)])]]])) - (when (:colors exceeded) - [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])]) - - (when-not (empty? typographies) - [:div {:class (stl/css :libraries-updates-column)} - (for [typography typographies] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id typography))} + [:div {:class (stl/css :libraries-updates)} + (when-not (empty? components) + [:div {:class (stl/css :libraries-updates-column)} + (for [component components] + [:div {:class (stl/css :libraries-updates-item) + :key (dm/str (:id component))} + (let [component (ctf/load-component-objects (:data library) component) + root-shape (ctf/get-component-root (:data library) component)] [:* - [:div {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] + [:& component-svg {:root-shape root-shape + :objects (:objects component)}] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name) - :title (:name typography)} - (:name typography)]]]]) - (when (:typographies exceeded) + :title (:name component)} + (:name component)]]])]) + (when (:components exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])]) + + (when-not (empty? colors) + [:div {:class (stl/css :libraries-updates-column) + :style #js {"--bullet-size" "24px"}} + (for [color colors] + (let [default-name (cond + (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) + (:color color) (:color color) + :else (:value color))] [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])])] - - (when (or (pos? (:components exceeded)) - (pos? (:colors exceeded)) - (pos? (:typographies exceeded))) - [:div {:class (stl/css :libraries-updates-see-all)} - [:& lb/link-button {:on-click see-all-assets - :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])] - - [:div.section - (if (empty? libs-assets) - [:div.section-list-empty - i/library - (tr "workspace.libraries.no-libraries-need-sync")] - [:* - [:div.section-title (tr "workspace.libraries.library-updates")] - - [:div.section-list - (for [[{:keys [id name] :as library} - exceeded - {:keys [components colors typographies]}] libs-assets] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-library - (count components) - 0 - (count colors) - (count typographies))] - [:input.item-button.item-update {:type "button" - :class (stl/css-case new-css-system - :disabled updating?) - :value (tr "workspace.libraries.update") - :data-library-id (dm/str id) - :on-click update}] - - [:div.libraries-updates - (when-not (empty? components) - [:div.libraries-updates-column - (for [component components] - [:div.libraries-updates-item {:key (dm/str (:id component))} - (let [component (ctf/load-component-objects (:data library) component) - root-shape (ctf/get-component-root (:data library) component)] - [:* - [:& component-svg {:root-shape root-shape - :objects (:objects component)}] - [:div.name-block - [:span.item-name {:title (:name component)} - (:name component)]]])]) - (when (:components exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])]) - - (when-not (empty? colors) - [:div.libraries-updates-column {:style #js {"--bullet-size" "24px"}} - (for [color colors] - (let [default-name (cond - (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) - (:color color) (:color color) - :else (:value color))] - [:div.libraries-updates-item {:key (dm/str (:id color))} - [:* - [:& bc/color-bullet {:color {:color (:color color) - :opacity (:opacity color)}}] - [:div.name-block - [:span.item-name {:title (:name color)} - (:name color)] - (when-not (= (:name color) default-name) - [:span.color-value (:color color)])]]])) - (when (:colors exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])]) - - (when-not (empty? typographies) - [:div.libraries-updates-column - (for [typography typographies] - [:div.libraries-updates-item {:key (dm/str (:id typography))} + :key (dm/str (:id color))} [:* - [:div.typography-sample - {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] - [:div.name-block - [:span.item-name {:title (:name typography)} - (:name typography)]]]]) - (when (:typographies exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])])] + [:& bc/color-bullet {:color {:color (:color color) + :opacity (:opacity color)}}] + [:div {:class (stl/css :name-block)} + [:span {:class (stl/css :item-name) + :title (:name color)} + (:name color)] + (when-not (= (:name color) default-name) + [:span.color-value (:color color)])]]])) + (when (:colors exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])]) - (when (or (pos? (:components exceeded)) - (pos? (:colors exceeded)) - (pos? (:typographies exceeded))) - [:div.libraries-updates-see-all - [:& lb/link-button {:on-click see-all-assets - :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))) + (when-not (empty? typographies) + [:div {:class (stl/css :libraries-updates-column)} + (for [typography typographies] + [:div {:class (stl/css :libraries-updates-item) + :key (dm/str (:id typography))} + [:* + [:div {:style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.sample")] + [:div {:class (stl/css :name-block)} + [:span {:class (stl/css :item-name) + :title (:name typography)} + (:name typography)]]]]) + (when (:typographies exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])])] + + (when (or (pos? (:components exceeded)) + (pos? (:colors exceeded)) + (pos? (:typographies exceeded))) + [:div {:class (stl/css :libraries-updates-see-all)} + [:& lb/link-button {:on-click see-all-assets + :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])])) (mf/defc libraries-dialog {::mf/register modal/components ::mf/register-as :libraries-dialog} [{:keys [starting-tab] :as props :or {starting-tab :libraries}}] - (let [new-css-system (features/use-feature "styles/v2") - project (mf/deref refs/workspace-project) + (let [project (mf/deref refs/workspace-project) file-data (mf/deref refs/workspace-data) file (mf/deref ref:workspace-file) @@ -685,12 +478,6 @@ shared-libraries (mf/deref refs/workspace-shared-files) - select-libraries-tab - (mf/use-fn #(reset! selected-tab* :libraries)) - - select-updates-tab - (mf/use-fn #(reset! selected-tab* :updates)) - on-tab-change (mf/use-fn #(reset! selected-tab* %)) @@ -702,55 +489,29 @@ (mf/with-effect [team-id] (when team-id (st/emit! (dwl/fetch-shared-files {:team-id team-id})))) - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - (if new-css-system - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-dialog)} - [:button {:class (stl/css :close) - :on-click close-dialog} - i/close-refactor] - [:div {:class (stl/css :modal-title)} - "Libraries"] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :libraries-header)} - [:& tab-container - {:on-change-tab on-tab-change - :selected selected-tab - :collapsable? false} - [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")} - [:div {:class (stl/css :libraries-content)} - [:& libraries-tab {:file-id file-id - :shared? shared? - :linked-libraries libraries - :shared-libraries shared-libraries}]]] - [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")} - [:div {:class (stl/css :updates-content)} - [:& updates-tab {:file-id file-id - :file-data file-data - :libraries libraries}]]]]]]]] - [:div.modal-overlay - [:div.modal.libraries-dialog - [:a.close {:on-click close-dialog} i/close] - [:div.modal-content - [:div.libraries-header - [:div.header-item - {:class (stl/css-case new-css-system :active (= selected-tab :libraries)) - :on-click select-libraries-tab} - (tr "workspace.libraries.libraries")] - [:div.header-item - {:class (stl/css-case new-css-system :active (= selected-tab :updates)) - :on-click select-updates-tab} - (tr "workspace.libraries.updates")]] - [:div.libraries-content - (case selected-tab - :libraries - [:& libraries-tab {:file-id file-id - :shared? shared? - :linked-libraries libraries - :shared-libraries shared-libraries}] - :updates - [:& updates-tab {:file-id file-id - :file-data file-data - :libraries libraries}])]]]])])) + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:button {:class (stl/css :close) + :on-click close-dialog} + i/close-refactor] + [:div {:class (stl/css :modal-title)} + "Libraries"] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :libraries-header)} + [:& tab-container + {:on-change-tab on-tab-change + :selected selected-tab + :collapsable? false} + [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")} + [:div {:class (stl/css :libraries-content)} + [:& libraries-tab {:file-id file-id + :shared? shared? + :linked-libraries libraries + :shared-libraries shared-libraries}]]] + [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")} + [:div {:class (stl/css :updates-content)} + [:& updates-tab {:file-id file-id + :file-data file-data + :libraries libraries}]]]]]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs index 0bb270ec3..45d2a1535 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.assets.graphics - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -46,7 +46,6 @@ dragging? (deref dragging*) read-only? (mf/use-ctx ctx/workspace-read-only?) - new-css-system (mf/use-ctx ctx/new-css-system) on-drop (mf/use-fn @@ -84,90 +83,49 @@ (mf/use-fn (mf/deps object-id on-asset-click) (partial on-asset-click object-id nil))] - (if ^boolean new-css-system - [:div {:ref item-ref - :class-name (dom/classnames - (css :selected) (contains? selected-objects object-id) - (css :grid-cell) listing-thumbs? - (css :enum-item) (not listing-thumbs?)) - :draggable (not read-only?) - :on-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-grahic-drag-start - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} + [:div {:ref item-ref + :class-name (stl/css-case + :selected (contains? selected-objects object-id) + :grid-cell listing-thumbs? + :enum-item (not listing-thumbs?)) + :draggable (not read-only?) + :on-click on-asset-click + :on-context-menu on-context-menu + :on-drag-start on-grahic-drag-start + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} - (when visible? - [:* - [:img {:src (when visible? (cf/resolve-file-media object true)) - :class (css :graphic-image) - :draggable false}] ;; Also need to add css pointer-events: none + (when visible? + [:* + [:img {:src (when visible? (cf/resolve-file-media object true)) + :class (stl/css :graphic-image) + :draggable false}] ;; Also need to add css pointer-events: none - (let [renaming? (= renaming (:id object))] - [:* - [:& editable-label - {:class (dom/classnames - (css :cell-name) listing-thumbs? - (css :item-name) (not listing-thumbs?) - (css :editing) renaming?) - :value (cfh/merge-path-item (:path object) (:name object)) - :tooltip (cfh/merge-path-item (:path object) (:name object)) - :display-value (:name object) - :editing renaming? - :disable-dbl-click true - :on-change do-rename - :on-cancel cancel-rename}] + (let [renaming? (= renaming (:id object))] + [:* + [:& editable-label + {:class (stl/css-case + :cell-name listing-thumbs? + :item-name (not listing-thumbs?) + :editing renaming?) + :value (cfh/merge-path-item (:path object) (:name object)) + :tooltip (cfh/merge-path-item (:path object) (:name object)) + :display-value (:name object) + :editing renaming? + :disable-dbl-click true + :on-change do-rename + :on-cancel cancel-rename}] - (when ^boolean dragging? - [:div {:class (dom/classnames (css :dragging) true)}])])])] - - [:div {:ref item-ref - :class-name (dom/classnames - :selected (contains? selected-objects object-id) - :grid-cell listing-thumbs? - :enum-item (not listing-thumbs?)) - :draggable (not read-only?) - :on-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-grahic-drag-start - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - - (when visible? - [:* - [:img {:src (when visible? (cf/resolve-file-media object true)) - :loading "lazy" - :decoding "async" - :draggable false}] ;; Also need to add css pointer-events: none - - (let [renaming? (= renaming (:id object))] - [:* - [:& editable-label - {:class (dom/classnames - :cell-name listing-thumbs? - :item-name (not listing-thumbs?) - :editing renaming?) - :value (cfh/merge-path-item (:path object) (:name object)) - :tooltip (cfh/merge-path-item (:path object) (:name object)) - :display-value (:name object) - :editing renaming? - :disable-dbl-click true - :on-change do-rename - :on-cancel cancel-rename}] - - (when ^boolean dragging? - [:div.dragging])])])]))) + (when ^boolean dragging? + [:div {:class (stl/css :dragging)}])])])])) (mf/defc graphics-group [{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected-objects on-asset-click on-drag-start do-rename cancel-rename on-rename-group on-ungroup on-context-menu selected-full]}] (let [group-open? (get open-groups prefix true) - new-css-system (mf/use-ctx ctx/new-css-system) dragging* (mf/use-state false) dragging? (deref dragging*) @@ -194,143 +152,75 @@ (mf/deps dragging* prefix selected-paths selected-full) (fn [event] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-media)))] - (if ^boolean new-css-system - [:div {:class (dom/classnames (css :graphics-group) true) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - [:& grp/asset-group-title - {:file-id file-id - :section :graphics - :path prefix - :group-open? group-open? - :on-rename on-rename-group - :on-ungroup on-ungroup}] - (when group-open? - [:* - (let [objects (get groups "" [])] - [:div {:class-name (dom/classnames - (css :asset-grid) listing-thumbs? - (css :asset-enum) (not listing-thumbs?) - (css :drop-space) (and - (empty? objects) - (some? groups) - (not dragging?))) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} + [:div {:class (stl/css :graphics-group) + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} + [:& grp/asset-group-title + {:file-id file-id + :section :graphics + :path prefix + :group-open? group-open? + :on-rename on-rename-group + :on-ungroup on-ungroup}] + (when group-open? + [:* + (let [objects (get groups "" [])] + [:div {:class-name (stl/css-case + :asset-grid listing-thumbs? + :asset-enum (not listing-thumbs?) + :drop-space (and + (empty? objects) + (some? groups) + (not dragging?))) + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} - (when ^boolean dragging? - [:div {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"]) + (when ^boolean dragging? + [:div {:class (stl/css :grid-placeholder)} "\u00A0"]) - (when (and (empty? objects) - (some? groups)) - [:div {:class (dom/classnames (css :drop-space) true)}]) + (when (and (empty? objects) + (some? groups)) + [:div {:class (stl/css :drop-space)}]) - (for [object objects] - [:& graphics-item - {:key (dm/str "object-" (:id object)) - :file-id file-id - :object object - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :selected-full selected-full - :selected-paths selected-paths}])]) - (for [[path-item content] groups] - (when-not (empty? path-item) - [:& graphics-group {:file-id file-id - :key path-item - :prefix (cfh/merge-path-item prefix path-item) - :groups content - :open-groups open-groups - :force-open? force-open? - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full - :selected-paths selected-paths}]))])] - - [:div {:on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - [:& grp/asset-group-title {:file-id file-id - :section :graphics - :path prefix - :group-open? group-open? - :on-rename on-rename-group - :on-ungroup on-ungroup}] - (when group-open? - [:* - (let [objects (get groups "" [])] - [:div {:class-name (dom/classnames - :asset-grid listing-thumbs? - :asset-enum (not listing-thumbs?) - :drop-space (and - (empty? objects) - (some? groups) - (not dragging?))) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - - (when ^boolean dragging? - [:div.grid-placeholder "\u00A0"]) - - (when (and (empty? objects) - (some? groups)) - [:div.drop-space]) - - (for [object objects] - [:& graphics-item {:key (dm/str "object-" (:id object)) - :file-id file-id - :object object - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :selected-full selected-full - :selected-paths selected-paths}])]) - (for [[path-item content] groups] - (when-not (empty? path-item) - [:& graphics-group {:file-id file-id - :key path-item - :prefix (cfh/merge-path-item prefix path-item) - :groups content - :open-groups open-groups - :force-open? force-open? - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full - :selected-paths selected-paths}]))])]))) + (for [object objects] + [:& graphics-item + {:key (dm/str "object-" (:id object)) + :file-id file-id + :object object + :renaming renaming + :listing-thumbs? listing-thumbs? + :selected-objects selected-objects + :on-asset-click on-asset-click + :on-context-menu on-context-menu + :on-drag-start on-drag-start + :do-rename do-rename + :cancel-rename cancel-rename + :selected-full selected-full + :selected-paths selected-paths}])]) + (for [[path-item content] groups] + (when-not (empty? path-item) + [:& graphics-group {:file-id file-id + :key path-item + :prefix (cfh/merge-path-item prefix path-item) + :groups content + :open-groups open-groups + :force-open? force-open? + :renaming renaming + :listing-thumbs? listing-thumbs? + :selected-objects selected-objects + :on-asset-click on-asset-click + :on-drag-start on-drag-start + :do-rename do-rename + :cancel-rename cancel-rename + :on-rename-group on-rename-group + :on-ungroup on-ungroup + :on-context-menu on-context-menu + :selected-full selected-full + :selected-paths selected-paths}]))])])) (mf/defc graphics-section {::mf/wrap-props false} @@ -362,7 +252,6 @@ components-v2 (mf/use-ctx ctx/components-v2) team-id (mf/use-ctx ctx/current-team-id) - new-css-system (mf/use-ctx ctx/new-css-system) add-graphic (mf/use-fn @@ -496,26 +385,16 @@ :section :graphics :assets-count (count objects) :open? open?} - (if new-css-system - (when local? - [:& cmm/asset-section-block {:role :title-button} - (when (and (not components-v2) (not read-only?)) - [:button {:class (dom/classnames (css :assets-btn) true) - :on-click add-graphic} - i/add-refactor - [:& file-uploader {:accept cm/str-image-types - :multi true - :ref input-ref - :on-selected on-file-selected}]])]) - (when local? - [:& cmm/asset-section-block {:role :title-button} - (when (and (not components-v2) (not read-only?)) - [:div.assets-button {:on-click add-graphic} - i/plus - [:& file-uploader {:accept cm/str-image-types - :multi true - :ref input-ref - :on-selected on-file-selected}]])])) + (when local? + [:& cmm/asset-section-block {:role :title-button} + (when (and (not components-v2) (not read-only?)) + [:button {:class (stl/css :assets-btn) + :on-click add-graphic} + i/add-refactor + [:& file-uploader {:accept cm/str-image-types + :multi true + :ref input-ref + :on-selected on-file-selected}]])]) [:& cmm/asset-section-block {:role :content} [:& graphics-group {:file-id file-id @@ -538,21 +417,14 @@ [:& cmm/assets-context-menu {:on-close on-close-menu :state @menu-state - :options (if new-css-system - [(when-not (or multi-objects? multi-assets?) - {:option-name (tr "workspace.assets.rename") - :id "assets-rename-graphics" - :option-handler on-rename}) - {:option-name (tr "workspace.assets.delete") - :id "assets-delete-graphics" - :option-handler on-delete} - (when-not multi-assets? - {:option-name (tr "workspace.assets.group") - :id "assets-group-graphics" - :option-handler on-group})] - - [(when-not (or multi-objects? multi-assets?) - [(tr "workspace.assets.rename") on-rename]) - [(tr "workspace.assets.delete") on-delete] - (when-not multi-assets? - [(tr "workspace.assets.group") on-group])])}])]])) + :options [(when-not (or multi-objects? multi-assets?) + {:option-name (tr "workspace.assets.rename") + :id "assets-rename-graphics" + :option-handler on-rename}) + {:option-name (tr "workspace.assets.delete") + :id "assets-delete-graphics" + :option-handler on-delete} + (when-not multi-assets? + {:option-name (tr "workspace.assets.group") + :id "assets-group-graphics" + :option-handler on-group})]}])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index c5adb9a4f..ca0b4b57f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -8,48 +8,14 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.common.data.macros :as dm] - [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) -(defn- width->string [width] - (if (= width :multiple) - "" - (str (or width 1)))) - -(defn- enum->string [value] - (if (= value :multiple) - "" - (pr-str value))) - -(defn- stroke-cap-names [] - [[nil (tr "workspace.options.stroke-cap.none") false] - [:line-arrow (tr "workspace.options.stroke-cap.line-arrow") true] - [:triangle-arrow (tr "workspace.options.stroke-cap.triangle-arrow") false] - [:square-marker (tr "workspace.options.stroke-cap.square-marker") false] - [:circle-marker (tr "workspace.options.stroke-cap.circle-marker") false] - [:diamond-marker (tr "workspace.options.stroke-cap.diamond-marker") false] - [:round (tr "workspace.options.stroke-cap.round") true] - [:square (tr "workspace.options.stroke-cap.square") false]]) - -(defn- value->img [value] - (when (and value (not= value :multiple)) - (str "images/cap-" (name value) ".svg"))) - -(defn- value->name [value] - (if (= value :multiple) - "--" - (-> (d/seek #(= (first %) value) (stroke-cap-names)) - (second)))) - (mf/defc stroke-row {::mf/wrap-props false} [{:keys [index @@ -63,8 +29,6 @@ on-stroke-width-change on-stroke-style-change on-stroke-alignment-change - open-caps-select - close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch @@ -73,17 +37,8 @@ on-blur disable-stroke-style select-on-focus]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - start-caps-state* (mf/use-state {:open? false - :top 0 - :left 0}) - start-caps-state (deref start-caps-state*) - - end-caps-state (mf/use-state {:open? false - :top 0 - :left 0}) - on-drop + (let [on-drop (fn [_ data] (on-reorder (:index data))) @@ -182,173 +137,74 @@ (mf/deps index on-stroke-cap-switch) #(on-stroke-cap-switch index))] - (if new-css-system - [:div {:class (stl/css-case - :stroke-data true - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} - ;; Stroke Color - [:& color-row {:color {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :id (:stroke-color-ref-id stroke) - :file-id (:stroke-color-ref-file stroke) - :gradient (:stroke-color-gradient stroke) - :image (:stroke-image stroke)} - :index index - :title title - :on-change on-color-change-refactor - :on-detach on-color-detach-refactor - :on-remove on-remove-refactor - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}] - - ;; Stroke Width, Alignment & Style - [:div {:class (stl/css :stroke-options)} - [:div {:class (stl/css :stroke-width-input-element) - :title (tr "workspace.options.stroke-width")} - [:span {:class (stl/css :icon)} - i/stroke-size-refactor] - [:> numeric-input* - {:min 0 - :className (stl/css :stroke-width-input) - :value stroke-width - :placeholder (tr "settings.multiple") - :on-change on-width-change - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}]] - - [:div {:class (stl/css :select-wrapper) - :data-test "stroke.alignment"} - [:& select - {:default-value stroke-alignment - :options stroke-alignment-options - :on-change on-alignment-change}]] - - (when-not disable-stroke-style - [:div {:class (stl/css :select-wrapper) - :data-test "stroke.style"} - [:& select - {:default-value stroke-style - :options stroke-style-options - :on-change on-style-change}]])] - - ;; Stroke Caps - (when show-caps - [:div {:class (stl/css :stroke-caps-options)} - [:div {:class (stl/css :cap-select)} - [:& select - {:default-value (:stroke-cap-start stroke) - :options stroke-caps-options - :on-change on-caps-start-change}]] - - [:button {:class (stl/css :swap-caps-btn) - :on-click on-cap-switch} - i/switch-refactor] - - [:div {:class (stl/css :cap-select)} - [:& select - {:default-value (:stroke-cap-end stroke) - :options stroke-caps-options - :on-change on-caps-end-change}]]])] - - - - [:div.border-data {:class (dom/classnames - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} + [:div {:class (stl/css-case + :stroke-data true + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot)) + :ref dref} ;; Stroke Color - [:& color-row {:color {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :id (:stroke-color-ref-id stroke) - :file-id (:stroke-color-ref-file stroke) - :gradient (:stroke-color-gradient stroke) - :image (:stroke-image stroke)} - :index index - :title title - :on-change (on-color-change index) - :on-detach (on-color-detach index) - :on-remove (on-remove index) - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}] + [:& color-row {:color {:color (:stroke-color stroke) + :opacity (:stroke-opacity stroke) + :id (:stroke-color-ref-id stroke) + :file-id (:stroke-color-ref-file stroke) + :gradient (:stroke-color-gradient stroke) + :image (:stroke-image stroke)} + :index index + :title title + :on-change on-color-change-refactor + :on-detach on-color-detach-refactor + :on-remove on-remove-refactor + :disable-drag disable-drag + :on-focus on-focus + :select-on-focus select-on-focus + :on-blur on-blur}] ;; Stroke Width, Alignment & Style - [:div.row-flex - [:div.input-element - {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple)) - :title (tr "workspace.options.stroke-width")} + [:div {:class (stl/css :stroke-options)} + [:div {:class (stl/css :stroke-width-input-element) + :title (tr "workspace.options.stroke-width")} + [:span {:class (stl/css :icon)} + i/stroke-size-refactor] + [:> numeric-input* + {:min 0 + :className (stl/css :stroke-width-input) + :value stroke-width + :placeholder (tr "settings.multiple") + :on-change on-width-change + :on-focus on-focus + :select-on-focus select-on-focus + :on-blur on-blur}]] - [:> numeric-input* - {:min 0 - :value (-> (:stroke-width stroke) width->string) - :placeholder (tr "settings.multiple") - :on-change (on-stroke-width-change index) - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}]] + [:div {:class (stl/css :select-wrapper) + :data-test "stroke.alignment"} + [:& select + {:default-value stroke-alignment + :options stroke-alignment-options + :on-change on-alignment-change}]] - [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (enum->string (:stroke-alignment stroke)) - :on-change (on-stroke-alignment-change index)} - (when (= (:stroke-alignment stroke) :multiple) - [:option {:value ""} "--"]) - [:option {:value ":center"} (tr "workspace.options.stroke.center")] - [:option {:value ":inner"} (tr "workspace.options.stroke.inner")] - [:option {:value ":outer"} (tr "workspace.options.stroke.outer")]] - - (when-not disable-stroke-style - [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (enum->string (:stroke-style stroke)) - :on-change (on-stroke-style-change index)} - (when (= (:stroke-style stroke) :multiple) - [:option {:value ""} "--"]) - [:option {:value ":solid"} (tr "workspace.options.stroke.solid")] - [:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")] - [:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")] - [:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]])] + (when-not disable-stroke-style + [:div {:class (stl/css :select-wrapper) + :data-test "stroke.style"} + [:& select + {:default-value stroke-style + :options stroke-style-options + :on-change on-style-change}]])] ;; Stroke Caps - (when show-caps - [:div.row-flex - [:div.cap-select {:tab-index 0 ;; tab-index to make the element focusable - :on-click (open-caps-select start-caps-state*)} - (value->name (:stroke-cap-start stroke)) - [:span.cap-select-button - i/arrow-down]] - [:& dropdown {:show (:open? start-caps-state) - :on-close (close-caps-select start-caps-state*)} - [:ul.dropdown.cap-select-dropdown {:style {:top (:top start-caps-state) - :left (:left start-caps-state)}} - (for [[idx [value label separator]] (d/enumerate (stroke-cap-names))] - (let [img (value->img value)] - [:li {:key (dm/str "start-cap-" idx) - :class (dom/classnames :separator separator) - :on-click #(on-stroke-cap-start-change index value)} - (when img [:img {:src (value->img value)}]) - label]))]] + (when show-caps + [:div {:class (stl/css :stroke-caps-options)} + [:div {:class (stl/css :cap-select)} + [:& select + {:default-value (:stroke-cap-start stroke) + :options stroke-caps-options + :on-change on-caps-start-change}]] - [:div.element-set-actions-button {:on-click #(on-stroke-cap-switch index)} - i/switch] + [:button {:class (stl/css :swap-caps-btn) + :on-click on-cap-switch} + i/switch-refactor] - [:div.cap-select {:tab-index 0 - :on-click (open-caps-select end-caps-state)} - (value->name (:stroke-cap-end stroke)) - [:span.cap-select-button - i/arrow-down]] - [:& dropdown {:show (:open? @end-caps-state) - :on-close (close-caps-select end-caps-state)} - [:ul.dropdown.cap-select-dropdown {:style {:top (:top @end-caps-state) - :left (:left @end-caps-state)}} - (for [[idx [value label separator]] (d/enumerate (stroke-cap-names))] - (let [img (value->img value)] - [:li {:key (dm/str "end-cap-" idx) - :class (dom/classnames :separator separator) - :on-click #(on-stroke-cap-end-change index value)} - (when img [:img {:src (value->img value)}]) - label]))]]])]))) + [:div {:class (stl/css :cap-select)} + [:& select + {:default-value (:stroke-cap-end stroke) + :options stroke-caps-options + :on-change on-caps-end-change}]]])])) diff --git a/frontend/src/features.cljs b/frontend/src/features.cljs index 05cf13af4..366a70207 100644 --- a/frontend/src/features.cljs +++ b/frontend/src/features.cljs @@ -14,10 +14,6 @@ (defn ^:export is-components-v2 [] (features/active-feature? @st/state "components/v2")) -(defn ^:export new-css-system [] - (tm/schedule-on-idle #(st/emit! (features/toggle-feature "styles/v2"))) - nil) - (defn ^:export grid [] (tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid"))) nil)