Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

🎉 Add layout items options and feature toggle

Browse source
This commit is contained in:
alonso.torres 2022-07-12 11:05:53 +02:00 • committed by Andrey Antukh
parent 28abe785e8
commit 3ac1760141
20 changed files with 352 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
common/src/app/common/geom/shapes/layout.cljc
View file

@ -8,8 +8,7 @@
(:require
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes.rect :as gre]
[app.common.geom.shapes.common :as gco]))
[app.common.geom.shapes.rect :as gre]))
;; :layout ;; true if active, false if not
;; :layout-dir ;; :right, :left, :top, :bottom

128
common/src/app/common/types/shape.cljc
View file

@ -13,6 +13,7 @@
[app.common.types.shape.blur :as ctsb]
[app.common.types.shape.export :as ctse]
[app.common.types.shape.interactions :as ctsi]
[app.common.types.shape.layout :as ctsl]
[app.common.types.shape.radius :as ctsr]
[app.common.types.shape.shadow :as ctss]
[clojure.set :as set]
@ -156,68 +157,71 @@
:luminosity})
(s/def ::shape-attrs
(s/keys :opt-un [::id
::type
::name
::component-id
::component-file
::component-root?
::shape-ref
::selrect
::points
::blocked
::collapsed
::fills
::fill-color ;; TODO: remove these attributes
::fill-opacity ;; when backward compatibility
::fill-color-gradient ;; is no longer needed
::fill-color-ref-file ;;
::fill-color-ref-id ;;
::hide-fill-on-export
::font-family
::font-size
::font-style
::font-weight
::hidden
::letter-spacing
::line-height
::locked
::proportion
::proportion-lock
::constraints-h
::constraints-v
::fixed-scroll
::ctsr/rx
::ctsr/ry
::ctsr/r1
::ctsr/r2
::ctsr/r3
::ctsr/r4
::x
::y
::exports
::shapes
::strokes
::stroke-color ;; TODO: same thing
::stroke-color-ref-file ;;
::stroke-color-ref-i ;;
::stroke-opacity ;;
::stroke-style
::stroke-width
::stroke-alignment
::stroke-cap-start
::stroke-cap-end
::text-align
::transform
::transform-inverse
::width
::height
::masked-group?
::ctsi/interactions
::ctss/shadow
::ctsb/blur
::opacity
::blend-mode]))
(s/and
::ctsl/layout-container-props
::ctsl/layout-child-props
(s/keys :opt-un [::id
::type
::name
::component-id
::component-file
::component-root?
::shape-ref
::selrect
::points
::blocked
::collapsed
::fills
::fill-color ;; TODO: remove these attributes
::fill-opacity ;; when backward compatibility
::fill-color-gradient ;; is no longer needed
::fill-color-ref-file ;;
::fill-color-ref-id ;;
::hide-fill-on-export
::font-family
::font-size
::font-style
::font-weight
::hidden
::letter-spacing
::line-height
::locked
::proportion
::proportion-lock
::constraints-h
::constraints-v
::fixed-scroll
::ctsr/rx
::ctsr/ry
::ctsr/r1
::ctsr/r2
::ctsr/r3
::ctsr/r4
::x
::y
::exports
::shapes
::strokes
::stroke-color ;; TODO: same thing
::stroke-color-ref-file ;;
::stroke-color-ref-i ;;
::stroke-opacity ;;
::stroke-style
::stroke-width
::stroke-alignment
::stroke-cap-start
::stroke-cap-end
::text-align
::transform
::transform-inverse
::width
::height
::masked-group?
::ctsi/interactions
::ctss/shadow
::ctsb/blur
::opacity
::blend-mode])))
(s/def :internal.shape.text/type #{"root" "paragraph-set" "paragraph"})
(s/def :internal.shape.text/children

61
common/src/app/common/types/shape/layout.cljc Normal file
View file

@ -0,0 +1,61 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.common.types.shape.layout
(:require
[app.common.spec :as us]
[clojure.spec.alpha :as s]))
(s/def ::layout boolean?)
(s/def ::layout-dir #{:right :left :top :bottom})
(s/def ::layout-gap ::us/safe-number)
(s/def ::layout-type #{:packed :space-between :space-around})
(s/def ::layout-wrap-type #{:wrap :no-wrap})
(s/def ::layout-padding-type #{:simple :multiple})
(s/def ::p1 ::us/safe-number)
(s/def ::p2 ::us/safe-number)
(s/def ::p3 ::us/safe-number)
(s/def ::p4 ::us/safe-number)
(s/def ::layout-padding
(s/keys :req-un [::p1]
:opt-un [::p2 ::p3 ::p4]))
(s/def ::layout-h-orientation #{:left :center :right})
(s/def ::layout-v-orientation #{:top :center :bottom})
(s/def ::layout-container-props
(s/keys :opt-un [::layout
::layout-dir
::layout-gap
::layout-type
::layout-wrap-type
::layout-padding-type
::layout-padding
::layout-h-orientation
::layout-v-orientation]))
(s/def ::layout-margin (s/keys :req-un [::m1]
:opt-un [::m2 ::m3 ::m4]))
(s/def ::layout-margin-type #{:simple :multiple})
(s/def ::layout-h-behavior #{:fill :fix :auto})
(s/def ::layout-v-behavior #{:fill :fix :auto})
(s/def ::layout-max-h ::us/safe-number)
(s/def ::layout-min-h ::us/safe-number)
(s/def ::layout-max-w ::us/safe-number)
(s/def ::layout-min-w ::us/safe-number)
(s/def ::layout-child-props
(s/keys :opt-un [::layout-margin
::layout-margin-type
::layout-h-behavior
::layout-v-behavior
::layout-max-h
::layout-min-h
::layout-max-w
::layout-min-w]))

2
frontend/src/app/main/constants.cljs
View file

@ -23,8 +23,6 @@
:grid-alignment true
:background "var(--color-white)"})
(def has-layout-item false)
(def size-presets
[{:name "APPLE"}
{:name "iPhone 12/12 Pro"

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

@ -7,6 +7,7 @@
(ns app.main.data.workspace.shape-layout
(:require
[app.common.data :as d]
[app.common.pages.helpers :as cph]
[app.main.data.workspace.changes :as dwc]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.data.workspace.transforms :as dwt]
@ -72,3 +73,12 @@
(rx/of (dwc/update-shapes ids #(d/deep-merge % changes))
(update-layout-positions ids)))))
(defn update-layout-child
[ids changes]
(ptk/reify ::update-layout-child
ptk/WatchEvent
(watch [_ state _]
(let [objects (wsh/lookup-page-objects state)
parent-ids (->> ids (map #(cph/get-parent-id objects %)))]
(rx/of (dwc/update-shapes ids #(d/deep-merge (or % {}) changes))
(update-layout-positions parent-ids))))))

8
frontend/src/app/main/refs.cljs
View file

@ -410,3 +410,11 @@
(defn workspace-text-modifier-by-id [id]
(l/derived #(get % id) workspace-text-modifier =))
(defn is-layout-child?
[ids]
(l/derived
(fn [objects]
(->> ids
(some #(-> (cph/get-parent objects %) :layout))))
workspace-page-objects))

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

@ -293,7 +293,8 @@
[:div.direction
[:*
(for [dir [:left :right :bottom :top]]
[:& direction-row {:dir dir
[:& direction-row {:key (d/name dir)
:dir dir
:saved-dir (:layout-dir values)
:set-direction set-direction}])]]
[:div.gap.tooltip.tooltip-bottom-left

117
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -8,6 +8,8 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
@ -15,18 +17,19 @@
[rumext.alpha :as mf]))
(def layout-item-attrs
[:margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
:margin-type ;; :simple :multiple
:h-behavior ;; :fill :fix :auto
:v-behavior ;; :fill :fix :auto
:max-h ;; num
:min-h ;; num
:max-w ;; num
:min-w ]) ;; num
(mf/defc margin-section
[{:keys [test-values change-margin-style select-all on-margin-change] :as props}]
[:layout-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
:layout-margin-type ;; :simple :multiple
:layout-h-behavior ;; :fill :fix :auto
:layout-v-behavior ;; :fill :fix :auto
:layout-max-h ;; num
:layout-min-h ;; num
:layout-max-w ;; num
:layout-min-w ]) ;; num
(let [margin-type (:margin-type @test-values)]
(mf/defc margin-section
[{:keys [values change-margin-style on-margin-change] :as props}]
(let [margin-type (or (:layout-margin-type values) :simple)]
[:div.row-flex
[:div.margin-options
@ -49,9 +52,9 @@
[:> numeric-input
{:placeholder "--"
:on-click select-all
:on-click #(dom/select-target %)
:on-change (partial on-margin-change :simple)
:value (:m1 (:margin @test-values))}]]]
:value (or (-> values :layout-margin :m1) 0)}]]]
(= margin-type :multiple)
[:*
@ -67,101 +70,93 @@
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click select-all
:on-click #(dom/select-target %)
:on-change (partial on-margin-change num)
:value (num (:margin @test-values))}]]])])]))
:value (or (-> values :layout-margin num) 0)}]]])])]))
(mf/defc element-behavior
[{:keys [is-layout-container? is-layout-item? h-behavior v-behavior on-change-behavior] :as props}]
(let [auto? is-layout-container?
fill? (and (= true is-layout-item?) (not= true is-layout-container?))]
[{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}]
(let [fill? is-layout-child?
auto? is-layout-container?]
[:div.layout-behavior
[:div.button-wrapper.horizontal
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal fix"
:class (dom/classnames :activated (= h-behavior :fix))
:class (dom/classnames :activated (= layout-h-behavior :fix))
:on-click #(on-change-behavior :h :fix)}
[:span.icon i/auto-fix-layout]]
(when fill?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal fill"
:class (dom/classnames :activated (= h-behavior :fill))
:class (dom/classnames :activated (= layout-h-behavior :fill))
:on-click #(on-change-behavior :h :fill)}
[:span.icon i/auto-fill]])
(when auto?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal auto"
:class (dom/classnames :activated (= h-behavior :auto))
:class (dom/classnames :activated (= layout-v-behavior :auto))
:on-click #(on-change-behavior :h :auto)}
[:span.icon i/auto-hug]])]
[:div.button-wrapper
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical fix"
:class (dom/classnames :activated (= v-behavior :fix))
:class (dom/classnames :activated (= layout-v-behavior :fix))
:on-click #(on-change-behavior :v :fix)}
[:span.icon i/auto-fix-layout]]
(when fill?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical fill"
:class (dom/classnames :activated (= v-behavior :fill))
:class (dom/classnames :activated (= layout-v-behavior :fill))
:on-click #(on-change-behavior :v :fill)}
[:span.icon i/auto-fill]])
(when auto?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical auto"
:class (dom/classnames :activated (= v-behavior :auto))
:class (dom/classnames :activated (= layout-v-behavior :auto))
:on-click #(on-change-behavior :v :auto)}
[:span.icon i/auto-hug]])]]))
(mf/defc layout-item-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
[{:keys [_ids _type _values] :as props}]
(let [test-values (mf/use-state {:margin {:m1 0 :m2 0 :m3 0 :m4 0}
:margin-type :simple
:h-behavior :fill
:v-behavior :fill
:max-h 100
:min-h 100
:max-w 100
:min-w 100})
open? (mf/use-state false)
[{:keys [ids _type values is-layout-child? is-layout-container?] :as props}]
(let [open? (mf/use-state false)
toggle-open (fn [] (swap! open? not))
is-layout-container? true
is-layout-item? true
change-margin-style
(fn [type]
(swap! test-values assoc :margin-type type))
select-all #(dom/select-target %)
(st/emit! (dwsl/update-layout-child ids {:layout-margin-type type})))
on-margin-change
(fn [type val]
(if (= type :simple)
(swap! test-values assoc :margin {:m1 val :m2 val :m3 val :m4 val})
(swap! test-values assoc-in [:margin type] val)))
(st/emit! (dwsl/update-layout-child ids {:layout-margin {:m1 val :m2 val :m3 val :m4 val}}))
(st/emit! (dwsl/update-layout-child ids {:layout-margin {type val}}))))
on-change-behavior
(fn [dir value]
(if (= dir :h)
(swap! test-values assoc :h-behavior value)
(swap! test-values assoc :v-behavior value)))
(st/emit! (dwsl/update-layout-child ids {:layout-h-behavior value}))
(st/emit! (dwsl/update-layout-child ids {:layout-v-behavior value}))))
on-size-change
(fn [measure value]
(swap! test-values assoc measure value))]
(st/emit! (dwsl/update-layout-child ids {measure value})))]
[:div.element-set
[:div.element-set-title
[:span (tr "workspace.options.layout-item.title")]]
[:div.element-set-content.layout-item-menu
[:& element-behavior {:is-layout-container? is-layout-container?
:is-layout-item? is-layout-item?
:v-behavior (:v-behavior @test-values)
:h-behavior (:h-behavior @test-values)
[:& element-behavior {:is-layout-child? is-layout-child?
:is-layout-container? is-layout-container?
:layout-v-behavior (or (:layout-v-behavior values) :fix)
:layout-h-behavior (or (:layout-h-behavior values) :fix)
:on-change-behavior on-change-behavior}]
[:div.margin [:& margin-section {:test-values test-values
[:div.margin [:& margin-section {:values values
:change-margin-style change-margin-style
:select-all select-all
:on-margin-change on-margin-change}]]
[:div.advanced-ops-container
[:div.advanced-ops.toltip.tooltip-bottom
@ -169,22 +164,24 @@
:alt (tr "workspace.options.layout-item.advanced-ops")}
[:div.element-set-actions-button i/actions]
[:span (tr "workspace.options.layout-item.advanced-ops")]]]
(when (= true @open?)
(when @open?
[:div.advanced-ops-body
(for [item [:max-h :min-h :max-w :min-w]]
(for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]]
[:div.input-element
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))
{:key (d/name item)
:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))
:title (tr (dm/str "workspace.options.layout-item." (d/name item)))
:class (dom/classnames "maxH" (= item :max-h)
"minH" (= item :min-h)
"maxW" (= item :max-w)
"minW" (= item :min-w))
:key item}
:class (dom/classnames "maxH" (= item :layout-max-h)
"minH" (= item :layout-min-h)
"maxW" (= item :layout-max-w)
"minW" (= item :layout-min-w))}
[:> numeric-input
{:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-click select-all
:on-click #(dom/select-target %)
:on-change (partial on-size-change item)
:value (item @test-values)}]])])]]))
:value (get values item)}]])])]]))

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.bool
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -25,17 +25,22 @@
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)
constraint-values (select-keys shape constraint-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]
[:& layer-menu {:ids ids

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.circle
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -22,20 +22,26 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)
constraint-values (select-keys shape constraint-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
(when has-layout-item
(when is-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]

31
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -6,7 +6,8 @@
(ns app.main.ui.workspace.sidebar.options.shapes.frame
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.features :as features]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]]
@ -23,12 +24,18 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
layout-active? (features/use-feature :auto-layout)
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)
measure-values (select-keys shape measure-attrs)
constraint-values (select-keys shape constraint-attrs)
layout-container-values (select-keys shape layout-container-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids [(:id shape)]
:values measure-values
@ -36,13 +43,19 @@
:shape shape}]
[:& constraints-menu {:ids ids
:values constraint-values}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when layout-active?
[:*
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
(when (or (:layout shape) is-layout-child?)
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? is-layout-child?
:is-layout-container? (:layout shape)
:shape shape}])])
[:& layer-menu {:ids ids
:type type
:values layer-values}]

22
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -7,14 +7,13 @@
(ns app.main.ui.workspace.sidebar.options.shapes.group
(:require
[app.common.data :as d]
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@ -34,6 +33,10 @@
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
file-id (unchecked-get props "file-id")
ids [(:id shape)]
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
type :group
[measure-ids measure-values] (get-attrs [shape] objects :measure)
[layer-ids layer-values] (get-attrs [shape] objects :layer)
@ -45,17 +48,20 @@
[text-ids text-values] (get-attrs [shape] objects :text)
[svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])]
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
[layout-ids layout-values] (get-attrs [shape] objects :layout)
[layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)
]
[layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)]
[:div.options
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}]
[:& layout-container-menu {:type type :ids layout-ids :values layout-values}]
(when has-layout-item
[:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}])
(when is-layout-child?
[:& layout-item-menu
{:type type
:ids layout-item-ids
:is-layout-child? true
:is-layout-container? false
:values layout-item-values}])
[:& constraints-menu {:ids constraint-ids :values constraint-values}]
[:& layer-menu {:type type :ids layer-ids :values layer-values}]

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.image
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -21,22 +21,28 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)
layer-values (select-keys shape layer-attrs)
constraint-values (select-keys shape constraint-attrs)
fill-values (select-keys shape fill-attrs)
stroke-values (select-keys shape stroke-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]

18
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -11,7 +11,7 @@
[app.common.geom.shapes :as gsh]
[app.common.pages.common :as cpc]
[app.common.text :as txt]
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
@ -247,6 +247,10 @@
type :multiple
all-types (into #{} (map :type shapes))
ids (->> shapes (map :id))
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
has-text? (contains? all-types :text)
[measure-ids measure-values] (get-attrs shapes objects :measure)
@ -284,10 +288,16 @@
(when-not (empty? measure-ids)
[:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}])
[:& layout-container-menu {:type type :ids layout-ids :values layout-container-values}]
(when (:layout layout-container-values)
[:& layout-container-menu {:type type :ids layout-ids :values layout-container-values}])
(when has-layout-item
[:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}])
(when is-layout-child?
[:& layout-item-menu
{:type type
:ids layout-item-ids
:is-layout-child? true
:is-layout-container? true
:values layout-item-values}])
(when-not (empty? constraint-ids)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.path
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -22,20 +22,26 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)
constraint-values (select-keys shape constraint-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
(when has-layout-item
(when is-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.rect
(:require
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -23,22 +23,28 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)
layer-values (select-keys shape layer-attrs)
constraint-values (select-keys shape constraint-attrs)
fill-values (select-keys shape fill-attrs)
stroke-values (select-keys shape stroke-attrs)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:shape shape}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View file

@ -8,7 +8,7 @@
(:require
[app.common.colors :as clr]
[app.common.data :as d]
[app.main.constants :refer [has-layout-item]]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
@ -95,12 +95,16 @@
(let [ids [(:id shape)]
type (:type shape)
{:keys [tag] :as content} (:content shape)
measure-values (select-keys shape measure-attrs)
constraint-values (select-keys shape constraint-attrs)
fill-values (get-fill-values shape)
stroke-values (get-stroke-values shape)
layout-item-values (select-keys shape layout-item-attrs)]
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)]
(when (contains? svg-elements tag)
[:*
@ -108,11 +112,13 @@
:type type
:values measure-values
:shape shape}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:shape shape}])
[:& constraints-menu {:ids ids
:values constraint-values}]

16
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View file

@ -7,7 +7,6 @@
(ns app.main.ui.workspace.sidebar.options.shapes.text
(:require
[app.common.data :as d]
[app.main.constants :refer [has-layout-item]]
[app.main.data.workspace.texts :as dwt]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
@ -27,6 +26,8 @@
(let [ids [(:id shape)]
type (:type shape)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
state-map (mf/deref refs/workspace-editor-state)
shared-libs (mf/deref refs/workspace-libraries)
@ -69,11 +70,14 @@
:type type
:values (select-keys shape measure-attrs)
:shape shape}]
(when has-layout-item
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:shape shape}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:shape shape}])
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}]

18
frontend/translations/en.po
View file

@ -3503,19 +3503,19 @@ msgid "workspace.options.layout-item.advanced-ops"
msgstr "Advanced options"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.max-h"
msgid "workspace.options.layout-item.layout-max-h"
msgstr "Max.Height"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.max-w"
msgid "workspace.options.layout-item.layout-max-w"
msgstr "Max.Width"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.min-h"
msgid "workspace.options.layout-item.layout-min-h"
msgstr "Min.Height"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.min-w"
msgid "workspace.options.layout-item.layout-min-w"
msgstr "Min.Width"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@ -3523,19 +3523,19 @@ msgid "workspace.options.layout-item.title"
msgstr "Element resizing"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-h"
msgid "workspace.options.layout-item.title.layout-max-h"
msgstr "Maximum height"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-w"
msgid "workspace.options.layout-item.title.layout-max-w"
msgstr "Maximum width"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.min-h"
msgid "workspace.options.layout-item.title.layout-min-h"
msgstr "Minimum height"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.min-w"
msgid "workspace.options.layout-item.title.layout-min-w"
msgstr "Minimum width"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -4368,4 +4368,4 @@ msgid "workspace.updates.update"
msgstr "Update"
msgid "workspace.viewport.click-to-close-path"
msgstr "Click to close the path"
msgstr "Click to close the path"

18
frontend/translations/es.po
View file

@ -3661,19 +3661,19 @@ msgid "workspace.options.layout-item.advanced-ops"
msgstr "Opciones avanzadas"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.max-h"
msgid "workspace.options.layout-item.layout-max-h"
msgstr "AlturaMax."
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.max-w"
msgid "workspace.options.layout-item.layout-max-w"
msgstr "AnchoMax."
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.min-h"
msgid "workspace.options.layout-item.layout-min-h"
msgstr "AlturaMin."
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.min-w"
msgid "workspace.options.layout-item.layout-min-w"
msgstr "AnchoMin."
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@ -3681,19 +3681,19 @@ msgid "workspace.options.layout-item.title"
msgstr "Redimensionado de elemento"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-h"
msgid "workspace.options.layout-item.title.layout-max-h"
msgstr "Altura máxima"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-w"
msgid "workspace.options.layout-item.title.layout-max-w"
msgstr "Ancho máximo"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.min-h"
msgid "workspace.options.layout-item.title.layout-min-h"
msgstr "Altura mínima"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.min-w"
msgid "workspace.options.layout-item.title.layout-min-w"
msgstr "Ancho mínimo"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -4547,4 +4547,4 @@ msgid "workspace.updates.update"
msgstr "Actualizar"
msgid "workspace.viewport.click-to-close-path"
msgstr "Pulsar para cerrar la ruta"
msgstr "Pulsar para cerrar la ruta"