From 75b64b71bf2c546c9659c564f929bbafb4cf9457 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 28 Jan 2020 11:12:14 +0100 Subject: [PATCH] :bug: Fix icons selection options widget. --- frontend/resources/locales.json | 55 ++++++++++--------- .../styles/main/partials/sidebar-icons.scss | 1 + .../main/ui/workspace/sidebar/icons.cljs | 31 ++++++----- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 509acab54..680e423c4 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -85,11 +85,11 @@ "permanent" : true }, "ds.height" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:46" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.history.pinned" : { "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/history.cljs:95" ], @@ -204,11 +204,11 @@ } }, "ds.position" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:52" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.projects" : { "used-in" : [ "src/uxbox/main/ui/dashboard/header.cljs:39" ], @@ -218,11 +218,11 @@ } }, "ds.rotation" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:67" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.search.placeholder" : { "used-in" : [ "src/uxbox/main/ui/dashboard/projects.cljs:195" ], @@ -239,18 +239,18 @@ } }, "ds.settings.icons" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/icons.cljs:72" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.size" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:33" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.store-colors-title" : { "used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:126" ], @@ -316,11 +316,11 @@ } }, "ds.width" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs:36" ], "translations" : { "en" : null, "fr" : null - } + }, + "unused" : true }, "ds.your-colors-title" : { "used-in" : [ "src/uxbox/main/ui/dashboard/colors.cljs:123" ], @@ -848,21 +848,21 @@ } }, "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" : { "en" : "Font Family", "fr" : "Police de caractères" } }, "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" : { "en" : "Fonts & Font Size", "fr" : "TODO" } }, "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" : { "en" : "Font Size & Weight", "fr" : "Taille et graisse" @@ -876,14 +876,14 @@ } }, "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" : { "en" : "Line height and Letter spacing", "fr" : "Hauteur de ligne et Espacement de caractères" } }, "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" : { "en" : "Size, position & rotation", "fr" : "Taille, position et rotation" @@ -897,21 +897,21 @@ } }, "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" : { "en" : "Position", "fr" : "Position" } }, "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" : { "en" : "Rotation & Radius", "fr" : "TODO" } }, "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" : { "en" : "Size", "fr" : "Taille" @@ -967,12 +967,19 @@ } }, "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" : { "en" : "Text Alignment", "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" : { "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/layers.cljs:289" ], "translations" : { @@ -980,12 +987,6 @@ "fr" : "Couches" } }, - "workspace.sidebar.icons" : { - "translations" : { - "en" : "Icons", - "fr" : "Icône" - } - }, "workspace.sidebar.sitemap" : { "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:135" ], "translations" : { diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss index 8d8fdd26f..44ade29dc 100644 --- a/frontend/resources/styles/main/partials/sidebar-icons.scss +++ b/frontend/resources/styles/main/partials/sidebar-icons.scss @@ -10,6 +10,7 @@ padding: $medium $medium 0 $medium; select { + color: $color-gray-10; width: 100%; margin-bottom: 0; } diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs index 4741a7c52..99e2c1222 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs @@ -9,6 +9,7 @@ (:require [lentes.core :as l] [rumext.alpha :as mf] + [uxbox.common.data :as d] [uxbox.builtins.icons :as i] [uxbox.main.data.icons :as di] [uxbox.main.data.workspace :as dw] @@ -23,11 +24,14 @@ (mf/defc icons-collections [{:keys [collections value on-change] :as props}] - [:div.figures-catalog ;; extract component: set selector - [:select.input-select.small {:on-change on-change - :value (pr-str value)} + [:select.input-select.small + {: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"] (for [coll collections] [:option {:key (str "icon-coll" (:id coll)) @@ -62,8 +66,11 @@ (mf/defc icons-toolbox [props] (let [locale (i18n/use-locale) + selected (mf/use-state nil) + local (mf/deref refs/workspace-local) - collections (mf/deref icons/collections-iref) + + collections (vals (mf/deref icons/collections-iref)) collection (first collections) on-close @@ -71,11 +78,9 @@ (st/emit! (dw/toggle-layout-flag :icons))) on-change - (fn [event] - (let [value (read-string (dom/event->value event))] - (st/emit! (dw/select-for-drawing nil) - #_(dw/select-icons-toolbox-collection value)))) - ] + (fn [val] + (st/emit! (dw/select-for-drawing nil)) + (reset! selected val))] (mf/use-effect {:fn #(st/emit! di/fetch-collections)}) @@ -84,10 +89,10 @@ [:div.tool-window-bar [:div.tool-window-icon i/icon-set] [: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 [:& icons-collections {:collections collections - :value (:id collection) - :on-change (constantly nil) + :value @selected + :on-change on-change }] - [:& icons-list {:collection-id nil}]]])) + [:& icons-list {:collection-id @selected}]]]))