0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-21 12:11:37 -05:00

🐛 Fix layer filter dropdown position + add auto-closing on Esc and outside click

This commit is contained in:
Belén Albeza 2024-02-23 13:17:19 +01:00 committed by Andrey Antukh
parent 10d6f93ed7
commit f91a8b371a
2 changed files with 34 additions and 5 deletions
frontend/src/app/main/ui/workspace/sidebar

View file

@ -21,10 +21,14 @@
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
[app.util.dom :as dom]
[app.util.globals :as globals]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.timers :as ts]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
[goog.events :as events]
[rumext.v2 :as mf])
(:import goog.events.EventType))
;; This components is a piece for sharding equality check between top
;; level frames and try to avoid rerender frames that are does not
@ -158,6 +162,21 @@
(mf/use-fn
#(swap! state* update :show-menu not))
on-toggle-filters-click
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(toggle-filters)))
hide-menu
(mf/use-fn
#(swap! state* assoc :show-menu false))
on-key-down
(mf/use-fn
(fn [event]
(when (kbd/esc? event) (hide-menu))))
update-search-text
(mf/use-fn
(fn [value _event]
@ -190,6 +209,7 @@
add-filter
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(let [key (-> (dom/get-current-target event)
(dom/get-data "filter")
(keyword))]
@ -226,6 +246,11 @@
(when (<= current-items filtered-objects-total)
(swap! state* update :num-items + 100))))]
(mf/with-effect []
(let [keys [(events/listen globals/document EventType.KEYDOWN on-key-down)
(events/listen globals/document EventType.CLICK hide-menu)]]
(fn [] (doseq [key keys] (events/unlistenByKey key)))))
[filtered-objects
handle-show-more
#(mf/html
@ -236,7 +261,7 @@
:value current-search
:on-clear clear-search-text
:placeholder (tr "workspace.sidebar.layers.search")}
[:button {:on-click toggle-filters
[:button {:on-click on-toggle-filters-click
:class (stl/css-case
:filter-button true
:opened show-menu?
@ -459,7 +484,7 @@
(mf/use-fn
#(st/emit! (dw/toggle-focus-mode)))]
[:div#layers
[:div#layers {:class (stl/css :layers)}
(if (d/not-empty? focus)
[:div {:class (stl/css :tool-window-bar)}
[:button {:class (stl/css :focus-title)

View file

@ -164,10 +164,14 @@
color: var(--pill-foreground-color);
}
.layers {
position: relative;
}
.filters-container {
@extend .menu-dropdown;
top: $s-44;
left: $s-12;
position: absolute;
left: $s-20;
width: $s-192;
.filter-menu-item {
@include bodyMedTipography;