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

🐛 Fix layout spec with proper names

Browse source
This commit is contained in:
Eva 2023-01-26 14:38:21 +01:00 • committed by Andrés Moya
parent 87c5aa71a3
commit b463ebc17b
13 changed files with 46 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -48,7 +48,7 @@
:layout-align-items :start
:layout-justify-content :start
:layout-align-content :stretch
:layout-wrap-type :no-wrap
:layout-wrap-type :nowrap
:layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
@ -136,8 +136,8 @@
direction
(cond
(mth/close? tmin t1) :row
(mth/close? tmin t2) :reverse-column
(mth/close? tmin t3) :reverse-row
(mth/close? tmin t2) :column-reverse
(mth/close? tmin t3) :row-reverse
(mth/close? tmin t4) :column)]
{:layout-flex-dir direction}))

8
frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs
View file

@ -39,10 +39,10 @@
:layout-gap "gap"
:layout-padding "padding"}
:format {:layout name
:layout-flex-dir cg/get-layout-direction
:layout-flex-dir name
:layout-align-items name
:layout-justify-content name
:layout-wrap-type cg/get-layout-orientation
:layout-wrap-type name
:layout-gap fm/format-gap
:layout-padding fm/format-padding}})
@ -82,7 +82,7 @@
[:div.attributes-unit-row
[:div.attributes-label "Direction"]
[:div.attributes-value (str/capital (cg/get-layout-direction (:layout-flex-dir shape)))]
[:div.attributes-value (str/capital (d/name (:layout-flex-dir shape)))]
[:& copy-button {:data (copy-data shape :layout-flex-dir)}]]
[:div.attributes-unit-row
@ -97,7 +97,7 @@
[:div.attributes-unit-row
[:div.attributes-label "Flex wrap"]
[:div.attributes-value (str/capital (cg/get-layout-orientation (:layout-wrap-type shape)))]
[:div.attributes-value (str/capital (d/name (:layout-wrap-type shape)))]
[:& copy-button {:data (copy-data shape :layout-wrap-type)}]]
(when (= :wrap (:layout-wrap-type shape))

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

@ -17,13 +17,13 @@
(def layout-container-flex-attrs
[:layout ;; :flex, :grid in the future
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
:layout-flex-dir ;; :row, :row-reverse, :column, :column-reverse
:layout-gap-type ;; :simple, :multiple
:layout-gap ;; {:row-gap number , :column-gap number}
:layout-align-items ;; :start :end :center :stretch
:layout-justify-content ;; :start :center :end :space-between :space-around
:layout-align-content ;; :start :center :end :space-between :space-around :stretch (by default)
:layout-wrap-type ;; :wrap, :no-wrap
:layout-wrap-type ;; :wrap, :nowrap
:layout-padding-type ;; :simple, :multiple
:layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
])
@ -101,8 +101,8 @@
[:button.dir.tooltip.tooltip-bottom
{:class (dom/classnames :active (= saved-dir dir)
:row (= :row dir)
:reverse-row (= :reverse-row dir)
:reverse-column (= :reverse-column dir)
:row-reverse (= :row-reverse dir)
:column-reverse (= :column-reverse dir)
:column (= :column dir))
:key (dm/str "direction-" dir)
:alt (str/replace (str/capital (d/name dir)) "-" " ")
@ -113,9 +113,9 @@
[{:keys [wrap-type set-wrap] :as props}]
[:*
[:button.tooltip.tooltip-bottom
{:class (dom/classnames :active (= wrap-type :no-wrap))
:alt "No-wrap"
:on-click #(set-wrap :no-wrap)
{:class (dom/classnames :active (= wrap-type :nowrap))
:alt "Nowrap"
:on-click #(set-wrap :nowrap)
:style {:padding 0}}
[:span.no-wrap i/minus]]
[:button.wrap.tooltip.tooltip-bottom
@ -252,10 +252,10 @@
:on-click (fn [event]
(reset! gap-selected? :column-gap)
(dom/select-target event))
:on-change (partial set-gap (= :no-wrap wrap-type) :column-gap)
:on-change (partial set-gap (= :nowrap wrap-type) :column-gap)
:on-blur #(reset! gap-selected? :none)
:value (:column-gap gap-value)
:disabled (and (= :no-wrap wrap-type) is-col?)}]]
:disabled (and (= :nowrap wrap-type) is-col?)}]]
[:div.gap-row.tooltip.tooltip-bottom-left
{:alt "Row gap"}
@ -266,10 +266,10 @@
:on-click (fn [event]
(reset! gap-selected? :row-gap)
(dom/select-target event))
:on-change (partial set-gap (= :no-wrap wrap-type) :row-gap)
:on-change (partial set-gap (= :nowrap wrap-type) :row-gap)
:on-blur #(reset! gap-selected? :none)
:value (:row-gap gap-value)
:disabled (and (= :no-wrap wrap-type) (not is-col?))}]]]])
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])
(mf/defc layout-container-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
@ -302,7 +302,7 @@
;; Flex-direction
saved-dir (:layout-flex-dir values)
is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
is-col? (or (= :column saved-dir) (= :column-reverse saved-dir))
set-direction
(fn [dir]
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})))
@ -386,7 +386,7 @@
[:div.btn-wrapper
[:div.direction
[:*
(for [dir [:row :reverse-row :column :reverse-column]]
(for [dir [:row :row-reverse :column :column-reverse]]
[:& direction-btn {:key (d/name dir)
:dir dir
:saved-dir saved-dir

19
frontend/src/app/util/code_gen.cljs
View file

@ -74,21 +74,6 @@
(fmt/format-size :width value values)
(fmt/format-size :heigth value values))))
(defn get-layout-orientation
[value]
(if (= :wrap value)
"wrap"
"nowrap"))
(defn get-layout-direction
[value]
(case value
:row "row"
:reverse-row "row-reverse"
:column "column"
:reverse-column "column-reverse"
"row"))
(defn styles-data
[shape]
{:position {:props [:type]
@ -134,10 +119,10 @@
:layout-gap "gap"
:layout-padding "padding"}
:format {:layout name
:layout-flex-dir get-layout-direction
:layout-flex-dir name
:layout-align-items name
:layout-justify-content name
:layout-wrap-type get-layout-orientation
:layout-wrap-type name
:layout-gap format-gap
:layout-padding fmt/format-padding}}})