mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 15:39:50 -05:00
Add the ability to import images to workspace.
This commit is contained in:
Andrey Antukh
parent
7df42f3bcb
commit
459705e26a
1 changed files with 147 additions and 41 deletions
|
|
@ -6,53 +6,159 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.images
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.util.i18n :as t :refer (tr)]
|
||||
[uxbox.main.state :as st]
|
||||
[uxbox.util.rstore :as rs]
|
||||
[uxbox.main.library :as library]
|
||||
[uxbox.main.data.dashboard :as dd]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.images :as di]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.main.ui.library-bar :as ui.library-bar]
|
||||
[uxbox.main.ui.dashboard.header :refer (header)]
|
||||
[uxbox.util.lens :as ul]
|
||||
[uxbox.util.dom :as dom]))
|
||||
[uxbox.util.data :as data :refer (read-string)]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.state :as st]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.main.ui.lightbox :as lbx]))
|
||||
|
||||
;; --- Helpers & Constants
|
||||
(def ^:private collections-ref
|
||||
(-> (l/key :image-colls-by-id)
|
||||
(l/derive st/state)))
|
||||
|
||||
(defn- new-image-lightbox-render
|
||||
(def ^:private images-ref
|
||||
(-> (l/key :images-by-id)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mx/defcs import-image-lightbox
|
||||
{:mixins [mx/static]}
|
||||
[own]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New image"]
|
||||
[:div.row-flex
|
||||
[:div.lightbox-big-btn
|
||||
[:span.big-svg i/shapes]
|
||||
[:span.text "Go to workspace"]]
|
||||
[:div.lightbox-big-btn
|
||||
{:on-click #(dom/click (dom/get-element-by-class "upload-image-input"))}
|
||||
[:span.big-svg.upload i/exit]
|
||||
[:span.text "Upload file"]
|
||||
[:input.upload-image-input {:style {:display "none"}
|
||||
:type "file"
|
||||
:on-change #(rs/emit! (di/create-images nil (dom/get-event-files %)))}]]]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(udl/close!))}
|
||||
i/close]]))
|
||||
(letfn [(on-upload-click [event]
|
||||
(let [input (mx/ref-node own "input")]
|
||||
(dom/click input)))
|
||||
(on-uploaded [images]
|
||||
(println "on-uploaded" images)
|
||||
(udl/close!))
|
||||
(on-files-selected [event]
|
||||
(let [files (dom/get-event-files event)]
|
||||
(rs/emit! (udi/create-images nil files on-uploaded))))
|
||||
(on-select-from-library [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/open! :import-image-from-collections))
|
||||
(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))]
|
||||
[: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}
|
||||
[:span.big-svg.upload i/exit]
|
||||
[:span.text "Upload file"]
|
||||
[:input.upload-image-input
|
||||
{:style {:display "none"}
|
||||
:type "file"
|
||||
:ref "input"
|
||||
:on-change on-files-selected}]]]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]]))
|
||||
|
||||
(def ^:private new-image-lightbox
|
||||
(mx/component
|
||||
{:render new-image-lightbox-render
|
||||
:name "new-image-lightbox"}))
|
||||
(mx/defc image-item
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [thumbnail name id width height] :as image}]
|
||||
(letfn [(on-double-click [event]
|
||||
(let [shape {:type :image
|
||||
:name name
|
||||
:metadata {:width width
|
||||
:height height}
|
||||
:image id}]
|
||||
(rs/emit! (udw/select-for-drawing shape))
|
||||
(udl/close!)))]
|
||||
[:div.library-item {:key (str id)
|
||||
:on-double-click on-double-click}
|
||||
[:div.library-item-th
|
||||
{:style {:background-image (str "url('" thumbnail "')")}}]
|
||||
[:span name]]))
|
||||
|
||||
(defmethod lbx/render-lightbox :new-image
|
||||
(mx/defc image-collection
|
||||
{:mixins [mx/static]}
|
||||
[images]
|
||||
[:div.library-content
|
||||
(for [image images]
|
||||
(-> (image-item image)
|
||||
(mx/with-key (str (:id image)))))])
|
||||
|
||||
(defn will-mount
|
||||
[own]
|
||||
(let [local (:rum/local own)]
|
||||
(rs/emit! (udi/fetch-collections))
|
||||
(rs/emit! (udi/fetch-images nil))
|
||||
(add-watch local ::key (fn [_ _ _ v]
|
||||
(rs/emit! (udi/fetch-images (:id v)))))
|
||||
own))
|
||||
|
||||
(defn will-unmount
|
||||
[own]
|
||||
(let [local (:rum/local own)]
|
||||
(remove-watch local ::key)
|
||||
own))
|
||||
|
||||
(mx/defcs image-collections-lightbox
|
||||
{:mixins [mx/reactive (mx/local)]
|
||||
:will-mount will-mount
|
||||
:will-unmount will-unmount}
|
||||
[own]
|
||||
(let [local (:rum/local own)
|
||||
id (:id @local)
|
||||
type (:type @local :own)
|
||||
own? (= type :own)
|
||||
builtin? (= type :builtin)
|
||||
colls (mx/react collections-ref)
|
||||
colls (->> (vals colls)
|
||||
(filter #(= type (:type %)))
|
||||
(sort-by :name))
|
||||
id (if (and (nil? id) builtin?)
|
||||
(:id (first colls) ::no-value)
|
||||
id)
|
||||
images (mx/react images-ref)
|
||||
images (->> (vals images)
|
||||
(filter #(= id (:collection %))))]
|
||||
(letfn [(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))
|
||||
(select-type [event type]
|
||||
(swap! local assoc :type type))
|
||||
(on-coll-change [event]
|
||||
(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
|
||||
[:li.your-images {:class (when own? "current")
|
||||
:on-click #(select-type % :own)}
|
||||
"YOUR IMAGES"]
|
||||
[:li.standard {:class (when builtin? "current")
|
||||
:on-click #(select-type % :builtin)}
|
||||
"IMAGES STORE"]]
|
||||
[: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])]]
|
||||
(image-collection images)]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]])))
|
||||
|
||||
(defmethod lbx/render-lightbox :import-image
|
||||
[_]
|
||||
(new-image-lightbox))
|
||||
(import-image-lightbox))
|
||||
|
||||
|
||||
(defmethod lbx/render-lightbox :import-image-from-collections
|
||||
[_]
|
||||
(image-collections-lightbox))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue