Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 17:01:33 -05:00
Code Issues Activity

♻️ Refactor modules of options

Browse source
This commit is contained in:
alonso.torres 2021-03-08 15:39:49 +01:00
parent 68d8a49466
commit d39694af59
25 changed files with 234 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/handoff/exports.cljs
View file

@ -18,7 +18,7 @@
[app.util.dom :as dom]
[app.main.store :as st]
[app.main.data.messages :as dm]
[app.main.ui.workspace.sidebar.options.exports :as we]))
[app.main.ui.workspace.sidebar.options.menus.exports :as we]))
(mf/defc exports
[{:keys [shape page-id file-id] :as props}]

2
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -31,7 +31,7 @@
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
[app.util.data :refer [matches-search]]
[app.util.dom :as dom]
[app.util.dom.dnd :as dnd]

25
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -17,19 +17,18 @@
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.align :refer [align-options]]
[app.main.ui.workspace.sidebar.options.circle :as circle]
[app.main.ui.workspace.sidebar.options.exports :refer [exports-menu]]
[app.main.ui.workspace.sidebar.options.frame :as frame]
[app.main.ui.workspace.sidebar.options.group :as group]
[app.main.ui.workspace.sidebar.options.icon :as icon]
[app.main.ui.workspace.sidebar.options.image :as image]
[app.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]]
[app.main.ui.workspace.sidebar.options.multiple :as multiple]
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
[app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
[app.main.ui.workspace.sidebar.options.page :as page]
[app.main.ui.workspace.sidebar.options.path :as path]
[app.main.ui.workspace.sidebar.options.rect :as rect]
[app.main.ui.workspace.sidebar.options.text :as text]
[app.main.ui.workspace.sidebar.options.svg-raw :as svg-raw]
[app.main.ui.workspace.sidebar.options.shapes.circle :as circle]
[app.main.ui.workspace.sidebar.options.shapes.frame :as frame]
[app.main.ui.workspace.sidebar.options.shapes.group :as group]
[app.main.ui.workspace.sidebar.options.shapes.image :as image]
[app.main.ui.workspace.sidebar.options.shapes.multiple :as multiple]
[app.main.ui.workspace.sidebar.options.shapes.path :as path]
[app.main.ui.workspace.sidebar.options.shapes.rect :as rect]
[app.main.ui.workspace.sidebar.options.shapes.svg-raw :as svg-raw]
[app.main.ui.workspace.sidebar.options.shapes.text :as text]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.object :as obj]
[beicon.core :as rx]
@ -46,7 +45,6 @@
:group [:& group/options {:shape shape :shape-with-children shapes-with-children}]
:text [:& text/options {:shape shape}]
:rect [:& rect/options {:shape shape}]
:icon [:& icon/options {:shape shape}]
:circle [:& circle/options {:shape shape}]
:path [:& path/options {:shape shape}]
:image [:& image/options {:shape shape}]
@ -106,4 +104,3 @@
:page-id page-id
:section section}]))

32
frontend/src/app/main/ui/workspace/sidebar/options/icon.cljs
View file

@ -1,32 +0,0 @@
;; 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/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.icon
(:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
(mf/defc options
[{: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)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values}]]))

2
frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.blur
(ns app.main.ui.workspace.sidebar.options.menus.blur
(:require
[rumext.alpha :as mf]
[app.common.data :as d]

2
frontend/src/app/main/ui/workspace/sidebar/options/component.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.component
(ns app.main.ui.workspace.sidebar.options.menus.component
(:require
[rumext.alpha :as mf]
[app.common.pages :as cp]

2
frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.exports
(ns app.main.ui.workspace.sidebar.options.menus.exports
(:require
[cuerdas.core :as str]
[beicon.core :as rx]

2
frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.fill
(ns app.main.ui.workspace.sidebar.options.menus.fill
(:require
[app.common.pages :as cp]
[app.main.data.colors :as dc]

2
frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.frame-grid
(ns app.main.ui.workspace.sidebar.options.menus.frame-grid
(:require
[rumext.alpha :as mf]
[okulary.core :as l]

2
frontend/src/app/main/ui/workspace/sidebar/options/interactions.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.interactions
(ns app.main.ui.workspace.sidebar.options.menus.interactions
(:require
[rumext.alpha :as mf]
[app.common.data :as d]

2
frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.measures
(ns app.main.ui.workspace.sidebar.options.menus.measures
(:require
[rumext.alpha :as mf]
[app.main.ui.icons :as i]

2
frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.shadow
(ns app.main.ui.workspace.sidebar.options.menus.shadow
(:require
[rumext.alpha :as mf]
[app.common.data :as d]

2
frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.stroke
(ns app.main.ui.workspace.sidebar.options.menus.stroke
(:require
[cuerdas.core :as str]
[rumext.alpha :as mf]

2
frontend/src/app/main/ui/workspace/sidebar/options/svg_attrs.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.svg-attrs
(ns app.main.ui.workspace.sidebar.options.menus.svg-attrs
(:require
[cuerdas.core :as str]
[app.common.data :as d]

134
frontend/src/app/main/ui/workspace/sidebar/options/text.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -7,31 +7,24 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.text
(ns app.main.ui.workspace.sidebar.options.menus.text
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[okulary.core :as l]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.common.data :as d]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.texts :as dwt]
[app.main.data.workspace.libraries :as dwl]
[app.main.store :as st]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.typography :refer [typography-entry typography-options]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.util.dom :as dom]
[app.main.data.workspace.texts :as dwt]
[app.main.fonts :as fonts]
[app.util.i18n :as i18n :refer [tr t]]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry typography-options]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.text :as ut]
["slate" :refer [Transforms]]))
[cuerdas.core :as str]
[rumext.alpha :as mf]))
(def text-typography-attrs [:typography-ref-id :typography-ref-file])
(def text-fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill-color-gradient :fill :opacity ])
@ -56,7 +49,7 @@
(def attrs (d/concat #{} shape-attrs root-attrs paragraph-attrs text-attrs))
(mf/defc text-align-options
[{:keys [editor ids values locale on-change] :as props}]
[{:keys [editor ids values on-change] :as props}]
(let [{:keys [text-align]} values
text-align (or text-align "left")
@ -68,29 +61,29 @@
;; --- Align
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-left")
{:alt (tr "workspace.options.text-options.align-left")
:class (dom/classnames :current (= "left" text-align))
:on-click #(handle-change % "left")}
i/text-align-left]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-center")
{:alt (tr "workspace.options.text-options.align-center")
:class (dom/classnames :current (= "center" text-align))
:on-click #(handle-change % "center")}
i/text-align-center]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-right")
{:alt (tr "workspace.options.text-options.align-right")
:class (dom/classnames :current (= "right" text-align))
:on-click #(handle-change % "right")}
i/text-align-right]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-justify")
{:alt (tr "workspace.options.text-options.align-justify")
:class (dom/classnames :current (= "justify" text-align))
:on-click #(handle-change % "justify")}
i/text-align-justify]]))
(mf/defc vertical-align
[{:keys [shapes editor ids values locale on-change] :as props}]
[{:keys [shapes editor ids values on-change] :as props}]
(let [{:keys [vertical-align]} values
vertical-align (or vertical-align "top")
handle-change
@ -99,23 +92,23 @@
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-top")
{:alt (tr "workspace.options.text-options.align-top")
:class (dom/classnames :current (= "top" vertical-align))
:on-click #(handle-change % "top")}
i/align-top]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-middle")
{:alt (tr "workspace.options.text-options.align-middle")
:class (dom/classnames :current (= "center" vertical-align))
:on-click #(handle-change % "center")}
i/align-middle]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-bottom")
{:alt (tr "workspace.options.text-options.align-bottom")
:class (dom/classnames :current (= "bottom" vertical-align))
:on-click #(handle-change % "bottom")}
i/align-bottom]]))
(mf/defc grow-options
[{:keys [editor ids values locale on-change] :as props}]
[{:keys [editor ids values on-change] :as props}]
(let [to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
grow-type (->> values :grow-type)
handle-change-grow
@ -124,23 +117,23 @@
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.grow-fixed")
{:alt (tr "workspace.options.text-options.grow-fixed")
:class (dom/classnames :current (= :fixed grow-type))
:on-click #(handle-change-grow % :fixed)}
i/auto-fix]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.grow-auto-width")
{:alt (tr "workspace.options.text-options.grow-auto-width")
:class (dom/classnames :current (= :auto-width grow-type))
:on-click #(handle-change-grow % :auto-width)}
i/auto-width]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.grow-auto-height")
{:alt (tr "workspace.options.text-options.grow-auto-height")
:class (dom/classnames :current (= :auto-height grow-type))
:on-click #(handle-change-grow % :auto-height)}
i/auto-height]]))
(mf/defc text-decoration-options
[{:keys [editor ids values locale on-change] :as props}]
[{:keys [editor ids values on-change] :as props}]
(let [{:keys [text-decoration]} values
text-decoration (or text-decoration "none")
@ -150,19 +143,19 @@
(on-change {:text-decoration type}))]
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.none")
{:alt (tr "workspace.options.text-options.none")
:class (dom/classnames :current (= "none" text-decoration))
:on-click #(handle-change % "none")}
i/minus]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.underline")
{:alt (tr "workspace.options.text-options.underline")
:class (dom/classnames :current (= "underline" text-decoration))
:on-click #(handle-change % "underline")}
i/underline]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.strikethrough")
{:alt (tr "workspace.options.text-options.strikethrough")
:class (dom/classnames :current (= "line-through" text-decoration))
:on-click #(handle-change % "line-through")}
i/strikethrough]]))
@ -176,14 +169,13 @@
{::mf/wrap [mf/memo]}
[{:keys [ids type editor values] :as props}]
(let [locale (mf/deref i18n/locale)
current-file-id (mf/use-ctx ctx/current-file-id)
(let [current-file-id (mf/use-ctx ctx/current-file-id)
typographies (mf/deref refs/workspace-file-typography)
shared-libs (mf/deref refs/workspace-libraries)
label (case type
:multiple (t locale "workspace.options.text-options.title-selection")
:group (t locale "workspace.options.text-options.title-group")
(t locale "workspace.options.text-options.title"))
:multiple (tr "workspace.options.text-options.title-selection")
:group (tr "workspace.options.text-options.title-group")
(tr "workspace.options.text-options.title"))
emit-update!
(fn [id attrs]
@ -242,8 +234,7 @@
:ids ids
:values values
:on-change (fn [attrs]
(run! #(emit-update! % attrs) ids))
:locale locale}]
(run! #(emit-update! % attrs) ids))}]
[:div.element-set
[:div.element-set-title
@ -261,9 +252,9 @@
(= (:typography-ref-id values) :multiple)
[:div.multiple-typography
[:div.multiple-typography-text (t locale "workspace.libraries.text.multiple-typography")]
[:div.multiple-typography-text (tr "workspace.libraries.text.multiple-typography")]
[:div.multiple-typography-button {:on-click handle-detach-typography
:title (t locale "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
:title (tr "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
:else
[:> typography-options opts])
@ -276,58 +267,5 @@
[:div.row-flex
[:> grow-options opts]
[:> text-decoration-options opts]]
[:> text-decoration-options opts]]]]))
]]))
(mf/defc options
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
editors (mf/deref refs/editors)
editor (get editors (:id shape))
measure-values (select-keys shape measure-attrs)
fill-values (dwt/current-text-values
{:editor editor
:shape shape
:attrs text-fill-attrs})
fill-values (d/update-in-when fill-values [:fill-color-gradient :type] keyword)
fill-values (cond-> fill-values
;; Keep for backwards compatibility
(:fill fill-values) (assoc :fill-color (:fill fill-values))
(:opacity fill-values) (assoc :fill-opacity (:fill fill-values)))
text-values (merge
(select-keys shape [:grow-type])
(dwt/current-root-values
{:editor editor :shape shape
:attrs root-attrs})
(dwt/current-text-values
{:editor editor :shape shape
:attrs paragraph-attrs})
(dwt/current-text-values
{:editor editor :shape shape
:attrs text-attrs}))]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& fill-menu {:ids ids
:type type
:values fill-values
:editor editor}]
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]
[:& text-menu {:ids ids
:type type
:values text-values
:editor editor}]]))

2
frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs → frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -7,7 +7,7 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.typography
(ns app.main.ui.workspace.sidebar.options.menus.typography
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]

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

@ -7,27 +7,32 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.circle
(ns app.main.ui.workspace.sidebar.options.shapes.circle
(:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.svg-attrs :refer [svg-attrs-menu]]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options
[{: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)]
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values
:options #{:size :position :rotation}}]
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

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

@ -8,7 +8,7 @@
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns app.main.ui.workspace.sidebar.options.frame
(ns app.main.ui.workspace.sidebar.options.shapes.frame
(:require
[rumext.alpha :as mf]
[app.common.data :as d]
@ -21,11 +21,12 @@
[app.main.ui.icons :as i]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(declare +size-presets+)
@ -299,9 +300,13 @@
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
stroke-values (select-keys shape stroke-attrs)]
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)]
[:*
[:& measures-menu {:shape shape}]
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

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

@ -8,19 +8,20 @@
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns app.main.ui.workspace.sidebar.options.group
(ns app.main.ui.workspace.sidebar.options.shapes.group
(:require
[rumext.alpha :as mf]
[app.common.data :as d]
[app.main.ui.workspace.sidebar.options.multiple :refer [get-attrs]]
[app.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
[app.main.ui.workspace.sidebar.options.text :as ot]
[app.main.ui.workspace.sidebar.options.svg-attrs :refer [svg-attrs-menu]]))
[app.main.ui.workspace.sidebar.options.shapes.multiple :refer [get-attrs]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.text :as ot]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options
{::mf/wrap [mf/memo]
@ -32,6 +33,7 @@
type :group
[measure-ids measure-values] (get-attrs [shape] objects :measure)
[layer-ids layer-values] (get-attrs [shape] objects :layer)
[fill-ids fill-values] (get-attrs [shape] objects :fill)
[shadow-ids shadow-values] (get-attrs [shape] objects :shadow)
[blur-ids blur-values] (get-attrs [shape] objects :blur)
@ -42,6 +44,7 @@
[:div.options
[:& measures-menu {:type type :ids measure-ids :values measure-values}]
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
[:& component-menu {:ids comp-ids :values comp-values}]
(when-not (empty? fill-ids)

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

@ -7,22 +7,27 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.image
(ns app.main.ui.workspace.sidebar.options.shapes.image
(:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)]
measure-values (select-keys shape measure-attrs)
layer-values (select-keys shape layer-attrs)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]

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

@ -7,24 +7,26 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.multiple
(ns app.main.ui.workspace.sidebar.options.shapes.multiple
(:require
[app.common.data :as d]
[rumext.alpha :as mf]
[app.common.attrs :as attrs]
[app.util.text :as ut]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-attrs shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-attrs blur-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.text :as ot]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.text :as ot]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
;; We define a map that goes from type to
;; attribute and how to handle them
(def type->props
{:frame
{:measure :shape
:layer :shape
:fill :shape
:shadow :children
:blur :children
@ -33,6 +35,7 @@
:group
{:measure :shape
:layer :shape
:fill :children
:shadow :shape
:blur :shape
@ -41,6 +44,7 @@
:path
{:measure :shape
:layer :shape
:fill :shape
:shadow :shape
:blur :shape
@ -49,6 +53,7 @@
:text
{:measure :shape
:layer :shape
:fill :text
:shadow :shape
:blur :shape
@ -57,6 +62,7 @@
:image
{:measure :shape
:layer :shape
:fill :ignore
:shadow :shape
:blur :shape
@ -65,6 +71,7 @@
:rect
{:measure :shape
:layer :shape
:fill :shape
:shadow :shape
:blur :shape
@ -73,6 +80,7 @@
:circle
{:measure :shape
:layer :shape
:fill :shape
:shadow :shape
:blur :shape
@ -81,6 +89,7 @@
:svg-raw
{:measure :shape
:layer :shape
:fill :shape
:shadow :shape
:blur :shape
@ -89,6 +98,7 @@
(def props->attrs
{:measure measure-attrs
:layer layer-attrs
:fill fill-attrs
:shadow shadow-attrs
:blur blur-attrs
@ -169,6 +179,7 @@
type :multiple
[measure-ids measure-values] (get-attrs shapes objects :measure)
[layer-ids layer-values] (get-attrs shapes objects :layer)
[fill-ids fill-values] (get-attrs shapes objects :fill)
[shadow-ids shadow-values] (get-attrs shapes objects :shadow)
[blur-ids blur-values] (get-attrs shapes objects :blur)
@ -179,6 +190,9 @@
(when-not (empty? measure-ids)
[:& measures-menu {:type type :ids measure-ids :values measure-values}])
(when-not (empty? layer-ids)
[:& layer-menu {:type type :ids layer-ids :values layer-values}])
(when-not (empty? fill-ids)
[:& fill-menu {:type type :ids fill-ids :values fill-values}])

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

@ -7,27 +7,32 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.path
(ns app.main.ui.workspace.sidebar.options.shapes.path
(:require
[rumext.alpha :as mf]
[app.common.data :as d]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.svg-attrs :refer [svg-attrs-menu]]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options
[{: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)]
stroke-values (select-keys shape stroke-attrs)
layer-values (select-keys shape layer-attrs)]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

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

@ -7,15 +7,16 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.rect
(ns app.main.ui.workspace.sidebar.options.shapes.rect
(:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.svg-attrs :refer [svg-attrs-menu]]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options
{::mf/wrap [mf/memo]}
@ -23,6 +24,7 @@
(let [ids [(:id shape)]
type (:type shape)
measure-values (select-keys shape measure-attrs)
layer-values (select-keys shape layer-attrs)
fill-values (select-keys shape fill-attrs)
stroke-values (select-keys shape stroke-attrs)]
[:*
@ -30,6 +32,10 @@
:type type
:values measure-values}]
[:& layer-menu {:ids ids
:type type
:values layer-values}]
[:& fill-menu {:ids ids
:type type
:values fill-values}]

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

@ -7,18 +7,18 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.svg-raw
(ns app.main.ui.workspace.sidebar.options.shapes.svg-raw
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[app.util.data :as d]
[app.util.color :as uc]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.svg-attrs :refer [svg-attrs-menu]]))
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]))
;; This is a list of svg tags that can be grouped in shape-container
;; this allows them to have gradients, shadows and masks

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

@ -0,0 +1,72 @@
;; 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/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.shapes.text
(:require
[app.common.data :as d]
[app.main.data.workspace.texts :as dwt]
[app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.text :refer [text-menu text-fill-attrs root-attrs paragraph-attrs text-attrs]]
[rumext.alpha :as mf]))
(mf/defc options
[{:keys [shape] :as props}]
(let [ids [(:id shape)]
type (:type shape)
editors (mf/deref refs/editors)
editor (get editors (:id shape))
measure-values (select-keys shape measure-attrs)
fill-values (dwt/current-text-values
{:editor editor
:shape shape
:attrs text-fill-attrs})
fill-values (d/update-in-when fill-values [:fill-color-gradient :type] keyword)
fill-values (cond-> fill-values
;; Keep for backwards compatibility
(:fill fill-values) (assoc :fill-color (:fill fill-values))
(:opacity fill-values) (assoc :fill-opacity (:fill fill-values)))
text-values (merge
(select-keys shape [:grow-type])
(dwt/current-root-values
{:editor editor :shape shape
:attrs root-attrs})
(dwt/current-text-values
{:editor editor :shape shape
:attrs paragraph-attrs})
(dwt/current-text-values
{:editor editor :shape shape
:attrs text-attrs}))]
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& fill-menu {:ids ids
:type type
:values fill-values
:editor editor}]
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]
[:& text-menu {:ids ids
:type type
:values text-values
:editor editor}]]))