Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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))

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

@ -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)]]))

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

@ -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

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

@ -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)

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

@ -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

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

@ -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]])))

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

@ -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]

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

@ -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

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

@ -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)}

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

@ -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]])))

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

@ -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]]]))

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

@ -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)])]))

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

@ -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]))

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

@ -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)

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

@ -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

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

@ -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"]]]])))

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

@ -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)]))

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

@ -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)]]]))

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

@ -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)))))]]]))