mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -05:00
Merge pull request #2647 from penpot/alotor-flex-ui-changes
✨ Changes to the flex UI
This commit is contained in:
commit
8bc265a598
7 changed files with 127 additions and 54 deletions
|
@ -15,13 +15,9 @@
|
|||
(def conjv (fnil conj []))
|
||||
|
||||
(defn layout-bounds
|
||||
[{:keys [layout-padding layout-padding-type] :as shape} shape-bounds]
|
||||
[{:keys [layout-padding] :as shape} shape-bounds]
|
||||
(let [;; Add padding to the bounds
|
||||
{pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding
|
||||
[pad-top pad-right pad-bottom pad-left]
|
||||
(if (= layout-padding-type :multiple)
|
||||
[pad-top pad-right pad-bottom pad-left]
|
||||
[pad-top pad-top pad-top pad-top])]
|
||||
{pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding]
|
||||
(gpo/pad-points shape-bounds pad-top pad-right pad-bottom pad-left)))
|
||||
|
||||
(defn init-layout-lines
|
||||
|
|
|
@ -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="M0 22.608v87.272h11.232V22.608Zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17zm98.661 0v87.272h11.232V22.608Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 235 B |
|
@ -396,6 +396,10 @@ ul.slider-dots {
|
|||
width: 43px;
|
||||
}
|
||||
|
||||
&.auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input amounts
|
||||
|
||||
&.pixels {
|
||||
|
|
|
@ -1612,11 +1612,23 @@
|
|||
align-items: center;
|
||||
margin-right: 5px;
|
||||
font-family: "worksans", sans-serif;
|
||||
|
||||
&.justify-content {
|
||||
align-items: start;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 185px;
|
||||
|
||||
&.justify-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.direction,
|
||||
.wrap-type,
|
||||
.align-items-style,
|
||||
|
@ -1711,7 +1723,8 @@
|
|||
margin-bottom: 8px;
|
||||
height: 26px;
|
||||
.gap-row,
|
||||
.gap-column {
|
||||
.gap-column,
|
||||
.padding-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -1751,6 +1764,13 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
|
||||
&.lock {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&.active {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
|
@ -1765,10 +1785,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.padding-row {
|
||||
grid-template-columns: auto 30px;
|
||||
}
|
||||
|
||||
.margin-row {
|
||||
grid-template-columns: 65px auto;
|
||||
}
|
||||
|
||||
.padding-row,
|
||||
.margin-row {
|
||||
display: grid;
|
||||
grid-template-columns: 65px auto;
|
||||
height: 26px;
|
||||
.padding-icons,
|
||||
.margin-icons {
|
||||
|
@ -1799,15 +1826,27 @@
|
|||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-icons {
|
||||
margin-bottom: 8px;
|
||||
margin-top: 3px;
|
||||
margin-right: 1px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
|
||||
.input-element {
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,7 +61,7 @@
|
|||
{:p1 p1 :p2 p2 :p3 p3}
|
||||
|
||||
:else
|
||||
{:p1 p1 :p2 p2 :p3 p3})))
|
||||
{:p1 p1 :p2 p2 :p3 p3 :p4 p4})))
|
||||
|
||||
(defn format-size [type value shape]
|
||||
(let [sizing (if (= type :width)
|
||||
|
|
|
@ -68,6 +68,7 @@
|
|||
(def auto-margin (icon-xref :auto-margin))
|
||||
(def auto-padding (icon-xref :auto-padding))
|
||||
(def auto-padding-side (icon-xref :auto-padding-side))
|
||||
(def auto-padding-both-sides (icon-xref :auto-padding-both-sides))
|
||||
(def auto-width (icon-xref :auto-width))
|
||||
(def auto-wrap (icon-xref :auto-wrap))
|
||||
(def bool-difference (icon-xref :boolean-difference))
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
[app.main.ui.components.numeric-input :refer [numeric-input]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
@ -154,53 +153,70 @@
|
|||
|
||||
(mf/defc justify-content-row
|
||||
[{:keys [is-col? justify-content set-justify] :as props}]
|
||||
[:div.justify-content-style
|
||||
(for [justify [:start :center :end :space-around :space-between]]
|
||||
[:button.justify.tooltip
|
||||
{:class (dom/classnames :active (= justify-content justify)
|
||||
:tooltip-bottom-left (not= justify :start)
|
||||
:tooltip-bottom (= justify :start))
|
||||
:alt (dm/str "Justify content " (d/name justify))
|
||||
:on-click #(set-justify justify)
|
||||
:key (dm/str "justify-content" (d/name justify))}
|
||||
(get-layout-flex-icon :justify-content justify is-col?)])])
|
||||
[:*
|
||||
[:div.justify-content-style
|
||||
(for [justify [:start :center :end]]
|
||||
[:button.justify.tooltip
|
||||
{:class (dom/classnames :active (= justify-content justify)
|
||||
:tooltip-bottom-left (not= justify :start)
|
||||
:tooltip-bottom (= justify :start))
|
||||
:alt (dm/str "Justify content " (d/name justify))
|
||||
:on-click #(set-justify justify)
|
||||
:key (dm/str "justify-content" (d/name justify))}
|
||||
(get-layout-flex-icon :justify-content justify is-col?)])]
|
||||
[:div.justify-content-style
|
||||
(for [justify [:space-around :space-between]]
|
||||
[:button.justify.tooltip
|
||||
{:class (dom/classnames :active (= justify-content justify)
|
||||
:tooltip-bottom-left (not= justify :start)
|
||||
:tooltip-bottom (= justify :start))
|
||||
:alt (dm/str "Justify content " (d/name justify))
|
||||
:on-click #(set-justify justify)
|
||||
:key (dm/str "justify-content" (d/name justify))}
|
||||
(get-layout-flex-icon :justify-content justify is-col?)])]])
|
||||
|
||||
|
||||
(mf/defc padding-section
|
||||
[{:keys [values on-change-style on-change] :as props}]
|
||||
|
||||
(let [padding-type (:layout-padding-type values)
|
||||
rx (if (and (not (= :multiple (:layout-padding values)))
|
||||
(apply = (vals (:layout-padding values))))
|
||||
(:p1 (:layout-padding values))
|
||||
p1 (if (and (not (= :multiple (:layout-padding values)))
|
||||
(= (dm/get-in values [:layout-padding :p1])
|
||||
(dm/get-in values [:layout-padding :p3])))
|
||||
(dm/get-in values [:layout-padding :p1])
|
||||
"--")
|
||||
|
||||
p2 (if (and (not (= :multiple (:layout-padding values)))
|
||||
(= (dm/get-in values [:layout-padding :p2])
|
||||
(dm/get-in values [:layout-padding :p4])))
|
||||
(dm/get-in values [:layout-padding :p2])
|
||||
"--")]
|
||||
|
||||
[:div.padding-row
|
||||
[:div.padding-icons
|
||||
[:div.padding-icon.tooltip.tooltip-bottom
|
||||
{:class (dom/classnames :selected (= padding-type :simple))
|
||||
:alt "Padding"
|
||||
:on-click #(on-change-style :simple)}
|
||||
i/auto-padding]
|
||||
[:div.padding-icon.tooltip.tooltip-bottom
|
||||
{:class (dom/classnames :selected (= padding-type :multiple))
|
||||
:alt "Padding - sides"
|
||||
:on-click #(on-change-style :multiple)}
|
||||
i/auto-padding-side]]
|
||||
[:div.wrapper
|
||||
(cond
|
||||
(= padding-type :simple)
|
||||
[:div.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.options.layout.padding-all")}
|
||||
[:div.input-element.mini
|
||||
(cond
|
||||
(= padding-type :simple)
|
||||
|
||||
[:> numeric-input
|
||||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-change :simple)
|
||||
:value rx}]]]
|
||||
[:div.gap-group
|
||||
[:div.gap-row.tooltip.tooltip-bottom-left
|
||||
{:alt "Vertical padding"}
|
||||
[:span.icon.rotated i/auto-padding-both-sides]
|
||||
[:> numeric-input
|
||||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-change :simple :p1)
|
||||
:value p1}]]
|
||||
|
||||
(= padding-type :multiple)
|
||||
[:div.gap-column.tooltip.tooltip-bottom-left
|
||||
{:alt "Horizontal padding"}
|
||||
[:span.icon i/auto-padding-both-sides]
|
||||
[:> numeric-input
|
||||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-change :simple :p2)
|
||||
:value p2}]]]
|
||||
|
||||
(= padding-type :multiple)
|
||||
[:div.wrapper
|
||||
(for [num [:p1 :p2 :p3 :p4]]
|
||||
[:div.tooltip.tooltip-bottom
|
||||
{:key (dm/str "padding-" (d/name num))
|
||||
|
@ -209,12 +225,19 @@
|
|||
:p2 "Right"
|
||||
:p3 "Bottom"
|
||||
:p4 "Left")}
|
||||
[:div.input-element.mini
|
||||
[:div.input-element.auto
|
||||
[:> numeric-input
|
||||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-change num)
|
||||
:value (num (:layout-padding values))}]]]))]]))
|
||||
:on-change (partial on-change :multiple num)
|
||||
:value (num (:layout-padding values))}]]])])
|
||||
|
||||
[:div.padding-icons
|
||||
[:div.padding-icon.tooltip.tooltip-bottom
|
||||
{:class (dom/classnames :selected (= padding-type :multiple))
|
||||
:alt "Padding - multiple"
|
||||
:on-click #(on-change-style (if (= padding-type :multiple) :simple :multiple))}
|
||||
i/auto-padding-side]]]))
|
||||
|
||||
(mf/defc gap-section
|
||||
[{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}]
|
||||
|
@ -358,10 +381,17 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
|
||||
|
||||
on-padding-change
|
||||
(fn [type val]
|
||||
(if (= type :simple)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p2 val :p3 val :p4 val}}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {type val}}))))]
|
||||
(fn [type prop val]
|
||||
(prn "??" type prop val)
|
||||
(cond
|
||||
(and (= type :simple) (= prop :p1))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
|
||||
|
||||
(and (= type :simple) (= prop :p2))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||
|
||||
:else
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
|
@ -415,7 +445,7 @@
|
|||
|
||||
[:div.layout-row
|
||||
[:div.justify-content.row-title "Justify"]
|
||||
[:div.btn-wrapper
|
||||
[:div.btn-wrapper.justify-content
|
||||
[:& justify-content-row {:is-col? is-col?
|
||||
:justify-content justify-content
|
||||
:set-justify set-justify-content}]]]
|
||||
|
|
Loading…
Add table
Reference in a new issue