mirror of
https://github.com/penpot/penpot.git
synced 2025-07-04 19:47:16 +02: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.icons :as i]
|
||||||
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
|
[app.util.globals :as globals]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
|
[app.util.keyboard :as kbd]
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
[cuerdas.core :as str]
|
[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
|
;; This components is a piece for sharding equality check between top
|
||||||
;; level frames and try to avoid rerender frames that are does not
|
;; level frames and try to avoid rerender frames that are does not
|
||||||
|
@ -158,6 +162,21 @@
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
#(swap! state* update :show-menu not))
|
#(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
|
update-search-text
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(fn [value _event]
|
(fn [value _event]
|
||||||
|
@ -190,6 +209,7 @@
|
||||||
add-filter
|
add-filter
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(fn [event]
|
(fn [event]
|
||||||
|
(dom/stop-propagation event)
|
||||||
(let [key (-> (dom/get-current-target event)
|
(let [key (-> (dom/get-current-target event)
|
||||||
(dom/get-data "filter")
|
(dom/get-data "filter")
|
||||||
(keyword))]
|
(keyword))]
|
||||||
|
@ -226,6 +246,11 @@
|
||||||
(when (<= current-items filtered-objects-total)
|
(when (<= current-items filtered-objects-total)
|
||||||
(swap! state* update :num-items + 100))))]
|
(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
|
[filtered-objects
|
||||||
handle-show-more
|
handle-show-more
|
||||||
#(mf/html
|
#(mf/html
|
||||||
|
@ -236,7 +261,7 @@
|
||||||
:value current-search
|
:value current-search
|
||||||
:on-clear clear-search-text
|
:on-clear clear-search-text
|
||||||
:placeholder (tr "workspace.sidebar.layers.search")}
|
:placeholder (tr "workspace.sidebar.layers.search")}
|
||||||
[:button {:on-click toggle-filters
|
[:button {:on-click on-toggle-filters-click
|
||||||
:class (stl/css-case
|
:class (stl/css-case
|
||||||
:filter-button true
|
:filter-button true
|
||||||
:opened show-menu?
|
:opened show-menu?
|
||||||
|
@ -459,7 +484,7 @@
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
#(st/emit! (dw/toggle-focus-mode)))]
|
#(st/emit! (dw/toggle-focus-mode)))]
|
||||||
|
|
||||||
[:div#layers
|
[:div#layers {:class (stl/css :layers)}
|
||||||
(if (d/not-empty? focus)
|
(if (d/not-empty? focus)
|
||||||
[:div {:class (stl/css :tool-window-bar)}
|
[:div {:class (stl/css :tool-window-bar)}
|
||||||
[:button {:class (stl/css :focus-title)
|
[:button {:class (stl/css :focus-title)
|
||||||
|
|
|
@ -164,10 +164,14 @@
|
||||||
color: var(--pill-foreground-color);
|
color: var(--pill-foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layers {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.filters-container {
|
.filters-container {
|
||||||
@extend .menu-dropdown;
|
@extend .menu-dropdown;
|
||||||
top: $s-44;
|
position: absolute;
|
||||||
left: $s-12;
|
left: $s-20;
|
||||||
width: $s-192;
|
width: $s-192;
|
||||||
.filter-menu-item {
|
.filter-menu-item {
|
||||||
@include bodyMedTipography;
|
@include bodyMedTipography;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue