From 34adb6837211129d2c86a259060d352d6a910f33 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sat, 8 Apr 2017 19:28:32 +0200 Subject: [PATCH] Add many codebase optimizations on performance and size. --- .../src/uxbox/main/ui/dashboard/icons.cljs | 148 +++++++----------- .../src/uxbox/main/ui/dashboard/projects.cljs | 47 +++--- frontend/src/uxbox/main/ui/workspace.cljs | 4 +- .../src/uxbox/main/ui/workspace/canvas.cljs | 10 +- .../uxbox/main/ui/workspace/clipboard.cljs | 8 +- .../uxbox/main/ui/workspace/colorpalette.cljs | 15 +- .../src/uxbox/main/ui/workspace/download.cljs | 28 ++-- .../src/uxbox/main/ui/workspace/drawarea.cljs | 4 +- .../src/uxbox/main/ui/workspace/header.cljs | 24 +-- .../src/uxbox/main/ui/workspace/images.cljs | 50 +++--- .../main/ui/workspace/recent_colors.cljs | 10 +- .../src/uxbox/main/ui/workspace/ruler.cljs | 4 +- .../src/uxbox/main/ui/workspace/rules.cljs | 4 +- .../src/uxbox/main/ui/workspace/sidebar.cljs | 8 +- .../main/ui/workspace/sidebar/drawtools.cljs | 27 ++-- .../main/ui/workspace/sidebar/history.cljs | 42 ++--- .../main/ui/workspace/sidebar/layers.cljs | 36 ++--- .../main/ui/workspace/sidebar/options.cljs | 30 ++-- .../main/ui/workspace/sidebar/sitemap.cljs | 32 ++-- 19 files changed, 245 insertions(+), 286 deletions(-) diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs index cc5a093fc..9b613bbe3 100644 --- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/icons.cljs @@ -69,10 +69,9 @@ ;; --- Page Title (mx/defcs page-title - {:mixins [(mx/local {}) mx/static mx/reactive]} - [own {:keys [id] :as coll}] - (let [local (:rum/local own) - dashboard (mx/react dashboard-ref) + {:mixins [(mx/local) mx/static mx/reactive]} + [{:keys [rum/local] :as own} {:keys [id] :as coll}] + (let [dashboard (mx/react dashboard-ref) own? (= :own (:type coll)) edit? (:edit @local)] (letfn [(on-save [e] @@ -96,10 +95,10 @@ (st/emit! (di/delete-collection id))) (on-delete [] (udl/open! :confirm {:on-accept delete}))] - [:div.dashboard-title - [:h2 + [:div.dashboard-title {} + [:h2 {} (if edit? - [:div.dashboard-title-field + [:div.dashboard-title-field {} [:span.edit {:content-editable true :ref "input" @@ -113,7 +112,7 @@ [:span.dashboard-title-field (:name coll "Storage")]))] (when (and own? coll) - [:div.edition + [:div.edition {} (if edit? [:span {:on-click on-save} i/save] [:span {:on-click on-edit} i/pencil]) @@ -157,15 +156,15 @@ :on-double-click on-double-click :class-name (when selected? "current")} (if (:edit @local) - [:div + [:div {} [:input.element-title - {:value (if (:name @local) (:name @local) (if coll name "Storage")) - :on-change on-input-change - :on-key-down on-input-keyup}] + {:value (if (:name @local) (:name @local) (if coll name "Storage")) + :on-change on-input-change + :on-key-down on-input-keyup}] [:span.close {:on-click on-cancel} i/close]] - [:span.element-title + [:span.element-title {} (if coll name "Storage")]) - [:span.element-subtitle + [:span.element-subtitle {} (tr "ds.num-elements" (t/c num-icons))]]))) (mx/defc nav-section @@ -177,19 +176,18 @@ own? (filter #(= :own (:type %))) builtin? (filter #(= :builtin (:type %)))) colls (sort-by :name colls)] - [:ul.library-elements + [:ul.library-elements {} (when own? - [:li + [:li {} [:a.btn-primary {:on-click #(st/emit! (di/create-collection))} "+ New collection"]]) (when own? (nav-item nil (nil? selected))) - (for [coll colls - :let [selected? (= (:id coll) selected) - key (str (:id coll))]] - (-> (nav-item coll selected?) - (mx/with-key key)))])) + (mx/doseq [coll colls] + (let [selected? (= (:id coll) selected)] + (-> (nav-item coll selected?) + (mx/with-key (:id coll)))))])) (mx/defc nav {:mixins [mx/static]} @@ -203,9 +201,9 @@ (sort-by :name))] (st/emit! (di/select-collection type (:id (first colls))))) (st/emit! (di/select-collection type))))] - [:div.library-bar - [:div.library-bar-inside - [:ul.library-tabs + [:div.library-bar {} + [:div.library-bar-inside {} + [:ul.library-tabs {} [:li {:class-name (when own? "current") :on-click (partial select-tab :own)} "YOUR ICONS"] @@ -226,7 +224,7 @@ (let [files (dom/get-event-files event)] (st/emit! (di/create-icons coll-id files))))] [:div.grid-item.small-item.add-project {:on-click forward-click} - [:span "+ New icon"] + [:span {} "+ New icon"] [:input.upload-image-input {:style {:display "none"} :multiple true @@ -251,12 +249,11 @@ (dom/prevent-default event) (dom/stop-propagation event) (on-select id))] - [:ul.move-list - [:li.title title] - [:li [:a {:href "#" :on-click #(on-select % nil)} "Storage"]] - (for [coll colls - :let [id (:id coll) - name (:name coll)]] + [:ul.move-list {} + [:li.title {} title] + [:li {} + [:a {:href "#" :on-click #(on-select % nil)} "Storage"]] + (mx/doseq [{:keys [id name] :as coll} colls] [:li {:key (str id)} [:a {:on-click #(on-select % id)} name]])])) @@ -287,9 +284,9 @@ (let [selected (first selected)] (st/emit! (di/update-opts :edition selected))))] ;; MULTISELECT OPTIONS BAR - [:div.multiselect-bar + [:div.multiselect-bar {} (if editable? - [:div.multiselect-nav + [:div.multiselect-nav {} [:span.move-item.tooltip.tooltip-top {:on-click on-toggle-copy :alt "Copy"} (when (:show-copy-tooltip @local) @@ -348,23 +345,23 @@ [:div.grid-item.small-item.project-th {:on-click toggle-selection :id (str "grid-item-" id)} - [:div.input-checkbox.check-primary + [:div.input-checkbox.check-primary {} [:input {:type "checkbox" :id (:id icon) :on-click toggle-selection :checked selected?}] [:label {:for (:id icon)}]] - [:span.grid-item-image + [:span.grid-item-image {} (icon/icon-svg icon)] [:div.item-info {:on-click ignore-click} (if edition? [:input.element-name {:type "text" - :auto-focus true - :on-key-down on-key-down - :on-blur on-blur - :on-click on-edit - :default-value (:name icon)}] + :auto-focus true + :on-key-down on-key-down + :on-blur on-blur + :on-click on-edit + :default-value (:name icon)}] [:h3 {:on-double-click on-edit} (:name icon)]) (str "Uploaded at " (dt/format created-at "L"))]])) @@ -380,20 +377,19 @@ (filter #(= id (:collection %))) (filter-icons-by filtering) (sort-icons-by ordering))] - [:div.dashboard-grid-content - [:div.dashboard-grid-row + [:div.dashboard-grid-content {} + [:div.dashboard-grid-row {} (when editable? (grid-form id)) - (for [icon icons - :let [id (:id icon) - edition? (= edition id) - selected? (contains? selected id)]] - (-> (grid-item icon selected? edition?) - (mx/with-key (str id))))]])) + (mx/doseq [{:keys [id] :as icon} icons] + (let [edition? (= edition id) + selected? (contains? selected id)] + (-> (grid-item icon selected? edition?) + (mx/with-key (str id)))))]])) (mx/defc content {:mixins [mx/static]} [{:keys [selected] :as state} coll] - [:section.dashboard-grid.library + [:section.dashboard-grid.library {} (page-title coll) (grid state) (when (seq selected) @@ -417,24 +413,23 @@ (st/emit! (di/update-opts :order value)))) (on-clear [event] (st/emit! (di/update-opts :filter "")))] - [:section.dashboard-bar.library-gap - [:div.dashboard-info + [:section.dashboard-bar.library-gap {} + [:div.dashboard-info {} ;; Counter - [:span.dashboard-icons (tr "ds.num-icons" (t/c num-icons))] + [:span.dashboard-icons {} (tr "ds.num-icons" (t/c num-icons))] ;; Sorting - [:divi - [:span (tr "ds.project-ordering")] + [:div {} + [:span {} (tr "ds.project-ordering")] [:select.input-select {:on-change on-ordering-change :value (pr-str ordering)} - (for [[key value] (seq +ordering-options+) - :let [ovalue (pr-str key) - olabel (tr value)]] - [:option {:key ovalue :value ovalue} olabel])]] + (mx/doseq [[key value] (seq +ordering-options+)] + (let [key (pr-str key)] + [:option {:key key :value key} (tr value)]))]] ;; Search - [:form.dashboard-search + [:form.dashboard-search {} [:input.input-text {:key :icons-search-box :type "text" @@ -469,40 +464,9 @@ (let [state (mx/react dashboard-ref) colls (mx/react collections-ref) coll (get colls (:id state))] - [:main.dashboard-main + [:main.dashboard-main {} (header) - [:section.dashboard-content + [:section.dashboard-content {} (nav state colls) (menu state coll) (content state coll)]])) - -;; --- New Icon Lightbox (TODO) - -;; (defn- new-icon-lightbox-render -;; [own] -;; (html -;; [:div.lightbox-body -;; [:h3 "New icon"] -;; [:div.row-flex -;; [:div.lightbox-big-btn -;; [:span.big-svg i/shapes] -;; [:span.text "Go to workspace"] -;; ] -;; [:div.lightbox-big-btn -;; [:span.big-svg.upload i/exit] -;; [:span.text "Upload file"] -;; ] -;; ] -;; [:a.close {:href "#" -;; :on-click #(do (dom/prevent-default %) -;; (udl/close!))} -;; i/close]])) - -;; (def new-icon-lightbox -;; (mx/component -;; {:render new-icon-lightbox-render -;; :name "new-icon-lightbox"})) - -;; (defmethod lbx/render-lightbox :new-icon -;; [_] -;; (new-icon-lightbox)) diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs index 8f1aecacb..4ba3fa07a 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/projects.cljs @@ -89,24 +89,23 @@ (st/emit! (udp/update-opts :order value)))) (on-clear [event] (st/emit! (udp/update-opts :filter "")))] - [:section.dashboard-bar - [:div.dashboard-info + [:section.dashboard-bar {} + [:div.dashboard-info {} ;; Counter - [:span.dashboard-images (tr "ds.num-projects" (t/c count))] + [:span.dashboard-images {} (tr "ds.num-projects" (t/c count))] ;; Sorting - [:div - [:span (tr "ds.project-ordering")] + [:div {} + [:span {} (tr "ds.project-ordering")] [:select.input-select {:on-change on-ordering-change :value (pr-str ordering)} - (for [[key value] (seq +ordering-options+) - :let [ovalue (pr-str key) - olabel (tr value)]] - [:option {:key ovalue :value ovalue} olabel])]] + (mx/doseq [[key value] (seq +ordering-options+)] + (let [key (pr-str key)] + [:option {:key key :value key} (tr value)]))]] ;; Search - [:form.dashboard-search + [:form.dashboard-search {} [:input.input-text {:key :images-search-box :type "text" @@ -178,7 +177,7 @@ (swap! local assoc :edition true))] [:div.grid-item.project-th {:on-click on-navigate} (grid-item-thumbnail project) - [:div.item-info + [:div.item-info {} (if (:edition @local) [:input.element-name {:type "text" :auto-focus true @@ -186,13 +185,13 @@ :on-blur on-blur :on-click on-edit :default-value (:name project)}] - [:h3 (:name project)]) - [:span.date + [:h3 {} (:name project)]) + [:span.date {} (str "Updated " (dt/timeago (:modified-at project)))]] - [:div.project-th-actions - [:div.project-th-icon.pages + [:div.project-th-actions {} + [:div.project-th-icon.pages {} i/page - [:span (:total-pages project)]] + [:span {} (:total-pages project)]] #_[:div.project-th-icon.comments i/chat [:span "0"]] @@ -216,14 +215,14 @@ (letfn [(on-click [e] (dom/prevent-default e) (udl/open! :create-project))] - [:section.dashboard-grid - [:h2 "Your projects"] - [:div.dashboard-grid-content - [:div.dashboard-grid-row + [:section.dashboard-grid {} + [:h2 {} "Your projects"] + [:div.dashboard-grid-content {} + [:div.dashboard-grid-row {} [:div.grid-item.add-project {:on-click on-click} - [:span "+ New project"]] - (for [item projects] + [:span {} "+ New project"]] + (mx/doseq [item projects] (-> (grid-item item) (mx/with-key (:id item))))]]]))) @@ -246,10 +245,10 @@ [] (let [state (mx/react dashboard-ref) projects-map (mx/react projects-map-ref)] - [:main.dashboard-main + [:main.dashboard-main {} (messages-widget) (header) - [:section.dashboard-content + [:section.dashboard-content {} (menu state projects-map) (grid state projects-map)]])) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 485b43a36..74ea4bf0e 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -117,12 +117,12 @@ :no-tool-bar-right (not right-sidebar?) :no-tool-bar-left (not left-sidebar?) :scrolling (:viewport-positionig workspace))] - [:div + [:div {} (messages-widget) (header) (colorpalette) - [:main.main-content + [:main.main-content {} [:section.workspace-content {:class classes :on-scroll on-scroll diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs index cdf812e42..174eda7a5 100644 --- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs +++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs @@ -52,7 +52,7 @@ coords (some-> (mx/react refs/canvas-mouse-position) (gpt/divide zoom) (gpt/round 0))] - [:ul.coordinates + [:ul.coordinates {} [:span {:alt "x"} (str "X: " (:x coords "-"))] [:span {:alt "y"} @@ -113,9 +113,9 @@ :width width :height height} (background metadata) - [:svg.page-layout + [:svg.page-layout {} [:g.main {} - (for [item (reverse (:shapes page))] + (mx/doseq [item (reverse (:shapes page))] (-> (uus/shape item) (mx/with-key (str item)))) (selection-handlers) @@ -244,9 +244,9 @@ opts {:shift? shift? :ctrl? ctrl?}] (st/emit! (uev/mouse-event :double-click ctrl? shift?))))] - [:div + [:div {} (coordinates) - [:div.tooltip-container + [:div.tooltip-container {} (when tooltip (cursor-tooltip tooltip))] [:svg.viewport {:width (* c/viewport-width zoom) diff --git a/frontend/src/uxbox/main/ui/workspace/clipboard.cljs b/frontend/src/uxbox/main/ui/workspace/clipboard.cljs index 8b2c3c4fd..4e995c8e4 100644 --- a/frontend/src/uxbox/main/ui/workspace/clipboard.cljs +++ b/frontend/src/uxbox/main/ui/workspace/clipboard.cljs @@ -30,14 +30,14 @@ (on-close [event] (dom/prevent-default event) (udl/close!))] - [:div.lightbox-body.clipboard - [:div.clipboard-list + [:div.lightbox-body.clipboard {} + [:div.clipboard-list {} (mx/doseq [item (mx/react clipboard-ref)] [:div.clipboard-item {:key (str (:id item)) :on-click (partial on-paste item)} - [:span.clipboard-icon i/box] - [:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])] + [:span.clipboard-icon {} i/box] + [:span {} (str "Copied (" (dt/timeago (:created-at item)) ")")]])] [:a.close {:href "#" :on-click on-close} i/close]])) (defmethod lbx/render-lightbox :clipboard diff --git a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs index 7fea655ca..b1bb7e6ba 100644 --- a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs @@ -42,8 +42,8 @@ [:div.color-cell {:key (str color) :on-click select-color} [:span.color {:style {:background color}}] - [:span.color-text color] - [:span.color-text rgb-color]]))) + [:span.color-text {} color] + [:span.color-text {} rgb-color]]))) (defn- palette-after-render [{:keys [rum/local] :as own}] @@ -79,7 +79,7 @@ [:div.color-palette-actions [:select.input-select {:on-change select-collection :value (pr-str (:id selected-coll))} - (for [collection collections] + (mx/doseq [collection collections] [:option {:key (str (:id collection)) :value (pr-str (:id collection))} (:name collection)])] @@ -87,7 +87,7 @@ [:div.btn-palette.edit.current i/pencil] [:div.btn-palette.create i/close]]] - [:span.left-arrow + [:span.left-arrow {} (when (> offset 0) {:on-click #(swap! local update :offset (fnil dec 1))}) i/arrow-slide] @@ -95,13 +95,14 @@ [:div.color-palette-content {:ref "container"} [:div.color-palette-inside {:style {:position "relative" :right (str (* 86 offset) "px")}} - (for [color colors] + (mx/doseq [color colors] (-> (palette-item color) (mx/with-key color)))]] [:span.right-arrow - (when (< offset invisible) - {:on-click #(swap! local update :offset (fnil inc 0))}) + (if (< offset invisible) + {:on-click #(swap! local update :offset (fnil inc 0))} + {}) i/arrow-slide] [:span.close-palette {:on-click close} i/close]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/download.cljs b/frontend/src/uxbox/main/ui/workspace/download.cljs index 23fb5acc3..7bb0a915b 100644 --- a/frontend/src/uxbox/main/ui/workspace/download.cljs +++ b/frontend/src/uxbox/main/ui/workspace/download.cljs @@ -10,17 +10,17 @@ [beicon.core :as rx] [potok.core :as ptk] [lentes.core :as l] + [rumext.core :as mx :include-macros true] + [uxbox.builtins.icons :as i] [uxbox.main.store :as st] [uxbox.main.refs :as refs] [uxbox.main.data.lightbox :as udl] [uxbox.main.exports :as exports] - [uxbox.builtins.icons :as i] [uxbox.main.ui.lightbox :as lbx] [uxbox.util.blob :as blob] [uxbox.util.data :refer (read-string)] [uxbox.util.time :as dt] [uxbox.util.dom :as dom] - [rumext.core :as mx :include-macros true] [uxbox.util.zip :as zip])) ;; --- Refs @@ -114,21 +114,21 @@ (udl/close!)) (download-html [event] (dom/prevent-default event))] - [:div.lightbox-body.export-dialog - [:h3 "Download options"] - [:div.row-flex - [:div.content-col - [:span.icon i/file-svg] - [:span.title "Download page"] - [:p.info "Download a single page of your project in SVG."] + [:div.lightbox-body.export-dialog {} + [:h3 {} "Download options"] + [:div.row-flex {} + [:div.content-col {} + [:span.icon {} i/file-svg] + [:span.title {} "Download page"] + [:p.info {} "Download a single page of your project in SVG."] [:select.input-select {:ref "page" :default-value (pr-str current)} - (for [{:keys [id name]} pages] + (mx/doseq [{:keys [id name]} pages] [:option {:value (pr-str id)} name])] [:a.btn-primary {:href "#" :on-click download-page} "Download page"]] - [:div.content-col - [:span.icon i/folder-zip] - [:span.title "Download project"] - [:p.info "Download all pages as svg in a zip file."] + [:div.content-col {} + [:span.icon {} i/folder-zip] + [:span.title {} "Download project"] + [:p.info {} "Download all pages as svg in a zip file."] [:a.btn-primary {:href "#" :on-click download-zip} "Download project"]] ; [:div.content-col ; [:span.icon i/file-html] diff --git a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs index eae72e982..c3135b93f 100644 --- a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs +++ b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs @@ -41,7 +41,7 @@ (mx/defc generic-draw-area [shape zoom] (let [{:keys [x1 y1 width height]} (geom/selection-rect shape)] - [:g + [:g {} (shapes/render-component shape) [:rect.main {:x x1 :y y1 :width width @@ -62,7 +62,7 @@ (on-mouse-leave [event] (st/emit! (udw/set-tooltip nil)))] (when-let [{:keys [x y] :as segment} (first segments)] - [:g + [:g {} (shapes/render-component shape) (when-not (:free shape) [:circle.close-bezier {:cx x diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 194ab7527..b76d09f87 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -34,10 +34,10 @@ (let [zoom (mx/react refs/selected-zoom) increase #(st/emit! (dw/increase-zoom)) decrease #(st/emit! (dw/decrease-zoom))] - [:ul.options-view - [:li.zoom-input + [:ul.options-view {} + [:li.zoom-input {} [:span.add-zoom {:on-click decrease} "-"] - [:span (str (mth/round (* 100 zoom)) "%")] + [:span {} (str (mth/round (* 100 zoom)) "%")] [:span.remove-zoom {:on-click increase} "+"]]])) ;; --- Header Component @@ -62,17 +62,17 @@ on-redo #(st/emit! (udu/redo)) on-image #(udl/open! :import-image) on-download #(udl/open! :download)] - [:header#workspace-bar.workspace-bar - [:div.main-icon + [:header#workspace-bar.workspace-bar {} + [:div.main-icon {} (nav/link (r/route-for :dashboard/projects) i/logo-icon)] [:div.project-tree-btn {:alt "Sitemap (Ctrl + Shift + M)" :class (when (contains? flags :sitemap) "selected") :on-click (partial toggle :sitemap)} i/project-tree - [:span (:name page)]] - [:div.workspace-options - [:ul.options-btn + [:span {} (:name page)]] + [:div.workspace-options {} + [:ul.options-btn {} [:li.tooltip.tooltip-bottom {:alt "Draw tools (Ctrl + Shift + S)" :class (when (contains? flags :drawtools) "selected") @@ -103,7 +103,7 @@ :class (when (contains? flags :document-history) "selected") :on-click (partial toggle :document-history)} i/undo-history]] - [:ul.options-btn + [:ul.options-btn {} [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)" :on-click on-undo} @@ -112,7 +112,7 @@ {:alt "Redo (Ctrl + Shift + Z)" :on-click on-redo} i/redo]] - [:ul.options-btn + [:ul.options-btn {} [:li.tooltip.tooltip-bottom {:alt "Download (Ctrl + E)" :on-click on-download} @@ -121,7 +121,7 @@ {:alt "Image (Ctrl + I)" :on-click on-image} i/image]] - [:ul.options-btn + [:ul.options-btn {} [:li.tooltip.tooltip-bottom {:alt "Rules" :class (when (contains? flags :rules) "selected") @@ -140,7 +140,7 @@ ;; [:li.tooltip.tooltip-bottom ;; {:alt "Align (Ctrl + A)"} ;; i/alignment]] - [:ul.options-btn + [:ul.options-btn {} [:li.tooltip.tooltip-bottom.view-mode {:alt "View mode (Ctrl + P)" :on-click #(on-view-clicked % project page)} diff --git a/frontend/src/uxbox/main/ui/workspace/images.cljs b/frontend/src/uxbox/main/ui/workspace/images.cljs index d98a57d84..b6436ab07 100644 --- a/frontend/src/uxbox/main/ui/workspace/images.cljs +++ b/frontend/src/uxbox/main/ui/workspace/images.cljs @@ -7,7 +7,7 @@ (ns uxbox.main.ui.workspace.images (:require [lentes.core :as l] - [uxbox.util.i18n :as t :refer [tr]] + [rumext.core :as mx :include-macros true] [potok.core :as ptk] [uxbox.builtins.icons :as i] [uxbox.main.store :as st] @@ -16,9 +16,9 @@ [uxbox.main.data.workspace :as udw] [uxbox.main.data.shapes :as uds] [uxbox.main.ui.lightbox :as lbx] + [uxbox.util.i18n :as t :refer [tr]] [uxbox.util.data :refer [read-string jscoll->vec]] [uxbox.util.dom :as dom] - [rumext.core :as mx :include-macros true] [uxbox.util.uuid :as uuid])) ;; --- Refs @@ -68,19 +68,17 @@ (dom/prevent-default event) (udl/close!))] (let [uploading? (mx/react uploading?-ref)] - [:div.lightbox-body - [:h3 "New image"] - [:div.row-flex - [:div.lightbox-big-btn - {:on-click on-select-from-library} - [:span.big-svg i/image] - [:span.text "Select from library"]] - [:div.lightbox-big-btn - {:on-click on-upload-click} + [:div.lightbox-body {} + [:h3 {} "New image"] + [:div.row-flex {} + [:div.lightbox-big-btn {:on-click on-select-from-library} + [:span.big-svg {} i/image] + [:span.text {} "Select from library"]] + [:div.lightbox-big-btn {:on-click on-upload-click} (if uploading? - [:span.big-svg.upload i/loader-pencil] - [:span.big-svg.upload i/exit]) - [:span.text "Upload file"] + [:span.big-svg.upload {} i/loader-pencil] + [:span.big-svg.upload {} i/exit]) + [:span.text {} "Upload file"] [:input.upload-image-input {:style {:display "none"} :accept "image/jpeg,image/png" @@ -105,13 +103,13 @@ :on-click on-click} [:div.library-item-th {:style {:background-image (str "url('" thumbnail "')")}}] - [:span name]])) + [:span {} name]])) (mx/defc image-collection {:mixins [mx/static]} [images] - [:div.library-content - (for [image images] + [:div.library-content {} + (mx/doseq [image images] (-> (image-item image) (mx/with-key (str (:id image)))))]) @@ -159,11 +157,11 @@ (let [value (dom/event->value event) value (read-string value)] (swap! local assoc :id value)))] - [:div.lightbox-body.big-lightbox - [:h3 "Import image from library"] - [:div.import-img-library - [:div.library-actions - [:ul.toggle-library + [:div.lightbox-body.big-lightbox {} + [:h3 {} "Import image from library"] + [:div.import-img-library {} + [:div.library-actions {} + [:ul.toggle-library {} [:li.your-images {:class (when own? "current") :on-click #(select-type % :own)} "YOUR IMAGES"] @@ -173,10 +171,10 @@ [:select.input-select {:on-change on-coll-change} (when own? [:option {:value (pr-str nil)} "Storage"]) - (for [coll colls - :let [id (:id coll) - name (:name coll)]] - [:option {:key (str id) :value (pr-str id)} name])]] + (doseq [coll colls] + (let [id (:id coll) + name (:name coll)] + [:option {:key (str id) :value (pr-str id)} name]))]] (image-collection images)] [:a.close {:href "#" :on-click on-close} i/close]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs b/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs index 0b6e66a41..14d1767fd 100644 --- a/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs +++ b/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs @@ -43,14 +43,14 @@ shapes (->> (vals shapes-by-id) (filter #(= (:page %) page))) colors (calculate-colors shapes)] - [:div - [:span (tr "ds.recent-colors")] - [:div.row-flex + [:div {} + [:span {} (tr "ds.recent-colors")] + [:div.row-flex {} (for [color colors] [:span.color-th {:style {:background-color color} :key color :on-click (partial callback color)}]) - (for [i (range (- 5 (count colors)))] + (mx/doseq [i (range (- 5 (count colors)))] [:span.color-th {:key (str "empty" i)}]) - [:span.color-th.palette-th i/picker]]])) + [:span.color-th.palette-th {} i/picker]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/ruler.cljs b/frontend/src/uxbox/main/ui/workspace/ruler.cljs index 8254fd4a1..dbb622b89 100644 --- a/frontend/src/uxbox/main/ui/workspace/ruler.cljs +++ b/frontend/src/uxbox/main/ui/workspace/ruler.cljs @@ -34,7 +34,7 @@ (mth/precision 2)) transform1 (str "translate(" (+ (:x pt) 35) "," (- (:y pt) 10) ")") transform2 (str "translate(" (+ (:x pt) 25) "," (- (:y pt) 30) ")")] - [:g + [:g {} [:rect {:fill "black" :fill-opacity "0.4" :rx "3" @@ -83,7 +83,7 @@ :width c/viewport-width :height c/viewport-height}] (when-let [points (mx/react ruler-points-ref)] - [:g + [:g {} (ruler-line zoom points) (ruler-text zoom points)])])) diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs index 7c097df2e..dbb80439e 100644 --- a/frontend/src/uxbox/main/ui/workspace/rules.cljs +++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs @@ -110,7 +110,7 @@ path (reduce (partial make-vertical-tick zoom) [] +ticks+) labels (->> (map (partial horizontal-text-label zoom) +ticks+) (filterv identity))] - [:g + [:g {} [:path {:d (str/join " " path) :stroke "#9da2a6"}] labels])) @@ -123,7 +123,7 @@ path (reduce (partial make-horizontal-tick zoom) [] +ticks+) labels (->> (map (partial vertical-text-label zoom) +ticks+) (filterv identity))] - [:g + [:g {} [:path {:d (str/join " " path) :stroke "#9da2a6"}] labels])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs index 160bc1b59..829b5796a 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs @@ -20,8 +20,8 @@ (mx/defc left-sidebar {:mixins [mx/static]} [flags page-id] - [:aside#settings-bar.settings-bar.settings-bar-left - [:div.settings-bar-inside + [:aside#settings-bar.settings-bar.settings-bar-left {} + [:div.settings-bar-inside {} (when (contains? flags :sitemap) (sitemap-toolbox page-id)) (when (contains? flags :document-history) @@ -34,8 +34,8 @@ (mx/defc right-sidebar {:mixins [mx/static]} [flags page-id] - [:aside#settings-bar.settings-bar - [:div.settings-bar-inside + [:aside#settings-bar.settings-bar {} + [:div.settings-bar-inside {} (when (contains? flags :drawtools) (draw-toolbox flags)) (when (contains? flags :element-options) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs index f319816db..aa1568c24 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs @@ -107,21 +107,20 @@ (uds/deselect-all) (udw/toggle-ruler))] - [:div#form-tools.tool-window.drawing-tools - [:div.tool-window-bar - [:div.tool-window-icon i/window] - [:span (tr "ds.draw-tools")] + [:div#form-tools.tool-window.drawing-tools {} + [:div.tool-window-bar {} + [:div.tool-window-icon {} i/window] + [:span {} (tr "ds.draw-tools")] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content - (for [[i props] (map-indexed vector tools) - :let [selected? (= drawing-tool (:shape props))]] - [:div.tool-btn.tooltip.tooltip-hover - {:alt (:help props) - :class (when selected? "selected") - :key (str i) - :on-click (partial select-drawtool (:shape props))} - (:icon props)]) - + [:div.tool-window-content {} + (mx/doseq [[i props] (map-indexed vector tools)] + (let [selected? (= drawing-tool (:shape props))] + [:div.tool-btn.tooltip.tooltip-hover + {:alt (:help props) + :class (when selected? "selected") + :key (str i) + :on-click (partial select-drawtool (:shape props))} + (:icon props)])) [:div.tool-btn.tooltip.tooltip-hover {:alt "Ruler" :on-click toggle-ruler diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs index 6277f35f3..9cde0122c 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs @@ -39,8 +39,8 @@ [:div.pin-icon {:on-click on-pinned :class (when (:pinned item) "selected")} i/pin] - [:span (str "Version " (:version item) - " (" (dt/timeago (:created-at item)) ")")]])) + [:span {} (str "Version " (:version item) + " (" (dt/timeago (:created-at item)) ")")]])) ;; --- History List (Component) @@ -51,14 +51,14 @@ page (mx/react refs/selected-page) show-more? (pos? min-version) load-more #(st/emit! (udh/load-more))] - [:ul.history-content - (for [item items - :let [current? (= (:version item) (:version page))]] - (-> (history-item item selected current?) - (mx/with-key (str (:id item))))) + [:ul.history-content {} + (mx/doseq [item items] + (let [current? (= (:version item) (:version page))] + (-> (history-item item selected current?) + (mx/with-key (str (:id item)))))) (when show-more? [:li {:on-click load-more} - [:a.btn-primary.btn-small + [:a.btn-primary.btn-small {} "view more"]])])) ;; --- History Pinned List (Component) @@ -66,11 +66,11 @@ (mx/defc history-pinned-list {:mixins [mx/static]} [{:keys [pinned selected] :as history}] - [:ul.history-content - (for [item (reverse (sort-by :version pinned)) - :let [selected? (= (:version item) selected)]] - (-> (history-item item selected?) - (mx/with-key (str (:id item)))))]) + [:ul.history-content {} + (mx/doseq [item (reverse (sort-by :version pinned))] + (let [selected? (= (:version item) selected)] + (-> (history-item item selected?) + (mx/with-key (str (:id item))))))]) ;; --- History Toolbox (Component) @@ -110,13 +110,13 @@ show-main #(st/emit! (udh/select-section :main)) show-pinned #(st/emit! (udh/select-section :pinned))] - [:div.document-history.tool-window - [:div.tool-window-bar - [:div.tool-window-icon i/undo-history] - [:span (tr "ds.document-history")] + [:div.document-history.tool-window {} + [:div.tool-window-bar {} + [:div.tool-window-icon {} i/undo-history] + [:span {} (tr "ds.document-history")] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content - [:ul.history-tabs + [:div.tool-window-content {} + [:ul.history-tabs {} [:li {:on-click show-main :class (when main? "selected")} "History"] @@ -139,7 +139,7 @@ (when (or version (:deselecting history)) [:div.message-version {:class (when (:deselecting history) "hide-message")} - [:span (tr "history.alert-message" (or version "00")) - [:div.message-action + [:span {} (tr "history.alert-message" (or version "00")) + [:div.message-action {} [:a.btn-transparent {:on-click on-accept} "Accept"] [:a.btn-transparent {:on-click on-cancel} "Cancel"]]]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 613e82864..bf8fa08ee 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -180,7 +180,7 @@ :on-drop on-drop :draggable true} - [:div.element-actions + [:div.element-actions {} [:div.toggle-element {:class (when-not (:hidden item) "selected") :on-click toggle-visibility} @@ -189,7 +189,7 @@ {:class (when (:blocked item) "selected") :on-click toggle-blocking} i/lock]] - [:div.element-icon (element-icon item)] + [:div.element-icon {} (element-icon item)] (shape-name item)]]))) ;; --- Layer Group (Component) @@ -254,7 +254,7 @@ :on-drag-end on-drag-end :on-drop on-drop :on-click select} - [:div.element-actions + [:div.element-actions {} [:div.toggle-element {:class (when-not (:hidden item) "selected") :on-click toggle-visibility} @@ -274,14 +274,13 @@ :class (when-not collapsed? "inverse")} i/arrow-slide]] (if-not collapsed? - [:ul - (for [shape (map #(get shapes-map %) (:items item)) - :let [key (str (:id shape))]] + [:ul {} + (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))] (if (= (:type shape) :group) (-> (layer-group shape selected) - (mx/with-key key)) + (mx/with-key id)) (-> (layer-simple shape selected) - (mx/with-key key))))])]))) + (mx/with-key id))))])]))) ;; --- Layers Tools (Buttons Component) @@ -317,8 +316,8 @@ allow-ungrouping? (allow-ungrouping? selected shapes-map) allow-duplicate? (= 1 (count selected)) allow-deletion? (pos? (count selected))] - [:div.layers-tools - [:ul.layers-tools-content + [:div.layers-tools {} + [:ul.layers-tools-content {} [:li.clone-layer.tooltip.tooltip-top {:alt "Duplicate" :class (when-not allow-duplicate? "disable") @@ -350,18 +349,17 @@ shapes-map (mx/react refs/shapes-by-id) close #(st/emit! (udw/toggle-flag :layers)) dragel (volatile! nil)] - [:div#layers.tool-window - [:div.tool-window-bar - [:div.tool-window-icon i/layers] - [:span "Layers"] + [:div#layers.tool-window {} + [:div.tool-window-bar {} + [:div.tool-window-icon {} i/layers] + [:span {} "Layers"] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content + [:div.tool-window-content {} [:ul.element-list {} - (for [shape (map #(get shapes-map %) (:shapes page)) - :let [key (str (:id shape))]] + (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))] (if (= (:type shape) :group) (-> (layer-group shape selected) - (mx/with-key key)) + (mx/with-key id)) (-> (layer-simple shape selected) - (mx/with-key key))))]] + (mx/with-key id))))]] (layers-tools selected shapes-map)])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index 8c170ad89..433816a3d 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -104,16 +104,16 @@ (let [menus (get +menus-map+ (:type shape ::page)) contained-in? (into #{} menus) active (:menu @local (first menus))] - [:div + [:div {} (when (> (count menus) 1) - [:ul.element-icons - (for [menu-id (get +menus-map+ (:type shape ::page)) - :let [menu (get +menus-by-id+ menu-id) - selected? (= active menu-id)]] - [:li#e-info {:on-click #(swap! local assoc :menu menu-id) - :key (str "menu-" (:id menu)) - :class (when selected? "selected")} - (:icon menu)])]) + [:ul.element-icons {} + (mx/doseq [menu-id (get +menus-map+ (:type shape ::page))] + (let [menu (get +menus-by-id+ menu-id) + selected? (= active menu-id)] + [:li#e-info {:on-click #(swap! local assoc :menu menu-id) + :key (str "menu-" (:id menu)) + :class (when selected? "selected")} + (:icon menu)]))]) (when-let [menu (get +menus-by-id+ active)] ((:comp menu) menu shape))])) @@ -131,11 +131,11 @@ (let [shape (->> (mx/react selected-shape-ref) (merge shape-default-attrs)) close #(st/emit! (udw/toggle-flag :element-options))] - [:div.elementa-options.tool-window - [:div.tool-window-bar - [:div.tool-window-icon i/options] - [:span (tr "ds.element-options")] + [:div.elementa-options.tool-window {} + [:div.tool-window-bar {} + [:div.tool-window-icon {} i/options] + [:span {} (tr "ds.element-options")] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content - [:div.element-options + [:div.tool-window-content {} + [:div.element-options {} (options shape)]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 7099858a8..8e67a6c15 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -94,11 +94,11 @@ :on-drop on-drop :draggable true} - [:div.page-icon i/page] - [:span (:name page)] - [:div.page-actions + [:div.page-icon {} i/page] + [:span {} (:name page)] + [:div.page-actions {} [:a {:on-click on-edit} i/pencil] - (if (> total 1) + (when (> total 1) [:a {:on-click on-delete} i/trash])]]]))) (mx/defc sitemap-toolbox @@ -108,17 +108,17 @@ pages (mx/react refs/selected-project-pages) create #(udl/open! :page-form {:page {:project (:id project)}}) close #(st/emit! (dw/toggle-flag :sitemap))] - [:div.sitemap.tool-window - [:div.tool-window-bar - [:div.tool-window-icon i/project-tree] - [:span (tr "ds.sitemap")] + [:div.sitemap.tool-window {} + [:div.tool-window-bar {} + [:div.tool-window-icon {} i/project-tree] + [:span {} (tr "ds.sitemap")] [:div.tool-window-close {:on-click close} i/close]] - [:div.tool-window-content - [:div.project-title - [:span (:name project)] + [:div.tool-window-content {} + [:div.project-title {} + [:span {} (:name project)] [:div.add-page {:on-click create} i/close]] - [:ul.element-list - (for [page pages - :let [active? (= (:id page) current)]] - (-> (page-item page (count pages) active?) - (mx/with-key (:id page))))]]])) + [:ul.element-list {} + (mx/doseq [page pages] + (let [active? (= (:id page) current)] + (-> (page-item page (count pages) active?) + (mx/with-key (:id page)))))]]]))