From e926b11fefcf4ce75c5bdde86f69be96d09ebe5b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 28 Dec 2022 16:31:54 +0100 Subject: [PATCH] :sparkles: Changes to the margin-item and min/max width/height --- common/src/app/common/types/shape/layout.cljc | 2 +- .../images/icons/auto-margin-both-sides.svg | 3 + .../partials/sidebar-element-options.scss | 19 +- frontend/src/app/main/ui/icons.cljs | 1 + .../sidebar/options/menus/layout_item.cljs | 165 ++++++++++-------- 5 files changed, 108 insertions(+), 82 deletions(-) create mode 100644 frontend/resources/images/icons/auto-margin-both-sides.svg diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index bfe99ed20..5a9ffcf97 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -193,7 +193,7 @@ m4 (or m4 0)] (if (= layout-item-margin-type :multiple) [m1 m2 m3 m4] - [m1 m1 m1 m1]))) + [m1 m2 m1 m2]))) (defn child-height-margin [child] diff --git a/frontend/resources/images/icons/auto-margin-both-sides.svg b/frontend/resources/images/icons/auto-margin-both-sides.svg new file mode 100644 index 000000000..841f73206 --- /dev/null +++ b/frontend/resources/images/icons/auto-margin-both-sides.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index fb3f29de7..a79ea921d 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1717,13 +1717,17 @@ padding: 1px; } - .gap-group { + .gap-group, + .margin-item-group { display: flex; margin-top: 3px; margin-bottom: 8px; height: 26px; + .gap-row, .gap-column, + .margin-item-row, + .margin-item-column, .padding-row { display: flex; justify-content: center; @@ -1789,23 +1793,28 @@ grid-template-columns: auto 30px; } + .margin-item-row { + grid-template-columns: auto 30px; + margin-bottom: 1rem; + } + .margin-row { grid-template-columns: 65px auto; } .padding-row, - .margin-row { + .margin-item-row { display: grid; height: 26px; .padding-icons, - .margin-icons { + .margin-item-icons { display: flex; padding: 0; border: 1px solid $color-gray-60; border-radius: 3px; .padding-icon, - .margin-icon { + .margin-item-icon { display: flex; justify-content: center; align-items: center; @@ -1832,7 +1841,7 @@ } } - .padding-icons { + .padding-icons, .margin-item-icons { margin-bottom: 8px; margin-top: 3px; margin-right: 1px; diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index a8dec1705..f73424ecd 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -65,6 +65,7 @@ (def auto-height (icon-xref :auto-height)) (def auto-hug (icon-xref :auto-hug)) (def auto-margin-side (icon-xref :auto-margin-side)) +(def auto-margin-both-sides (icon-xref :auto-margin-both-sides)) (def auto-margin (icon-xref :auto-margin)) (def auto-padding (icon-xref :auto-padding)) (def auto-padding-side (icon-xref :auto-padding-side)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 4ae113c20..8403c0b5c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -35,39 +35,43 @@ [{:keys [values change-margin-style on-margin-change] :as props}] (let [margin-type (or (:layout-item-margin-type values) :simple) - margins (if (nil? (:layout-item-margin values)) - {:m1 0 :m2 0 :m3 0 :m4 0} - (:layout-item-margin values)) - rx (if (or (= :multiple margins) (not (apply = (vals margins)))) - "--" - (:m1 margins))] + m1 (if (and (not (= :multiple (:layout-item-margin values))) + (= (dm/get-in values [:layout-item-margin :m1]) + (dm/get-in values [:layout-item-margin :m3]))) + (dm/get-in values [:layout-item-margin :m1]) + "--") - [:div.margin-row - [:div.margin-icons - [:div.margin-icon.tooltip.tooltip-bottom - {:class (dom/classnames :selected (= margin-type :simple)) - :alt (tr "workspace.options.layout.margin-simple") - :on-click #(change-margin-style :simple)} - i/auto-margin] - [:div.margin-icon.tooltip.tooltip-bottom - {:class (dom/classnames :selected (= margin-type :multiple)) - :alt (tr "workspace.options.layout.margin") - :on-click #(change-margin-style :multiple)} - i/auto-margin-side]] - [:div.wrapper - (cond - (= margin-type :simple) - [:div.tooltip.tooltip-bottom - {:alt (tr "workspace.options.layout.margin-all")} - [:div.input-element.mini + m2 (if (and (not (= :multiple (:layout-item-margin values))) + (= (dm/get-in values [:layout-item-margin :m2]) + (dm/get-in values [:layout-item-margin :m4]))) + (dm/get-in values [:layout-item-margin :m2]) + "--")] - [:> numeric-input - {:placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-margin-change :simple) - :value rx}]]] + [:div.layout-row.margin-item-row + (cond + (= margin-type :simple) - (= margin-type :multiple) + [:div.margin-item-group + [:div.margin-item-row.tooltip.tooltip-bottom-left + {:alt "Vertical margin"} + [:span.icon i/auto-margin-both-sides] + [:> numeric-input + {:placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-margin-change :simple :m1) + :value m1}]] + + [:div.margin-item-column.tooltip.tooltip-bottom-left + {:alt "Horizontal margin"} + [:span.icon.rotated i/auto-margin-both-sides] + [:> numeric-input + {:placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-margin-change :simple :m2) + :value m2}]]] + + (= margin-type :multiple) + [:div.wrapper (for [num [:m1 :m2 :m3 :m4]] [:div.tooltip.tooltip-bottom {:key (dm/str "margin-" (d/name num)) @@ -76,12 +80,19 @@ :m2 "Right" :m3 "Bottom" :m4 "Left")} - [:div.input-element.mini + [:div.input-element.auto [:> numeric-input {:placeholder "--" :on-click #(dom/select-target %) - :on-change (partial on-margin-change num) - :value (or (-> values :layout-item-margin num) 0)}]]]))]])) + :on-change (partial on-margin-change :multiple num) + :value (num (:layout-item-margin values))}]]])]) + + [:div.margin-item-icons + [:div.margin-item-icon.tooltip.tooltip-bottom + {:class (dom/classnames :selected (= margin-type :multiple)) + :alt "Margin - multiple" + :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} + i/auto-margin]]])) (mf/defc element-behavior [{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}] @@ -146,10 +157,7 @@ {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]} [{:keys [ids values is-layout-child? is-layout-container?] :as props}] - (let [open? (mf/use-state false) - toggle-open (fn [] (swap! open? not)) - - selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) + (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents (mf/deref selection-parents-ref) change-margin-style @@ -165,10 +173,16 @@ is-col? (every? ctl/col? selection-parents) on-margin-change - (fn [type val] - (if (= type :simple) - (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m2 val :m3 val :m4 val}})) - (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {type val}})))) + (fn [type prop val] + (cond + (and (= type :simple) (= prop :m1)) + (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m3 val}})) + + (and (= type :simple) (= prop :m2)) + (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}})) + + :else + (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))) on-change-behavior (fn [dir value] @@ -199,39 +213,38 @@ :change-margin-style change-margin-style :on-margin-change on-margin-change}]) - [:div.advanced-ops-container - [:button.advanced-ops.toltip.tooltip-bottom - {:on-click toggle-open - :alt (tr "workspace.options.layout-item.advanced-ops")} - [:span.icon i/actions] - [:span (tr "workspace.options.layout-item.advanced-ops")]]] + (when is-layout-child? + [:div.layout-row + [:div.row-title "Align"] + [:div.btn-wrapper + [:& align-self-row {:is-col? is-col? + :align-self align-self + :set-align-self set-align-self}]]]) - (when @open? - [:div.advanced-ops-body - (when is-layout-child? - [:div.layout-row - [:div.direction-wrap.row-title "Align"] - [:div.btn-wrapper - [:& align-self-row {:is-col? is-col? - :align-self align-self - :set-align-self set-align-self}]]]) - [:div.input-wrapper - (for [item [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]] - [:div.tooltip.tooltip-bottom - {:key (d/name item) - :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) - :class (dom/classnames "maxH" (= item :layout-item-max-h) - "minH" (= item :layout-item-min-h) - "maxW" (= item :layout-item-max-w) - "minW" (= item :layout-item-min-w))} - [:div.input-element - {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} - [:> numeric-input - {:no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-size-change item) - :value (get values item) - :nillable true}]]])]])]])) + [:div.advanced-ops-body + [:div.input-wrapper + (for [item (cond-> [] + (= (:layout-item-h-sizing values) :fill) + (conj :layout-item-min-w :layout-item-max-w) + + (= (:layout-item-v-sizing values) :fill) + (conj :layout-item-min-h :layout-item-max-h))] + + [:div.tooltip.tooltip-bottom + {:key (d/name item) + :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) + :class (dom/classnames "maxH" (= item :layout-item-max-h) + "minH" (= item :layout-item-min-h) + "maxW" (= item :layout-item-max-w) + "minW" (= item :layout-item-min-w))} + [:div.input-element + {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} + [:> numeric-input + {:no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-size-change item) + :value (get values item) + :nillable true}]]])]]]]))