mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
🐛 Fix layer filter dropdown position + add auto-closing on Esc and outside click
This commit is contained in:
parent
10d6f93ed7
commit
f91a8b371a
2 changed files with 34 additions and 5 deletions
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue