3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-25 21:57:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix icons selection options widget.

Browse source
This commit is contained in:
Andrey Antukh 2020-01-28 11:12:14 +01:00
parent bfe6b98ee1
commit 75b64b71bf
3 changed files with 47 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/resources/locales.json
View file

@ -85,11 +85,11 @@
"permanent" : true "permanent" : true
}, },
"ds.height" : { "ds.height" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:46" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.history.pinned" : { "ds.history.pinned" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/history.cljs:95" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/history.cljs:95" ],
@ -204,11 +204,11 @@
} }
}, },
"ds.position" : { "ds.position" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:52" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.projects" : { "ds.projects" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/header.cljs:39" ], "used-in" : [ "src/uxbox/main/ui/dashboard/header.cljs:39" ],
@ -218,11 +218,11 @@
} }
}, },
"ds.rotation" : { "ds.rotation" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:67" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.search.placeholder" : { "ds.search.placeholder" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/projects.cljs:195" ], "used-in" : [ "src/uxbox/main/ui/dashboard/projects.cljs:195" ],
@ -239,18 +239,18 @@
} }
}, },
"ds.settings.icons" : { "ds.settings.icons" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/icons.cljs:72" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.size" : { "ds.size" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:33" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.store-colors-title" : { "ds.store-colors-title" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:126" ], "used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:126" ],
@ -316,11 +316,11 @@
} }
}, },
"ds.width" : { "ds.width" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:36" ],
"translations" : { "translations" : {
"en" : null, "en" : null,
"fr" : null "fr" : null
} },
"unused" : true
}, },
"ds.your-colors-title" : { "ds.your-colors-title" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:123" ], "used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:123" ],
@ -848,21 +848,21 @@
} }
}, },
"workspace.options.font-family" : { "workspace.options.font-family" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:204" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:203" ],
"translations" : { "translations" : {
"en" : "Font Family", "en" : "Font Family",
"fr" : "Police de caractères" "fr" : "Police de caractères"
} }
}, },
"workspace.options.font-options" : { "workspace.options.font-options" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:202" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:201" ],
"translations" : { "translations" : {
"en" : "Fonts & Font Size", "en" : "Fonts & Font Size",
"fr" : "TODO" "fr" : "TODO"
} }
}, },
"workspace.options.font-weight" : { "workspace.options.font-weight" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:213" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:212" ],
"translations" : { "translations" : {
"en" : "Font Size & Weight", "en" : "Font Size & Weight",
"fr" : "Taille et graisse" "fr" : "Taille et graisse"
@ -876,14 +876,14 @@
} }
}, },
"workspace.options.line-height-letter-spacing" : { "workspace.options.line-height-letter-spacing" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:245" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:244" ],
"translations" : { "translations" : {
"en" : "Line height and Letter spacing", "en" : "Line height and Letter spacing",
"fr" : "Hauteur de ligne et Espacement de caractères" "fr" : "Hauteur de ligne et Espacement de caractères"
} }
}, },
"workspace.options.measures" : { "workspace.options.measures" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:115", "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:62", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:65", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:67", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:70", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:51" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:62", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:64", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:66", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:69", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:50", "src/uxbox/main/ui/workspace/sidebar/options/icon.cljs:66" ],
"translations" : { "translations" : {
"en" : "Size, position & rotation", "en" : "Size, position & rotation",
"fr" : "Taille, position et rotation" "fr" : "Taille, position et rotation"
@ -897,21 +897,21 @@
} }
}, },
"workspace.options.position" : { "workspace.options.position" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:74", "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:91", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:93", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:96", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:99", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:80" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:91", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:92", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:95", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:98", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:79", "src/uxbox/main/ui/workspace/sidebar/options/icon.cljs:95" ],
"translations" : { "translations" : {
"en" : "Position", "en" : "Position",
"fr" : "Position" "fr" : "Position"
} }
}, },
"workspace.options.rotation-radius" : { "workspace.options.rotation-radius" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:92", "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:108", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:108", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:113", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:116" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:108", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:107", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:112", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:115", "src/uxbox/main/ui/workspace/sidebar/options/icon.cljs:112" ],
"translations" : { "translations" : {
"en" : "Rotation & Radius", "en" : "Rotation & Radius",
"fr" : "TODO" "fr" : "TODO"
} }
}, },
"workspace.options.size" : { "workspace.options.size" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:38", "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:64", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:69", "src/uxbox/main/ui/workspace/sidebar/options/page.cljs:114", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:69", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:72", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:53" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/image.cljs:64", "src/uxbox/main/ui/workspace/sidebar/options/circle.cljs:68", "src/uxbox/main/ui/workspace/sidebar/options/page.cljs:114", "src/uxbox/main/ui/workspace/sidebar/options/rect.cljs:68", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:71", "src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs:52", "src/uxbox/main/ui/workspace/sidebar/options/icon.cljs:68" ],
"translations" : { "translations" : {
"en" : "Size", "en" : "Size",
"fr" : "Taille" "fr" : "Taille"
@ -967,12 +967,19 @@
} }
}, },
"workspace.options.text-align" : { "workspace.options.text-align" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:264" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:263" ],
"translations" : { "translations" : {
"en" : "Text Alignment", "en" : "Text Alignment",
"fr" : "Alignement de texte" "fr" : "Alignement de texte"
} }
}, },
"workspace.sidebar.icons" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/icons.cljs:87" ],
"translations" : {
"en" : "Icons",
"fr" : "Icône"
}
},
"workspace.sidebar.layers" : { "workspace.sidebar.layers" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/layers.cljs:289" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/layers.cljs:289" ],
"translations" : { "translations" : {
@ -980,12 +987,6 @@
"fr" : "Couches" "fr" : "Couches"
} }
}, },
"workspace.sidebar.icons" : {
"translations" : {
"en" : "Icons",
"fr" : "Icône"
}
},
"workspace.sidebar.sitemap" : { "workspace.sidebar.sitemap" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:135" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:135" ],
"translations" : { "translations" : {

1
frontend/resources/styles/main/partials/sidebar-icons.scss
View file

@ -10,6 +10,7 @@
padding: $medium $medium 0 $medium; padding: $medium $medium 0 $medium;
select { select {
color: $color-gray-10;
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
} }

31
frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs
View file

@ -9,6 +9,7 @@
(:require (:require
[lentes.core :as l] [lentes.core :as l]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.common.data :as d]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.data.icons :as di] [uxbox.main.data.icons :as di]
[uxbox.main.data.workspace :as dw] [uxbox.main.data.workspace :as dw]
@ -23,11 +24,14 @@
(mf/defc icons-collections (mf/defc icons-collections
[{:keys [collections value on-change] :as props}] [{:keys [collections value on-change] :as props}]
[:div.figures-catalog [:div.figures-catalog
;; extract component: set selector ;; extract component: set selector
[:select.input-select.small {:on-change on-change [:select.input-select.small
:value (pr-str value)} {:on-change (fn [event]
(let [val (-> (dom/get-target event)
(dom/get-value))]
(on-change (d/read-string val))))
:value (pr-str value)}
[:option {:value (pr-str nil)} "Storage"] [:option {:value (pr-str nil)} "Storage"]
(for [coll collections] (for [coll collections]
[:option {:key (str "icon-coll" (:id coll)) [:option {:key (str "icon-coll" (:id coll))
@ -62,8 +66,11 @@
(mf/defc icons-toolbox (mf/defc icons-toolbox
[props] [props]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
selected (mf/use-state nil)
local (mf/deref refs/workspace-local) local (mf/deref refs/workspace-local)
collections (mf/deref icons/collections-iref)
collections (vals (mf/deref icons/collections-iref))
collection (first collections) collection (first collections)
on-close on-close
@ -71,11 +78,9 @@
(st/emit! (dw/toggle-layout-flag :icons))) (st/emit! (dw/toggle-layout-flag :icons)))
on-change on-change
(fn [event] (fn [val]
(let [value (read-string (dom/event->value event))] (st/emit! (dw/select-for-drawing nil))
(st/emit! (dw/select-for-drawing nil) (reset! selected val))]
#_(dw/select-icons-toolbox-collection value))))
]
(mf/use-effect (mf/use-effect
{:fn #(st/emit! di/fetch-collections)}) {:fn #(st/emit! di/fetch-collections)})
@ -84,10 +89,10 @@
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/icon-set] [:div.tool-window-icon i/icon-set]
[:span (t locale "workspace.sidebar.icons")] [:span (t locale "workspace.sidebar.icons")]
[:div.tool-window-close #_{:on-click on-close} i/close]] [:div.tool-window-close {:on-click on-close} i/close]]
[:div.tool-window-content [:div.tool-window-content
[:& icons-collections {:collections collections [:& icons-collections {:collections collections
:value (:id collection) :value @selected
:on-change (constantly nil) :on-change on-change
}] }]
[:& icons-list {:collection-id nil}]]])) [:& icons-list {:collection-id @selected}]]]))