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

Add provisional spinner for image uploading in workspace.

Browse source
This commit is contained in:
Andrey Antukh 2016-10-24 23:07:45 +02:00
parent 91bb1ad77f
commit 0a28efb838
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
1 changed files with 34 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/uxbox/main/ui/workspace/images.cljs
View file

@ -20,6 +20,13 @@
[uxbox.main.ui.icons :as i] [uxbox.main.ui.icons :as i]
[uxbox.main.ui.lightbox :as lbx])) [uxbox.main.ui.lightbox :as lbx]))
;; --- Refs
(def ^:private dashboard-ref
(-> (l/in [:dashboard :images])
(l/derive st/state)))
(def ^:private collections-ref (def ^:private collections-ref
(-> (l/key :image-colls-by-id) (-> (l/key :image-colls-by-id)
(l/derive st/state))) (l/derive st/state)))
@ -28,8 +35,14 @@
(-> (l/key :images-by-id) (-> (l/key :images-by-id)
(l/derive st/state))) (l/derive st/state)))
(def ^:private uploading?-ref
(-> (l/key :uploading)
(l/derive dashboard-ref)))
;; --- Components
(mx/defcs import-image-lightbox (mx/defcs import-image-lightbox
{:mixins [mx/static]} {:mixins [mx/static mx/reactive]}
[own] [own]
(letfn [(on-upload-click [event] (letfn [(on-upload-click [event]
(let [input (mx/ref-node own "input")] (let [input (mx/ref-node own "input")]
@ -52,23 +65,26 @@
(on-close [event] (on-close [event]
(dom/prevent-default event) (dom/prevent-default event)
(udl/close!))] (udl/close!))]
[:div.lightbox-body (let [uploading? (mx/react uploading?-ref)]
[:h3 "New image"] [:div.lightbox-body
[:div.row-flex [:h3 "New image"]
[:div.lightbox-big-btn [:div.row-flex
{:on-click on-select-from-library} [:div.lightbox-big-btn
[:span.big-svg i/image] {:on-click on-select-from-library}
[:span.text "Select from library"]] [:span.big-svg i/image]
[:div.lightbox-big-btn [:span.text "Select from library"]]
{:on-click on-upload-click} [:div.lightbox-big-btn
[:span.big-svg.upload i/exit] {:on-click on-upload-click}
[:span.text "Upload file"] (if uploading?
[:input.upload-image-input [:span.big-svg.upload i/loader-pencil]
{:style {:display "none"} [:span.big-svg.upload i/exit])
:type "file" [:span.text "Upload file"]
:ref "input" [:input.upload-image-input
:on-change on-files-selected}]]] {:style {:display "none"}
[:a.close {:href "#" :on-click on-close} i/close]])) :type "file"
:ref "input"
:on-change on-files-selected}]]]
[:a.close {:on-click on-close} i/close]])))
(mx/defc image-item (mx/defc image-item
{:mixins [mx/static]} {:mixins [mx/static]}