3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 13:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add many codebase optimizations on performance and size.

Browse source
This commit is contained in:
Andrey Antukh 2017-04-08 19:28:32 +02:00
parent 171f9325a3
commit 34adb68372
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
19 changed files with 245 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

128
frontend/src/uxbox/main/ui/dashboard/icons.cljs
View file

@ -69,10 +69,9 @@
;; --- Page Title ;; --- Page Title
(mx/defcs page-title (mx/defcs page-title
{:mixins [(mx/local {}) mx/static mx/reactive]} {:mixins [(mx/local) mx/static mx/reactive]}
[own {:keys [id] :as coll}] [{:keys [rum/local] :as own} {:keys [id] :as coll}]
(let [local (:rum/local own) (let [dashboard (mx/react dashboard-ref)
dashboard (mx/react dashboard-ref)
own? (= :own (:type coll)) own? (= :own (:type coll))
edit? (:edit @local)] edit? (:edit @local)]
(letfn [(on-save [e] (letfn [(on-save [e]
@ -96,10 +95,10 @@
(st/emit! (di/delete-collection id))) (st/emit! (di/delete-collection id)))
(on-delete [] (on-delete []
(udl/open! :confirm {:on-accept delete}))] (udl/open! :confirm {:on-accept delete}))]
[:div.dashboard-title [:div.dashboard-title {}
[:h2 [:h2 {}
(if edit? (if edit?
[:div.dashboard-title-field [:div.dashboard-title-field {}
[:span.edit [:span.edit
{:content-editable true {:content-editable true
:ref "input" :ref "input"
@ -113,7 +112,7 @@
[:span.dashboard-title-field [:span.dashboard-title-field
(:name coll "Storage")]))] (:name coll "Storage")]))]
(when (and own? coll) (when (and own? coll)
[:div.edition [:div.edition {}
(if edit? (if edit?
[:span {:on-click on-save} i/save] [:span {:on-click on-save} i/save]
[:span {:on-click on-edit} i/pencil]) [:span {:on-click on-edit} i/pencil])
@ -157,15 +156,15 @@
:on-double-click on-double-click :on-double-click on-double-click
:class-name (when selected? "current")} :class-name (when selected? "current")}
(if (:edit @local) (if (:edit @local)
[:div [:div {}
[:input.element-title [:input.element-title
{:value (if (:name @local) (:name @local) (if coll name "Storage")) {:value (if (:name @local) (:name @local) (if coll name "Storage"))
:on-change on-input-change :on-change on-input-change
:on-key-down on-input-keyup}] :on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} i/close]] [:span.close {:on-click on-cancel} i/close]]
[:span.element-title [:span.element-title {}
(if coll name "Storage")]) (if coll name "Storage")])
[:span.element-subtitle [:span.element-subtitle {}
(tr "ds.num-elements" (t/c num-icons))]]))) (tr "ds.num-elements" (t/c num-icons))]])))
(mx/defc nav-section (mx/defc nav-section
@ -177,19 +176,18 @@
own? (filter #(= :own (:type %))) own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))) builtin? (filter #(= :builtin (:type %))))
colls (sort-by :name colls)] colls (sort-by :name colls)]
[:ul.library-elements [:ul.library-elements {}
(when own? (when own?
[:li [:li {}
[:a.btn-primary [:a.btn-primary
{:on-click #(st/emit! (di/create-collection))} {:on-click #(st/emit! (di/create-collection))}
"+ New collection"]]) "+ New collection"]])
(when own? (when own?
(nav-item nil (nil? selected))) (nav-item nil (nil? selected)))
(for [coll colls (mx/doseq [coll colls]
:let [selected? (= (:id coll) selected) (let [selected? (= (:id coll) selected)]
key (str (:id coll))]]
(-> (nav-item coll selected?) (-> (nav-item coll selected?)
(mx/with-key key)))])) (mx/with-key (:id coll)))))]))
(mx/defc nav (mx/defc nav
{:mixins [mx/static]} {:mixins [mx/static]}
@ -203,9 +201,9 @@
(sort-by :name))] (sort-by :name))]
(st/emit! (di/select-collection type (:id (first colls))))) (st/emit! (di/select-collection type (:id (first colls)))))
(st/emit! (di/select-collection type))))] (st/emit! (di/select-collection type))))]
[:div.library-bar [:div.library-bar {}
[:div.library-bar-inside [:div.library-bar-inside {}
[:ul.library-tabs [:ul.library-tabs {}
[:li {:class-name (when own? "current") [:li {:class-name (when own? "current")
:on-click (partial select-tab :own)} :on-click (partial select-tab :own)}
"YOUR ICONS"] "YOUR ICONS"]
@ -226,7 +224,7 @@
(let [files (dom/get-event-files event)] (let [files (dom/get-event-files event)]
(st/emit! (di/create-icons coll-id files))))] (st/emit! (di/create-icons coll-id files))))]
[:div.grid-item.small-item.add-project {:on-click forward-click} [:div.grid-item.small-item.add-project {:on-click forward-click}
[:span "+ New icon"] [:span {} "+ New icon"]
[:input.upload-image-input [:input.upload-image-input
{:style {:display "none"} {:style {:display "none"}
:multiple true :multiple true
@ -251,12 +249,11 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(on-select id))] (on-select id))]
[:ul.move-list [:ul.move-list {}
[:li.title title] [:li.title {} title]
[:li [:a {:href "#" :on-click #(on-select % nil)} "Storage"]] [:li {}
(for [coll colls [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
:let [id (:id coll) (mx/doseq [{:keys [id name] :as coll} colls]
name (:name coll)]]
[:li {:key (str id)} [:li {:key (str id)}
[:a {:on-click #(on-select % id)} name]])])) [:a {:on-click #(on-select % id)} name]])]))
@ -287,9 +284,9 @@
(let [selected (first selected)] (let [selected (first selected)]
(st/emit! (di/update-opts :edition selected))))] (st/emit! (di/update-opts :edition selected))))]
;; MULTISELECT OPTIONS BAR ;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar [:div.multiselect-bar {}
(if editable? (if editable?
[:div.multiselect-nav [:div.multiselect-nav {}
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
{:on-click on-toggle-copy :alt "Copy"} {:on-click on-toggle-copy :alt "Copy"}
(when (:show-copy-tooltip @local) (when (:show-copy-tooltip @local)
@ -348,13 +345,13 @@
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
{:on-click toggle-selection {:on-click toggle-selection
:id (str "grid-item-" id)} :id (str "grid-item-" id)}
[:div.input-checkbox.check-primary [:div.input-checkbox.check-primary {}
[:input {:type "checkbox" [:input {:type "checkbox"
:id (:id icon) :id (:id icon)
:on-click toggle-selection :on-click toggle-selection
:checked selected?}] :checked selected?}]
[:label {:for (:id icon)}]] [:label {:for (:id icon)}]]
[:span.grid-item-image [:span.grid-item-image {}
(icon/icon-svg icon)] (icon/icon-svg icon)]
[:div.item-info [:div.item-info
{:on-click ignore-click} {:on-click ignore-click}
@ -380,20 +377,19 @@
(filter #(= id (:collection %))) (filter #(= id (:collection %)))
(filter-icons-by filtering) (filter-icons-by filtering)
(sort-icons-by ordering))] (sort-icons-by ordering))]
[:div.dashboard-grid-content [:div.dashboard-grid-content {}
[:div.dashboard-grid-row [:div.dashboard-grid-row {}
(when editable? (grid-form id)) (when editable? (grid-form id))
(for [icon icons (mx/doseq [{:keys [id] :as icon} icons]
:let [id (:id icon) (let [edition? (= edition id)
edition? (= edition id) selected? (contains? selected id)]
selected? (contains? selected id)]]
(-> (grid-item icon selected? edition?) (-> (grid-item icon selected? edition?)
(mx/with-key (str id))))]])) (mx/with-key (str id)))))]]))
(mx/defc content (mx/defc content
{:mixins [mx/static]} {:mixins [mx/static]}
[{:keys [selected] :as state} coll] [{:keys [selected] :as state} coll]
[:section.dashboard-grid.library [:section.dashboard-grid.library {}
(page-title coll) (page-title coll)
(grid state) (grid state)
(when (seq selected) (when (seq selected)
@ -417,24 +413,23 @@
(st/emit! (di/update-opts :order value)))) (st/emit! (di/update-opts :order value))))
(on-clear [event] (on-clear [event]
(st/emit! (di/update-opts :filter "")))] (st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap [:section.dashboard-bar.library-gap {}
[:div.dashboard-info [:div.dashboard-info {}
;; Counter ;; Counter
[:span.dashboard-icons (tr "ds.num-icons" (t/c num-icons))] [:span.dashboard-icons {} (tr "ds.num-icons" (t/c num-icons))]
;; Sorting ;; Sorting
[:divi [:div {}
[:span (tr "ds.project-ordering")] [:span {} (tr "ds.project-ordering")]
[:select.input-select [:select.input-select
{:on-change on-ordering-change {:on-change on-ordering-change
:value (pr-str ordering)} :value (pr-str ordering)}
(for [[key value] (seq +ordering-options+) (mx/doseq [[key value] (seq +ordering-options+)]
:let [ovalue (pr-str key) (let [key (pr-str key)]
olabel (tr value)]] [:option {:key key :value key} (tr value)]))]]
[:option {:key ovalue :value ovalue} olabel])]]
;; Search ;; Search
[:form.dashboard-search [:form.dashboard-search {}
[:input.input-text [:input.input-text
{:key :icons-search-box {:key :icons-search-box
:type "text" :type "text"
@ -469,40 +464,9 @@
(let [state (mx/react dashboard-ref) (let [state (mx/react dashboard-ref)
colls (mx/react collections-ref) colls (mx/react collections-ref)
coll (get colls (:id state))] coll (get colls (:id state))]
[:main.dashboard-main [:main.dashboard-main {}
(header) (header)
[:section.dashboard-content [:section.dashboard-content {}
(nav state colls) (nav state colls)
(menu state coll) (menu state coll)
(content 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))

47
frontend/src/uxbox/main/ui/dashboard/projects.cljs
View file

@ -89,24 +89,23 @@
(st/emit! (udp/update-opts :order value)))) (st/emit! (udp/update-opts :order value))))
(on-clear [event] (on-clear [event]
(st/emit! (udp/update-opts :filter "")))] (st/emit! (udp/update-opts :filter "")))]
[:section.dashboard-bar [:section.dashboard-bar {}
[:div.dashboard-info [:div.dashboard-info {}
;; Counter ;; Counter
[:span.dashboard-images (tr "ds.num-projects" (t/c count))] [:span.dashboard-images {} (tr "ds.num-projects" (t/c count))]
;; Sorting ;; Sorting
[:div [:div {}
[:span (tr "ds.project-ordering")] [:span {} (tr "ds.project-ordering")]
[:select.input-select [:select.input-select
{:on-change on-ordering-change {:on-change on-ordering-change
:value (pr-str ordering)} :value (pr-str ordering)}
(for [[key value] (seq +ordering-options+) (mx/doseq [[key value] (seq +ordering-options+)]
:let [ovalue (pr-str key) (let [key (pr-str key)]
olabel (tr value)]] [:option {:key key :value key} (tr value)]))]]
[:option {:key ovalue :value ovalue} olabel])]]
;; Search ;; Search
[:form.dashboard-search [:form.dashboard-search {}
[:input.input-text [:input.input-text
{:key :images-search-box {:key :images-search-box
:type "text" :type "text"
@ -178,7 +177,7 @@
(swap! local assoc :edition true))] (swap! local assoc :edition true))]
[:div.grid-item.project-th {:on-click on-navigate} [:div.grid-item.project-th {:on-click on-navigate}
(grid-item-thumbnail project) (grid-item-thumbnail project)
[:div.item-info [:div.item-info {}
(if (:edition @local) (if (:edition @local)
[:input.element-name {:type "text" [:input.element-name {:type "text"
:auto-focus true :auto-focus true
@ -186,13 +185,13 @@
:on-blur on-blur :on-blur on-blur
:on-click on-edit :on-click on-edit
:default-value (:name project)}] :default-value (:name project)}]
[:h3 (:name project)]) [:h3 {} (:name project)])
[:span.date [:span.date {}
(str "Updated " (dt/timeago (:modified-at project)))]] (str "Updated " (dt/timeago (:modified-at project)))]]
[:div.project-th-actions [:div.project-th-actions {}
[:div.project-th-icon.pages [:div.project-th-icon.pages {}
i/page i/page
[:span (:total-pages project)]] [:span {} (:total-pages project)]]
#_[:div.project-th-icon.comments #_[:div.project-th-icon.comments
i/chat i/chat
[:span "0"]] [:span "0"]]
@ -216,14 +215,14 @@
(letfn [(on-click [e] (letfn [(on-click [e]
(dom/prevent-default e) (dom/prevent-default e)
(udl/open! :create-project))] (udl/open! :create-project))]
[:section.dashboard-grid [:section.dashboard-grid {}
[:h2 "Your projects"] [:h2 {} "Your projects"]
[:div.dashboard-grid-content [:div.dashboard-grid-content {}
[:div.dashboard-grid-row [:div.dashboard-grid-row {}
[:div.grid-item.add-project [:div.grid-item.add-project
{:on-click on-click} {:on-click on-click}
[:span "+ New project"]] [:span {} "+ New project"]]
(for [item projects] (mx/doseq [item projects]
(-> (grid-item item) (-> (grid-item item)
(mx/with-key (:id item))))]]]))) (mx/with-key (:id item))))]]])))
@ -246,10 +245,10 @@
[] []
(let [state (mx/react dashboard-ref) (let [state (mx/react dashboard-ref)
projects-map (mx/react projects-map-ref)] projects-map (mx/react projects-map-ref)]
[:main.dashboard-main [:main.dashboard-main {}
(messages-widget) (messages-widget)
(header) (header)
[:section.dashboard-content [:section.dashboard-content {}
(menu state projects-map) (menu state projects-map)
(grid state projects-map)]])) (grid state projects-map)]]))

4
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -117,12 +117,12 @@
:no-tool-bar-right (not right-sidebar?) :no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?) :no-tool-bar-left (not left-sidebar?)
:scrolling (:viewport-positionig workspace))] :scrolling (:viewport-positionig workspace))]
[:div [:div {}
(messages-widget) (messages-widget)
(header) (header)
(colorpalette) (colorpalette)
[:main.main-content [:main.main-content {}
[:section.workspace-content [:section.workspace-content
{:class classes {:class classes
:on-scroll on-scroll :on-scroll on-scroll

10
frontend/src/uxbox/main/ui/workspace/canvas.cljs
View file

@ -52,7 +52,7 @@
coords (some-> (mx/react refs/canvas-mouse-position) coords (some-> (mx/react refs/canvas-mouse-position)
(gpt/divide zoom) (gpt/divide zoom)
(gpt/round 0))] (gpt/round 0))]
[:ul.coordinates [:ul.coordinates {}
[:span {:alt "x"} [:span {:alt "x"}
(str "X: " (:x coords "-"))] (str "X: " (:x coords "-"))]
[:span {:alt "y"} [:span {:alt "y"}
@ -113,9 +113,9 @@
:width width :width width
:height height} :height height}
(background metadata) (background metadata)
[:svg.page-layout [:svg.page-layout {}
[:g.main {} [:g.main {}
(for [item (reverse (:shapes page))] (mx/doseq [item (reverse (:shapes page))]
(-> (uus/shape item) (-> (uus/shape item)
(mx/with-key (str item)))) (mx/with-key (str item))))
(selection-handlers) (selection-handlers)
@ -244,9 +244,9 @@
opts {:shift? shift? opts {:shift? shift?
:ctrl? ctrl?}] :ctrl? ctrl?}]
(st/emit! (uev/mouse-event :double-click ctrl? shift?))))] (st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
[:div [:div {}
(coordinates) (coordinates)
[:div.tooltip-container [:div.tooltip-container {}
(when tooltip (when tooltip
(cursor-tooltip tooltip))] (cursor-tooltip tooltip))]
[:svg.viewport {:width (* c/viewport-width zoom) [:svg.viewport {:width (* c/viewport-width zoom)

8
frontend/src/uxbox/main/ui/workspace/clipboard.cljs
View file

@ -30,14 +30,14 @@
(on-close [event] (on-close [event]
(dom/prevent-default event) (dom/prevent-default event)
(udl/close!))] (udl/close!))]
[:div.lightbox-body.clipboard [:div.lightbox-body.clipboard {}
[:div.clipboard-list [:div.clipboard-list {}
(mx/doseq [item (mx/react clipboard-ref)] (mx/doseq [item (mx/react clipboard-ref)]
[:div.clipboard-item [:div.clipboard-item
{:key (str (:id item)) {:key (str (:id item))
:on-click (partial on-paste item)} :on-click (partial on-paste item)}
[:span.clipboard-icon i/box] [:span.clipboard-icon {} i/box]
[:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])] [:span {} (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
[:a.close {:href "#" :on-click on-close} i/close]])) [:a.close {:href "#" :on-click on-close} i/close]]))
(defmethod lbx/render-lightbox :clipboard (defmethod lbx/render-lightbox :clipboard

15
frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
View file

@ -42,8 +42,8 @@
[:div.color-cell {:key (str color) [:div.color-cell {:key (str color)
:on-click select-color} :on-click select-color}
[:span.color {:style {:background color}}] [:span.color {:style {:background color}}]
[:span.color-text color] [:span.color-text {} color]
[:span.color-text rgb-color]]))) [:span.color-text {} rgb-color]])))
(defn- palette-after-render (defn- palette-after-render
[{:keys [rum/local] :as own}] [{:keys [rum/local] :as own}]
@ -79,7 +79,7 @@
[:div.color-palette-actions [:div.color-palette-actions
[:select.input-select {:on-change select-collection [:select.input-select {:on-change select-collection
:value (pr-str (:id selected-coll))} :value (pr-str (:id selected-coll))}
(for [collection collections] (mx/doseq [collection collections]
[:option {:key (str (:id collection)) [:option {:key (str (:id collection))
:value (pr-str (:id collection))} :value (pr-str (:id collection))}
(:name collection)])] (:name collection)])]
@ -87,7 +87,7 @@
[:div.btn-palette.edit.current i/pencil] [:div.btn-palette.edit.current i/pencil]
[:div.btn-palette.create i/close]]] [:div.btn-palette.create i/close]]]
[:span.left-arrow [:span.left-arrow {}
(when (> offset 0) (when (> offset 0)
{:on-click #(swap! local update :offset (fnil dec 1))}) {:on-click #(swap! local update :offset (fnil dec 1))})
i/arrow-slide] i/arrow-slide]
@ -95,13 +95,14 @@
[:div.color-palette-content {:ref "container"} [:div.color-palette-content {:ref "container"}
[:div.color-palette-inside {:style {:position "relative" [:div.color-palette-inside {:style {:position "relative"
:right (str (* 86 offset) "px")}} :right (str (* 86 offset) "px")}}
(for [color colors] (mx/doseq [color colors]
(-> (palette-item color) (-> (palette-item color)
(mx/with-key color)))]] (mx/with-key color)))]]
[:span.right-arrow [:span.right-arrow
(when (< offset invisible) (if (< offset invisible)
{:on-click #(swap! local update :offset (fnil inc 0))}) {:on-click #(swap! local update :offset (fnil inc 0))}
{})
i/arrow-slide] i/arrow-slide]
[:span.close-palette {:on-click close} [:span.close-palette {:on-click close}
i/close]]))) i/close]])))

28
frontend/src/uxbox/main/ui/workspace/download.cljs
View file

@ -10,17 +10,17 @@
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk] [potok.core :as ptk]
[lentes.core :as l] [lentes.core :as l]
[rumext.core :as mx :include-macros true]
[uxbox.builtins.icons :as i]
[uxbox.main.store :as st] [uxbox.main.store :as st]
[uxbox.main.refs :as refs] [uxbox.main.refs :as refs]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.main.exports :as exports] [uxbox.main.exports :as exports]
[uxbox.builtins.icons :as i]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.blob :as blob] [uxbox.util.blob :as blob]
[uxbox.util.data :refer (read-string)] [uxbox.util.data :refer (read-string)]
[uxbox.util.time :as dt] [uxbox.util.time :as dt]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[rumext.core :as mx :include-macros true]
[uxbox.util.zip :as zip])) [uxbox.util.zip :as zip]))
;; --- Refs ;; --- Refs
@ -114,21 +114,21 @@
(udl/close!)) (udl/close!))
(download-html [event] (download-html [event]
(dom/prevent-default event))] (dom/prevent-default event))]
[:div.lightbox-body.export-dialog [:div.lightbox-body.export-dialog {}
[:h3 "Download options"] [:h3 {} "Download options"]
[:div.row-flex [:div.row-flex {}
[:div.content-col [:div.content-col {}
[:span.icon i/file-svg] [:span.icon {} i/file-svg]
[:span.title "Download page"] [:span.title {} "Download page"]
[:p.info "Download a single page of your project in SVG."] [:p.info {} "Download a single page of your project in SVG."]
[:select.input-select {:ref "page" :default-value (pr-str current)} [: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])] [:option {:value (pr-str id)} name])]
[:a.btn-primary {:href "#" :on-click download-page} "Download page"]] [:a.btn-primary {:href "#" :on-click download-page} "Download page"]]
[:div.content-col [:div.content-col {}
[:span.icon i/folder-zip] [:span.icon {} i/folder-zip]
[:span.title "Download project"] [:span.title {} "Download project"]
[:p.info "Download all pages as svg in a zip file."] [:p.info {} "Download all pages as svg in a zip file."]
[:a.btn-primary {:href "#" :on-click download-zip} "Download project"]] [:a.btn-primary {:href "#" :on-click download-zip} "Download project"]]
; [:div.content-col ; [:div.content-col
; [:span.icon i/file-html] ; [:span.icon i/file-html]

4
frontend/src/uxbox/main/ui/workspace/drawarea.cljs
View file

@ -41,7 +41,7 @@
(mx/defc generic-draw-area (mx/defc generic-draw-area
[shape zoom] [shape zoom]
(let [{:keys [x1 y1 width height]} (geom/selection-rect shape)] (let [{:keys [x1 y1 width height]} (geom/selection-rect shape)]
[:g [:g {}
(shapes/render-component shape) (shapes/render-component shape)
[:rect.main {:x x1 :y y1 [:rect.main {:x x1 :y y1
:width width :width width
@ -62,7 +62,7 @@
(on-mouse-leave [event] (on-mouse-leave [event]
(st/emit! (udw/set-tooltip nil)))] (st/emit! (udw/set-tooltip nil)))]
(when-let [{:keys [x y] :as segment} (first segments)] (when-let [{:keys [x y] :as segment} (first segments)]
[:g [:g {}
(shapes/render-component shape) (shapes/render-component shape)
(when-not (:free shape) (when-not (:free shape)
[:circle.close-bezier {:cx x [:circle.close-bezier {:cx x

24
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -34,10 +34,10 @@
(let [zoom (mx/react refs/selected-zoom) (let [zoom (mx/react refs/selected-zoom)
increase #(st/emit! (dw/increase-zoom)) increase #(st/emit! (dw/increase-zoom))
decrease #(st/emit! (dw/decrease-zoom))] decrease #(st/emit! (dw/decrease-zoom))]
[:ul.options-view [:ul.options-view {}
[:li.zoom-input [:li.zoom-input {}
[:span.add-zoom {:on-click decrease} "-"] [:span.add-zoom {:on-click decrease} "-"]
[:span (str (mth/round (* 100 zoom)) "%")] [:span {} (str (mth/round (* 100 zoom)) "%")]
[:span.remove-zoom {:on-click increase} "+"]]])) [:span.remove-zoom {:on-click increase} "+"]]]))
;; --- Header Component ;; --- Header Component
@ -62,17 +62,17 @@
on-redo #(st/emit! (udu/redo)) on-redo #(st/emit! (udu/redo))
on-image #(udl/open! :import-image) on-image #(udl/open! :import-image)
on-download #(udl/open! :download)] on-download #(udl/open! :download)]
[:header#workspace-bar.workspace-bar [:header#workspace-bar.workspace-bar {}
[:div.main-icon [:div.main-icon {}
(nav/link (r/route-for :dashboard/projects) i/logo-icon)] (nav/link (r/route-for :dashboard/projects) i/logo-icon)]
[:div.project-tree-btn [:div.project-tree-btn
{:alt "Sitemap (Ctrl + Shift + M)" {:alt "Sitemap (Ctrl + Shift + M)"
:class (when (contains? flags :sitemap) "selected") :class (when (contains? flags :sitemap) "selected")
:on-click (partial toggle :sitemap)} :on-click (partial toggle :sitemap)}
i/project-tree i/project-tree
[:span (:name page)]] [:span {} (:name page)]]
[:div.workspace-options [:div.workspace-options {}
[:ul.options-btn [:ul.options-btn {}
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Draw tools (Ctrl + Shift + S)" {:alt "Draw tools (Ctrl + Shift + S)"
:class (when (contains? flags :drawtools) "selected") :class (when (contains? flags :drawtools) "selected")
@ -103,7 +103,7 @@
:class (when (contains? flags :document-history) "selected") :class (when (contains? flags :document-history) "selected")
:on-click (partial toggle :document-history)} :on-click (partial toggle :document-history)}
i/undo-history]] i/undo-history]]
[:ul.options-btn [:ul.options-btn {}
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Undo (Ctrl + Z)" {:alt "Undo (Ctrl + Z)"
:on-click on-undo} :on-click on-undo}
@ -112,7 +112,7 @@
{:alt "Redo (Ctrl + Shift + Z)" {:alt "Redo (Ctrl + Shift + Z)"
:on-click on-redo} :on-click on-redo}
i/redo]] i/redo]]
[:ul.options-btn [:ul.options-btn {}
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Download (Ctrl + E)" {:alt "Download (Ctrl + E)"
:on-click on-download} :on-click on-download}
@ -121,7 +121,7 @@
{:alt "Image (Ctrl + I)" {:alt "Image (Ctrl + I)"
:on-click on-image} :on-click on-image}
i/image]] i/image]]
[:ul.options-btn [:ul.options-btn {}
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Rules" {:alt "Rules"
:class (when (contains? flags :rules) "selected") :class (when (contains? flags :rules) "selected")
@ -140,7 +140,7 @@
;; [:li.tooltip.tooltip-bottom ;; [:li.tooltip.tooltip-bottom
;; {:alt "Align (Ctrl + A)"} ;; {:alt "Align (Ctrl + A)"}
;; i/alignment]] ;; i/alignment]]
[:ul.options-btn [:ul.options-btn {}
[:li.tooltip.tooltip-bottom.view-mode [:li.tooltip.tooltip-bottom.view-mode
{:alt "View mode (Ctrl + P)" {:alt "View mode (Ctrl + P)"
:on-click #(on-view-clicked % project page)} :on-click #(on-view-clicked % project page)}

50
frontend/src/uxbox/main/ui/workspace/images.cljs
View file

@ -7,7 +7,7 @@
(ns uxbox.main.ui.workspace.images (ns uxbox.main.ui.workspace.images
(:require [lentes.core :as l] (:require [lentes.core :as l]
[uxbox.util.i18n :as t :refer [tr]] [rumext.core :as mx :include-macros true]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.store :as st] [uxbox.main.store :as st]
@ -16,9 +16,9 @@
[uxbox.main.data.workspace :as udw] [uxbox.main.data.workspace :as udw]
[uxbox.main.data.shapes :as uds] [uxbox.main.data.shapes :as uds]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.i18n :as t :refer [tr]]
[uxbox.util.data :refer [read-string jscoll->vec]] [uxbox.util.data :refer [read-string jscoll->vec]]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[rumext.core :as mx :include-macros true]
[uxbox.util.uuid :as uuid])) [uxbox.util.uuid :as uuid]))
;; --- Refs ;; --- Refs
@ -68,19 +68,17 @@
(dom/prevent-default event) (dom/prevent-default event)
(udl/close!))] (udl/close!))]
(let [uploading? (mx/react uploading?-ref)] (let [uploading? (mx/react uploading?-ref)]
[:div.lightbox-body [:div.lightbox-body {}
[:h3 "New image"] [:h3 {} "New image"]
[:div.row-flex [:div.row-flex {}
[:div.lightbox-big-btn [:div.lightbox-big-btn {:on-click on-select-from-library}
{:on-click on-select-from-library} [:span.big-svg {} i/image]
[:span.big-svg i/image] [:span.text {} "Select from library"]]
[:span.text "Select from library"]] [:div.lightbox-big-btn {:on-click on-upload-click}
[:div.lightbox-big-btn
{:on-click on-upload-click}
(if uploading? (if uploading?
[:span.big-svg.upload i/loader-pencil] [:span.big-svg.upload {} i/loader-pencil]
[:span.big-svg.upload i/exit]) [:span.big-svg.upload {} i/exit])
[:span.text "Upload file"] [:span.text {} "Upload file"]
[:input.upload-image-input [:input.upload-image-input
{:style {:display "none"} {:style {:display "none"}
:accept "image/jpeg,image/png" :accept "image/jpeg,image/png"
@ -105,13 +103,13 @@
:on-click on-click} :on-click on-click}
[:div.library-item-th [:div.library-item-th
{:style {:background-image (str "url('" thumbnail "')")}}] {:style {:background-image (str "url('" thumbnail "')")}}]
[:span name]])) [:span {} name]]))
(mx/defc image-collection (mx/defc image-collection
{:mixins [mx/static]} {:mixins [mx/static]}
[images] [images]
[:div.library-content [:div.library-content {}
(for [image images] (mx/doseq [image images]
(-> (image-item image) (-> (image-item image)
(mx/with-key (str (:id image)))))]) (mx/with-key (str (:id image)))))])
@ -159,11 +157,11 @@
(let [value (dom/event->value event) (let [value (dom/event->value event)
value (read-string value)] value (read-string value)]
(swap! local assoc :id value)))] (swap! local assoc :id value)))]
[:div.lightbox-body.big-lightbox [:div.lightbox-body.big-lightbox {}
[:h3 "Import image from library"] [:h3 {} "Import image from library"]
[:div.import-img-library [:div.import-img-library {}
[:div.library-actions [:div.library-actions {}
[:ul.toggle-library [:ul.toggle-library {}
[:li.your-images {:class (when own? "current") [:li.your-images {:class (when own? "current")
:on-click #(select-type % :own)} :on-click #(select-type % :own)}
"YOUR IMAGES"] "YOUR IMAGES"]
@ -173,10 +171,10 @@
[:select.input-select {:on-change on-coll-change} [:select.input-select {:on-change on-coll-change}
(when own? (when own?
[:option {:value (pr-str nil)} "Storage"]) [:option {:value (pr-str nil)} "Storage"])
(for [coll colls (doseq [coll colls]
:let [id (:id coll) (let [id (:id coll)
name (:name coll)]] name (:name coll)]
[:option {:key (str id) :value (pr-str id)} name])]] [:option {:key (str id) :value (pr-str id)} name]))]]
(image-collection images)] (image-collection images)]
[:a.close {:href "#" :on-click on-close} i/close]]))) [:a.close {:href "#" :on-click on-close} i/close]])))

10
frontend/src/uxbox/main/ui/workspace/recent_colors.cljs
View file

@ -43,14 +43,14 @@
shapes (->> (vals shapes-by-id) shapes (->> (vals shapes-by-id)
(filter #(= (:page %) page))) (filter #(= (:page %) page)))
colors (calculate-colors shapes)] colors (calculate-colors shapes)]
[:div [:div {}
[:span (tr "ds.recent-colors")] [:span {} (tr "ds.recent-colors")]
[:div.row-flex [:div.row-flex {}
(for [color colors] (for [color colors]
[:span.color-th {:style {:background-color color} [:span.color-th {:style {:background-color color}
:key color :key color
:on-click (partial callback 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 {:key (str "empty" i)}])
[:span.color-th.palette-th i/picker]]])) [:span.color-th.palette-th {} i/picker]]]))

4
frontend/src/uxbox/main/ui/workspace/ruler.cljs
View file

@ -34,7 +34,7 @@
(mth/precision 2)) (mth/precision 2))
transform1 (str "translate(" (+ (:x pt) 35) "," (- (:y pt) 10) ")") transform1 (str "translate(" (+ (:x pt) 35) "," (- (:y pt) 10) ")")
transform2 (str "translate(" (+ (:x pt) 25) "," (- (:y pt) 30) ")")] transform2 (str "translate(" (+ (:x pt) 25) "," (- (:y pt) 30) ")")]
[:g [:g {}
[:rect {:fill "black" [:rect {:fill "black"
:fill-opacity "0.4" :fill-opacity "0.4"
:rx "3" :rx "3"
@ -83,7 +83,7 @@
:width c/viewport-width :width c/viewport-width
:height c/viewport-height}] :height c/viewport-height}]
(when-let [points (mx/react ruler-points-ref)] (when-let [points (mx/react ruler-points-ref)]
[:g [:g {}
(ruler-line zoom points) (ruler-line zoom points)
(ruler-text zoom points)])])) (ruler-text zoom points)])]))

4
frontend/src/uxbox/main/ui/workspace/rules.cljs
View file

@ -110,7 +110,7 @@
path (reduce (partial make-vertical-tick zoom) [] +ticks+) path (reduce (partial make-vertical-tick zoom) [] +ticks+)
labels (->> (map (partial horizontal-text-label zoom) +ticks+) labels (->> (map (partial horizontal-text-label zoom) +ticks+)
(filterv identity))] (filterv identity))]
[:g [:g {}
[:path {:d (str/join " " path) :stroke "#9da2a6"}] [:path {:d (str/join " " path) :stroke "#9da2a6"}]
labels])) labels]))
@ -123,7 +123,7 @@
path (reduce (partial make-horizontal-tick zoom) [] +ticks+) path (reduce (partial make-horizontal-tick zoom) [] +ticks+)
labels (->> (map (partial vertical-text-label zoom) +ticks+) labels (->> (map (partial vertical-text-label zoom) +ticks+)
(filterv identity))] (filterv identity))]
[:g [:g {}
[:path {:d (str/join " " path) :stroke "#9da2a6"}] [:path {:d (str/join " " path) :stroke "#9da2a6"}]
labels])) labels]))

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

@ -20,8 +20,8 @@
(mx/defc left-sidebar (mx/defc left-sidebar
{:mixins [mx/static]} {:mixins [mx/static]}
[flags page-id] [flags page-id]
[:aside#settings-bar.settings-bar.settings-bar-left [:aside#settings-bar.settings-bar.settings-bar-left {}
[:div.settings-bar-inside [:div.settings-bar-inside {}
(when (contains? flags :sitemap) (when (contains? flags :sitemap)
(sitemap-toolbox page-id)) (sitemap-toolbox page-id))
(when (contains? flags :document-history) (when (contains? flags :document-history)
@ -34,8 +34,8 @@
(mx/defc right-sidebar (mx/defc right-sidebar
{:mixins [mx/static]} {:mixins [mx/static]}
[flags page-id] [flags page-id]
[:aside#settings-bar.settings-bar [:aside#settings-bar.settings-bar {}
[:div.settings-bar-inside [:div.settings-bar-inside {}
(when (contains? flags :drawtools) (when (contains? flags :drawtools)
(draw-toolbox flags)) (draw-toolbox flags))
(when (contains? flags :element-options) (when (contains? flags :element-options)

17
frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs
View file

@ -107,21 +107,20 @@
(uds/deselect-all) (uds/deselect-all)
(udw/toggle-ruler))] (udw/toggle-ruler))]
[:div#form-tools.tool-window.drawing-tools [:div#form-tools.tool-window.drawing-tools {}
[:div.tool-window-bar [:div.tool-window-bar {}
[:div.tool-window-icon i/window] [:div.tool-window-icon {} i/window]
[:span (tr "ds.draw-tools")] [:span {} (tr "ds.draw-tools")]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content {}
(for [[i props] (map-indexed vector tools) (mx/doseq [[i props] (map-indexed vector tools)]
:let [selected? (= drawing-tool (:shape props))]] (let [selected? (= drawing-tool (:shape props))]
[:div.tool-btn.tooltip.tooltip-hover [:div.tool-btn.tooltip.tooltip-hover
{:alt (:help props) {:alt (:help props)
:class (when selected? "selected") :class (when selected? "selected")
:key (str i) :key (str i)
:on-click (partial select-drawtool (:shape props))} :on-click (partial select-drawtool (:shape props))}
(:icon props)]) (:icon props)]))
[:div.tool-btn.tooltip.tooltip-hover [:div.tool-btn.tooltip.tooltip-hover
{:alt "Ruler" {:alt "Ruler"
:on-click toggle-ruler :on-click toggle-ruler

36
frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs
View file

@ -39,7 +39,7 @@
[:div.pin-icon {:on-click on-pinned [:div.pin-icon {:on-click on-pinned
:class (when (:pinned item) "selected")} :class (when (:pinned item) "selected")}
i/pin] i/pin]
[:span (str "Version " (:version item) [:span {} (str "Version " (:version item)
" (" (dt/timeago (:created-at item)) ")")]])) " (" (dt/timeago (:created-at item)) ")")]]))
;; --- History List (Component) ;; --- History List (Component)
@ -51,14 +51,14 @@
page (mx/react refs/selected-page) page (mx/react refs/selected-page)
show-more? (pos? min-version) show-more? (pos? min-version)
load-more #(st/emit! (udh/load-more))] load-more #(st/emit! (udh/load-more))]
[:ul.history-content [:ul.history-content {}
(for [item items (mx/doseq [item items]
:let [current? (= (:version item) (:version page))]] (let [current? (= (:version item) (:version page))]
(-> (history-item item selected current?) (-> (history-item item selected current?)
(mx/with-key (str (:id item))))) (mx/with-key (str (:id item))))))
(when show-more? (when show-more?
[:li {:on-click load-more} [:li {:on-click load-more}
[:a.btn-primary.btn-small [:a.btn-primary.btn-small {}
"view more"]])])) "view more"]])]))
;; --- History Pinned List (Component) ;; --- History Pinned List (Component)
@ -66,11 +66,11 @@
(mx/defc history-pinned-list (mx/defc history-pinned-list
{:mixins [mx/static]} {:mixins [mx/static]}
[{:keys [pinned selected] :as history}] [{:keys [pinned selected] :as history}]
[:ul.history-content [:ul.history-content {}
(for [item (reverse (sort-by :version pinned)) (mx/doseq [item (reverse (sort-by :version pinned))]
:let [selected? (= (:version item) selected)]] (let [selected? (= (:version item) selected)]
(-> (history-item item selected?) (-> (history-item item selected?)
(mx/with-key (str (:id item)))))]) (mx/with-key (str (:id item))))))])
;; --- History Toolbox (Component) ;; --- History Toolbox (Component)
@ -110,13 +110,13 @@
show-main #(st/emit! (udh/select-section :main)) show-main #(st/emit! (udh/select-section :main))
show-pinned #(st/emit! (udh/select-section :pinned))] show-pinned #(st/emit! (udh/select-section :pinned))]
[:div.document-history.tool-window [:div.document-history.tool-window {}
[:div.tool-window-bar [:div.tool-window-bar {}
[:div.tool-window-icon i/undo-history] [:div.tool-window-icon {} i/undo-history]
[:span (tr "ds.document-history")] [:span {} (tr "ds.document-history")]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content {}
[:ul.history-tabs [:ul.history-tabs {}
[:li {:on-click show-main [:li {:on-click show-main
:class (when main? "selected")} :class (when main? "selected")}
"History"] "History"]
@ -139,7 +139,7 @@
(when (or version (:deselecting history)) (when (or version (:deselecting history))
[:div.message-version [:div.message-version
{:class (when (:deselecting history) "hide-message")} {:class (when (:deselecting history) "hide-message")}
[:span (tr "history.alert-message" (or version "00")) [:span {} (tr "history.alert-message" (or version "00"))
[:div.message-action [:div.message-action {}
[:a.btn-transparent {:on-click on-accept} "Accept"] [:a.btn-transparent {:on-click on-accept} "Accept"]
[:a.btn-transparent {:on-click on-cancel} "Cancel"]]]]))) [:a.btn-transparent {:on-click on-cancel} "Cancel"]]]])))

36
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -180,7 +180,7 @@
:on-drop on-drop :on-drop on-drop
:draggable true} :draggable true}
[:div.element-actions [:div.element-actions {}
[:div.toggle-element [:div.toggle-element
{:class (when-not (:hidden item) "selected") {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
@ -189,7 +189,7 @@
{:class (when (:blocked item) "selected") {:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock]] i/lock]]
[:div.element-icon (element-icon item)] [:div.element-icon {} (element-icon item)]
(shape-name item)]]))) (shape-name item)]])))
;; --- Layer Group (Component) ;; --- Layer Group (Component)
@ -254,7 +254,7 @@
:on-drag-end on-drag-end :on-drag-end on-drag-end
:on-drop on-drop :on-drop on-drop
:on-click select} :on-click select}
[:div.element-actions [:div.element-actions {}
[:div.toggle-element [:div.toggle-element
{:class (when-not (:hidden item) "selected") {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
@ -274,14 +274,13 @@
:class (when-not collapsed? "inverse")} :class (when-not collapsed? "inverse")}
i/arrow-slide]] i/arrow-slide]]
(if-not collapsed? (if-not collapsed?
[:ul [:ul {}
(for [shape (map #(get shapes-map %) (:items item)) (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))]
:let [key (str (:id shape))]]
(if (= (:type shape) :group) (if (= (:type shape) :group)
(-> (layer-group shape selected) (-> (layer-group shape selected)
(mx/with-key key)) (mx/with-key id))
(-> (layer-simple shape selected) (-> (layer-simple shape selected)
(mx/with-key key))))])]))) (mx/with-key id))))])])))
;; --- Layers Tools (Buttons Component) ;; --- Layers Tools (Buttons Component)
@ -317,8 +316,8 @@
allow-ungrouping? (allow-ungrouping? selected shapes-map) allow-ungrouping? (allow-ungrouping? selected shapes-map)
allow-duplicate? (= 1 (count selected)) allow-duplicate? (= 1 (count selected))
allow-deletion? (pos? (count selected))] allow-deletion? (pos? (count selected))]
[:div.layers-tools [:div.layers-tools {}
[:ul.layers-tools-content [:ul.layers-tools-content {}
[:li.clone-layer.tooltip.tooltip-top [:li.clone-layer.tooltip.tooltip-top
{:alt "Duplicate" {:alt "Duplicate"
:class (when-not allow-duplicate? "disable") :class (when-not allow-duplicate? "disable")
@ -350,18 +349,17 @@
shapes-map (mx/react refs/shapes-by-id) shapes-map (mx/react refs/shapes-by-id)
close #(st/emit! (udw/toggle-flag :layers)) close #(st/emit! (udw/toggle-flag :layers))
dragel (volatile! nil)] dragel (volatile! nil)]
[:div#layers.tool-window [:div#layers.tool-window {}
[:div.tool-window-bar [:div.tool-window-bar {}
[:div.tool-window-icon i/layers] [:div.tool-window-icon {} i/layers]
[:span "Layers"] [:span {} "Layers"]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content {}
[:ul.element-list {} [:ul.element-list {}
(for [shape (map #(get shapes-map %) (:shapes page)) (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))]
:let [key (str (:id shape))]]
(if (= (:type shape) :group) (if (= (:type shape) :group)
(-> (layer-group shape selected) (-> (layer-group shape selected)
(mx/with-key key)) (mx/with-key id))
(-> (layer-simple shape selected) (-> (layer-simple shape selected)
(mx/with-key key))))]] (mx/with-key id))))]]
(layers-tools selected shapes-map)])) (layers-tools selected shapes-map)]))

24
frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
View file

@ -104,16 +104,16 @@
(let [menus (get +menus-map+ (:type shape ::page)) (let [menus (get +menus-map+ (:type shape ::page))
contained-in? (into #{} menus) contained-in? (into #{} menus)
active (:menu @local (first menus))] active (:menu @local (first menus))]
[:div [:div {}
(when (> (count menus) 1) (when (> (count menus) 1)
[:ul.element-icons [:ul.element-icons {}
(for [menu-id (get +menus-map+ (:type shape ::page)) (mx/doseq [menu-id (get +menus-map+ (:type shape ::page))]
:let [menu (get +menus-by-id+ menu-id) (let [menu (get +menus-by-id+ menu-id)
selected? (= active menu-id)]] selected? (= active menu-id)]
[:li#e-info {:on-click #(swap! local assoc :menu menu-id) [:li#e-info {:on-click #(swap! local assoc :menu menu-id)
:key (str "menu-" (:id menu)) :key (str "menu-" (:id menu))
:class (when selected? "selected")} :class (when selected? "selected")}
(:icon menu)])]) (:icon menu)]))])
(when-let [menu (get +menus-by-id+ active)] (when-let [menu (get +menus-by-id+ active)]
((:comp menu) menu shape))])) ((:comp menu) menu shape))]))
@ -131,11 +131,11 @@
(let [shape (->> (mx/react selected-shape-ref) (let [shape (->> (mx/react selected-shape-ref)
(merge shape-default-attrs)) (merge shape-default-attrs))
close #(st/emit! (udw/toggle-flag :element-options))] close #(st/emit! (udw/toggle-flag :element-options))]
[:div.elementa-options.tool-window [:div.elementa-options.tool-window {}
[:div.tool-window-bar [:div.tool-window-bar {}
[:div.tool-window-icon i/options] [:div.tool-window-icon {} i/options]
[:span (tr "ds.element-options")] [:span {} (tr "ds.element-options")]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content {}
[:div.element-options [:div.element-options {}
(options shape)]]])) (options shape)]]]))

30
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -94,11 +94,11 @@
:on-drop on-drop :on-drop on-drop
:draggable true} :draggable true}
[:div.page-icon i/page] [:div.page-icon {} i/page]
[:span (:name page)] [:span {} (:name page)]
[:div.page-actions [:div.page-actions {}
[:a {:on-click on-edit} i/pencil] [:a {:on-click on-edit} i/pencil]
(if (> total 1) (when (> total 1)
[:a {:on-click on-delete} i/trash])]]]))) [:a {:on-click on-delete} i/trash])]]])))
(mx/defc sitemap-toolbox (mx/defc sitemap-toolbox
@ -108,17 +108,17 @@
pages (mx/react refs/selected-project-pages) pages (mx/react refs/selected-project-pages)
create #(udl/open! :page-form {:page {:project (:id project)}}) create #(udl/open! :page-form {:page {:project (:id project)}})
close #(st/emit! (dw/toggle-flag :sitemap))] close #(st/emit! (dw/toggle-flag :sitemap))]
[:div.sitemap.tool-window [:div.sitemap.tool-window {}
[:div.tool-window-bar [:div.tool-window-bar {}
[:div.tool-window-icon i/project-tree] [:div.tool-window-icon {} i/project-tree]
[:span (tr "ds.sitemap")] [:span {} (tr "ds.sitemap")]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content {}
[:div.project-title [:div.project-title {}
[:span (:name project)] [:span {} (:name project)]
[:div.add-page {:on-click create} i/close]] [:div.add-page {:on-click create} i/close]]
[:ul.element-list [:ul.element-list {}
(for [page pages (mx/doseq [page pages]
:let [active? (= (:id page) current)]] (let [active? (= (:id page) current)]
(-> (page-item page (count pages) active?) (-> (page-item page (count pages) active?)
(mx/with-key (:id page))))]]])) (mx/with-key (:id page)))))]]]))