From c2332331cef6056b8de5b10fbfd82a9f71beac98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 9 Mar 2021 09:13:17 +0100 Subject: [PATCH 1/3] :tada: Drag and drop files in the dashboard --- .../styles/main/partials/dashboard-grid.scss | 22 +- .../main/partials/dashboard-sidebar.scss | 4 + .../styles/main/partials/dashboard.scss | 1 + frontend/src/app/main/data/dashboard.cljs | 73 ++++-- frontend/src/app/main/refs.cljs | 10 + frontend/src/app/main/ui/dashboard.cljs | 2 +- .../src/app/main/ui/dashboard/file_menu.cljs | 15 +- frontend/src/app/main/ui/dashboard/grid.cljs | 216 +++++++++++++----- .../src/app/main/ui/dashboard/projects.cljs | 1 + .../src/app/main/ui/dashboard/sidebar.cljs | 62 ++++- frontend/src/app/util/dom.cljs | 7 +- 11 files changed, 332 insertions(+), 81 deletions(-) diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 5c1e98555..ff7a7c277 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -177,13 +177,17 @@ background-color: $color-white; &:hover { - border-color: $color-primary; + border: 2px solid $color-primary; .project-th-actions { opacity: 1; } } + &.selected { + border: 2px solid $color-primary; + } + .project-th-actions { align-items: center; bottom: 2px; @@ -234,7 +238,6 @@ .project-th-actions.force-display { opacity: 1; } - } // IMAGES SECTION @@ -275,6 +278,21 @@ margin-top: 15px; } + .drag-counter { + position: absolute; + top: 5px; + left: 4px; + width: 32px; + height: 32px; + background-color: $color-primary; + border-radius: 50%; + color: $color-black; + font-size: $fs18; + display: flex; + justify-content: center; + align-items: center; + } + } // STYLES FOR LIBRARIES diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss index d2f0e6b1a..5aac64f25 100644 --- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss +++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss @@ -249,6 +249,10 @@ background-color: $color-primary; } } + + &.dragging { + background-color: $color-primary-lighter; + } } } diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index f453cf0a3..2a86079f0 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/frontend/resources/styles/main/partials/dashboard.scss @@ -14,6 +14,7 @@ flex: 1 0 0; margin-right: $medium; overflow-y: auto; + user-select: none; &.search { margin-top: 10px; diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 8483d58d0..0c38bd9b3 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -57,6 +57,10 @@ ::modified-at ::project-id])) +(s/def ::set-of-uuid + (s/every ::us/uuid :kind set?)) + +(declare clear-selected-files) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Fetching @@ -145,8 +149,10 @@ ptk/WatchEvent (watch [_ state stream] - (->> (rp/query :search-files params) - (rx/map #(partial fetched %))))))) + (rx/concat + (->> (rp/query :search-files params) + (rx/map #(partial fetched %))) + (rx/of (clear-selected-files))))))) ;; --- Fetch Files @@ -158,8 +164,10 @@ (ptk/reify ::fetch-files ptk/WatchEvent (watch [_ state stream] - (->> (rp/query :files params) - (rx/map #(partial fetched %))))))) + (rx/concat + (->> (rp/query :files params) + (rx/map #(partial fetched %))) + (rx/of (clear-selected-files))))))) ;; --- Fetch Shared Files @@ -171,8 +179,10 @@ (ptk/reify ::fetch-shared-files ptk/WatchEvent (watch [_ state stream] - (->> (rp/query :shared-files {:team-id team-id}) - (rx/map #(partial fetched %))))))) + (rx/concat + (->> (rp/query :shared-files {:team-id team-id}) + (rx/map #(partial fetched %))) + (rx/of (clear-selected-files))))))) ;; --- Fetch recent files @@ -185,8 +195,10 @@ ptk/WatchEvent (watch [_ state stream] (let [params {:team-id team-id}] - (->> (rp/query :recent-files params) - (rx/map #(recent-files-fetched team-id %))))))) + (rx/concat + (->> (rp/query :recent-files params) + (rx/map #(recent-files-fetched team-id %))) + (rx/of (clear-selected-files))))))) (defn recent-files-fetched [team-id files] @@ -202,6 +214,41 @@ state projects))))) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Data Selection +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn clear-selected-files + [] + (ptk/reify ::clear-file-select + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :selected-files #{} + :selected-project nil)))) + +(defn toggle-file-select + [{:keys [file] :as params}] + (ptk/reify ::toggle-file-select + ptk/UpdateEvent + (update [_ state] + (let [file-id (:id file) + selected-project (get-in state [:dashboard-local + :selected-project])] + (if (or (nil? selected-project) + (= selected-project (:project-id file))) + (update state :dashboard-local + (fn [local] + (-> local + (update :selected-files + #(if (contains? % file-id) + (disj % file-id) + (conj % file-id))) + (assoc :selected-project + (:project-id file))))) + state))))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Modification ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -556,18 +603,18 @@ ;; --- Move File -(defn move-file - [{:keys [id project-id] :as params}] - (us/assert ::us/uuid id) +(defn move-files + [{:keys [ids project-id] :as params}] + (us/assert ::set-of-uuid ids) (us/assert ::us/uuid project-id) - (ptk/reify ::move-file + (ptk/reify ::move-files ptk/WatchEvent (watch [_ state stream] (let [{:keys [on-success on-error] :or {on-success identity on-error identity}} (meta params)] - (->> (rp/mutation! :move-files {:ids #{id} + (->> (rp/mutation! :move-files {:ids ids :project-id project-id}) (rx/tap on-success) (rx/catch on-error)))))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index b2ed9e41f..f1647bc13 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -40,6 +40,16 @@ (def dashboard-local (l/derived :dashboard-local st/state)) +(def dashboard-selected-files + (l/derived (fn [state] + (get-in state [:dashboard-local :selected-files] #{})) + st/state)) + +(def dashboard-selected-project + (l/derived (fn [state] + (get-in state [:dashboard-local :selected-project])) + st/state)) + ;; ---- Workspace refs (def workspace-local diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index ce8a63c2b..028d54454 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -61,7 +61,7 @@ (mf/defc dashboard-content [{:keys [team projects project section search-term profile] :as props}] - [:div.dashboard-content + [:div.dashboard-content {:on-click (st/emitf (dd/clear-selected-files))} (case section :dashboard-projects [:& projects-section {:team team :projects projects}] diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index ac11732fc..e1f187ed4 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -23,11 +23,12 @@ [rumext.alpha :as mf])) (mf/defc file-menu - [{:keys [file show? on-edit on-menu-close top left] :as props}] + [{:keys [file show? on-edit on-menu-close top left navigate?] :as props}] (assert (some? file) "missing `file` prop") (assert (boolean? show?) "missing `show?` prop") (assert (fn? on-edit) "missing `on-edit` prop") (assert (fn? on-menu-close) "missing `on-menu-close` prop") + (assert (boolean? navigate?) "missing `navigate?` prop") (let [top (or top 0) left (or left 0) @@ -81,16 +82,18 @@ (mf/use-callback (mf/deps file) (fn [team-id project-id] - (let [data {:id (:id file) + (let [data {:ids #{(:id file)} :project-id project-id} mdata {:on-success (st/emitf (dm/success (tr "dashboard.success-move-file")) - (rt/nav :dashboard-files - {:team-id team-id - :project-id project-id}))}] + (if navigate? + (rt/nav :dashboard-files + {:team-id team-id + :project-id project-id}) + (dd/fetch-recent-files {:team-id team-id})))}] - (st/emitf (dd/move-file (with-meta data mdata)))))) + (st/emitf (dd/move-files (with-meta data mdata)))))) add-shared (mf/use-callback diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 26b1fd165..8b4b46e52 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -13,14 +13,17 @@ [app.common.uuid :as uuid] [app.config :as cfg] [app.main.data.dashboard :as dd] + [app.main.data.messages :as dm] [app.main.data.modal :as modal] [app.main.fonts :as fonts] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.dashboard.file-menu :refer [file-menu]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.icons :as i] [app.main.worker :as wrk] [app.util.dom :as dom] + [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [t tr]] [app.util.keyboard :as kbd] [app.util.router :as rt] @@ -60,17 +63,30 @@ (mf/defc grid-item {:wrap [mf/memo]} - [{:keys [id file] :as props}] - (let [local (mf/use-state {:menu-open false - :menu-pos nil - :edition false}) - locale (mf/deref i18n/locale) - menu-ref (mf/use-ref) + [{:keys [id file selected-files navigate?] :as props}] + (let [local (mf/use-state {:menu-open false + :menu-pos nil + :edition false}) + locale (mf/deref i18n/locale) + item-ref (mf/use-ref) + menu-ref (mf/use-ref) + selected? (contains? selected-files id) on-menu-close (mf/use-callback #(swap! local assoc :menu-open false)) + on-select + (mf/use-callback + (mf/deps id) + (fn [event] + (dom/prevent-default event) + (dom/stop-propagation event) + (let [shift? (kbd/shift? event)] + (when-not shift? + (st/emit! (dd/clear-selected-files))) + (st/emit! (dd/toggle-file-select {:file file}))))) + on-navigate (mf/use-callback (mf/deps id) @@ -83,6 +99,43 @@ qparams {:page-id (first (get-in file [:data :pages]))}] (st/emit! (rt/nav :workspace pparams qparams))))))) + create-counter + (mf/use-callback + (fn [element file-count] + (let [counter-el (dom/create-element "div")] + (dom/set-property! counter-el "class" "drag-counter") + (dom/set-text! counter-el (str file-count)) + counter-el))) + + on-drag-start + (mf/use-callback + (mf/deps selected-files) + (fn [event] + (let [offset (dom/get-offset-position (.-nativeEvent event)) + + select-current? (not (contains? selected-files (:id file))) + + item-el (mf/ref-val item-ref) + counter-el (create-counter item-el + (if select-current? + 1 + (count selected-files)))] + + (when select-current? + (st/emit! (dd/clear-selected-files)) + (st/emit! (dd/toggle-file-select {:file file}))) + + (dnd/set-data! event "penpot/files" "dummy") + (dnd/set-allowed-effect! event "move") + + ;; set-drag-image requires that the element is rendered and + ;; visible to the user at the moment of creating the ghost + ;; image (to make a snapshot), but you may remove it right + ;; afterwards, in the next render cycle. + (dom/append-child! item-el counter-el) + (dnd/set-drag-image! event item-el (:x offset) (:y offset)) + (ts/raf #(.removeChild item-el counter-el))))) + on-menu-click (mf/use-callback (mf/deps file) @@ -108,7 +161,13 @@ :edition true :menu-open false)))] - [:div.grid-item.project-th {:on-click on-navigate + [:div.grid-item.project-th {:class (dom/classnames + :selected selected?) + :ref item-ref + :draggable true + :on-click on-select + :on-double-click on-navigate + :on-drag-start on-drag-start :on-context-menu on-menu-click} [:div.overlay] [:& grid-item-thumbnail {:file file}] @@ -130,14 +189,18 @@ :show? (:menu-open @local) :left (:x (:menu-pos @local)) :top (:y (:menu-pos @local)) + :navigate? navigate? :on-edit on-edit :on-menu-close on-menu-close}]]]])) (mf/defc empty-placeholder - [] - [:div.grid-empty-placeholder - [:div.icon i/file-html] - [:div.text (tr "dashboard.empty-files")]]) + [{:keys [dragging?] :as props}] + (if-not dragging? + [:div.grid-empty-placeholder + [:div.icon i/file-html] + [:div.text (tr "dashboard.empty-files")]] + [:div.grid-row.no-wrap + [:div.grid-item]])) (mf/defc loading-placeholder [] @@ -147,7 +210,8 @@ (mf/defc grid [{:keys [id opts files] :as props}] - (let [locale (mf/deref i18n/locale)] + (let [locale (mf/deref i18n/locale) + selected-files (mf/deref refs/dashboard-selected-files)] [:section.dashboard-grid (cond (nil? files) @@ -159,73 +223,123 @@ [:& grid-item {:id (:id item) :file item - :key (:id item)}])] + :selected-files selected-files + :key (:id item) + :navigate? true}])] :else [:& empty-placeholder])])) (mf/defc line-grid-row - [{:keys [locale files on-load-more] :as props}] - (let [rowref (mf/use-ref) + [{:keys [locale files team-id selected-files on-load-more dragging?] :as props}] + (let [rowref (mf/use-ref) - width (mf/use-state 900) - limit (mf/use-state 1) + width (mf/use-state nil) - itemsize 290] + itemsize 290 + ratio (if (some? @width) (/ @width itemsize) 0) + nitems (mth/floor ratio) + limit (if (and (some? @width) + (> (* itemsize (count files)) @width) + (< (- ratio nitems) 0.51)) + (dec nitems) ;; Leave space for the "show all" block + nitems) + limit (if dragging? + (dec limit) + limit) + limit (max 1 limit)] - (mf/use-layout-effect - (mf/deps width) - (fn [] - (let [node (mf/ref-val rowref) - obs (new js/ResizeObserver - (fn [entries x] - (ts/raf (fn [] - (let [data (first entries) - rect (.-contentRect ^js data)] - (reset! width (.-width ^js rect))))))) + (mf/use-effect + (fn [] + (let [node (mf/ref-val rowref) + obs (new js/ResizeObserver + (fn [entries x] + (ts/raf #(let [row (first entries) + row-rect (.-contentRect ^js row) + row-width (.-width ^js row-rect)] + (reset! width row-width)))))] - nitems (/ @width itemsize) - num (mth/floor nitems)] - - (.observe ^js obs node) - - (cond - (< (* itemsize (count files)) @width) - (reset! limit num) - - (< nitems (+ num 0.51)) - (reset! limit (dec num)) - - :else - (reset! limit num)) - (fn [] - (.disconnect ^js obs))))) + (.observe ^js obs node) + (fn [] + (.disconnect ^js obs))))) [:div.grid-row.no-wrap {:ref rowref} - (for [item (take @limit files)] + (when dragging? + [:div.grid-item]) + (for [item (take limit files)] [:& grid-item {:id (:id item) :file item - :key (:id item)}]) - (when (> (count files) @limit) + :selected-files selected-files + :key (:id item) + :navigate? false}]) + (when (and (> limit 0) + (> (count files) limit)) [:div.grid-item.placeholder {:on-click on-load-more} [:div.placeholder-icon i/arrow-down] [:div.placeholder-label (t locale "dashboard.show-all-files")]])])) (mf/defc line-grid - [{:keys [project-id opts files on-load-more] :as props}] - (let [locale (mf/deref i18n/locale)] - [:section.dashboard-grid + [{:keys [project-id team-id opts files on-load-more] :as props}] + (let [locale (mf/deref i18n/locale) + dragging? (mf/use-state false) + + selected-files (mf/deref refs/dashboard-selected-files) + selected-project (mf/deref refs/dashboard-selected-project) + + on-drag-enter + (mf/use-callback + (mf/deps selected-project) + (fn [e] + (when (dnd/has-type? e "penpot/files") + (dom/prevent-default e) + (when-not (dnd/from-child? e) + (when (not= selected-project project-id) + (reset! dragging? true)))))) + + on-drag-over + (mf/use-callback + (fn [e] + (when (dnd/has-type? e "penpot/files") + (dom/prevent-default e)))) + + on-drag-leave + (mf/use-callback + (fn [e] + (when-not (dnd/from-child? e) + (reset! dragging? false)))) + + on-drop + (mf/use-callback + (mf/deps files selected-files) + (fn [e] + (reset! dragging? false) + (when (not= selected-project project-id) + (let [data {:ids selected-files + :project-id project-id} + + mdata {:on-success + (st/emitf (dm/success (tr "dashboard.success-move-file")) + (dd/fetch-recent-files {:team-id team-id}))}] + (st/emit! (dd/move-files (with-meta data mdata)))))))] + + [:section.dashboard-grid {:on-drag-enter on-drag-enter + :on-drag-over on-drag-over + :on-drag-leave on-drag-leave + :on-drop on-drop} (cond (nil? files) [:& loading-placeholder] (seq files) [:& line-grid-row {:files files + :team-id team-id + :selected-files selected-files :on-load-more on-load-more + :dragging? @dragging? :locale locale}] :else - [:& empty-placeholder])])) + [:& empty-placeholder {:dragging? @dragging?}])])) diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 74b4433df..4d6a9ad62 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -148,6 +148,7 @@ [:& line-grid {:project-id (:id project) + :team-id team-id :on-load-more on-nav :files files}]])) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 84111389b..23aa64539 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -29,6 +29,7 @@ [app.main.ui.icons :as i] [app.util.avatars :as avatars] [app.util.dom :as dom] + [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [t tr]] [app.util.keyboard :as kbd] [app.util.object :as obj] @@ -42,13 +43,16 @@ [rumext.alpha :as mf])) (mf/defc sidebar-project - [{:keys [item selected?] :as props}] - (let [dstate (mf/deref refs/dashboard-local) - edit-id (:project-for-edit dstate) + [{:keys [item team-id selected?] :as props}] + (let [dstate (mf/deref refs/dashboard-local) + selected-files (:selected-files dstate) + selected-project (:selected-project dstate) + edit-id (:project-for-edit dstate) local (mf/use-state {:menu-open false :menu-pos nil - :edition? (= (:id item) edit-id)}) + :edition? (= (:id item) edit-id) + :dragging? false}) on-click (mf/use-callback @@ -75,13 +79,56 @@ (mf/deps item) (fn [name] (st/emit! (dd/rename-project (assoc item :name name))) - (swap! local assoc :edition? false)))] + (swap! local assoc :edition? false))) + + on-drag-enter + (mf/use-callback + (mf/deps selected-project) + (fn [e] + (when (dnd/has-type? e "penpot/files") + (dom/prevent-default e) + (when-not (dnd/from-child? e) + (when (not= selected-project (:id item)) + (swap! local assoc :dragging? true)))))) + + on-drag-over + (mf/use-callback + (fn [e] + (when (dnd/has-type? e "penpot/files") + (dom/prevent-default e)))) + + on-drag-leave + (mf/use-callback + (fn [e] + (when-not (dnd/from-child? e) + (swap! local assoc :dragging? false)))) + + on-drop + (mf/use-callback + (mf/deps item selected-files) + (fn [e] + (swap! local assoc :dragging? false) + (when (not= selected-project (:id item)) + (let [data {:ids selected-files + :project-id (:id item)} + + mdata {:on-success + (st/emitf (dm/success (tr "dashboard.success-move-file")) + (rt/nav :dashboard-files + {:team-id team-id + :project-id (:id item)}))}] + (st/emit! (dd/move-files (with-meta data mdata)))))))] [:* - [:li {:on-click on-click + [:li {:class (if selected? "current" + (when (:dragging? @local) "dragging")) + :on-click on-click :on-double-click on-edit-open :on-context-menu on-menu-click - :class (when selected? "current")} + :on-drag-enter on-drag-enter + :on-drag-over on-drag-over + :on-drag-leave on-drag-leave + :on-drop on-drop} (if (:edition? @local) [:& inline-edition {:content (:name item) :on-end on-edit}] @@ -451,6 +498,7 @@ {:item item :key (:id item) :id (:id item) + :team-id (:id team) :selected? (= (:id item) (:id project))}])] [:div.sidebar-empty-placeholder [:span.icon i/pin] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 214018a82..99cdd7a93 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -30,7 +30,6 @@ [e] (.-target e)) - (defn classnames [& params] (assert (even? (count params))) @@ -233,6 +232,12 @@ {:pre [(blob? b)]} (js/URL.createObjectURL b)) +(defn set-property! [node property value] + (.setAttribute node property value)) + +(defn set-text! [node text] + (set! (.-textContent node) text)) + (defn set-css-property [node property value] (.setProperty (.-style ^js node) property value)) From 4b2a4c8fa397de840a78f982b73f501147e48bfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Fri, 12 Mar 2021 10:49:57 +0100 Subject: [PATCH 2/3] :lipstick: Refactor clear selected files --- frontend/src/app/main/data/dashboard.cljs | 25 ++++++------------- .../src/app/main/ui/dashboard/file_menu.cljs | 14 ++++++----- frontend/src/app/main/ui/dashboard/files.cljs | 3 ++- frontend/src/app/main/ui/dashboard/grid.cljs | 3 ++- .../src/app/main/ui/dashboard/libraries.cljs | 3 ++- .../src/app/main/ui/dashboard/projects.cljs | 3 ++- .../src/app/main/ui/dashboard/search.cljs | 3 ++- 7 files changed, 26 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 0c38bd9b3..08d079d5f 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -60,7 +60,6 @@ (s/def ::set-of-uuid (s/every ::us/uuid :kind set?)) -(declare clear-selected-files) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Fetching @@ -149,10 +148,8 @@ ptk/WatchEvent (watch [_ state stream] - (rx/concat - (->> (rp/query :search-files params) - (rx/map #(partial fetched %))) - (rx/of (clear-selected-files))))))) + (->> (rp/query :search-files params) + (rx/map #(partial fetched %))))))) ;; --- Fetch Files @@ -164,10 +161,8 @@ (ptk/reify ::fetch-files ptk/WatchEvent (watch [_ state stream] - (rx/concat - (->> (rp/query :files params) - (rx/map #(partial fetched %))) - (rx/of (clear-selected-files))))))) + (->> (rp/query :files params) + (rx/map #(partial fetched %))))))) ;; --- Fetch Shared Files @@ -179,10 +174,8 @@ (ptk/reify ::fetch-shared-files ptk/WatchEvent (watch [_ state stream] - (rx/concat - (->> (rp/query :shared-files {:team-id team-id}) - (rx/map #(partial fetched %))) - (rx/of (clear-selected-files))))))) + (->> (rp/query :shared-files {:team-id team-id}) + (rx/map #(partial fetched %))))))) ;; --- Fetch recent files @@ -195,10 +188,8 @@ ptk/WatchEvent (watch [_ state stream] (let [params {:team-id team-id}] - (rx/concat - (->> (rp/query :recent-files params) - (rx/map #(recent-files-fetched team-id %))) - (rx/of (clear-selected-files))))))) + (->> (rp/query :recent-files params) + (rx/map #(recent-files-fetched team-id %))))))) (defn recent-files-fetched [team-id files] diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index e1f187ed4..baff7a735 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -86,12 +86,14 @@ :project-id project-id} mdata {:on-success - (st/emitf (dm/success (tr "dashboard.success-move-file")) - (if navigate? - (rt/nav :dashboard-files - {:team-id team-id - :project-id project-id}) - (dd/fetch-recent-files {:team-id team-id})))}] + #(do + (st/emit! (dm/success (tr "dashboard.success-move-file"))) + (if navigate? + (st/emit! (rt/nav :dashboard-files + {:team-id team-id + :project-id project-id})) + (st/emit! (dd/fetch-recent-files {:team-id team-id}) + (dd/clear-selected-files))))}] (st/emitf (dd/move-files (with-meta data mdata)))))) diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 791724ca8..f140836cf 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -94,7 +94,8 @@ (mf/use-effect (mf/deps (:id project)) (fn [] - (st/emit! (dd/fetch-files {:project-id (:id project)})))) + (st/emit! (dd/fetch-files {:project-id (:id project)}) + (dd/clear-selected-files)))) [:* [:& header {:team team :project project}] diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 8b4b46e52..0161b4b2d 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -321,7 +321,8 @@ mdata {:on-success (st/emitf (dm/success (tr "dashboard.success-move-file")) - (dd/fetch-recent-files {:team-id team-id}))}] + (dd/fetch-recent-files {:team-id team-id}) + (dd/clear-selected-files))}] (st/emit! (dd/move-files (with-meta data mdata)))))))] [:section.dashboard-grid {:on-drag-enter on-drag-enter diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs index 8f7ed8c3d..f4349600c 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.cljs +++ b/frontend/src/app/main/ui/dashboard/libraries.cljs @@ -32,7 +32,8 @@ (reverse))] (mf/use-effect (mf/deps team) - #(st/emit! (dd/fetch-shared-files {:team-id (:id team)}))) + #(st/emit! (dd/fetch-shared-files {:team-id (:id team)}) + (dd/clear-selected-files))) [:* [:header.dashboard-header diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 4d6a9ad62..5c30e8b10 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -162,7 +162,8 @@ (mf/use-effect (mf/deps team) (fn [] - (st/emit! (dd/fetch-recent-files {:team-id (:id team)})))) + (st/emit! (dd/fetch-recent-files {:team-id (:id team)}) + (dd/clear-selected-files)))) (when (seq projects) [:* diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 0360983fa..2eefa0749 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -29,7 +29,8 @@ (mf/use-effect (mf/deps team search-term) (st/emitf (dd/search-files {:team-id (:id team) - :search-term search-term}))) + :search-term search-term}) + (dd/clear-selected-files))) [:* [:header.dashboard-header From 47320330adcabe60475e58c9ee7424ff29c59ae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 15 Mar 2021 11:23:12 +0100 Subject: [PATCH 3/3] :sparkles: Activate SCSS library to manipulate colors --- frontend/resources/styles/main-default.scss | 10 ++++++++-- .../styles/main/partials/dashboard-sidebar.scss | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 8c6c1e622..4ad1f8eac 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -7,9 +7,15 @@ // // Copyright (c) 2020 UXBOX Labs SL -// MAIN STYLES + //################################################# -// +// Import libraries +//################################################# + +@use "sass:color"; + +//################################################# +// MAIN STYLES //################################################# @import "common/dependencies/colors"; diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss index 5aac64f25..089f8c08b 100644 --- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss +++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss @@ -251,7 +251,7 @@ } &.dragging { - background-color: $color-primary-lighter; + background-color: color.adjust($color-primary, $alpha: -0.69); } } }