From 8f867c03dea753a978c74b97e144328e1679fb23 Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 9 Jan 2024 10:37:45 +0100 Subject: [PATCH] :bug: Card menu is hard to launch after search --- frontend/src/app/main/data/dashboard.cljs | 51 +++++++++++++- frontend/src/app/main/refs.cljs | 26 ++++++-- frontend/src/app/main/ui/dashboard.cljs | 11 +++- frontend/src/app/main/ui/dashboard.scss | 2 +- .../src/app/main/ui/dashboard/file_menu.cljs | 1 + frontend/src/app/main/ui/dashboard/grid.cljs | 66 +++++++++---------- 6 files changed, 111 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 10effaf16..5d1adba0b 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -320,7 +320,9 @@ (update [_ state] (update state :dashboard-local assoc :selected-files #{} - :selected-project nil)))) + :selected-project nil + :menu-open false + :menu-pos nil)))) (defn toggle-file-select [{:keys [id project-id] :as file}] @@ -339,6 +341,53 @@ (assoc :selected-project project-id)))) state))))) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Show grid menu +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn show-file-menu-with-position + [file-id pos] + (ptk/reify ::show-file-menu-with-position + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :menu-open true + :menu-pos pos + :file-id file-id)))) + +(defn show-file-menu + [] + (ptk/reify ::show-file-menu + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :menu-open true)))) + +(defn hide-file-menu + [] + (ptk/reify ::hide-file-menu + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :menu-open false)))) + +(defn start-edit-file-name + [file-id] + (ptk/reify ::start-edit-file-name + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :edition true + :file-id file-id)))) + +(defn stop-edit-file-name + [] + (ptk/reify ::stop-edit-file-name + ptk/UpdateEvent + (update [_ state] + (update state :dashboard-local + assoc :edition false)))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Modification ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 33502346b..58fce5791 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -82,15 +82,27 @@ (dm/get-in state [:dashboard-local :selected-project])) st/state)) +(defn- dashboard-extract-selected + [files selected] + (let [get-file #(get files %) + sim-file #(select-keys % [:id :name :project-id :is-shared]) + xform (comp (map get-file) + (map sim-file))] + (->> (into #{} xform selected) + (d/index-by :id)))) + +(def dashboard-selected-search + (l/derived (fn [state] + ;; we need to this because :dashboard-search-result is a list + ;; of maps and we need a map of maps (using :id as key). + (let [files (d/index-by :id (:dashboard-search-result state))] + (dashboard-extract-selected files (dm/get-in state [:dashboard-local :selected-files])))) + st/state)) + (def dashboard-selected-files (l/derived (fn [state] - (let [get-file #(dm/get-in state [:dashboard-files %]) - sim-file #(select-keys % [:id :name :project-id :is-shared]) - selected (get-in state [:dashboard-local :selected-files]) - xform (comp (map get-file) - (map sim-file))] - (->> (into #{} xform selected) - (d/index-by :id)))) + (dashboard-extract-selected (:dashboard-files state) + (dm/get-in state [:dashboard-local :selected-files]))) st/state =)) ;; ---- Workspace refs diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index 36aa4b7ef..a56873515 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -30,6 +30,7 @@ [app.util.keyboard :as kbd] [app.util.object :as obj] [goog.events :as events] + [okulary.core :as l] [rumext.v2 :as mf])) (defn ^boolean uuid-str? @@ -81,6 +82,7 @@ (mf/use-effect on-resize) + [:div {:class (stl/css :dashboard-content) :on-click clear-selected-fn :ref container} (case section @@ -137,6 +139,9 @@ nil)])) +(def dashboard-initialized + (l/derived :current-team-id st/state)) + (mf/defc dashboard [{:keys [route profile] :as props}] (let [section (get-in route [:data :name]) @@ -150,7 +155,9 @@ team (get teams team-id) projects (mf/deref refs/dashboard-projects) - project (get projects project-id)] + project (get projects project-id) + + initialized? (mf/deref dashboard-initialized)] (hooks/use-shortcuts ::dashboard sc/shortcuts) @@ -177,7 +184,7 @@ ;; team-id because we want to completely refresh all the ;; components on team change. Many components assumes that the ;; team is already set so don't put the team into mf/deps. - (when team + (when (and team initialized?) [:main {:class (stl/css :dashboard) :key (:id team)} [:& sidebar diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss index fa287e7fa..9e4b333fb 100644 --- a/frontend/src/app/main/ui/dashboard.scss +++ b/frontend/src/app/main/ui/dashboard.scss @@ -11,7 +11,7 @@ display: grid; grid-template-columns: $s-40 $s-256 1fr; grid-template-rows: $s-52 1fr; - height: 100vh; + height: 100.0vh; :global(svg#loader-pencil) { fill: $df-secondary; diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index edda4f2f4..283460530 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -75,6 +75,7 @@ other-teams (remove #(= (:id %) current-team-id) (vals @teams)) current-projects (remove #(= (:id %) (:project-id file)) (:projects current-team)) + on-new-tab (fn [_] (let [path-params {:project-id (:project-id file) diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 4badcf117..172f4f4ec 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -215,31 +215,34 @@ (mf/defc grid-item {:wrap [mf/memo]} - [{:keys [file navigate? origin library-view?] :as props}] + [{:keys [file origin library-view?] :as props}] (let [file-id (:id file) - local (mf/use-state {:menu-open false - :menu-pos nil - :edition false}) - selected-files (mf/deref refs/dashboard-selected-files) + selected-files (if (= origin :search) + (mf/deref refs/dashboard-selected-search) + (mf/deref refs/dashboard-selected-files)) + dashboard-local (mf/deref refs/dashboard-local) + file-menu-open? (:menu-open dashboard-local) + + selected? (contains? selected-files file-id) + node-ref (mf/use-ref) menu-ref (mf/use-ref) - selected? (contains? selected-files file-id) - on-menu-close (mf/use-fn - #(swap! local assoc :menu-open false)) + (fn [_] + (st/emit! (dd/hide-file-menu)))) on-select - (fn [event] - (when (and (or (not selected?) (> (count selected-files) 1)) - (not (:menu-open @local))) - (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))))) + (mf/use-fn + (fn [event] + (when (or (not selected?) (> (count selected-files) 1)) + (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)))))) on-navigate (mf/use-fn @@ -254,6 +257,7 @@ (mf/use-fn (mf/deps selected-files) (fn [event] + (st/emit! (dd/hide-file-menu)) (let [offset (dom/get-offset-position (.-nativeEvent event)) select-current? (not (contains? selected-files (:id file))) @@ -283,6 +287,7 @@ (mf/use-fn (mf/deps file selected?) (fn [event] + (dom/stop-propagation event) (dom/prevent-default event) (when-not selected? (when-not (kbd/shift? event) @@ -297,9 +302,7 @@ x (:left points)] (gpt/point x y)) client-position)] - (swap! local assoc - :menu-open true - :menu-pos position)))) + (st/emit! (dd/show-file-menu-with-position file-id position))))) edit (mf/use-fn @@ -308,16 +311,14 @@ (let [name (str/trim name)] (when (not= name "") (st/emit! (dd/rename-file (assoc file :name name))))) - (swap! local assoc :edition false))) + (st/emit! (dd/stop-edit-file-name)))) on-edit (mf/use-fn (mf/deps file) (fn [event] (dom/stop-propagation event) - (swap! local assoc - :edition true - :menu-open false))) + (st/emit! (dd/start-edit-file-name file-id)))) handle-key-down (mf/use-callback @@ -331,10 +332,6 @@ (on-select event)) ;; TODO Fix this )))] - (mf/with-effect [selected? local] - (when (and (not selected?) (:menu-open @local)) - (swap! local assoc :menu-open false))) - [:li {:class (stl/css-case :grid-item true :project-th true :library library-view?)} [:button @@ -363,13 +360,13 @@ [:div {:class (stl/css :info-wrapper)} [:div {:class (stl/css :item-info)} - (if (:edition @local) + (if (and (= file-id (:file-id dashboard-local)) (:edition dashboard-local)) [:& inline-edition {:content (:name file) :on-end edit}] [:h3 (:name file)]) [:& grid-item-metadata {:modified-at (:modified-at file)}]] - [:div {:class (stl/css-case :project-th-actions true :force-display (:menu-open @local))} + [:div {:class (stl/css-case :project-th-actions true :force-display (:menu-open dashboard-local))} [:div {:class (stl/css :project-th-icon :menu) :tab-index "0" @@ -381,16 +378,15 @@ (dom/stop-propagation event) (on-menu-click event)))} i/actions - (when selected? + (when (and selected? file-menu-open?) [:& file-menu {:files (vals selected-files) - :show? (:menu-open @local) - :left (+ 24 (:x (:menu-pos @local))) - :top (:y (:menu-pos @local)) - :navigate? navigate? + :show? (:menu-open dashboard-local) + :left (+ 24 (:x (:menu-pos dashboard-local))) + :top (:y (:menu-pos dashboard-local)) + :navigate? true :on-edit on-edit :on-menu-close on-menu-close :origin origin - :dashboard-local dashboard-local :parent-id (str file-id "-action-menu")}])]]]]])) (mf/defc grid