Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 02:58:39 -05:00
Code Issues Activity

✨ Changes to the margin-item and min/max width/height

Browse source
This commit is contained in:
alonso.torres 2022-12-28 16:31:54 +01:00 • committed by Alejandro Alonso
parent 40da1c302a
commit e926b11fef
5 changed files with 108 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
common/src/app/common/types/shape/layout.cljc
View file

@ -193,7 +193,7 @@
m4 (or m4 0)] m4 (or m4 0)]
(if (= layout-item-margin-type :multiple) (if (= layout-item-margin-type :multiple)
[m1 m2 m3 m4] [m1 m2 m3 m4]
[m1 m1 m1 m1]))) [m1 m2 m1 m2])))
(defn child-height-margin (defn child-height-margin
[child] [child]

3
frontend/resources/images/icons/auto-margin-both-sides.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M11.583 0v11.232h11.306V0H11.583zm23.832 0v11.232h12.32V0h-12.32zm24.847 0v11.232h12.32V0h-12.32zM85.11 0v11.232h12.32V0H85.11zm24.847 0v11.232h11V0h-11zM22.399 22.608V60.45h-.016v11.18l.016.001v38.147h87.557v-87.17H22.399zm-10.816 98.451v11.233H22.89v-11.233H11.583zm98.373 0v11.233h11v-11.233h-11zm-74.541.001v11.233h12.32V121.06h-12.32zm24.847 0v11.233h12.32V121.06h-12.32zm24.847 0v11.233h12.32V121.06h-12.32z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 531 B

19
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -1717,13 +1717,17 @@
padding: 1px; padding: 1px;
} }
.gap-group { .gap-group,
.margin-item-group {
display: flex; display: flex;
margin-top: 3px; margin-top: 3px;
margin-bottom: 8px; margin-bottom: 8px;
height: 26px; height: 26px;
.gap-row, .gap-row,
.gap-column, .gap-column,
.margin-item-row,
.margin-item-column,
.padding-row { .padding-row {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1789,23 +1793,28 @@
grid-template-columns: auto 30px; grid-template-columns: auto 30px;
} }
.margin-item-row {
grid-template-columns: auto 30px;
margin-bottom: 1rem;
}
.margin-row { .margin-row {
grid-template-columns: 65px auto; grid-template-columns: 65px auto;
} }
.padding-row, .padding-row,
.margin-row { .margin-item-row {
display: grid; display: grid;
height: 26px; height: 26px;
.padding-icons, .padding-icons,
.margin-icons { .margin-item-icons {
display: flex; display: flex;
padding: 0; padding: 0;
border: 1px solid $color-gray-60; border: 1px solid $color-gray-60;
border-radius: 3px; border-radius: 3px;
.padding-icon, .padding-icon,
.margin-icon { .margin-item-icon {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -1832,7 +1841,7 @@
} }
} }
.padding-icons { .padding-icons, .margin-item-icons {
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 3px; margin-top: 3px;
margin-right: 1px; margin-right: 1px;

1
frontend/src/app/main/ui/icons.cljs
View file

@ -65,6 +65,7 @@
(def auto-height (icon-xref :auto-height)) (def auto-height (icon-xref :auto-height))
(def auto-hug (icon-xref :auto-hug)) (def auto-hug (icon-xref :auto-hug))
(def auto-margin-side (icon-xref :auto-margin-side)) (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-margin (icon-xref :auto-margin))
(def auto-padding (icon-xref :auto-padding)) (def auto-padding (icon-xref :auto-padding))
(def auto-padding-side (icon-xref :auto-padding-side)) (def auto-padding-side (icon-xref :auto-padding-side))

165
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -35,39 +35,43 @@
[{:keys [values change-margin-style on-margin-change] :as props}] [{:keys [values change-margin-style on-margin-change] :as props}]
(let [margin-type (or (:layout-item-margin-type values) :simple) (let [margin-type (or (:layout-item-margin-type values) :simple)
margins (if (nil? (:layout-item-margin values)) m1 (if (and (not (= :multiple (:layout-item-margin values)))
{:m1 0 :m2 0 :m3 0 :m4 0} (= (dm/get-in values [:layout-item-margin :m1])
(:layout-item-margin values)) (dm/get-in values [:layout-item-margin :m3])))
rx (if (or (= :multiple margins) (not (apply = (vals margins)))) (dm/get-in values [:layout-item-margin :m1])
"--" "--")
(:m1 margins))]
[:div.margin-row m2 (if (and (not (= :multiple (:layout-item-margin values)))
[:div.margin-icons (= (dm/get-in values [:layout-item-margin :m2])
[:div.margin-icon.tooltip.tooltip-bottom (dm/get-in values [:layout-item-margin :m4])))
{:class (dom/classnames :selected (= margin-type :simple)) (dm/get-in values [:layout-item-margin :m2])
: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
[:> numeric-input [:div.layout-row.margin-item-row
{:placeholder "--" (cond
:on-click #(dom/select-target %) (= margin-type :simple)
:on-change (partial on-margin-change :simple)
:value rx}]]]
(= 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]] (for [num [:m1 :m2 :m3 :m4]]
[:div.tooltip.tooltip-bottom [:div.tooltip.tooltip-bottom
{:key (dm/str "margin-" (d/name num)) {:key (dm/str "margin-" (d/name num))
@ -76,12 +80,19 @@
:m2 "Right" :m2 "Right"
:m3 "Bottom" :m3 "Bottom"
:m4 "Left")} :m4 "Left")}
[:div.input-element.mini [:div.input-element.auto
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-margin-change num) :on-change (partial on-margin-change :multiple num)
:value (or (-> values :layout-item-margin num) 0)}]]]))]])) :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 (mf/defc element-behavior
[{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}] [{: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?"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]}
[{:keys [ids values is-layout-child? is-layout-container?] :as props}] [{:keys [ids values is-layout-child? is-layout-container?] :as props}]
(let [open? (mf/use-state false) (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
toggle-open (fn [] (swap! open? not))
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref) selection-parents (mf/deref selection-parents-ref)
change-margin-style change-margin-style
@ -165,10 +173,16 @@
is-col? (every? ctl/col? selection-parents) is-col? (every? ctl/col? selection-parents)
on-margin-change on-margin-change
(fn [type val] (fn [type prop val]
(if (= type :simple) (cond
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m2 val :m3 val :m4 val}})) (and (= type :simple) (= prop :m1))
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {type val}})))) (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 on-change-behavior
(fn [dir value] (fn [dir value]
@ -199,39 +213,38 @@
:change-margin-style change-margin-style :change-margin-style change-margin-style
:on-margin-change on-margin-change}]) :on-margin-change on-margin-change}])
[:div.advanced-ops-container (when is-layout-child?
[:button.advanced-ops.toltip.tooltip-bottom [:div.layout-row
{:on-click toggle-open [:div.row-title "Align"]
:alt (tr "workspace.options.layout-item.advanced-ops")} [:div.btn-wrapper
[:span.icon i/actions] [:& align-self-row {:is-col? is-col?
[:span (tr "workspace.options.layout-item.advanced-ops")]]] :align-self align-self
:set-align-self set-align-self}]]])
(when @open? [:div.advanced-ops-body
[:div.advanced-ops-body [:div.input-wrapper
(when is-layout-child? (for [item (cond-> []
[:div.layout-row (= (:layout-item-h-sizing values) :fill)
[:div.direction-wrap.row-title "Align"] (conj :layout-item-min-w :layout-item-max-w)
[:div.btn-wrapper
[:& align-self-row {:is-col? is-col? (= (:layout-item-v-sizing values) :fill)
:align-self align-self (conj :layout-item-min-h :layout-item-max-h))]
:set-align-self set-align-self}]]])
[:div.input-wrapper [:div.tooltip.tooltip-bottom
(for [item [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]] {:key (d/name item)
[:div.tooltip.tooltip-bottom :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
{:key (d/name item) :class (dom/classnames "maxH" (= item :layout-item-max-h)
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) "minH" (= item :layout-item-min-h)
:class (dom/classnames "maxH" (= item :layout-item-max-h) "maxW" (= item :layout-item-max-w)
"minH" (= item :layout-item-min-h) "minW" (= item :layout-item-min-w))}
"maxW" (= item :layout-item-max-w) [:div.input-element
"minW" (= item :layout-item-min-w))} {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
[:div.input-element [:> numeric-input
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} {:no-validate true
[:> numeric-input :min 0
{:no-validate true :data-wrap true
:min 0 :placeholder "--"
:data-wrap true :on-click #(dom/select-target %)
:placeholder "--" :on-change (partial on-size-change item)
:on-click #(dom/select-target %) :value (get values item)
:on-change (partial on-size-change item) :nillable true}]]])]]]]))
:value (get values item)
:nillable true}]]])]])]]))