mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 08:20:45 -05:00
✨ Adds multiple edition
This commit is contained in:
alonso.torres
Hirunatan
parent
c28fce58f1
commit
5f650832e6
5 changed files with 104 additions and 102 deletions
|
|
@ -992,3 +992,39 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-typography {
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px dashed $color-gray-30;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.multiple-typography-text,
|
||||
.multiple-typography-button {
|
||||
font-size: $fs13;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.multiple-typography-button {
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transition: fill 0.3s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $color-gray-10;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
}
|
||||
|
||||
.multiple-typography-button:hover svg {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,10 +117,27 @@
|
|||
(->> (tree-seq map? :children node)
|
||||
(filter match?)))
|
||||
|
||||
(defonce default-text-attrs
|
||||
{:name "Source Sans Pro Regular"
|
||||
:font-id "sourcesanspro"
|
||||
:font-family "sourcesanspro"
|
||||
:font-variant-id "regular"
|
||||
:font-size "14"
|
||||
:font-weight "400"
|
||||
:font-style "normal"
|
||||
:line-height "1.2"
|
||||
:letter-spacing "0"
|
||||
:text-transform "none"
|
||||
:text-align "left"
|
||||
:text-decoration "none"})
|
||||
|
||||
(defn- shape-current-values
|
||||
[shape pred attrs]
|
||||
(let [root (:content shape)
|
||||
nodes (nodes-seq pred root)]
|
||||
nodes (->> (nodes-seq pred root)
|
||||
(map #(if (is-text-node? %)
|
||||
(merge default-text-attrs %)
|
||||
%)))]
|
||||
(geom/get-attrs-multi nodes attrs)))
|
||||
|
||||
(defn current-text-values
|
||||
|
|
|
|||
|
|
@ -15,14 +15,7 @@
|
|||
[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.text :refer [text-fill-attrs
|
||||
text-font-attrs
|
||||
text-align-attrs
|
||||
text-spacing-attrs
|
||||
text-valign-attrs
|
||||
text-decoration-attrs
|
||||
text-transform-attrs
|
||||
text-menu]]))
|
||||
[app.main.ui.workspace.sidebar.options.text :as ot]))
|
||||
|
||||
(defn get-shape-attrs
|
||||
[shape attrs text-attrs convert-attrs extract-fn]
|
||||
|
|
@ -47,88 +40,34 @@
|
|||
text-ids (map :id (filter #(= (:type %) :text) shapes))
|
||||
other-ids (map :id (filter #(not= (:type %) :text) shapes))
|
||||
|
||||
extract (fn [{:keys [attrs text-attrs convert-attrs extract-fn]}]
|
||||
(let [mapfn
|
||||
(fn [shape]
|
||||
(get-shape-attrs shape
|
||||
attrs
|
||||
text-attrs
|
||||
convert-attrs
|
||||
extract-fn))]
|
||||
(geom/get-attrs-multi (map mapfn shapes) (or attrs text-attrs))))
|
||||
|
||||
measure-values
|
||||
(geom/get-attrs-multi shapes measure-attrs)
|
||||
|
||||
fill-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
fill-attrs
|
||||
text-fill-attrs
|
||||
fill-attrs
|
||||
dwt/current-text-values)
|
||||
shapes)
|
||||
fill-attrs)
|
||||
fill-values (extract {:attrs fill-attrs
|
||||
:text-attrs ot/text-fill-attrs
|
||||
:convert-attrs fill-attrs
|
||||
:extract-fn dwt/current-text-values})
|
||||
|
||||
stroke-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
stroke-attrs
|
||||
nil
|
||||
nil
|
||||
nil)
|
||||
shapes)
|
||||
stroke-attrs)
|
||||
stroke-values (extract {:attrs stroke-attrs})
|
||||
|
||||
font-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-font-attrs
|
||||
nil
|
||||
dwt/current-text-values)
|
||||
shapes)
|
||||
text-font-attrs)
|
||||
root-values (extract {:text-attrs ot/root-attrs
|
||||
:extract-fn dwt/current-root-values})
|
||||
|
||||
align-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-align-attrs
|
||||
nil
|
||||
dwt/current-paragraph-values)
|
||||
shapes)
|
||||
text-align-attrs)
|
||||
paragraph-values (extract {:text-attrs ot/paragraph-attrs
|
||||
:extract-fn dwt/current-paragraph-values})
|
||||
|
||||
spacing-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-spacing-attrs
|
||||
nil
|
||||
dwt/current-text-values)
|
||||
shapes)
|
||||
text-spacing-attrs)
|
||||
|
||||
valign-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-valign-attrs
|
||||
nil
|
||||
dwt/current-root-values)
|
||||
shapes)
|
||||
text-valign-attrs)
|
||||
|
||||
decoration-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-decoration-attrs
|
||||
nil
|
||||
dwt/current-text-values)
|
||||
shapes)
|
||||
text-decoration-attrs)
|
||||
|
||||
transform-values
|
||||
(geom/get-attrs-multi (map #(get-shape-attrs
|
||||
%
|
||||
nil
|
||||
text-transform-attrs
|
||||
nil
|
||||
dwt/current-text-values)
|
||||
shapes)
|
||||
text-transform-attrs)]
|
||||
text-values (extract {:text-attrs ot/text-attrs
|
||||
:extract-fn dwt/current-text-values})]
|
||||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type :multiple
|
||||
|
|
@ -141,14 +80,11 @@
|
|||
:type :multiple
|
||||
:values stroke-values}])
|
||||
(when-not (empty? text-ids)
|
||||
[:& text-menu {:ids text-ids
|
||||
:type :multiple
|
||||
:editor nil
|
||||
:values (merge font-values
|
||||
align-values
|
||||
spacing-values
|
||||
valign-values
|
||||
decoration-values
|
||||
transform-values)
|
||||
:shapes shapes}])]))
|
||||
[:& ot/text-menu {:ids text-ids
|
||||
:type :multiple
|
||||
:editor nil
|
||||
:values (merge root-values
|
||||
paragraph-values
|
||||
text-values)
|
||||
:shapes shapes}])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@
|
|||
|
||||
to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
|
||||
|
||||
grow-type (->> shapes (map :grow-type) (into #{}) to-single-value)
|
||||
|
||||
grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
|
||||
|
||||
vertical-align (or vertical-align "top")
|
||||
|
||||
handle-change-grow
|
||||
|
|
@ -178,6 +178,7 @@
|
|||
editor
|
||||
values
|
||||
shapes] :as props}]
|
||||
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
typographies (mf/deref refs/workspace-file-typography)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
|
|
@ -202,12 +203,14 @@
|
|||
|
||||
typography (cond
|
||||
(and (:typography-ref-id values)
|
||||
(not= (:typography-ref-id values) :multiple)
|
||||
(:typography-ref-file values))
|
||||
(-> shared-libs
|
||||
(get-in [(:typography-ref-file values) :data :typography (:typography-ref-id values)])
|
||||
(assoc :file-id (:typography-ref-file values)))
|
||||
|
||||
(:typography-ref-id values)
|
||||
(and (:typography-ref-id values)
|
||||
(not= (:typography-ref-id values) :multiple))
|
||||
(get typographies (:typography-ref-id values)))
|
||||
|
||||
|
||||
|
|
@ -239,6 +242,7 @@
|
|||
opts #js {:editor editor
|
||||
:ids ids
|
||||
:values values
|
||||
:shapes shapes
|
||||
:on-change (fn [attrs]
|
||||
(run! #(emit-update! % attrs) ids))
|
||||
:locale locale}]
|
||||
|
|
@ -248,10 +252,19 @@
|
|||
[:span label]
|
||||
[:div.add-page {:on-click handle-click} i/close]]
|
||||
|
||||
(if typography
|
||||
(cond
|
||||
typography
|
||||
[:& typography-entry {:typography typography
|
||||
:on-deattach handle-deattach-typography
|
||||
:on-change handle-change-typography}]
|
||||
|
||||
(= (:typography-ref-id values) :multiple)
|
||||
[:div.multiple-typography
|
||||
[:div.multiple-typography-text "Multiple typographies"]
|
||||
[:div.multiple-typography-button {:on-click handle-deattach-typography
|
||||
:title "Unlink all typographies"} i/unchain]]
|
||||
|
||||
:else
|
||||
[:> typography-options opts])
|
||||
|
||||
[:div.element-set-content
|
||||
|
|
@ -277,7 +290,6 @@
|
|||
converted-fill-values {:fill-color (:fill fill-values)
|
||||
:fill-opacity (:opacity fill-values)}
|
||||
|
||||
|
||||
text-values (merge
|
||||
(dwt/current-root-values
|
||||
{:editor editor :shape shape
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
|
||||
[:div.row-flex
|
||||
(let [size-options [8 9 10 11 12 14 18 24 36 48 72]
|
||||
size-options (if (= font-size :multiple) (into [{:value "" :label "--"}] size-options) size-options)]
|
||||
size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
|
||||
[:& editable-select
|
||||
{:value (attr->string font-size)
|
||||
:class "input-option size-option"
|
||||
|
|
@ -108,9 +108,10 @@
|
|||
:on-change on-font-size-change}])
|
||||
|
||||
[:select.input-select.variant-option
|
||||
{:value (attr->string font-variant-id)
|
||||
{:disabled (= font-id :multiple)
|
||||
:value (attr->string font-variant-id)
|
||||
:on-change on-font-variant-change}
|
||||
(when (= font-size :multiple)
|
||||
(when (or (= font-id :multiple) (= font-variant-id :multiple))
|
||||
[:option {:value ""} "--"])
|
||||
(for [variant (:variants font)]
|
||||
[:option {:value (:id variant)
|
||||
|
|
|
|||
Loading…
Reference in a new issue