mirror of
https://github.com/penpot/penpot.git
synced 2025-07-24 08:27:19 +02:00
✨ Remove add image modal, upload image directly
This commit is contained in:
Andrés Moya
Alonso Torres
parent
bee4e5177c
commit
bbf3bc7909
5 changed files with 81 additions and 231 deletions
39
frontend/src/uxbox/main/ui/components/file_uploader.cljs
Normal file
39
frontend/src/uxbox/main/ui/components/file_uploader.cljs
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.components.file-uploader
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
(mf/defc file-uploader
|
||||
[{:keys [accept multi label-text label-class input-id input-ref on-selected] :as props}]
|
||||
(let [opt-pick-one #(if multi % (first %))
|
||||
|
||||
on-files-selected (fn [event] (st/emit!
|
||||
(-> (dom/get-target event)
|
||||
(dom/get-files)
|
||||
(array-seq)
|
||||
(opt-pick-one)
|
||||
(on-selected))))]
|
||||
[:*
|
||||
(when label-text
|
||||
[:label {:for input-id :class-name label-class} label-text])
|
||||
|
||||
[:input
|
||||
{:style {:display "none"}
|
||||
:id input-id
|
||||
:multiple multi
|
||||
:accept accept
|
||||
:type "file"
|
||||
:ref input-ref
|
||||
:on-change on-files-selected}]]))
|
||||
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
[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]]
|
||||
|
|
@ -62,19 +63,11 @@
|
|||
|
||||
(defmulti create-item (fn [x _ _] x))
|
||||
|
||||
(defmethod create-item :icons [_ library-id data]
|
||||
(let [files (->> data
|
||||
(dom/get-target)
|
||||
(dom/get-files)
|
||||
(array-seq))]
|
||||
(st/emit! (dico/create-icons library-id files))))
|
||||
(defmethod create-item :icons [_ library-id files]
|
||||
(st/emit! (dico/create-icons library-id files)))
|
||||
|
||||
(defmethod create-item :images [_ library-id data]
|
||||
(let [files (->> data
|
||||
(dom/get-target)
|
||||
(dom/get-files)
|
||||
(array-seq))]
|
||||
(st/emit! (dimg/create-images 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]
|
||||
|
|
@ -171,18 +164,15 @@
|
|||
{:on-click #(create-item section library-id)}
|
||||
(t locale (str "dashboard.library.add-item." (name section)))]
|
||||
|
||||
[:*
|
||||
[:label {:for "file-upload" :class-name "btn-secondary btn-small"}
|
||||
(t locale (str "dashboard.library.add-item." (name section)))]
|
||||
[:input {:on-change #(create-item section library-id %)
|
||||
:id "file-upload"
|
||||
:type "file"
|
||||
:multiple true
|
||||
:accept (case section
|
||||
[:& file-uploader {:accept (case section
|
||||
:images "image"
|
||||
:icons "image/svg+xml"
|
||||
"")
|
||||
:style {:display "none"}}]])]]))
|
||||
: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]}]
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.images :refer [import-image-modal]]
|
||||
[uxbox.main.ui.components.dropdown :refer [dropdown]]
|
||||
[uxbox.main.ui.workspace.presence :as presence]
|
||||
[uxbox.util.i18n :as i18n :refer [t]]
|
||||
|
|
|
|||
|
|
@ -1,200 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.images
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
[uxbox.common.uuid :as uuid]))
|
||||
|
||||
;; --- Refs
|
||||
;; TODO: pending refactor
|
||||
|
||||
(def ^:private collections-iref
|
||||
(-> (l/key :images-collections)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def ^:private images-iref
|
||||
(-> (l/key :images)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def ^:private workspace-images-iref
|
||||
(-> (comp (l/key :workspace-images)
|
||||
(l/lens vals))
|
||||
(l/derive st/state)))
|
||||
|
||||
(def ^:private uploading-iref
|
||||
(-> (l/in [:workspace-local :uploading])
|
||||
(l/derive st/state)))
|
||||
|
||||
;; --- Import Image Modal
|
||||
|
||||
(declare import-image-from-coll-modal)
|
||||
|
||||
(mf/defc import-image-modal
|
||||
[props]
|
||||
(let [input (mf/use-ref nil)
|
||||
uploading? (mf/deref uploading-iref)
|
||||
|
||||
on-upload-click #(dom/click (mf/ref-val input))
|
||||
|
||||
on-uploaded
|
||||
(fn [{:keys [id name] :as image}]
|
||||
(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)}}]
|
||||
(st/emit! (dw/select-for-drawing :image shape))
|
||||
(modal/hide!)))
|
||||
|
||||
on-files-selected
|
||||
(fn [event]
|
||||
(st/emit! (-> (dom/get-target event)
|
||||
(dom/get-files)
|
||||
(array-seq)
|
||||
(first)
|
||||
(dw/upload-image on-uploaded))))
|
||||
|
||||
on-select-from-library
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(modal/show! import-image-from-coll-modal {}))
|
||||
|
||||
on-close
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(modal/hide!))]
|
||||
[:div.lightbox-body
|
||||
[:h3 (tr "image.new")]
|
||||
[:div.row-flex
|
||||
|
||||
;; Select from collections
|
||||
[:div.lightbox-big-btn {:on-click on-select-from-library}
|
||||
[:span.big-svg i/image]
|
||||
[:span.text (tr "image.select")]]
|
||||
|
||||
;; Select from workspace
|
||||
[:div.lightbox-big-btn {:on-click on-select-from-library}
|
||||
[:span.big-svg i/image]
|
||||
[:span.text (tr "image.select")]]
|
||||
|
||||
;; Direct image upload
|
||||
[: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 (tr "image.upload")]
|
||||
[:input.upload-image-input
|
||||
{:style {:display "none"}
|
||||
:multiple false
|
||||
:accept "image/jpeg,image/png,image/webp"
|
||||
:type "file"
|
||||
:ref input
|
||||
:on-change on-files-selected}]]]
|
||||
[:a.close {:on-click on-close} i/close]]))
|
||||
|
||||
;; --- Import Image from Collection Modal
|
||||
|
||||
(mf/defc image-item
|
||||
[{:keys [image] :as props}]
|
||||
(letfn [(on-click [event]
|
||||
;; TODO: deduplicate this code...
|
||||
(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)}}]
|
||||
(st/emit! (dw/select-for-drawing :image shape))
|
||||
(modal/hide!)))]
|
||||
[:div.library-item {:on-click on-click}
|
||||
[:div.library-item-th
|
||||
{:style {:background-image (str "url('" (:thumb-uri image) "')")}}]
|
||||
[:span (:name image)]]))
|
||||
|
||||
(mf/defc import-image-from-coll-modal
|
||||
[props]
|
||||
(let [locale (i18n/use-locale)
|
||||
local (mf/use-state {:collection-id nil :tab :file})
|
||||
|
||||
collections (mf/deref collections-iref)
|
||||
collections (->> (vals collections)
|
||||
(sort-by :name))
|
||||
|
||||
select-tab #(swap! local assoc :tab %)
|
||||
|
||||
collection-id (or (:collection-id @local)
|
||||
(:id (first collections)))
|
||||
|
||||
tab (:tab @local)
|
||||
|
||||
|
||||
images (mf/deref images-iref)
|
||||
images (->> (vals images)
|
||||
(filter #(= collection-id (:collection-id %))))
|
||||
|
||||
workspace-images (mf/deref workspace-images-iref)
|
||||
|
||||
on-close #(do (dom/prevent-default %)
|
||||
(modal/hide!))
|
||||
|
||||
on-change #(->> (dom/get-target %)
|
||||
(dom/get-value)
|
||||
(d/read-string)
|
||||
(swap! local assoc :collection-id))]
|
||||
|
||||
#_(mf/use-effect #(st/emit! udi/fetch-collections))
|
||||
#_(mf/use-effect
|
||||
{:deps (mf/deps collection-id)
|
||||
:fn #(when collection-id
|
||||
(st/emit! (udi/fetch-images collection-id)))})
|
||||
|
||||
[:div.lightbox-body.big-lightbox
|
||||
[:h3 (tr "image.import-library")]
|
||||
[:div.import-img-library
|
||||
[:div.library-actions
|
||||
|
||||
;; Tabs
|
||||
[:ul.toggle-library
|
||||
[:li.your-images {:class (when (= tab :file) "current")
|
||||
:on-click #(select-tab :file)}
|
||||
(t locale "ds.your-images-title")]
|
||||
[:li.standard {:class (when (not= tab :file) "current")
|
||||
:on-click #(select-tab :collection)}
|
||||
(t locale "ds.store-images-title")]]
|
||||
|
||||
;; Collections dropdown
|
||||
(when (= tab :collection)
|
||||
[:select.input-select {:on-change on-change}
|
||||
(for [coll collections]
|
||||
(let [id (:id coll)
|
||||
name (:name coll)]
|
||||
[:option {:key (str id) :value (pr-str id)} name]))])]
|
||||
|
||||
(if (= tab :collection)
|
||||
[:div.library-content
|
||||
(for [image images]
|
||||
[:& image-item {:image image :key (:id image)}])]
|
||||
[:div.library-content
|
||||
(for [image workspace-images]
|
||||
[:& image-item {:image image :key (:id image)}])])]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]]))
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.images :refer [import-image-modal]]
|
||||
[uxbox.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as i18n :refer [t]]
|
||||
[uxbox.main.ui.icons :as i]))
|
||||
|
||||
|
|
@ -23,11 +23,29 @@
|
|||
|
||||
(mf/defc left-toolbar
|
||||
[{:keys [page layout] :as props}]
|
||||
(let [selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
(let [file-input (mf/use-ref nil)
|
||||
selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
select-drawtool #(st/emit! :interrupt
|
||||
(dw/select-for-drawing %))
|
||||
locale (i18n/use-locale)
|
||||
on-image #(modal/show! import-image-modal {})]
|
||||
|
||||
on-image #(dom/click (mf/ref-val file-input))
|
||||
|
||||
on-uploaded
|
||||
(fn [{:keys [id name] :as image}]
|
||||
(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)}}]
|
||||
(st/emit! (dw/select-for-drawing :image shape))))
|
||||
|
||||
on-file-selected
|
||||
(fn [file]
|
||||
(st/emit! (dw/upload-image file on-uploaded)))]
|
||||
|
||||
[:aside.left-toolbar
|
||||
[:div.left-toolbar-inside
|
||||
[:ul.left-toolbar-options
|
||||
|
|
@ -54,7 +72,12 @@
|
|||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.image")
|
||||
:on-click on-image}
|
||||
i/image]
|
||||
[:*
|
||||
i/image
|
||||
[:& file-uploader {:accept "image/jpeg,image/png,image/webp"
|
||||
:multi false
|
||||
:input-ref file-input
|
||||
:on-selected on-file-selected}]]]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.curve")
|
||||
:class (when (= selected-drawtool :curve) "selected")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue