Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 03:01:27 -05:00
Code Issues Activity

Merge pull request #2647 from penpot/alotor-flex-ui-changes

Browse source 
✨ Changes to the flex UI
This commit is contained in:
Andrey Antukh 2022-12-12 13:50:30 +01:00 • committed by GitHub
commit 8bc265a598
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 127 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
common/src/app/common/geom/shapes/flex_layout/lines.cljc
View file

@ -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

3
frontend/resources/images/icons/auto-padding-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="M0 22.608v87.272h11.232V22.608Zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17zm98.661 0v87.272h11.232V22.608Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 235 B

4
frontend/resources/styles/common/framework.scss
View file

@ -396,6 +396,10 @@ ul.slider-dots {
width: 43px;
}
&.auto {
width: auto;
}
// Input amounts
&.pixels {

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

@ -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;
}
}

2
frontend/src/app/main/ui/formats.cljs
View file

@ -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)

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

@ -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))

120
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -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}]]]