3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-05 15:07:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

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

8
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

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