From d6fc98c70b0ed4eef248f563a4656a450de7939f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 10 Sep 2020 21:34:58 +0200 Subject: [PATCH] :sparkles: Changes after review --- frontend/src/app/main.cljs | 3 +- frontend/src/app/main/data/colors.cljs | 16 ++++---- frontend/src/app/main/data/modal.cljs | 37 ++++++++++++++++++ frontend/src/app/main/refs.cljs | 12 ------ frontend/src/app/main/ui/modal.cljs | 38 ++++--------------- frontend/src/app/main/ui/shapes/text.cljs | 27 +++++++------ .../app/main/ui/workspace/colorpicker.cljs | 23 +++++++++-- 7 files changed, 87 insertions(+), 69 deletions(-) create mode 100644 frontend/src/app/main/data/modal.cljs diff --git a/frontend/src/app/main.cljs b/frontend/src/app/main.cljs index 652ca96dfa..1a4621504d 100644 --- a/frontend/src/app/main.cljs +++ b/frontend/src/app/main.cljs @@ -32,7 +32,8 @@ [app.main.ui.settings.delete-account] [app.main.ui.settings.change-email] [app.main.ui.confirm] - [app.main.ui.workspace.colorpicker])) + [app.main.ui.workspace.colorpicker] + [app.main.ui.workspace.libraries])) (declare reinit) diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs index 5babaff190..d9322da34b 100644 --- a/frontend/src/app/main/data/colors.cljs +++ b/frontend/src/app/main/data/colors.cljs @@ -21,7 +21,8 @@ [app.util.time :as dt] [app.common.uuid :as uuid] [app.main.data.workspace.common :as dwc] - [app.main.data.workspace.texts :as dwt])) + [app.main.data.workspace.texts :as dwt] + [app.main.data.modal :as md])) (declare create-color-result) @@ -201,15 +202,14 @@ (st/emit! (if shift? (change-stroke-selected color) - (change-fill-selected color) - ) - (fn [state] (update state :workspace-local dissoc :modal))))] + (change-fill-selected color)) + (md/hide-modal)))] (ptk/reify ::start-picker ptk/UpdateEvent (update [_ state] (-> state (assoc-in [:workspace-local :picking-color?] true) - (assoc-in [:workspace-local :modal] {:id (random-uuid) - :type :colorpicker - :props {:on-change handle-change-color} - :allow-click-outside true})))))) + (assoc ::md/modal {:id (random-uuid) + :type :colorpicker + :props {:on-change handle-change-color} + :allow-click-outside true})))))) diff --git a/frontend/src/app/main/data/modal.cljs b/frontend/src/app/main/data/modal.cljs new file mode 100644 index 0000000000..42f02a97e7 --- /dev/null +++ b/frontend/src/app/main/data/modal.cljs @@ -0,0 +1,37 @@ +;; 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.data.modal + (:require + [potok.core :as ptk])) + +(defn show-modal [id type props] + (ptk/reify ::show-modal + ptk/UpdateEvent + (update [_ state] + (-> state + (assoc ::modal {:id id + :type type + :props props + :allow-click-outside false}))))) + +(defn hide-modal [] + (ptk/reify ::hide-modal + ptk/UpdateEvent + (update [_ state] + (-> state + (dissoc ::modal))))) + +(defn update-modal [options] + (ptk/reify ::update-modal + ptk/UpdateEvent + (update [_ state] + (-> state + (update ::modal merge options))))) + diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index b61341b3b6..c8d169ccb3 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -80,18 +80,6 @@ (def current-hover (l/derived :hover workspace-local)) -(def picking-color? - (l/derived :picking-color? workspace-local)) - -(def picked-color - (l/derived :picked-color workspace-local)) - -(def picked-color-select - (l/derived :picked-color-select workspace-local)) - -(def picked-shift? - (l/derived :picked-shift? workspace-local)) - (def workspace-layout (l/derived :workspace-layout st/state)) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index 7d61353774..768090cdd0 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -16,49 +16,26 @@ [app.main.ui.keyboard :as k] [app.util.dom :as dom] [app.main.refs :as refs] - [potok.core :as ptk]) + [potok.core :as ptk] + [app.main.data.modal :as mdm]) (:import goog.events.EventType)) (defonce components (atom {})) -(defn show-modal [id type props] - (ptk/reify ::show-modal - ptk/UpdateEvent - (update [_ state] - (-> state - (assoc-in [:workspace-local :modal] {:id id - :type type - :props props - :allow-click-outside false}))))) - -(defn hide-modal [] - (ptk/reify ::hide-modal - ptk/UpdateEvent - (update [_ state] - (-> state - (update :workspace-local dissoc :modal))))) - -(defn update-modal [options] - (ptk/reify ::hide-modal - ptk/UpdateEvent - (update [_ state] - (-> state - (update-in [:workspace-local :modal] merge options))))) - (defn show! ([type props] (let [id (random-uuid)] - (st/emit! (show-modal id type props))))) + (st/emit! (mdm/show-modal id type props))))) (defn allow-click-outside! [] - (st/emit! (update-modal {:allow-click-outside true}))) + (st/emit! (mdm/update-modal {:allow-click-outside true}))) (defn disallow-click-outside! [] - (st/emit! (update-modal {:allow-click-outside false}))) + (st/emit! (mdm/update-modal {:allow-click-outside false}))) (defn hide! [] - (st/emit! (hide-modal))) + (st/emit! (mdm/hide-modal))) (defn- on-esc-clicked [event] @@ -117,10 +94,11 @@ (def modal-ref - (l/derived :modal refs/workspace-local)) + (l/derived ::mdm/modal st/state)) (mf/defc modal [] (let [modal (mf/deref modal-ref)] + (println "modal" modal) (when modal [:& modal-wrapper {:data modal :key (:id modal)}]))) diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index 071f207194..766e548cb3 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -114,18 +114,18 @@ (defn- render-text-node ([node] (render-text-node 0 node)) ([index {:keys [type text children] :as node}] - (mf/html - (let [embed-resources? (mf/use-ctx muc/embed-ctx) - embeded-fonts (mf/use-state nil)] - (mf/use-effect - (mf/deps node) - (fn [] - (when (and embed-resources? (= type "root")) - (let [font-to-embed (get-all-fonts node) - embeded (map embed-font font-to-embed)] - (-> (p/all embeded) - (p/then (fn [result] (reset! embeded-fonts (str/join "\n" result))))))))) + (let [embed-resources? (mf/use-ctx muc/embed-ctx) + embeded-fonts (mf/use-state nil)] + (mf/use-effect + (mf/deps node) + (fn [] + (when (and embed-resources? (= type "root")) + (let [font-to-embed (get-all-fonts node) + embeded (map embed-font font-to-embed)] + (-> (p/all embeded) + (p/then (fn [result] (reset! embeded-fonts (str/join "\n" result))))))))) + (mf/html (if (string? text) (let [style (generate-text-styles (clj->js node))] [:span {:style style :key index} text]) @@ -138,10 +138,9 @@ {:key index :style style :xmlns "http://www.w3.org/1999/xhtml"} - [:* - (when (not (nil? @embeded-fonts)) + (when (not (nil? @embeded-fonts)) [:style @embeded-fonts]) - children]]) + children]) "paragraph-set" (let [style #js {:display "inline-block" diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index c0e205921a..e7a5a68f59 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -24,6 +24,21 @@ [app.main.refs :as refs] [app.util.i18n :as i18n :refer [t]])) +;; --- Refs + +(def picking-color? + (l/derived :picking-color? refs/workspace-local)) + +(def picked-color + (l/derived :picked-color refs/workspace-local)) + +(def picked-color-select + (l/derived :picked-color-select refs/workspace-local)) + +(def picked-shift? + (l/derived :picked-shift? refs/workspace-local)) + + ;; --- Color Picker Modal (mf/defc value-selector [{:keys [hue saturation value on-change]}] @@ -102,10 +117,10 @@ shared-libs (mf/deref refs/workspace-libraries) recent-colors (mf/deref refs/workspace-recent-colors) - picking-color? (mf/deref refs/picking-color?) - picked-color (mf/deref refs/picked-color) - picked-color-select (mf/deref refs/picked-color-select) - picked-shift? (mf/deref refs/picked-shift?) + picking-color? (mf/deref picking-color?) + picked-color (mf/deref picked-color) + picked-color-select (mf/deref picked-color-select) + picked-shift? (mf/deref picked-shift?) locale (mf/deref i18n/locale)