Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 09:11:21 -05:00
Code Issues Activity

🐛 Card menu is hard to launch after search

Browse source
This commit is contained in:
Aitor 2024-01-09 10:37:45 +01:00 • committed by Andrey Antukh
parent 45072c19a2
commit 8f867c03de
6 changed files with 111 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/app/main/data/dashboard.cljs
View file

@ -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
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

26
frontend/src/app/main/refs.cljs
View file

@ -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

11
frontend/src/app/main/ui/dashboard.cljs
View file

@ -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

2
frontend/src/app/main/ui/dashboard.scss
View file

@ -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;

1
frontend/src/app/main/ui/dashboard/file_menu.cljs
View file

@ -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)

66
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -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