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

🐛 Show lens icon in search dashboard

Browse source
This commit is contained in:
alonso.torres 2021-01-28 14:56:46 +01:00
parent fd620a858c
commit 81480f203d
2 changed files with 22 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/resources/styles/main/partials/dashboard-sidebar.scss
View file

@ -277,7 +277,7 @@
border-color: $color-black; border-color: $color-black;
} }
.clear-search { .search, .clear-search {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -289,7 +289,6 @@
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg);
width: 15px; width: 15px;
&:hover { &:hover {
@ -297,6 +296,10 @@
} }
} }
} }
.clear-search svg {
transform: rotate(45deg);
}
} }
&.profile-bar { &.profile-bar {

20
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

@ -75,12 +75,14 @@
(mf/defc sidebar-search (mf/defc sidebar-search
[{:keys [search-term team-id locale] :as props}] [{:keys [search-term team-id locale] :as props}]
(let [search-term (or search-term "") (let [search-term (or search-term "")
focused? (mf/use-state false)
emit! (mf/use-memo #(f/debounce st/emit! 500)) emit! (mf/use-memo #(f/debounce st/emit! 500))
on-search-focus on-search-focus
(mf/use-callback (mf/use-callback
(mf/deps team-id) (mf/deps team-id)
(fn [event] (fn [event]
(reset! focused? true)
(let [target (dom/get-target event) (let [target (dom/get-target event)
value (dom/get-value target)] value (dom/get-value target)]
(dom/select-text! target) (dom/select-text! target)
@ -88,6 +90,11 @@
(emit! (rt/nav :dashboard-search {:team-id team-id} {})) (emit! (rt/nav :dashboard-search {:team-id team-id} {}))
(emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value})))))) (emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value}))))))
on-search-blur
(mf/use-callback
(fn [event]
(reset! focused? false)))
on-search-change on-search-change
(mf/use-callback (mf/use-callback
(mf/deps team-id) (mf/deps team-id)
@ -114,11 +121,18 @@
:default-value search-term :default-value search-term
:auto-complete "off" :auto-complete "off"
:on-focus on-search-focus :on-focus on-search-focus
:on-blur on-search-blur
:on-change on-search-change :on-change on-search-change
:ref #(when % (set! (.-value %) search-term))}] :ref #(when % (set! (.-value %) search-term))}]
[:div.clear-search
{:on-click on-clear-click} (if (or @focused? (not (empty? search-term)))
i/close]])) [:div.clear-search
{:on-click on-clear-click}
i/close]
[:div.search
{:on-click on-clear-click}
i/search])]))
(mf/defc teams-selector-dropdown (mf/defc teams-selector-dropdown
[{:keys [team profile locale] :as props}] [{:keys [team profile locale] :as props}]