Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

♻️ The big media refactor (frontend)

Browse source
This commit is contained in:
Andrés Moya 2020-08-07 12:35:37 +02:00 • committed by Andrey Antukh
parent bd7114182f
commit 05d54e4bea
17 changed files with 833 additions and 827 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/uxbox/media.clj
View file

@ -140,7 +140,7 @@
(when (and (string? mtype)
(not= mtype mtype'))
(ex/raise :type :validation
:code :image-type-mismatch
:code :media-type-mismatch
:hint "Seems like you are uploading a file whose content does not match the extension."))
{:width (.getImageWidth instance)
:height (.getImageHeight instance)

4
backend/src/uxbox/services/mutations/files.clj
View file

@ -42,7 +42,7 @@
(declare create-file)
(declare create-page)
(s/def ::is-shared boolean?)
(s/def ::is-shared ::us/boolean)
(s/def ::create-file
(s/keys :req-un [::profile-id ::name ::project-id ::is-shared]
:opt-un [::id]))
@ -188,7 +188,7 @@
;; [conn {:keys [content file-id name] :as params}]
;; (when-not (imgs/valid-image-types? (:content-type content))
;; (ex/raise :type :validation
;; :code :image-type-not-allowed
;; :code :media-type-not-allowed
;; :hint "Seems like you are uploading an invalid image."))
;;
;; (let [info (images/run {:cmd :info :input {:path (:tempfile content)

28
backend/src/uxbox/services/mutations/media.clj
View file

@ -25,8 +25,8 @@
[uxbox.util.time :as dt]))
(def thumbnail-options
{:width 800
:height 800
{:width 100
:height 100
:quality 85
:format :jpeg})
@ -122,7 +122,7 @@
(s/def ::content ::upload)
(s/def ::is-local boolean?)
(s/def ::is-local ::us/boolean)
(s/def ::add-media-object-from-url
(s/keys :req-un [::profile-id ::file-id ::url ::is-local]
@ -179,18 +179,18 @@
:width (:width info)
:height (:height info)
:mtype (:mtype info)})
(media/resolve-urls :path :uri)
(media/resolve-urls :thumb-path :thumb-uri))
(media/resolve-urls :path :uri))
media-thumbnail (db/insert! conn :media-thumbnail
{:id (uuid/next)
:media-object-id media-object-id
:path (str (:path thumb))
:width (:width thumb)
:height (:height thumb)
:quality (:quality thumb)
:mtype (:mtype thumb)})]
media-object))
media-thumbnail (-> (db/insert! conn :media-thumbnail
{:id (uuid/next)
:media-object-id media-object-id
:path (str (:path thumb))
:width (:width thumb)
:height (:height thumb)
:quality (:quality thumb)
:mtype (:mtype thumb)})
(media/resolve-urls :path :uri))]
(assoc media-object :thumb-uri (:uri media-thumbnail))))
(def ^:private sql:select-file-for-update
"select file.*,

19
backend/src/uxbox/services/queries/media.clj
View file

@ -77,7 +77,7 @@
(declare retrieve-media-objects)
(declare retrieve-file)
(s/def ::is-local boolean?)
(s/def ::is-local ::us/boolean)
(s/def ::media-objects
(s/keys :req-un [::profile-id ::file-id ::is-local]))
@ -90,15 +90,18 @@
(let [file (retrieve-file conn file-id)]
(teams/check-read-permissions! conn profile-id (:team-id file))
(->> (retrieve-media-objects conn file-id is-local)
(mapv #(media/resolve-urls % :path :uri))))))
(mapv #(media/resolve-urls % :path :uri))
(mapv #(media/resolve-urls % :thumb-path :thumb-uri))))))
(def ^:private sql:media-objects
"select *
from media_object
where deleted_at is null
and file_id = ?
and is_local = ?
order by created_at desc")
"select obj.*,
thumb.path as thumb_path
from media_object as obj
inner join media_thumbnail as thumb on obj.id = thumb.media_object_id
where obj.deleted_at is null
and obj.file_id = ?
and obj.is_local = ?
order by obj.created_at desc")
(defn retrieve-media-objects
[conn file-id is-local]

10
frontend/resources/locales.json
View file

@ -737,7 +737,7 @@
"es" : "Ha ocurrido algún error."
}
},
"errors.image-format-unsupported" : {
"errors.media-format-unsupported" : {
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:406", "src/uxbox/main/data/users.cljs:177", "src/uxbox/main/data/images.cljs:376" ],
"translations" : {
"en" : "The image format is not supported (must be svg, jpg or png).",
@ -746,7 +746,7 @@
"es" : "No se reconoce el formato de imagen (debe ser svg, jpg o png)."
}
},
"errors.image-too-large" : {
"errors.media-too-large" : {
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:404", "src/uxbox/main/data/users.cljs:175", "src/uxbox/main/data/images.cljs:374" ],
"translations" : {
"en" : "The image is too large to be inserted (must be under 5mb).",
@ -755,7 +755,7 @@
"es" : "La imagen es demasiado grande (debe tener menos de 5mb)."
}
},
"errors.image-type-mismatch" : {
"errors.media-type-mismatch" : {
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:371", "src/uxbox/main/data/workspace/persistence.cljs:421", "src/uxbox/main/data/users.cljs:191", "src/uxbox/main/data/images.cljs:391" ],
"translations" : {
"en" : "Seems that the contents of the image does not match the file extension.",
@ -764,7 +764,7 @@
"es" : "Parece que el contenido de la imagen no coincide con la etensión del archivo."
}
},
"errors.image-type-not-allowed" : {
"errors.media-type-not-allowed" : {
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:368", "src/uxbox/main/data/workspace/persistence.cljs:418", "src/uxbox/main/data/users.cljs:188", "src/uxbox/main/data/images.cljs:388" ],
"translations" : {
"en" : "Seems that this is not a valid image.",
@ -854,7 +854,7 @@
"es" : "Estás viendo la versión %s"
}
},
"image.loading" : {
"media.loading" : {
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:382", "src/uxbox/main/data/workspace/persistence.cljs:433", "src/uxbox/main/data/users.cljs:201", "src/uxbox/main/data/images.cljs:403" ],
"translations" : {
"en" : "Loading image...",

237
frontend/src/uxbox/main/data/images.cljs → frontend/src/uxbox/main/data/media.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.data.images
(ns uxbox.main.data.media
(:require
[cljs.spec.alpha :as s]
[cuerdas.core :as str]
@ -30,35 +30,34 @@
(s/def ::modified-at inst?)
(s/def ::created-at inst?)
(s/def ::mtype string?)
(s/def ::thumbnail string?)
;; (s/def ::thumbnail string?)
(s/def ::id uuid?)
(s/def ::url string?)
(s/def ::collection-id uuid?)
(s/def ::uri string?)
;; (s/def ::collection-id uuid?)
(s/def ::user-id uuid?)
(s/def ::collection
(s/keys :req-un [::id
::name
::created-at
::modified-at
::user-id]))
;; (s/def ::collection
;; (s/keys :req-un [::id
;; ::name
;; ::created-at
;; ::modified-at
;; ::user-id]))
(s/def ::image
(s/def ::media-object
(s/keys :req-un [::id
::name
::width
::height
::mtype
::collection-id
::created-at
::modified-at
::uri
::thumb-uri
;; ::thumb-uri
::user-id]))
;; ;; --- Initialize Collection Page
;;
;; (declare fetch-images)
;; (declare fetch-media-objects)
;;
;; (defn initialize
;; [collection-id]
@ -66,11 +65,11 @@
;; (ptk/reify ::initialize
;; ptk/UpdateEvent
;; (update [_ state]
;; (assoc-in state [:dashboard-images :selected] #{}))
;; (assoc-in state [:dashboard-media-objects :selected] #{}))
;;
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (rx/of (fetch-images collection-id)))))
;; (rx/of (fetch-media-objects collection-id)))))
;;
;; ;; --- Fetch Collections
;;
@ -80,7 +79,7 @@
;; (ptk/reify ::fetch-collections
;; ptk/WatchEvent
;; (watch [_ state s]
;; (->> (rp/query! :image-collections)
;; (->> (rp/query! :media-object-collections)
;; (rx/map collections-fetched)))))
;;
;;
@ -95,7 +94,7 @@
;; (reduce (fn [state {:keys [id user] :as item}]
;; (let [type (if (uuid/zero? (:user-id item)) :builtin :own)
;; item (assoc item :type type)]
;; (assoc-in state [:images-collections id] item)))
;; (assoc-in state [:media-objects-collections id] item)))
;; state
;; items))))
;;
@ -109,7 +108,7 @@
;; ptk/WatchEvent
;; (watch [_ state s]
;; (let [data {:name (tr "ds.default-library-title" (gensym "c"))}]
;; (->> (rp/mutation! :create-image-collection data)
;; (->> (rp/mutation! :create-media-object-collection data)
;; (rx/map collection-created))))))
;;
;; ;; --- Collection Created
@ -121,7 +120,7 @@
;; ptk/UpdateEvent
;; (update [_ state]
;; (let [{:keys [id] :as item} (assoc item :type :own)]
;; (update state :images-collections assoc id item)))))
;; (update state :media-objects-collections assoc id item)))))
;;
;; ;; --- Rename Collection
;;
@ -130,12 +129,12 @@
;; (ptk/reify ::rename-collection
;; ptk/UpdateEvent
;; (update [_ state]
;; (assoc-in state [:images-collections id :name] name))
;; (assoc-in state [:media-objects-collections id :name] name))
;;
;; ptk/WatchEvent
;; (watch [_ state s]
;; (let [params {:id id :name name}]
;; (->> (rp/mutation! :rename-image-collection params)
;; (->> (rp/mutation! :rename-media-object-collection params)
;; (rx/ignore))))))
;;
;; ;; --- Delete Collection
@ -145,141 +144,141 @@
;; (ptk/reify ::delete-collection
;; ptk/UpdateEvent
;; (update [_ state]
;; (update state :images-collections dissoc id))
;; (update state :media-objects-collections dissoc id))
;;
;; ptk/WatchEvent
;; (watch [_ state s]
;; (->> (rp/mutation! :delete-image-collection {:id id})
;; (->> (rp/mutation! :delete-media-object-collection {:id id})
;; (rx/tap on-success)
;; (rx/ignore)))))
;;
;; ;; --- Update Image
;; ;; --- Update Media object
;;
;; (defn persist-image
;; (defn persist-media-object
;; [id]
;; (us/verify ::us/uuid id)
;; (ptk/reify ::persist-image
;; (ptk/reify ::persist-media-object
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (let [data (get-in state [:images id])]
;; (->> (rp/mutation! :update-image data)
;; (let [data (get-in state [:media-objects id])]
;; (->> (rp/mutation! :update-media-object data)
;; (rx/ignore))))))
;;
;; ;; --- Fetch Images
;; ;; --- Fetch Media objects
;;
;; (declare images-fetched)
;; (declare media-objects-fetched)
;;
;; (defn fetch-images
;; "Fetch a list of images of the selected collection"
;; (defn fetch-media-objects
;; "Fetch a list of media-objects of the selected collection"
;; [id]
;; (us/verify ::us/uuid id)
;; (ptk/reify ::fetch-images
;; (ptk/reify ::fetch-media-objects
;; ptk/WatchEvent
;; (watch [_ state s]
;; (let [params {:collection-id id}]
;; (->> (rp/query! :images-by-collection params)
;; (rx/map (partial images-fetched id)))))))
;; (->> (rp/query! :media-objects-by-collection params)
;; (rx/map (partial media-objects-fetched id)))))))
;;
;; ;; --- Images Fetched
;; ;; --- Media objects Fetched
;;
;; (s/def ::images (s/every ::image))
;; (s/def ::media-objects (s/every ::media-object))
;;
;; (defn images-fetched
;; (defn media-objects-fetched
;; [collection-id items]
;; (us/verify ::us/uuid collection-id)
;; (us/verify ::images items)
;; (ptk/reify ::images-fetched
;; (us/verify ::media-objects items)
;; (ptk/reify ::media-objects-fetched
;; ptk/UpdateEvent
;; (update [_ state]
;; (let [images (d/index-by :id items)]
;; (assoc state :images images)))))
;; (let [media-objects (d/index-by :id items)]
;; (assoc state :media-objects media-objects)))))
;;
;; ;; --- Fetch Image
;; ;; --- Fetch Media object
;;
;; (declare image-fetched)
;; (declare media-object-fetched)
;;
;; (defrecord FetchImage [id]
;; (defrecord FetchMediaObject [id]
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (let [existing (get-in state [:images id])]
;; (let [existing (get-in state [:media-objects id])]
;; (if existing
;; (rx/empty)
;; (->> (rp/query! :image-by-id {:id id})
;; (rx/map image-fetched)
;; (->> (rp/query! :media-object-by-id {:id id})
;; (rx/map media-object-fetched)
;; (rx/catch rp/client-error? #(rx/empty)))))))
;;
;; (defn fetch-image
;; "Conditionally fetch image by its id. If image
;; (defn fetch-media-object
;; "Conditionally fetch media-object by its id. If media-object
;; is already loaded, this event is noop."
;; [id]
;; {:pre [(uuid? id)]}
;; (FetchImage. id))
;; (FetchMediaObject. id))
;;
;; ;; --- Image Fetched
;; ;; --- MediaObject Fetched
;;
;; (defrecord ImageFetched [image]
;; (defrecord MediaObjectFetched [media-object]
;; ptk/UpdateEvent
;; (update [_ state]
;; (let [id (:id image)]
;; (update state :images assoc id image))))
;; (let [id (:id media-object)]
;; (update state :media-objects assoc id media-object))))
;;
;; (defn image-fetched
;; [image]
;; {:pre [(map? image)]}
;; (ImageFetched. image))
;; (defn media-object-fetched
;; [media-object]
;; {:pre [(map? media-object)]}
;; (MediaObjectFetched. media-object))
;;
;; ;; --- Rename Image
;; ;; --- Rename MediaObject
;;
;; (defn rename-image
;; (defn rename-media-object
;; [id name]
;; (us/verify ::us/uuid id)
;; (us/verify ::us/string name)
;; (ptk/reify ::rename-image
;; (ptk/reify ::rename-media-object
;; ptk/UpdateEvent
;; (update [_ state]
;; (assoc-in state [:images id :name] name))
;; (assoc-in state [:media-objects id :name] name))
;;
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (rx/of (persist-image id)))))
;; (rx/of (persist-media-object id)))))
;;
;; ;; --- Image Selection
;; ;; --- MediaObject Selection
;;
;; (defn select-image
;; (defn select-media-object
;; [id]
;; (ptk/reify ::select-image
;; (ptk/reify ::select-media-object
;; ptk/UpdateEvent
;; (update [_ state]
;; (update-in state [:dashboard-images :selected] (fnil conj #{}) id))))
;; (update-in state [:dashboard-media-objects :selected] (fnil conj #{}) id))))
;;
;; (defn deselect-image
;; (defn deselect-media-object
;; [id]
;; (ptk/reify ::deselect-image
;; (ptk/reify ::deselect-media-object
;; ptk/UpdateEvent
;; (update [_ state]
;; (update-in state [:dashboard-images :selected] (fnil disj #{}) id))))
;; (update-in state [:dashboard-media-objects :selected] (fnil disj #{}) id))))
;;
;; (def deselect-all-images
;; (ptk/reify ::deselect-all-images
;; (def deselect-all-media-objects
;; (ptk/reify ::deselect-all-media-objects
;; ptk/UpdateEvent
;; (update [_ state]
;; (assoc-in state [:dashboard-images :selected] #{}))))
;; (assoc-in state [:dashboard-media-objects :selected] #{}))))
;;
;; ;; --- Delete Images
;; ;; --- Delete MediaObjects
;;
;; (defn delete-image
;; (defn delete-media-object
;; [id]
;; (us/verify ::us/uuid id)
;; (ptk/reify ::delete-image
;; (ptk/reify ::delete-media-object
;; ptk/UpdateEvent
;; (update [_ state]
;; (update state :images dissoc id))
;; (update state :media-objects dissoc id))
;;
;; ptk/WatchEvent
;; (watch [_ state s]
;; (rx/merge
;; (rx/of deselect-all-images)
;; (->> (rp/mutation! :delete-image {:id id})
;; (rx/of deselect-all-media-objects)
;; (->> (rp/mutation! :delete-media-object {:id id})
;; (rx/ignore))))))
;;
;; ;; --- Delete Selected
@ -288,9 +287,9 @@
;; (ptk/reify ::delete-selected
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (let [selected (get-in state [:dashboard-images :selected])]
;; (let [selected (get-in state [:dashboard-media-objects :selected])]
;; (->> (rx/from selected)
;; (rx/map delete-image))))))
;; (rx/map delete-media-object))))))
;;
;; ;; --- Update Opts (Filtering & Ordering)
;;
@ -300,48 +299,48 @@
;; (ptk/reify ::update-opts
;; ptk/UpdateEvent
;; (update [_ state]
;; (update state :dashboard-images merge
;; (update state :dashboard-media-objects merge
;; {:edition edition}
;; (when order {:order order})
;; (when filter {:filter filter})))))
;; --- Copy Selected Image
;; --- Copy Selected MediaObject
;; (defrecord CopySelected [id]
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (let [selected (get-in state [:dashboard-images :selected])]
;; (let [selected (get-in state [:dashboard-media-objects :selected])]
;; (rx/merge
;; (->> (rx/from selected)
;; (rx/flat-map #(rp/mutation! :copy-image {:id % :collection-id id}))
;; (rx/map image-created))
;; (rx/flat-map #(rp/mutation! :copy-media-object {:id % :collection-id id}))
;; (rx/map media-object-created))
;; (->> (rx/from selected)
;; (rx/map deselect-image))))))
;; (rx/map deselect-media-object))))))
;; (defn copy-selected
;; [id]
;; {:pre [(or (uuid? id) (nil? id))]}
;; (CopySelected. id))
;; --- Move Selected Image
;; --- Move Selected MediaObject
;; (defrecord MoveSelected [id]
;; ptk/UpdateEvent
;; (update [_ state]
;; (let [selected (get-in state [:dashboard-images :selected])]
;; (reduce (fn [state image]
;; (assoc-in state [:images image :collection] id))
;; (let [selected (get-in state [:dashboard-media-objects :selected])]
;; (reduce (fn [state media-object]
;; (assoc-in state [:media-objects media-object :collection] id))
;; state
;; selected)))
;; ptk/WatchEvent
;; (watch [_ state stream]
;; (let [selected (get-in state [:dashboard-images :selected])]
;; (let [selected (get-in state [:dashboard-media-objects :selected])]
;; (rx/merge
;; (->> (rx/from selected)
;; (rx/map persist-image))
;; (rx/map persist-media-object))
;; (->> (rx/from selected)
;; (rx/map deselect-image))))))
;; (rx/map deselect-media-object))))))
;; (defn move-selected
;; [id]
@ -351,29 +350,30 @@
;;;;;;; NEW
;; --- Create Image
(declare create-images-result)
;; --- Create library Media Objects
(declare create-media-objects-result)
(def allowed-file-types #{"image/jpeg" "image/png" "image/webp" "image/svg+xml"})
(def max-file-size (* 5 1024 1024))
;; TODO: unify with upload-image at main/data/workspace/persistence.cljs
;; TODO: unify with upload-media-object at main/data/workspace/persistence.cljs
;; and update-photo at main/data/users.cljs
;; https://tree.taiga.io/project/uxboxproject/us/440
(defn create-images
([file-id files] (create-images file-id files identity))
(defn create-media-objects
([file-id files] (create-media-objects file-id files identity))
([file-id files on-uploaded]
(us/verify (s/nilable ::us/uuid) file-id)
(us/verify fn? on-uploaded)
(ptk/reify ::create-images
(ptk/reify ::create-media-objects
ptk/WatchEvent
(watch [_ state stream]
(let [check-file
(fn [file]
(when (> (.-size file) max-file-size)
(throw (ex-info (tr "errors.image-too-large") {})))
(throw (ex-info (tr "errors.media-too-large") {})))
(when-not (contains? allowed-file-types (.-type file))
(throw (ex-info (tr "errors.image-format-unsupported") {})))
(throw (ex-info (tr "errors.media-format-unsupported") {})))
file)
on-success #(do (st/emit! dm/hide)
@ -384,11 +384,11 @@
(.-message %)
(.-message %)
(= (:code %) :image-type-not-allowed)
(tr "errors.image-type-not-allowed")
(= (:code %) :media-type-not-allowed)
(tr "errors.media-type-not-allowed")
(= (:code %) :image-type-mismatch)
(tr "errors.image-type-mismatch")
(= (:code %) :media-type-mismatch)
(tr "errors.media-type-mismatch")
:else
(tr "errors.unexpected-error"))]
@ -398,30 +398,31 @@
(fn [file]
{:name (.-name file)
:file-id file-id
:content file})]
:content file
:is-local false})]
(st/emit! (dm/show {:content (tr "image.loading")
(st/emit! (dm/show {:content (tr "media.loading")
:type :info
:timeout nil}))
(->> (rx/from files)
(rx/map check-file)
(rx/map prepare)
(rx/mapcat #(rp/mutation! :upload-image %))
(rx/mapcat #(rp/mutation! :upload-media-object %))
(rx/reduce conj [])
(rx/do on-success)
(rx/mapcat identity)
(rx/map (partial create-images-result file-id))
(rx/map (partial create-media-objects-result file-id))
(rx/catch on-error)))))))
;; --- Image Created
;; --- Media object Created
(defn create-images-result
[file-id image]
#_(us/verify ::image image)
(ptk/reify ::create-images-result
(defn create-media-objects-result
[file-id media-object]
#_(us/verify ::media-object media-object)
(ptk/reify ::create-media-objects-result
ptk/UpdateEvent
(update [_ state]
(-> state
(assoc-in [:workspace-images (:id image)] image)))))
(assoc-in [:workspace-media (:id media-object)] media-object)))))

18
frontend/src/uxbox/main/data/users.cljs
View file

@ -159,8 +159,8 @@
(def allowed-file-types #{"image/jpeg" "image/png" "image/webp"})
(def max-file-size (* 5 1024 1024))
;; TODO: unify with create-images at main/data/images.cljs
;; and upload-image at main/data/workspace/persistence.cljs
;; TODO: unify with create-media-objects at main/data/media.cljs
;; and upload-media-object at main/data/workspace/persistence.cljs
;; https://tree.taiga.io/project/uxboxproject/us/440
(defn update-photo
@ -172,9 +172,9 @@
(let [check-file
(fn [file]
(when (> (.-size file) max-file-size)
(throw (ex-info (tr "errors.image-too-large") {})))
(throw (ex-info (tr "errors.media-too-large") {})))
(when-not (contains? allowed-file-types (.-type file))
(throw (ex-info (tr "errors.image-format-unsupported") {})))
(throw (ex-info (tr "errors.media-format-unsupported") {})))
file)
on-success #(do (st/emit! dm/hide))
@ -184,11 +184,11 @@
(.-message %)
(.-message %)
(= (:code %) :image-type-not-allowed)
(tr "errors.image-type-not-allowed")
(= (:code %) :media-type-not-allowed)
(tr "errors.media-type-not-allowed")
(= (:code %) :image-type-mismatch)
(tr "errors.image-type-mismatch")
(= (:code %) :media-type-mismatch)
(tr "errors.media-type-mismatch")
:else
(tr "errors.unexpected-error"))]
@ -198,7 +198,7 @@
(fn [file]
{:file file})]
(st/emit! (dm/show {:content (tr "image.loading")
(st/emit! (dm/show {:content (tr "media.loading")
:type :info
:timeout nil}))

22
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -1166,14 +1166,14 @@
(dws/select-shapes selected))))))
(defn- image-uploaded
[{:keys [id name] :as image}]
(let [shape {:name name
[image]
(let [shape {:name (:name image)
:metadata {:width (:width image)
:height (:height image)
:uri (:uri image)
:thumb-width (:thumb-width image)
:thumb-height (:thumb-height image)
:thumb-uri (:thumb-uri image)}}
:uri (:uri image)}}
;; :thumb-width (:thumb-width image)
;; :thumb-height (:thumb-height image)
;; :thumb-uri (:thumb-uri image)}}
aspect-ratio (/ (:width image) (:height image))]
(st/emit! (create-and-add-shape :image shape aspect-ratio))))
@ -1182,7 +1182,7 @@
(ptk/reify ::paste-bin-impl
ptk/WatchEvent
(watch [_ state stream]
(rx/of (dwp/upload-image image image-uploaded)))))
(rx/of (dwp/upload-media-object image image-uploaded)))))
(def paste
(ptk/reify ::paste
@ -1437,10 +1437,10 @@
;; Persistence
(def set-file-shared dwp/set-file-shared)
(def fetch-images dwp/fetch-images)
(def add-image-from-url dwp/add-image-from-url)
(def upload-image dwp/upload-image)
(def delete-file-image dwp/delete-file-image)
(def fetch-media-objects dwp/fetch-media-objects)
(def add-media-object-from-url dwp/add-media-object-from-url)
(def upload-media-object dwp/upload-media-object)
(def delete-media-object dwp/delete-media-object)
(def fetch-colors dwp/fetch-colors)
(def rename-page dwp/rename-page)
(def delete-page dwp/delete-page)

107
frontend/src/uxbox/main/data/workspace/persistence.cljs
View file

@ -298,23 +298,23 @@
;; --- Fetch Workspace Images
(declare images-fetched)
(declare media-objects-fetched)
(defn fetch-images
(defn fetch-media-objects
[file-id]
(ptk/reify ::fetch-images
(ptk/reify ::fetch-media-objects
ptk/WatchEvent
(watch [_ state stream]
(->> (rp/query :images {:file-id file-id})
(rx/map images-fetched)))))
(->> (rp/query :media-objects {:file-id file-id :is-local false})
(rx/map media-objects-fetched)))))
(defn images-fetched
[images]
(ptk/reify ::images-fetched
(defn media-objects-fetched
[media-objects]
(ptk/reify ::media-objects-fetched
ptk/UpdateEvent
(update [_ state]
(let [images (d/index-by :id images)]
(assoc state :workspace-images images)))))
(let [media-objects (d/index-by :id media-objects)]
(assoc state :workspace-media media-objects)))))
;; --- Fetch Workspace Colors
@ -337,21 +337,21 @@
(assoc state :workspace-colors colors)))))
;; --- Upload Image
;; --- Upload local media objects
(declare image-uploaded)
(declare media-object-uploaded)
(def allowed-file-types #{"image/jpeg" "image/png" "image/webp" "image/svg+xml"})
(def max-file-size (* 5 1024 1024))
;; TODO: unify with create-images at main/data/images.cljs
;; TODO: unify with create-media-objects at main/data/media.cljs
;; and update-photo at main/data/users.cljs
;; https://tree.taiga.io/project/uxboxproject/us/440
(defn add-image-from-url
([url] (add-image-from-url url identity))
(defn add-media-object-from-url
([url] (add-media-object-from-url url identity))
([url on-added]
(us/verify fn? on-added)
(ptk/reify ::add-image-from-url
(ptk/reify ::add-media-object-from-url
ptk/WatchEvent
(watch [_ state stream]
(let [file-id (get-in state [:workspace-page :file-id])
@ -364,11 +364,11 @@
(.-message %)
(.-message %)
(= (:code %) :image-type-not-allowed)
(tr "errors.image-type-not-allowed")
(= (:code %) :media-type-not-allowed)
(tr "errors.media-type-not-allowed")
(= (:code %) :image-type-mismatch)
(tr "errors.image-type-mismatch")
(= (:code %) :media-type-mismatch)
(tr "errors.media-type-mismatch")
:else
(tr "errors.unexpected-error"))]
@ -377,23 +377,24 @@
prepare
(fn [url]
{:file-id file-id
:url url})]
:url url
:is-local true})]
(st/emit! (dm/show {:content (tr "image.loading")
(st/emit! (dm/show {:content (tr "media.loading")
:type :info
:timeout nil}))
(->> (rx/of url)
(rx/map prepare)
(rx/mapcat #(rp/mutation! :add-file-image-from-url %))
(rx/mapcat #(rp/mutation! :add-media-object-from-url %))
(rx/do on-success)
(rx/map image-uploaded)
(rx/map media-object-uploaded)
(rx/catch on-error)))))))
(defn upload-image
([file] (upload-image file identity))
(defn upload-media-object
([file] (upload-media-object file identity))
([file on-uploaded]
(us/verify fn? on-uploaded)
(ptk/reify ::upload-image
(ptk/reify ::upload-media-object
ptk/WatchEvent
(watch [_ state stream]
(let [file-id (get-in state [:workspace-page :file-id])
@ -401,9 +402,9 @@
check-file
(fn [file]
(when (> (.-size file) max-file-size)
(throw (ex-info (tr "errors.image-too-large") {})))
(throw (ex-info (tr "errors.media-too-large") {})))
(when-not (contains? allowed-file-types (.-type file))
(throw (ex-info (tr "errors.image-format-unsupported") {})))
(throw (ex-info (tr "errors.media-format-unsupported") {})))
file)
on-success #(do (st/emit! dm/hide)
@ -414,11 +415,11 @@
(.-message %)
(.-message %)
(= (:code %) :image-type-not-allowed)
(tr "errors.image-type-not-allowed")
(= (:code %) :media-type-not-allowed)
(tr "errors.media-type-not-allowed")
(= (:code %) :image-type-mismatch)
(tr "errors.image-type-mismatch")
(= (:code %) :media-type-mismatch)
(tr "errors.media-type-mismatch")
:else
(tr "errors.unexpected-error"))]
@ -428,17 +429,18 @@
(fn [file]
{:name (.-name file)
:file-id file-id
:content file})]
:content file
:is-local true})]
(st/emit! (dm/show {:content (tr "image.loading")
(st/emit! (dm/show {:content (tr "media.loading")
:type :info
:timeout nil}))
(->> (rx/of file)
(rx/map check-file)
(rx/map prepare)
(rx/mapcat #(rp/mutation! :upload-file-image %))
(rx/mapcat #(rp/mutation! :upload-media-object %))
(rx/do on-success)
(rx/map image-uploaded)
(rx/map media-object-uploaded)
(rx/catch on-error)))))))
@ -448,40 +450,39 @@
(s/def ::height ::us/number)
(s/def ::mtype ::us/string)
(s/def ::uri ::us/string)
(s/def ::thumb-uri ::us/string)
;; (s/def ::thumb-uri ::us/string)
(s/def ::image
(s/def ::media-object
(s/keys :req-un [::id
::name
::width
::height
::uri
::thumb-uri]))
::uri]))
;; ::thumb-uri]))
(defn image-uploaded
(defn media-object-uploaded
[item]
(us/verify ::image item)
(ptk/reify ::image-created
(us/verify ::media-object item)
(ptk/reify ::media-object-uploaded
ptk/UpdateEvent
(update [_ state]
state)))
;; (update state :workspace-images assoc (:id item) item))))
;; (update state :workspace-media assoc (:id item) item))))
;; --- Delete image
;; --- Delete media object
(defn delete-file-image
[file-id image-id]
(ptk/reify ::delete-file-image
(defn delete-media-object
[id]
(ptk/reify ::delete-media-object
ptk/UpdateEvent
(update [_ state]
(update state :workspace-images dissoc image-id))
(update state :workspace-media dissoc id))
ptk/WatchEvent
(watch [_ state stream]
(let [params {:file-id file-id
:image-id image-id}]
(rp/mutation :delete-file-image params)))))
(let [params {:id id}]
(rp/mutation :delete-media-object params)))))
;; --- Helpers

4
frontend/src/uxbox/main/refs.cljs
View file

@ -57,8 +57,8 @@
(def workspace-project
(l/derived :workspace-project st/state))
(def workspace-images
(l/derived :workspace-images st/state))
(def workspace-media
(l/derived :workspace-media st/state))
(def workspace-colors
(l/derived :workspace-colors st/state))

16
frontend/src/uxbox/main/repo.cljs
View file

@ -68,7 +68,7 @@
(->> (http/send! {:method :post :uri uri})
(rx/mapcat handle-response))))
(defmethod mutation :upload-image
(defmethod mutation :upload-media-object
[id params]
(let [form (js/FormData.)]
(run! (fn [[key val]]
@ -76,13 +76,13 @@
(seq params))
(send-mutation! id form)))
(defmethod mutation :upload-file-image
[id params]
(let [form (js/FormData.)]
(run! (fn [[key val]]
(.append form (name key) val))
(seq params))
(send-mutation! id form)))
;; (defmethod mutation :upload-file-image
;; [id params]
;; (let [form (js/FormData.)]
;; (run! (fn [[key val]]
;; (.append form (name key) val))
;; (seq params))
;; (send-mutation! id form)))
(defmethod mutation :update-profile-photo
[id params]

762
frontend/src/uxbox/main/ui/dashboard/library.cljs
View file

@ -8,384 +8,384 @@
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.library
(:require
[okulary.core :as l]
[rumext.alpha :as mf]
[cuerdas.core :as str]
[uxbox.util.router :as rt]
[uxbox.util.i18n :as i18n :refer [t tr]]
[uxbox.util.color :as uc]
[uxbox.util.dom :as dom]
[uxbox.util.time :as dt]
[uxbox.main.data.library :as dlib]
[uxbox.main.data.icons :as dico]
[uxbox.main.data.images :as dimg]
[uxbox.main.data.colors :as dcol]
[uxbox.main.ui.icons :as i]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
[uxbox.main.ui.components.context-menu :refer [context-menu]]
[uxbox.main.ui.components.file-uploader :refer [file-uploader]]
[uxbox.main.ui.modal :as modal]
[uxbox.main.ui.confirm :refer [confirm-dialog]]
[uxbox.main.ui.colorpicker :refer [colorpicker most-used-colors]]
[uxbox.main.ui.components.editable-label :refer [editable-label]]
))
(mf/defc modal-create-color
[{:keys [on-accept on-cancel] :as ctx}]
(let [state (mf/use-state { :current-color "#406280" })]
(letfn [(accept [event]
(dom/prevent-default event)
(modal/hide!)
(when on-accept (on-accept (:current-color @state))))
(cancel [event]
(dom/prevent-default event)
(modal/hide!)
(when on-cancel (on-cancel)))]
[:div.modal-create-color
[:h3.modal-create-color-title (tr "modal.create-color.new-color")]
[:& colorpicker {:value (:current-color @state)
:colors (into-array @most-used-colors)
:on-change #(swap! state assoc :current-color %)}]
[:input.btn-primary {:type "button"
:value (tr "ds.button.save")
:on-click accept}]
[:a.close {:href "#" :on-click cancel} i/close]])))
(defn create-library [section team-id]
(let [name (str (str (str/title (name section)) " " (gensym "Library ")))]
(st/emit! (dlib/create-library section team-id name))))
(defmulti create-item (fn [x _ _] x))
(defmethod create-item :icons [_ library-id files]
(st/emit! (dico/create-icons library-id files)))
(defmethod create-item :images [_ library-id files]
(st/emit! (dimg/create-images library-id files)))
(defmethod create-item :palettes [_ library-id]
(letfn [(dispatch-color [color]
(st/emit! (dcol/create-color library-id color)))]
(modal/show! modal-create-color {:on-accept dispatch-color})))
(mf/defc library-header
[{:keys [section team-id] :as props}]
(let [icons? (= section :icons)
images? (= section :images)
palettes? (= section :palettes)
locale (i18n/use-locale)]
[:header#main-bar.main-bar
[:h1.dashboard-title "Libraries"]
[:nav.library-header-navigation
[:a.library-header-navigation-item
{:class-name (when icons? "current")
:on-click #(st/emit! (rt/nav :dashboard-library-icons-index {:team-id team-id}))}
(t locale "dashboard.library.menu.icons")]
[:a.library-header-navigation-item
{:class-name (when images? "current")
:on-click #(st/emit! (rt/nav :dashboard-library-images-index {:team-id team-id}))}
(t locale "dashboard.library.menu.images")]
[:a.library-header-navigation-item
{:class-name (when palettes? "current")
:on-click #(st/emit! (rt/nav :dashboard-library-palettes-index {:team-id team-id}))}
(t locale "dashboard.library.menu.palettes")]]]))
(mf/defc library-sidebar
[{:keys [section items team-id library-id]}]
(let [locale (i18n/use-locale)]
[:aside.library-sidebar
[:button.btn-primary.btn-small
{:type "button"
:on-click #(create-library section team-id)}
(t locale (str "dashboard.library.add-library." (name section)))]
[:ul.library-sidebar-list
(for [item items]
[:li.library-sidebar-list-element
{:key (:id item)
:class-name (when (= library-id (:id item)) "current")
:on-click
(fn []
(let [path (keyword (str "dashboard-library-" (name section)))]
(dlib/retrieve-libraries :icons (:id item))
(st/emit! (rt/nav path {:team-id team-id :library-id (:id item)}))))}
[:& editable-label {:value (:name item)
:on-change #(st/emit! (dlib/rename-library section team-id library-id %))}]
])]]))
(mf/defc library-top-menu
[{:keys [selected section library-id team-id on-delete-selected]}]
(let [state (mf/use-state {:is-open false
:editing-name false})
locale (i18n/use-locale)
stop-editing #(swap! state assoc :editing-name false)]
[:header.library-top-menu
[:div.library-top-menu-current-element
[:& editable-label {:edit (:editing-name @state)
:on-change #(do
(stop-editing)
(st/emit! (dlib/rename-library section team-id library-id %)))
:on-cancel #(swap! state assoc :editing-name false)
:class-name "library-top-menu-current-element-name"
:value (:name selected)}]
[:a.library-top-menu-current-action
{ :on-click #(swap! state update :is-open not)}
[:span i/arrow-down]]
[:& context-menu
{:show (:is-open @state)
:on-close #(swap! state update :is-open not)
:options [[(t locale "ds.button.rename")
#(swap! state assoc :editing-name true)]
[(t locale "ds.button.delete")
(fn []
(let [path (keyword (str "dashboard-library-" (name section) "-index"))]
(modal/show!
confirm-dialog
{:on-accept #(do
(st/emit! (dlib/delete-library section team-id library-id))
(st/emit! (rt/nav path {:team-id team-id})))
:message "Are you sure you want to delete this library?"
:accept-text "Delete"})))]]}]]
[:div.library-top-menu-actions
(when on-delete-selected
[:a.library-top-menu-actions-delete
{:on-click on-delete-selected}
i/trash])
(if (= section :palettes)
[:button.btn-secondary.btn-small
{:on-click #(create-item section library-id)}
(t locale (str "dashboard.library.add-item." (name section)))]
[:& file-uploader {:accept (case section
:images "image/jpeg,image/png,image/webp"
:icons "image/svg+xml"
"")
:multi true
:label-text (t locale (str "dashboard.library.add-item." (name section)))
:label-class "btn-secondary btn-small"
:input-id "file-upload"
:on-selected #(create-item section library-id %)}])]]))
(mf/defc library-icon-card
[{:keys [item on-select on-unselect on-delete]}]
(let [{:keys [id name url content metadata library-id modified-at]} item
locale (i18n/use-locale)
state (mf/use-state {:is-open false :selected false})
time (dt/timeago modified-at {:locale locale})
handle-change (fn []
(swap! state update :selected not)
(if (:selected @state)
(when on-unselect (on-unselect id))
(when on-select (on-select id))))]
[:div.library-card.library-icon
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id (str "icon-" id)
:on-change handle-change
:value (:selected @state)}]
[:label {:for (str "icon-" id)}]]
[:div.library-card-image
[:svg {:view-box (->> metadata :view-box (str/join " "))
:width (:width metadata)
:height (:height metadata)
:dangerouslySetInnerHTML {:__html content}}]]
[:div.library-card-footer
[:div.library-card-footer-name name]
[:div.library-card-footer-timestamp time]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu
{:show (:is-open @state)
:on-close #(swap! state update :is-open not)
:options [[(t locale "ds.button.delete")
(fn []
(modal/show!
confirm-dialog
{:on-accept #(do
(st/emit! (dlib/delete-item :icons library-id id))
(on-delete id))
:message "Are you sure you want to delete this icon?"
:accept-text "Delete"}))]]}]]]))
(mf/defc library-image-card
[{:keys [item on-select on-unselect on-delete]}]
(let [{:keys [id name thumb-uri library-id modified-at]} item
locale (i18n/use-locale)
state (mf/use-state {:is-open false :selected false})
time (dt/timeago modified-at {:locale locale})
handle-change (fn []
(swap! state update :selected not)
(if (:selected @state)
(when on-unselect (on-unselect id))
(when on-select (on-select id))))]
[:div.library-card.library-image
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id (str "image-" id)
:on-change handle-change
:value (:selected @state)}]
[:label {:for (str "image-" id)}]]
[:div.library-card-image
[:img {:src thumb-uri}]]
[:div.library-card-footer
[:div.library-card-footer-name name]
[:div.library-card-footer-timestamp time]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu
{:show (:is-open @state)
:on-close #(swap! state update :is-open not)
:options [[(t locale "ds.button.delete")
(fn []
(modal/show!
confirm-dialog
{:on-accept #(do
(st/emit! (dlib/delete-item :images library-id id))
(on-delete id))
:message "Are you sure you want to delete this image?"
:accept-text "Delete"}))]]}]]]))
(mf/defc library-color-card
[{:keys [item on-select on-unselect on-delete]}]
(let [{:keys [id content library-id modified-at]} item
locale (i18n/use-locale)
state (mf/use-state {:is-open false :selected false})
handle-change (fn []
(swap! state update :selected not)
(if (:selected @state)
(when on-unselect (on-unselect id))
(when on-select (on-select id))))]
(when content
[:div.library-card.library-color
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id (str "color-" id)
:on-change handle-change
:value (:selected @state)}]
[:label {:for (str "color-" id)}]]
[:div.library-card-image
{ :style { :background-color content }}]
[:div.library-card-footer
[:div.library-card-footer-name content ]
[:div.library-card-footer-color
[:span.library-card-footer-color-label "RGB"]
[:span.library-card-footer-color-rgb (str/join " " (uc/hex->rgb content))]]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu
{:show (:is-open @state)
:on-close #(swap! state update :is-open not)
:options [[(t locale "ds.button.delete")
(fn []
(modal/show!
confirm-dialog
{:on-accept #(do
(st/emit! (dlib/delete-item :palettes library-id id))
(on-delete id))
:message "Are you sure you want to delete this color?"
:accept-text "Delete"}))]]}]]])))
(defn- make-libraries-ref
[section team-id]
#(-> (l/in [:library section team-id])
(l/derived st/state =)))
(defn- make-library-items-ref
[section library-id]
#(-> (l/in [:library-items section library-id])
(l/derived st/state =)))
(def last-deleted-library-ref
(-> (l/in [:library :last-deleted-library])
(l/derived st/state =)))
(mf/defc library-page
[{:keys [team-id library-id section]}]
(let [state (mf/use-state {:selected #{}})
libs-ref (mf/use-memo
(mf/deps section team-id)
(make-libraries-ref section team-id))
libraries (mf/deref libs-ref)
items-ref (mf/use-memo
(mf/deps section library-id)
(make-library-items-ref section library-id))
items (mf/deref items-ref)
last-deleted-library (mf/deref last-deleted-library-ref)
selected-library (first (filter #(= (:id %) library-id) libraries))
]
(mf/use-effect
(mf/deps libraries)
#(if (and (nil? library-id) (> (count libraries) 0))
(let [path (keyword (str "dashboard-library-" (name section)))]
(st/emit! (rt/nav path {:team-id team-id :library-id (:id (first libraries))})))))
(mf/use-effect
(mf/deps libraries)
#(if (and library-id (not (some (fn [{id :id}] (= library-id id)) libraries)))
(let [path (keyword (str "dashboard-library-" (name section) "-index"))]
(st/emit! (rt/nav path {:team-id team-id})))))
(mf/use-effect
(mf/deps section team-id)
#(st/emit! (dlib/retrieve-libraries section team-id)))
(mf/use-effect
(mf/deps library-id last-deleted-library)
#(when (and library-id (not= last-deleted-library library-id))
(st/emit! (dlib/retrieve-library-data section library-id))))
[:div.library-page
[:& library-header {:section section :team-id team-id}]
[:& library-sidebar {:items libraries :team-id team-id :library-id library-id :section section}]
(if library-id
[:section.library-content
[:& library-top-menu
{:selected selected-library
:section section
:library-id library-id
:team-id team-id
:on-delete-selected
(when-not (empty? (:selected @state))
(fn []
(modal/show!
confirm-dialog
{:on-accept #(do (st/emit! (dlib/batch-delete-item section library-id (:selected @state)))
(swap! state assoc :selected #{}))
:message (str "Are you sure you want to delete " (-> @state :selected count) " items?")
:accept-text "Delete"})))}]
[:*
(if (> (count items) 0)
[:div.library-page-cards-container
(for [item items]
(let [item (assoc item :key (:id item))
props {:item item
:key (:id item)
:on-select #(swap! state update :selected conj %)
:on-unselect #(swap! state update :selected disj %)
:on-delete #(swap! state update :selected disj %)}]
(case section
:icons [:& library-icon-card props]
:images [:& library-image-card props]
:palettes [:& library-color-card props])))]
[:div.library-content-empty
[:p.library-content-empty-text "You still have no elements in this library"]])]]
[:div.library-content-empty
[:p.library-content-empty-text "You still have no image libraries."]])]))
;; (ns uxbox.main.ui.dashboard.library
;; (:require
;; [okulary.core :as l]
;; [rumext.alpha :as mf]
;; [cuerdas.core :as str]
;; [uxbox.util.router :as rt]
;; [uxbox.util.i18n :as i18n :refer [t tr]]
;; [uxbox.util.color :as uc]
;; [uxbox.util.dom :as dom]
;; [uxbox.util.time :as dt]
;; [uxbox.main.data.library :as dlib]
;; [uxbox.main.data.icons :as dico]
;; [uxbox.main.data.images :as dimg]
;; [uxbox.main.data.colors :as dcol]
;; [uxbox.main.ui.icons :as i]
;; [uxbox.main.store :as st]
;; [uxbox.main.refs :as refs]
;; [uxbox.main.ui.components.context-menu :refer [context-menu]]
;; [uxbox.main.ui.components.file-uploader :refer [file-uploader]]
;; [uxbox.main.ui.modal :as modal]
;; [uxbox.main.ui.confirm :refer [confirm-dialog]]
;; [uxbox.main.ui.colorpicker :refer [colorpicker most-used-colors]]
;; [uxbox.main.ui.components.editable-label :refer [editable-label]]
;; ))
;;
;; (mf/defc modal-create-color
;; [{:keys [on-accept on-cancel] :as ctx}]
;; (let [state (mf/use-state { :current-color "#406280" })]
;; (letfn [(accept [event]
;; (dom/prevent-default event)
;; (modal/hide!)
;; (when on-accept (on-accept (:current-color @state))))
;;
;; (cancel [event]
;; (dom/prevent-default event)
;; (modal/hide!)
;; (when on-cancel (on-cancel)))]
;; [:div.modal-create-color
;; [:h3.modal-create-color-title (tr "modal.create-color.new-color")]
;; [:& colorpicker {:value (:current-color @state)
;; :colors (into-array @most-used-colors)
;; :on-change #(swap! state assoc :current-color %)}]
;;
;; [:input.btn-primary {:type "button"
;; :value (tr "ds.button.save")
;; :on-click accept}]
;;
;; [:a.close {:href "#" :on-click cancel} i/close]])))
;;
;; (defn create-library [section team-id]
;; (let [name (str (str (str/title (name section)) " " (gensym "Library ")))]
;; (st/emit! (dlib/create-library section team-id name))))
;;
;; (defmulti create-item (fn [x _ _] x))
;;
;; (defmethod create-item :icons [_ library-id files]
;; (st/emit! (dico/create-icons library-id files)))
;;
;; (defmethod create-item :images [_ library-id files]
;; (st/emit! (dimg/create-images library-id files)))
;;
;; (defmethod create-item :palettes [_ library-id]
;; (letfn [(dispatch-color [color]
;; (st/emit! (dcol/create-color library-id color)))]
;; (modal/show! modal-create-color {:on-accept dispatch-color})))
;;
;; (mf/defc library-header
;; [{:keys [section team-id] :as props}]
;; (let [icons? (= section :icons)
;; images? (= section :images)
;; palettes? (= section :palettes)
;; locale (i18n/use-locale)]
;; [:header#main-bar.main-bar
;; [:h1.dashboard-title "Libraries"]
;; [:nav.library-header-navigation
;; [:a.library-header-navigation-item
;; {:class-name (when icons? "current")
;; :on-click #(st/emit! (rt/nav :dashboard-library-icons-index {:team-id team-id}))}
;; (t locale "dashboard.library.menu.icons")]
;; [:a.library-header-navigation-item
;; {:class-name (when images? "current")
;; :on-click #(st/emit! (rt/nav :dashboard-library-images-index {:team-id team-id}))}
;; (t locale "dashboard.library.menu.images")]
;; [:a.library-header-navigation-item
;; {:class-name (when palettes? "current")
;; :on-click #(st/emit! (rt/nav :dashboard-library-palettes-index {:team-id team-id}))}
;; (t locale "dashboard.library.menu.palettes")]]]))
;;
;; (mf/defc library-sidebar
;; [{:keys [section items team-id library-id]}]
;; (let [locale (i18n/use-locale)]
;; [:aside.library-sidebar
;; [:button.btn-primary.btn-small
;; {:type "button"
;; :on-click #(create-library section team-id)}
;; (t locale (str "dashboard.library.add-library." (name section)))]
;; [:ul.library-sidebar-list
;; (for [item items]
;; [:li.library-sidebar-list-element
;; {:key (:id item)
;; :class-name (when (= library-id (:id item)) "current")
;; :on-click
;; (fn []
;; (let [path (keyword (str "dashboard-library-" (name section)))]
;; (dlib/retrieve-libraries :icons (:id item))
;; (st/emit! (rt/nav path {:team-id team-id :library-id (:id item)}))))}
;; [:& editable-label {:value (:name item)
;; :on-change #(st/emit! (dlib/rename-library section team-id library-id %))}]
;; ])]]))
;;
;; (mf/defc library-top-menu
;; [{:keys [selected section library-id team-id on-delete-selected]}]
;; (let [state (mf/use-state {:is-open false
;; :editing-name false})
;; locale (i18n/use-locale)
;; stop-editing #(swap! state assoc :editing-name false)]
;; [:header.library-top-menu
;; [:div.library-top-menu-current-element
;; [:& editable-label {:edit (:editing-name @state)
;; :on-change #(do
;; (stop-editing)
;; (st/emit! (dlib/rename-library section team-id library-id %)))
;; :on-cancel #(swap! state assoc :editing-name false)
;; :class-name "library-top-menu-current-element-name"
;; :value (:name selected)}]
;; [:a.library-top-menu-current-action
;; { :on-click #(swap! state update :is-open not)}
;; [:span i/arrow-down]]
;; [:& context-menu
;; {:show (:is-open @state)
;; :on-close #(swap! state update :is-open not)
;; :options [[(t locale "ds.button.rename")
;; #(swap! state assoc :editing-name true)]
;;
;; [(t locale "ds.button.delete")
;; (fn []
;; (let [path (keyword (str "dashboard-library-" (name section) "-index"))]
;; (modal/show!
;; confirm-dialog
;; {:on-accept #(do
;; (st/emit! (dlib/delete-library section team-id library-id))
;; (st/emit! (rt/nav path {:team-id team-id})))
;; :message "Are you sure you want to delete this library?"
;; :accept-text "Delete"})))]]}]]
;;
;; [:div.library-top-menu-actions
;; (when on-delete-selected
;; [:a.library-top-menu-actions-delete
;; {:on-click on-delete-selected}
;; i/trash])
;;
;; (if (= section :palettes)
;; [:button.btn-secondary.btn-small
;; {:on-click #(create-item section library-id)}
;; (t locale (str "dashboard.library.add-item." (name section)))]
;;
;; [:& file-uploader {:accept (case section
;; :images "image/jpeg,image/png,image/webp"
;; :icons "image/svg+xml"
;; "")
;; :multi true
;; :label-text (t locale (str "dashboard.library.add-item." (name section)))
;; :label-class "btn-secondary btn-small"
;; :input-id "file-upload"
;; :on-selected #(create-item section library-id %)}])]]))
;;
;; (mf/defc library-icon-card
;; [{:keys [item on-select on-unselect on-delete]}]
;; (let [{:keys [id name url content metadata library-id modified-at]} item
;; locale (i18n/use-locale)
;; state (mf/use-state {:is-open false :selected false})
;; time (dt/timeago modified-at {:locale locale})
;; handle-change (fn []
;; (swap! state update :selected not)
;; (if (:selected @state)
;; (when on-unselect (on-unselect id))
;; (when on-select (on-select id))))]
;; [:div.library-card.library-icon
;; [:div.input-checkbox.check-primary
;; [:input {:type "checkbox"
;; :id (str "icon-" id)
;; :on-change handle-change
;; :value (:selected @state)}]
;; [:label {:for (str "icon-" id)}]]
;; [:div.library-card-image
;; [:svg {:view-box (->> metadata :view-box (str/join " "))
;; :width (:width metadata)
;; :height (:height metadata)
;; :dangerouslySetInnerHTML {:__html content}}]]
;;
;; [:div.library-card-footer
;; [:div.library-card-footer-name name]
;; [:div.library-card-footer-timestamp time]
;; [:div.library-card-footer-menu
;; { :on-click #(swap! state update :is-open not) }
;; i/actions]
;; [:& context-menu
;; {:show (:is-open @state)
;; :on-close #(swap! state update :is-open not)
;; :options [[(t locale "ds.button.delete")
;; (fn []
;; (modal/show!
;; confirm-dialog
;; {:on-accept #(do
;; (st/emit! (dlib/delete-item :icons library-id id))
;; (on-delete id))
;; :message "Are you sure you want to delete this icon?"
;; :accept-text "Delete"}))]]}]]]))
;;
;; (mf/defc library-image-card
;; [{:keys [item on-select on-unselect on-delete]}]
;; (let [{:keys [id name thumb-uri library-id modified-at]} item
;; locale (i18n/use-locale)
;; state (mf/use-state {:is-open false :selected false})
;; time (dt/timeago modified-at {:locale locale})
;; handle-change (fn []
;; (swap! state update :selected not)
;; (if (:selected @state)
;; (when on-unselect (on-unselect id))
;; (when on-select (on-select id))))]
;; [:div.library-card.library-image
;; [:div.input-checkbox.check-primary
;; [:input {:type "checkbox"
;; :id (str "image-" id)
;; :on-change handle-change
;; :value (:selected @state)}]
;; [:label {:for (str "image-" id)}]]
;; [:div.library-card-image
;; [:img {:src thumb-uri}]]
;; [:div.library-card-footer
;; [:div.library-card-footer-name name]
;; [:div.library-card-footer-timestamp time]
;; [:div.library-card-footer-menu
;; { :on-click #(swap! state update :is-open not) }
;; i/actions]
;; [:& context-menu
;; {:show (:is-open @state)
;; :on-close #(swap! state update :is-open not)
;; :options [[(t locale "ds.button.delete")
;; (fn []
;; (modal/show!
;; confirm-dialog
;; {:on-accept #(do
;; (st/emit! (dlib/delete-item :images library-id id))
;; (on-delete id))
;; :message "Are you sure you want to delete this image?"
;; :accept-text "Delete"}))]]}]]]))
;;
;; (mf/defc library-color-card
;; [{:keys [item on-select on-unselect on-delete]}]
;; (let [{:keys [id content library-id modified-at]} item
;; locale (i18n/use-locale)
;; state (mf/use-state {:is-open false :selected false})
;; handle-change (fn []
;; (swap! state update :selected not)
;; (if (:selected @state)
;; (when on-unselect (on-unselect id))
;; (when on-select (on-select id))))]
;; (when content
;; [:div.library-card.library-color
;; [:div.input-checkbox.check-primary
;; [:input {:type "checkbox"
;; :id (str "color-" id)
;; :on-change handle-change
;; :value (:selected @state)}]
;; [:label {:for (str "color-" id)}]]
;; [:div.library-card-image
;; { :style { :background-color content }}]
;; [:div.library-card-footer
;; [:div.library-card-footer-name content ]
;; [:div.library-card-footer-color
;; [:span.library-card-footer-color-label "RGB"]
;; [:span.library-card-footer-color-rgb (str/join " " (uc/hex->rgb content))]]
;; [:div.library-card-footer-menu
;; { :on-click #(swap! state update :is-open not) }
;; i/actions]
;; [:& context-menu
;; {:show (:is-open @state)
;; :on-close #(swap! state update :is-open not)
;; :options [[(t locale "ds.button.delete")
;; (fn []
;; (modal/show!
;; confirm-dialog
;; {:on-accept #(do
;; (st/emit! (dlib/delete-item :palettes library-id id))
;; (on-delete id))
;; :message "Are you sure you want to delete this color?"
;; :accept-text "Delete"}))]]}]]])))
;;
;; (defn- make-libraries-ref
;; [section team-id]
;; #(-> (l/in [:library section team-id])
;; (l/derived st/state =)))
;;
;; (defn- make-library-items-ref
;; [section library-id]
;; #(-> (l/in [:library-items section library-id])
;; (l/derived st/state =)))
;;
;; (def last-deleted-library-ref
;; (-> (l/in [:library :last-deleted-library])
;; (l/derived st/state =)))
;;
;; (mf/defc library-page
;; [{:keys [team-id library-id section]}]
;; (let [state (mf/use-state {:selected #{}})
;; libs-ref (mf/use-memo
;; (mf/deps section team-id)
;; (make-libraries-ref section team-id))
;;
;; libraries (mf/deref libs-ref)
;; items-ref (mf/use-memo
;; (mf/deps section library-id)
;; (make-library-items-ref section library-id))
;;
;; items (mf/deref items-ref)
;;
;; last-deleted-library (mf/deref last-deleted-library-ref)
;; selected-library (first (filter #(= (:id %) library-id) libraries))
;; ]
;;
;; (mf/use-effect
;; (mf/deps libraries)
;; #(if (and (nil? library-id) (> (count libraries) 0))
;; (let [path (keyword (str "dashboard-library-" (name section)))]
;; (st/emit! (rt/nav path {:team-id team-id :library-id (:id (first libraries))})))))
;;
;; (mf/use-effect
;; (mf/deps libraries)
;; #(if (and library-id (not (some (fn [{id :id}] (= library-id id)) libraries)))
;; (let [path (keyword (str "dashboard-library-" (name section) "-index"))]
;; (st/emit! (rt/nav path {:team-id team-id})))))
;;
;; (mf/use-effect
;; (mf/deps section team-id)
;; #(st/emit! (dlib/retrieve-libraries section team-id)))
;;
;; (mf/use-effect
;; (mf/deps library-id last-deleted-library)
;; #(when (and library-id (not= last-deleted-library library-id))
;; (st/emit! (dlib/retrieve-library-data section library-id))))
;;
;; [:div.library-page
;; [:& library-header {:section section :team-id team-id}]
;; [:& library-sidebar {:items libraries :team-id team-id :library-id library-id :section section}]
;;
;; (if library-id
;; [:section.library-content
;; [:& library-top-menu
;; {:selected selected-library
;; :section section
;; :library-id library-id
;; :team-id team-id
;; :on-delete-selected
;; (when-not (empty? (:selected @state))
;; (fn []
;; (modal/show!
;; confirm-dialog
;; {:on-accept #(do (st/emit! (dlib/batch-delete-item section library-id (:selected @state)))
;; (swap! state assoc :selected #{}))
;; :message (str "Are you sure you want to delete " (-> @state :selected count) " items?")
;; :accept-text "Delete"})))}]
;; [:*
;; (if (> (count items) 0)
;; [:div.library-page-cards-container
;; (for [item items]
;; (let [item (assoc item :key (:id item))
;; props {:item item
;; :key (:id item)
;; :on-select #(swap! state update :selected conj %)
;; :on-unselect #(swap! state update :selected disj %)
;; :on-delete #(swap! state update :selected disj %)}]
;; (case section
;; :icons [:& library-icon-card props]
;; :images [:& library-image-card props]
;; :palettes [:& library-color-card props])))]
;; [:div.library-content-empty
;; [:p.library-content-empty-text "You still have no elements in this library"]])]]
;;
;; [:div.library-content-empty
;; [:p.library-content-empty-text "You still have no image libraries."]])]))

9
frontend/src/uxbox/main/ui/shapes/image.cljs
View file

@ -20,10 +20,11 @@
(let [shape (unchecked-get props "shape")
{:keys [id x y width height rotation metadata]} shape
transform (geom/transform-matrix shape)
uri (if (or (> (:thumb-width metadata) width)
(> (:thumb-height metadata) height))
(:thumb-uri metadata)
(:uri metadata))
uri (:uri metadata)
;; uri (if (or (> (:thumb-width metadata) width)
;; (> (:thumb-height metadata) height))
;; (:thumb-uri metadata)
;; (:uri metadata))
props (-> (attrs/extract-style-attrs shape)
(obj/merge!

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

@ -36,16 +36,16 @@
(let [shape {:name name
:metadata {:width (:width image)
:height (:height image)
:uri (:uri image)
:thumb-width (:thumb-width image)
:thumb-height (:thumb-height image)
:thumb-uri (:thumb-uri image)}}
:uri (:uri image)}}
;; :thumb-width (:thumb-width image)
;; :thumb-height (:thumb-height image)
;; :thumb-uri (:thumb-uri image)}}
aspect-ratio (/ (:width image) (:height image))]
(st/emit! (dw/create-and-add-shape :image shape aspect-ratio))))
on-files-selected
(fn [files]
(run! #(st/emit! (dw/upload-image % on-uploaded)) files))]
(run! #(st/emit! (dw/upload-media-object % on-uploaded)) files))]
[:aside.left-toolbar
[:div.left-toolbar-inside

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

@ -18,7 +18,7 @@
[uxbox.common.geom.point :as gpt]
[uxbox.main.ui.icons :as i]
[uxbox.main.data.workspace :as dw]
[uxbox.main.data.images :as di]
[uxbox.main.data.media :as di]
[uxbox.main.data.colors :as dcol]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
@ -72,11 +72,11 @@
[:a.close {:href "#" :on-click cancel} i/close]])))
(mf/defc graphics-box
[{:keys [library-id images] :as props}]
[{:keys [library-id media-objects] :as props}]
(let [state (mf/use-state {:menu-open false
:top nil
:left nil
:image-id nil})
:object-id nil})
file-input (mf/use-ref nil)
@ -84,14 +84,14 @@
#(dom/click (mf/ref-val file-input))
delete-graphic
#(st/emit! (dw/delete-file-image library-id (:image-id @state)))
#(st/emit! (dw/delete-media-object (:object-id @state)))
on-files-selected
(fn [files]
(st/emit! (di/create-images library-id files)))
(st/emit! (di/create-media-objects library-id files)))
on-context-menu
(fn [image-id]
(fn [object-id]
(fn [event]
(let [pos (dom/get-client-position event)
top (:y pos)
@ -100,7 +100,7 @@
(swap! state assoc :menu-open true
:top top
:left left
:image-id image-id))))
:object-id object-id))))
on-drag-start
(fn [uri]
@ -111,7 +111,7 @@
[:div.asset-group
[:div.group-title
(tr "workspace.assets.graphics")
[:span (str "\u00A0(") (count images) ")"] ;; Unicode 00A0 is non-breaking space
[:span (str "\u00A0(") (count media-objects) ")"] ;; Unicode 00A0 is non-breaking space
[:div.group-button {:on-click add-graphic}
i/plus
[:& file-uploader {:accept "image/jpeg,image/png,image/webp,image/svg+xml"
@ -119,14 +119,14 @@
:input-ref file-input
:on-selected on-files-selected}]]]
[:div.group-grid
(for [image (sort-by :name images)]
[:div.grid-cell {:key (:id image)
(for [object (sort-by :name media-objects)]
[:div.grid-cell {:key (:id object)
:draggable true
:on-context-menu (on-context-menu (:id image))
:on-drag-start (on-drag-start (:uri image))}
[:img {:src (:thumb-uri image)
:on-context-menu (on-context-menu (:id object))
:on-drag-start (on-drag-start (:uri object))}
[:img {:src (:thumb-uri object)
:draggable false}] ;; Also need to add css pointer-events: none
[:div.cell-name (:name image)]])
[:div.cell-name (:name object)]])
[:& context-menu
{:selectable false
:show (:menu-open @state)
@ -256,7 +256,7 @@
(mf/defc library-toolbox
[{:keys [library-id
shared?
images
media-objects
colors
initial-open?
search-term
@ -274,12 +274,12 @@
[:span.tool-badge (tr "workspace.assets.shared")])]
(when @open?
(let [show-graphics (and (or (= box-filter :all) (= box-filter :graphics))
(or (> (count images) 0) (str/empty? search-term)))
(or (> (count media-objects) 0) (str/empty? search-term)))
show-colors (and (or (= box-filter :all) (= box-filter :colors))
(or (> (count colors) 0) (str/empty? search-term)))]
[:div.tool-window-content
(when show-graphics
[:& graphics-box {:library-id library-id :images images}])
[:& graphics-box {:library-id library-id :media-objects media-objects}])
(when show-colors
[:& colors-box {:library-id library-id :colors colors}])
(when (and (not show-graphics) (not show-colors))
@ -291,14 +291,14 @@
(let [team-id (-> refs/workspace-project mf/deref :team-id)
file (mf/deref refs/workspace-file)
file-id (:id file)
file-images (mf/deref refs/workspace-images)
file-media (mf/deref refs/workspace-media)
file-colors (mf/deref refs/workspace-colors)
state (mf/use-state {:search-term ""
:box-filter :all})
filtered-images (filter #(matches-search (:name %) (:search-term @state))
(vals file-images))
filtered-media-objects (filter #(matches-search (:name %) (:search-term @state))
(vals file-media))
filtered-colors (filter #(or (matches-search (:name %) (:search-term @state))
(matches-search (:content %) (:search-term @state)))
@ -321,7 +321,7 @@
(mf/use-effect
(mf/deps file-id)
#(when file-id
(st/emit! (dw/fetch-images file-id))
(st/emit! (dw/fetch-media-objects file-id))
(st/emit! (dw/fetch-colors file-id))))
[:div.assets-bar
@ -352,7 +352,7 @@
[:& library-toolbox {:library-id file-id
:shared? (:is-shared file)
:images filtered-images
:media-objects filtered-media-objects
:colors filtered-colors
:initial-open? true
:search-term (:search-term @state)

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

@ -7,181 +7,181 @@
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui.workspace.sidebar.libraries
(:require
[okulary.core :as l]
[cuerdas.core :as str]
[rumext.alpha :as mf]
[uxbox.common.data :as d]
[uxbox.common.pages :as cp]
[uxbox.common.geom.shapes :as geom]
[uxbox.common.geom.point :as gpt]
[uxbox.main.ui.icons :as i]
[uxbox.main.data.workspace :as dw]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.shapes.icon :as icon]
[uxbox.util.dom :as dom]
[uxbox.util.dom.dnd :as dnd]
[uxbox.util.timers :as timers]
[uxbox.common.uuid :as uuid]
[uxbox.util.i18n :as i18n :refer [tr]]
[uxbox.util.data :refer [classnames]]
[uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]
[uxbox.main.data.library :as dlib]
[uxbox.main.ui.components.context-menu :refer [context-menu]]))
;; --- Refs
(defn libraries-ref [section]
(-> (l/in [:library section])
(l/derived st/state)))
(defn selected-items-ref [section library-id]
(-> (l/in [:library-items section library-id])
(l/derived st/state)))
(defn selected-library-ref [section]
(-> (l/in [:library-selected section])
(l/derived st/state)))
(defn selected-filter-ref [section]
(-> (l/in [:library-filter section])
(l/derived st/state)))
(defmulti shape-from-item (fn [type _] type))
(defmethod shape-from-item :icons [_ item]
(-> (cp/make-minimal-shape :icon)
(merge item)
(geom/resize (-> item :metadata :width) (-> item :metadata :height))
(geom/absolute-move (gpt/point 0 0))))
(defmethod shape-from-item :images [_ item]
(let [metadata (select-keys item [:width :height :thumb-width
:thumb-height :thumb-uri :uri])]
(-> (cp/make-minimal-shape :image)
(merge item)
(assoc :metadata metadata)
(geom/resize (-> item :width) (-> item :height))
(geom/absolute-move (gpt/point 0 0)))))
;; --- Components
(mf/defc library-tab [{:keys [libraries section]}]
(when (and libraries (-> libraries count (> 0)))
(let [state (mf/use-state {:drag-style false})
first-id (-> libraries first :id)
current-selection (or (mf/deref (selected-library-ref section)) first-id)]
;; Check if the current selection is in the list of libraries
(mf/use-effect
(mf/deps libraries)
#(when (not (some (fn [it] (= current-selection (-> it :id))) libraries))
(st/emit! (dlib/select-library section first-id))))
;; Retrieve the library data given the current selected library
(mf/use-effect
(mf/deps current-selection)
#(st/emit! (dlib/retrieve-library-data section current-selection)))
[:div.library-tab
{:class (classnames :icons-tab (= section :icons)
:images-tab (= section :images))}
[:select.input-select.library-tab-libraries
{:value current-selection
:on-change #(st/emit! (dlib/select-library section (-> % dom/get-target dom/get-value uuid)))}
(for [library libraries]
[:option.library-tab-libraries-item
{:key (:id library)
:value (:id library)}
(:name library)])]
[:div.library-tab-content
(let [items (mf/deref (selected-items-ref section current-selection))]
(for [item items]
[:div.library-tab-element
{:draggable true
:class (classnames :is-dragging (:drag-style @state))
:key (str (:id item))
:on-drag-start (fn [event]
(swap! state assoc :drag-style true)
(dnd/set-data! event "uxbox/shape" (shape-from-item section item))
(dnd/set-allowed-effect! event "move")
;; This state is so we can give custom css to the dragging
(timers/schedule #(swap! state assoc :drag-style false)))}
(if (= section :icons)
[:svg {:view-box (->> item :metadata :view-box (str/join " "))
:width (-> item :metadata :width)
:height (-> item :metadata :height)
:dangerouslySetInnerHTML {:__html (:content item)}}]
[:img {:draggable false
:src (:thumb-uri item)}])
[:span.library-tab-element-name (:name item)]]))]])))
(mf/defc libraries-toolbox
[{:keys [key]}]
(let [state (mf/use-state {:menu-open false})
selected-filter (fn [section] (or (mf/deref (selected-filter-ref section)) :all))
team-id (-> refs/workspace-project mf/deref :team-id)
filter-to-str {:all (tr "workspace.library.all")
:own (tr "workspace.library.own")
:store (tr "workspace.library.store")}
select-option
(fn [option]
(st/emit!
(dlib/change-library-filter :icons option)
(dlib/change-library-filter :images option)))
filter-libraries
(fn [section libraries]
(case (selected-filter section)
:all (-> libraries vals flatten)
:own (libraries team-id)
:store (libraries uuid/zero)))
get-libraries
(fn [section] (->> (libraries-ref section)
mf/deref
(filter-libraries section)))]
(mf/use-effect
(mf/deps team-id)
#(when team-id
(st/emit! (dlib/retrieve-libraries :icons)
(dlib/retrieve-libraries :images)
(dlib/retrieve-libraries :icons team-id)
(dlib/retrieve-libraries :images team-id))))
[:div#libraries.tool-window
[:div.libraries-window-bar
[:div.libraries-window-bar-title (tr "workspace.library.libraries")]
[:div.libraries-window-bar-options
{:on-click #(swap! state assoc :menu-open true)}
(filter-to-str (selected-filter :icons))
[:button
{
:type "button"}
i/arrow-slide
[:& context-menu
{:selectable true
:show (:menu-open @state)
:selected (filter-to-str (selected-filter :icons))
:on-close #(swap! state assoc :menu-open false)
:options (mapv (fn [[key val]] [val #(select-option key)]) filter-to-str)}]]]]
[:div.tool-window-content
[:& tab-container {}
[:& tab-element
{:id :icons :title (tr "workspace.library.icons")}
[:& library-tab {:section :icons
:libraries (get-libraries :icons) }]]
[:& tab-element
{:id :images :title (tr "workspace.library.images")}
[:& library-tab {:section :images
:libraries (get-libraries :images)}]]]]]))
;; (ns uxbox.main.ui.workspace.sidebar.libraries
;; (:require
;; [okulary.core :as l]
;; [cuerdas.core :as str]
;; [rumext.alpha :as mf]
;; [uxbox.common.data :as d]
;; [uxbox.common.pages :as cp]
;; [uxbox.common.geom.shapes :as geom]
;; [uxbox.common.geom.point :as gpt]
;; [uxbox.main.ui.icons :as i]
;; [uxbox.main.data.workspace :as dw]
;; [uxbox.main.refs :as refs]
;; [uxbox.main.store :as st]
;; [uxbox.main.ui.keyboard :as kbd]
;; [uxbox.main.ui.shapes.icon :as icon]
;; [uxbox.util.dom :as dom]
;; [uxbox.util.dom.dnd :as dnd]
;; [uxbox.util.timers :as timers]
;; [uxbox.common.uuid :as uuid]
;; [uxbox.util.i18n :as i18n :refer [tr]]
;; [uxbox.util.data :refer [classnames]]
;; [uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]
;; [uxbox.main.data.library :as dlib]
;; [uxbox.main.ui.components.context-menu :refer [context-menu]]))
;;
;; ;; --- Refs
;;
;; (defn libraries-ref [section]
;; (-> (l/in [:library section])
;; (l/derived st/state)))
;;
;; (defn selected-items-ref [section library-id]
;; (-> (l/in [:library-items section library-id])
;; (l/derived st/state)))
;;
;; (defn selected-library-ref [section]
;; (-> (l/in [:library-selected section])
;; (l/derived st/state)))
;;
;; (defn selected-filter-ref [section]
;; (-> (l/in [:library-filter section])
;; (l/derived st/state)))
;;
;; (defmulti shape-from-item (fn [type _] type))
;;
;; (defmethod shape-from-item :icons [_ item]
;; (-> (cp/make-minimal-shape :icon)
;; (merge item)
;; (geom/resize (-> item :metadata :width) (-> item :metadata :height))
;; (geom/absolute-move (gpt/point 0 0))))
;;
;; (defmethod shape-from-item :images [_ item]
;; (let [metadata (select-keys item [:width :height :thumb-width
;; :thumb-height :thumb-uri :uri])]
;; (-> (cp/make-minimal-shape :image)
;; (merge item)
;; (assoc :metadata metadata)
;; (geom/resize (-> item :width) (-> item :height))
;; (geom/absolute-move (gpt/point 0 0)))))
;;
;; ;; --- Components
;;
;; (mf/defc library-tab [{:keys [libraries section]}]
;; (when (and libraries (-> libraries count (> 0)))
;; (let [state (mf/use-state {:drag-style false})
;; first-id (-> libraries first :id)
;; current-selection (or (mf/deref (selected-library-ref section)) first-id)]
;;
;; ;; Check if the current selection is in the list of libraries
;; (mf/use-effect
;; (mf/deps libraries)
;; #(when (not (some (fn [it] (= current-selection (-> it :id))) libraries))
;; (st/emit! (dlib/select-library section first-id))))
;;
;; ;; Retrieve the library data given the current selected library
;; (mf/use-effect
;; (mf/deps current-selection)
;; #(st/emit! (dlib/retrieve-library-data section current-selection)))
;;
;; [:div.library-tab
;; {:class (classnames :icons-tab (= section :icons)
;; :images-tab (= section :images))}
;; [:select.input-select.library-tab-libraries
;; {:value current-selection
;; :on-change #(st/emit! (dlib/select-library section (-> % dom/get-target dom/get-value uuid)))}
;; (for [library libraries]
;; [:option.library-tab-libraries-item
;; {:key (:id library)
;; :value (:id library)}
;; (:name library)])]
;; [:div.library-tab-content
;; (let [items (mf/deref (selected-items-ref section current-selection))]
;; (for [item items]
;; [:div.library-tab-element
;; {:draggable true
;; :class (classnames :is-dragging (:drag-style @state))
;; :key (str (:id item))
;; :on-drag-start (fn [event]
;; (swap! state assoc :drag-style true)
;; (dnd/set-data! event "uxbox/shape" (shape-from-item section item))
;; (dnd/set-allowed-effect! event "move")
;; ;; This state is so we can give custom css to the dragging
;; (timers/schedule #(swap! state assoc :drag-style false)))}
;; (if (= section :icons)
;; [:svg {:view-box (->> item :metadata :view-box (str/join " "))
;; :width (-> item :metadata :width)
;; :height (-> item :metadata :height)
;; :dangerouslySetInnerHTML {:__html (:content item)}}]
;; [:img {:draggable false
;; :src (:thumb-uri item)}])
;; [:span.library-tab-element-name (:name item)]]))]])))
;;
;; (mf/defc libraries-toolbox
;; [{:keys [key]}]
;; (let [state (mf/use-state {:menu-open false})
;; selected-filter (fn [section] (or (mf/deref (selected-filter-ref section)) :all))
;; team-id (-> refs/workspace-project mf/deref :team-id)
;;
;; filter-to-str {:all (tr "workspace.library.all")
;; :own (tr "workspace.library.own")
;; :store (tr "workspace.library.store")}
;;
;; select-option
;; (fn [option]
;; (st/emit!
;; (dlib/change-library-filter :icons option)
;; (dlib/change-library-filter :images option)))
;;
;; filter-libraries
;; (fn [section libraries]
;; (case (selected-filter section)
;; :all (-> libraries vals flatten)
;; :own (libraries team-id)
;; :store (libraries uuid/zero)))
;;
;; get-libraries
;; (fn [section] (->> (libraries-ref section)
;; mf/deref
;; (filter-libraries section)))]
;;
;; (mf/use-effect
;; (mf/deps team-id)
;; #(when team-id
;; (st/emit! (dlib/retrieve-libraries :icons)
;; (dlib/retrieve-libraries :images)
;; (dlib/retrieve-libraries :icons team-id)
;; (dlib/retrieve-libraries :images team-id))))
;;
;; [:div#libraries.tool-window
;; [:div.libraries-window-bar
;; [:div.libraries-window-bar-title (tr "workspace.library.libraries")]
;; [:div.libraries-window-bar-options
;; {:on-click #(swap! state assoc :menu-open true)}
;; (filter-to-str (selected-filter :icons))
;; [:button
;; {
;; :type "button"}
;; i/arrow-slide
;; [:& context-menu
;; {:selectable true
;; :show (:menu-open @state)
;; :selected (filter-to-str (selected-filter :icons))
;; :on-close #(swap! state assoc :menu-open false)
;; :options (mapv (fn [[key val]] [val #(select-option key)]) filter-to-str)}]]]]
;;
;; [:div.tool-window-content
;; [:& tab-container {}
;; [:& tab-element
;; {:id :icons :title (tr "workspace.library.icons")}
;; [:& library-tab {:section :icons
;; :libraries (get-libraries :icons) }]]
;;
;; [:& tab-element
;; {:id :images :title (tr "workspace.library.images")}
;; [:& library-tab {:section :images
;; :libraries (get-libraries :images)}]]]]]))
;;
;;

12
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -353,10 +353,10 @@
(let [shape {:name name
:metadata {:width (:width image)
:height (:height image)
:uri (:uri image)
:thumb-width (:thumb-width image)
:thumb-height (:thumb-height image)
:thumb-uri (:thumb-uri image)}}
:uri (:uri image)}}
;; :thumb-width (:thumb-width image)
;; :thumb-height (:thumb-height image)
;; :thumb-uri (:thumb-uri image)}}
aspect-ratio (/ (:width image) (:height image))]
(st/emit! (dw/create-and-add-shape :image shape aspect-ratio))))
@ -381,11 +381,11 @@
urls (filter #(and (not (str/blank? %))
(not (str/starts-with? % "#")))
lines)]
(run! #(st/emit! (dw/add-image-from-url % on-uploaded)) urls))
(run! #(st/emit! (dw/add-media-object-from-url % on-uploaded)) urls))
:else
(let [files (dnd/get-files event)]
(run! #(st/emit! (dw/upload-image % on-uploaded)) files))))
(run! #(st/emit! (dw/upload-media-object % on-uploaded)) files))))
on-resize
(fn [event]