From bbf3bc79099079b908e628c6e2d3b002c59d8105 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Thu, 28 May 2020 13:57:25 +0200 Subject: [PATCH] :sparkles: Remove add image modal, upload image directly --- .../main/ui/components/file_uploader.cljs | 39 ++++ .../src/uxbox/main/ui/dashboard/library.cljs | 38 ++-- .../src/uxbox/main/ui/workspace/header.cljs | 2 - .../src/uxbox/main/ui/workspace/images.cljs | 200 ------------------ .../uxbox/main/ui/workspace/left_toolbar.cljs | 33 ++- 5 files changed, 81 insertions(+), 231 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/components/file_uploader.cljs delete mode 100644 frontend/src/uxbox/main/ui/workspace/images.cljs diff --git a/frontend/src/uxbox/main/ui/components/file_uploader.cljs b/frontend/src/uxbox/main/ui/components/file_uploader.cljs new file mode 100644 index 0000000000..cd51eb2a62 --- /dev/null +++ b/frontend/src/uxbox/main/ui/components/file_uploader.cljs @@ -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}]])) + diff --git a/frontend/src/uxbox/main/ui/dashboard/library.cljs b/frontend/src/uxbox/main/ui/dashboard/library.cljs index af08c9bdb7..b581435e10 100644 --- a/frontend/src/uxbox/main/ui/dashboard/library.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/library.cljs @@ -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 - :images "image" - :icons "image/svg+xml" - "") - :style {:display "none"}}]])]])) + [:& file-uploader {:accept (case section + :images "image" + :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]}] diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index c2fad9b51e..68741a4b4d 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -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]] diff --git a/frontend/src/uxbox/main/ui/workspace/images.cljs b/frontend/src/uxbox/main/ui/workspace/images.cljs deleted file mode 100644 index 832a4affe9..0000000000 --- a/frontend/src/uxbox/main/ui/workspace/images.cljs +++ /dev/null @@ -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]])) diff --git a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs index 8ef07ed02d..1f47e42d7e 100644 --- a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs @@ -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")