3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Changes in the layout UI

Browse source
This commit is contained in:
Eva 2022-07-04 09:05:05 +02:00 • committed by Andrey Antukh
parent 7176bb6f1a
commit 51e8eea795
1 changed files with 61 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,8 +25,8 @@
:layout-wrap-type ;; :wrap, :no-wrap :layout-wrap-type ;; :wrap, :no-wrap
:layout-padding-type ;; :simple, :multiple :layout-padding-type ;; :simple, :multiple
:layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
:layout-h-orientation ;; :top, :center, :bottom :layout-h-orientation ;; :left, :center, :right
:layout-v-orientation]) ;; :left, :center, :right :layout-v-orientation]) ;; :top, :center, :bottom
(def grid-pos [[:top :left] (def grid-pos [[:top :left]
[:top :center] [:top :center]
@ -43,19 +43,18 @@
(defn- get-layout-icon (defn- get-layout-icon
[dir layout-type v h] [dir layout-type v h]
(let [col? (= dir (or :left :right)) (let [row? (or (= dir :right) (= dir :left))
manage-text-icon manage-text-icon
(if col? (if row?
(case h
:left i/text-align-left
:center i/text-align-center
:right i/text-align-right
i/text-align-center)
(case v (case v
:top i/text-align-left :top i/text-align-left
:center i/text-align-center :center i/text-align-center
:bottom i/text-align-right :bottom i/text-align-right
i/text-align-center)
(case h
:left i/text-align-left
:center i/text-align-center
:right i/text-align-right
i/text-align-center))] i/text-align-center))]
(case layout-type (case layout-type
:packed manage-text-icon :packed manage-text-icon
@ -88,11 +87,10 @@
type (:layout-type values) type (:layout-type values)
is-col? (or (= dir :top) is-col? (or (= dir :top)
(= dir :bottom)) (= dir :bottom))
saved-pos [(:layout-h-orientation values) saved-pos [(:layout-v-orientation values)
(:layout-v-orientation values)]] (:layout-h-orientation values)]]
(cond (if (= type :packed)
(= type :packed)
[:div.orientation-grid [:div.orientation-grid
[:div.button-wrapper [:div.button-wrapper
(for [[pv ph] grid-pos] (for [[pv ph] grid-pos]
@ -109,51 +107,49 @@
:key (dm/str pv ph)} :key (dm/str pv ph)}
[:span.icon [:span.icon
{:class (dom/classnames {:class (dom/classnames
:rotated is-col?)} :rotated (not is-col?))}
(get-layout-icon dir type pv ph)]])]] (get-layout-icon dir type pv ph)]])]]
(if (not is-col?)
[:div.orientation-grid.row
[:div.button-wrapper
(for [row grid-rows]
[:button.orientation
{:on-click (partial on-change-orientation row :left type)
:class (dom/classnames
:active (= row (first saved-pos))
:top (= :top row)
:centered (= :center row)
:bottom (= :bottom row))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]])]]
is-col? [:div.orientation-grid.col
[:div.orientation-grid.col [:div.button-wrapper
[:div.button-wrapper (for [[idx col] (d/enumerate grid-cols)]
(for [[idx col] (d/enumerate grid-cols)] [:button.orientation
[:button.orientation {:key (dm/str idx col)
{:key (dm/str idx col) :on-click (partial on-change-orientation :top col type)
:on-click (partial on-change-orientation :top col type) :class (dom/classnames
:class (dom/classnames :active (= col (second saved-pos))
:active (= col (second saved-pos)) :top (= :left col)
:top (= :left col) :centered (= :center col)
:centered (= :center col) :bottom (= :right col))}
:bottom (= :right col))} [:span.icon
[:span.icon {:class (dom/classnames :rotated is-col?)}
{:class (dom/classnames :rotated is-col?)} (get-layout-icon dir type col nil)]
(get-layout-icon dir type nil col)] [:span.icon
[:span.icon {:class (dom/classnames :rotated is-col?)}
{:class (dom/classnames :rotated is-col?)} (get-layout-icon dir type col nil)]
(get-layout-icon dir type nil col)] [:span.icon
[:span.icon {:class (dom/classnames :rotated is-col?)}
{:class (dom/classnames :rotated is-col?)} (get-layout-icon dir type col nil)]])]]))))
(get-layout-icon dir type nil col)]])]]
:else
[:div.orientation-grid.row
[:div.button-wrapper
(for [row grid-rows]
[:button.orientation
{:on-click (partial on-change-orientation row :left type)
:class (dom/classnames
:active (= row (first saved-pos))
:top (= :top row)
:centered (= :center row)
:bottom (= :bottom row))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]])]])))
(mf/defc padding-section (mf/defc padding-section
[{:keys [values on-change-style on-change] :as props}] [{:keys [values on-change-style on-change] :as props}]
@ -256,7 +252,7 @@
(st/emit! (dwsl/update-layout ids {:layout-wrap-type value}))))) (st/emit! (dwsl/update-layout ids {:layout-wrap-type value})))))
handle-change-orientation handle-change-orientation
(fn [h-orientation v-orientation] (fn [v-orientation h-orientation]
(st/emit! (dwsl/update-layout ids {:layout-h-orientation h-orientation :layout-v-orientation v-orientation}))) (st/emit! (dwsl/update-layout ids {:layout-h-orientation h-orientation :layout-v-orientation v-orientation})))
layout-info layout-info
@ -264,21 +260,19 @@
(let [type (:layout-type values) (let [type (:layout-type values)
dir (:layout-dir values) dir (:layout-dir values)
is-col? (or (= dir :top) (= dir :bottom)) is-col? (or (= dir :top) (= dir :bottom))
h (:layout-v-orientation values) h (:layout-h-orientation values)
v (:layout-h-orientation values) v (:layout-v-orientation values)
wrap (:layout-wrap-type values) wrap (:layout-wrap-type values)
orientation orientation
(cond (if (= type :packed)
(= type :packaged)
(dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", " (dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", "
(tr (dm/str "workspace.options.layout.h." (d/name h))) ", ") (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ")
is-col? (if is-col?
(dm/str (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ") (dm/str (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ")
(dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", ")))]
:else
(dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", "))]
(dm/str orientation (dm/str orientation
(str/replace (tr (dm/str "workspace.options.layout." (d/name type))) "-" " ") ", " (str/replace (tr (dm/str "workspace.options.layout." (d/name type))) "-" " ") ", "