Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 15:39:50 -05:00
Code Issues 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
Show stats 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]))
;; :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
@ -32,13 +32,13 @@
;; :layout-item-min-w ;; num
(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 ::us/safe-number)
(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-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 ::p1 ::us/safe-number)
@ -148,11 +148,11 @@
(defn col?
[{: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?
[{: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
[{:keys [layout-gap]}]
@ -278,8 +278,8 @@
(defn reverse?
[{:keys [layout-flex-dir]}]
(or (= :reverse-row layout-flex-dir)
(= :reverse-column layout-flex-dir)))
(or (= :row-reverse layout-flex-dir)
(= :column-reverse layout-flex-dir)))
(defn space-between?
[{:keys [layout-justify-content]}]

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

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

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

4
frontend/translations/ca.po
View file

@ -3372,11 +3372,11 @@ msgid "workspace.options.layout.direction.column"
msgstr "Columna"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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"
#: 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 "עמודה"
#: 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 "היפוך עמודה"
#: 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 "היפוך שורה"
#: 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"
#: 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"
#: 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"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs