3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 14:21:39 +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

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

@ -11,13 +11,13 @@
[clojure.spec.alpha :as s])) [clojure.spec.alpha :as s]))
;; :layout ;; :flex, :grid in the future ;; :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-type ;; :simple, :multiple
;; :layout-gap ;; {:row-gap number , :column-gap number} ;; :layout-gap ;; {:row-gap number , :column-gap number}
;; :layout-align-items ;; :start :end :center :stretch ;; :layout-align-items ;; :start :end :center :stretch
;; :layout-justify-content ;; :start :center :end :space-between :space-around ;; :layout-justify-content ;; :start :center :end :space-between :space-around
;; :layout-align-content ;; :start :center :end :space-between :space-around :stretch (by default) ;; :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-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
@ -32,13 +32,13 @@
;; :layout-item-min-w ;; num ;; :layout-item-min-w ;; num
(s/def ::layout #{:flex :grid}) (s/def ::layout #{:flex :grid})
(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column}) (s/def ::layout-flex-dir #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script
(s/def ::layout-gap-type #{:simple :multiple}) (s/def ::layout-gap-type #{:simple :multiple})
(s/def ::layout-gap ::us/safe-number) (s/def ::layout-gap ::us/safe-number)
(s/def ::layout-align-items #{:start :end :center :stretch}) (s/def ::layout-align-items #{:start :end :center :stretch})
(s/def ::layout-align-content #{:start :end :center :space-between :space-around :stretch}) (s/def ::layout-align-content #{:start :end :center :space-between :space-around :stretch})
(s/def ::layout-justify-content #{:start :center :end :space-between :space-around}) (s/def ::layout-justify-content #{:start :center :end :space-between :space-around})
(s/def ::layout-wrap-type #{:wrap :no-wrap}) (s/def ::layout-wrap-type #{:wrap :nowrap :no-wrap}) ;;TODO remove no-wrap after script
(s/def ::layout-padding-type #{:simple :multiple}) (s/def ::layout-padding-type #{:simple :multiple})
(s/def ::p1 ::us/safe-number) (s/def ::p1 ::us/safe-number)
@ -148,11 +148,11 @@
(defn col? (defn col?
[{:keys [layout-flex-dir]}] [{:keys [layout-flex-dir]}]
(or (= :column layout-flex-dir) (= :reverse-column layout-flex-dir))) (or (= :column layout-flex-dir) (= :column-reverse layout-flex-dir)))
(defn row? (defn row?
[{:keys [layout-flex-dir]}] [{:keys [layout-flex-dir]}]
(or (= :row layout-flex-dir) (= :reverse-row layout-flex-dir))) (or (= :row layout-flex-dir) (= :row-reverse layout-flex-dir)))
(defn gaps (defn gaps
[{:keys [layout-gap]}] [{:keys [layout-gap]}]
@ -278,8 +278,8 @@
(defn reverse? (defn reverse?
[{:keys [layout-flex-dir]}] [{:keys [layout-flex-dir]}]
(or (= :reverse-row layout-flex-dir) (or (= :row-reverse layout-flex-dir)
(= :reverse-column layout-flex-dir))) (= :column-reverse layout-flex-dir)))
(defn space-between? (defn space-between?
[{:keys [layout-justify-content]}] [{:keys [layout-justify-content]}]

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

@ -1707,13 +1707,13 @@
cursor: pointer; cursor: pointer;
border-right: 1px solid $color-gray-60; border-right: 1px solid $color-gray-60;
padding: 2px; padding: 2px;
&.reverse-row { &.row-reverse {
svg { svg {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
&.reverse-column { &.column-reverse {
svg { svg {
transform: rotate(-90deg); transform: rotate(-90deg);
} }

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

@ -48,7 +48,7 @@
:layout-align-items :start :layout-align-items :start
:layout-justify-content :start :layout-justify-content :start
:layout-align-content :stretch :layout-align-content :stretch
:layout-wrap-type :no-wrap :layout-wrap-type :nowrap
:layout-padding-type :simple :layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}}) :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
@ -136,8 +136,8 @@
direction direction
(cond (cond
(mth/close? tmin t1) :row (mth/close? tmin t1) :row
(mth/close? tmin t2) :reverse-column (mth/close? tmin t2) :column-reverse
(mth/close? tmin t3) :reverse-row (mth/close? tmin t3) :row-reverse
(mth/close? tmin t4) :column)] (mth/close? tmin t4) :column)]
{:layout-flex-dir direction})) {: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-gap "gap"
:layout-padding "padding"} :layout-padding "padding"}
:format {:layout name :format {:layout name
:layout-flex-dir cg/get-layout-direction :layout-flex-dir name
:layout-align-items name :layout-align-items name
:layout-justify-content name :layout-justify-content name
:layout-wrap-type cg/get-layout-orientation :layout-wrap-type name
:layout-gap fm/format-gap :layout-gap fm/format-gap
:layout-padding fm/format-padding}}) :layout-padding fm/format-padding}})
@ -82,7 +82,7 @@
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label "Direction"] [: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)}]] [:& copy-button {:data (copy-data shape :layout-flex-dir)}]]
[:div.attributes-unit-row [:div.attributes-unit-row
@ -97,7 +97,7 @@
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label "Flex wrap"] [: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)}]] [:& copy-button {:data (copy-data shape :layout-wrap-type)}]]
(when (= :wrap (:layout-wrap-type shape)) (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 (def layout-container-flex-attrs
[:layout ;; :flex, :grid in the future [: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-type ;; :simple, :multiple
:layout-gap ;; {:row-gap number , :column-gap number} :layout-gap ;; {:row-gap number , :column-gap number}
:layout-align-items ;; :start :end :center :stretch :layout-align-items ;; :start :end :center :stretch
:layout-justify-content ;; :start :center :end :space-between :space-around :layout-justify-content ;; :start :center :end :space-between :space-around
:layout-align-content ;; :start :center :end :space-between :space-around :stretch (by default) :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-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
]) ])
@ -101,8 +101,8 @@
[:button.dir.tooltip.tooltip-bottom [:button.dir.tooltip.tooltip-bottom
{:class (dom/classnames :active (= saved-dir dir) {:class (dom/classnames :active (= saved-dir dir)
:row (= :row dir) :row (= :row dir)
:reverse-row (= :reverse-row dir) :row-reverse (= :row-reverse dir)
:reverse-column (= :reverse-column dir) :column-reverse (= :column-reverse dir)
:column (= :column dir)) :column (= :column dir))
:key (dm/str "direction-" dir) :key (dm/str "direction-" dir)
:alt (str/replace (str/capital (d/name dir)) "-" " ") :alt (str/replace (str/capital (d/name dir)) "-" " ")
@ -113,9 +113,9 @@
[{:keys [wrap-type set-wrap] :as props}] [{:keys [wrap-type set-wrap] :as props}]
[:* [:*
[:button.tooltip.tooltip-bottom [:button.tooltip.tooltip-bottom
{:class (dom/classnames :active (= wrap-type :no-wrap)) {:class (dom/classnames :active (= wrap-type :nowrap))
:alt "No-wrap" :alt "Nowrap"
:on-click #(set-wrap :no-wrap) :on-click #(set-wrap :nowrap)
:style {:padding 0}} :style {:padding 0}}
[:span.no-wrap i/minus]] [:span.no-wrap i/minus]]
[:button.wrap.tooltip.tooltip-bottom [:button.wrap.tooltip.tooltip-bottom
@ -252,10 +252,10 @@
:on-click (fn [event] :on-click (fn [event]
(reset! gap-selected? :column-gap) (reset! gap-selected? :column-gap)
(dom/select-target event)) (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) :on-blur #(reset! gap-selected? :none)
:value (:column-gap gap-value) :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 [:div.gap-row.tooltip.tooltip-bottom-left
{:alt "Row gap"} {:alt "Row gap"}
@ -266,10 +266,10 @@
:on-click (fn [event] :on-click (fn [event]
(reset! gap-selected? :row-gap) (reset! gap-selected? :row-gap)
(dom/select-target event)) (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) :on-blur #(reset! gap-selected? :none)
:value (:row-gap gap-value) :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/defc layout-container-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
@ -302,7 +302,7 @@
;; Flex-direction ;; Flex-direction
saved-dir (:layout-flex-dir values) 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 set-direction
(fn [dir] (fn [dir]
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))) (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})))
@ -386,7 +386,7 @@
[:div.btn-wrapper [:div.btn-wrapper
[:div.direction [:div.direction
[:* [:*
(for [dir [:row :reverse-row :column :reverse-column]] (for [dir [:row :row-reverse :column :column-reverse]]
[:& direction-btn {:key (d/name dir) [:& direction-btn {:key (d/name dir)
:dir dir :dir dir
:saved-dir saved-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 :width value values)
(fmt/format-size :heigth 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 (defn styles-data
[shape] [shape]
{:position {:props [:type] {:position {:props [:type]
@ -134,10 +119,10 @@
:layout-gap "gap" :layout-gap "gap"
:layout-padding "padding"} :layout-padding "padding"}
:format {:layout name :format {:layout name
:layout-flex-dir get-layout-direction :layout-flex-dir name
:layout-align-items name :layout-align-items name
:layout-justify-content name :layout-justify-content name
:layout-wrap-type get-layout-orientation :layout-wrap-type name
:layout-gap format-gap :layout-gap format-gap
:layout-padding fmt/format-padding}}}) :layout-padding fmt/format-padding}}})

4
frontend/translations/ca.po
View file

@ -3372,11 +3372,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Columna" msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Columna invertida" msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Fila invertida" msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/de.po
View file

@ -3643,11 +3643,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Spalte" msgstr "Spalte"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Spalte-umgekehrt" msgstr "Spalte-umgekehrt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Reihe-umgekehrt" msgstr "Reihe-umgekehrt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/en.po
View file

@ -3789,11 +3789,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Column" msgstr "Column"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Reverse column" msgstr "Reverse column"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Reverse row" msgstr "Reverse row"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/es.po
View file

@ -3923,11 +3923,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Columna" msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Columna invertida" msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Fila invertida" msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/eu.po
View file

@ -3541,11 +3541,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Zutabea" msgstr "Zutabea"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Alderantzikatu zutabea" msgstr "Alderantzikatu zutabea"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Alderantzikatu lerroa" msgstr "Alderantzikatu lerroa"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/he.po
View file

@ -3605,11 +3605,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "עמודה" msgstr "עמודה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "היפוך עמודה" msgstr "היפוך עמודה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "היפוך שורה" msgstr "היפוך שורה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs

4
frontend/translations/tr.po
View file

@ -3635,11 +3635,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Sütun" msgstr "Sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-column" msgid "workspace.options.layout.direction.column-reverse"
msgstr "Ters sütun" msgstr "Ters sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.reverse-row" msgid "workspace.options.layout.direction.row-reverse"
msgstr "Ters satır" msgstr "Ters satır"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs