From 15dce782ae77d7fb3e1bcd980a7869fdedc89098 Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 28 Feb 2024 17:16:18 +0800 Subject: [PATCH] enhance(ui): WIP polish emojis&icons picker --- deps/shui/src/logseq/shui/demo2.cljs | 16 +++- src/main/frontend/components/icon.cljs | 109 +++++++++++++------------ src/main/frontend/components/icon.css | 64 ++++++++++++--- 3 files changed, 122 insertions(+), 67 deletions(-) diff --git a/deps/shui/src/logseq/shui/demo2.cljs b/deps/shui/src/logseq/shui/demo2.cljs index 29944adba..215a6e661 100644 --- a/deps/shui/src/logseq/shui/demo2.cljs +++ b/deps/shui/src/logseq/shui/demo2.cljs @@ -2,9 +2,21 @@ (:require [rum.core :as rum] [logseq.shui.ui :as ui] [logseq.shui.popup.core :refer [install-popups update-popup! get-popup]] - [frontend.components.icon :refer [emojis-cp emojis]])) + [frontend.components.icon :refer [emojis-cp emojis icon-search]])) -(rum/defc page [] + +(rum/defc page + [] + [:div.sm:p-10 + [:h1.text-3xl.font-bold.border-b.pb-4.mb-8 + "UI X Emojis & Icons Picker"] + + [:div.border.rounded.bg-gray-01.overflow-hidden + {:class "w-fit"} + (icon-search)]]) + +(rum/defc popup-demo + [] [:div.sm:p-10 [:h1.text-3xl.font-bold.border-b.pb-4 "UI X Popup"] diff --git a/src/main/frontend/components/icon.cljs b/src/main/frontend/components/icon.cljs index 5897c48ed..b2d3841d0 100644 --- a/src/main/frontend/components/icon.cljs +++ b/src/main/frontend/components/icon.cljs @@ -79,10 +79,7 @@ :name name}))} (not (nil? hover)) (assoc :on-mouse-over #(reset! hover emoji) - :on-mouse-out #(js/setTimeout - (fn [] - (when (and @hover (= id (:id @hover))) - (reset! hover nil))) 1000))) + :on-mouse-out #())) [:em-emoji {:id id}]]) (rum/defc emojis-cp < rum/static @@ -105,7 +102,7 @@ :id icon :name icon :icon icon}) - :on-mouse-out #(reset! hover nil)} + :on-mouse-out #()} (ui/icon icon {:size 24})]) (rum/defc icons-cp < rum/static @@ -127,53 +124,62 @@ result @*result emoji-tab? (= @*tab :emoji) opts (assoc opts :hover *hover)] - [:div.cp__emoji-icon-picker.flex.flex-1.flex-col.gap-2 - [:input.form-input.block.w-full.sm:text-sm.sm:leading-5 - {:auto-focus true - :placeholder "Select icon" - :default-value "" - :on-change (debounce - (fn [e] - (reset! *q (util/evalue e)) - (if (string/blank? @*q) - (reset! *result {}) - (p/let [result (search @*q)] - (reset! *result result)))) - 200)}] - [:div.search-result - (if (seq result) - [:div.flex.flex-1.flex-col.gap-1 - (when (seq (:emojis result)) - (emojis-cp (:emojis result) opts)) - (when (seq (:icons result)) - (icons-cp (:icons result) opts))] - [:div.flex.flex-1.flex-col.gap-1 - [:div.flex.flex-1.flex-row.items-center.gap-2 - (ui/button + [:div.cp__emoji-icon-picker + ;; header + [:div.hd + [:input.form-input.block.w-full.sm:text-sm.sm:leading-5 + {:auto-focus true + :placeholder "Select icon" + :default-value "" + :on-change (debounce + (fn [e] + (reset! *q (util/evalue e)) + (if (string/blank? @*q) + (reset! *result {}) + (p/let [result (search @*q)] + (reset! *result result)))) + 200)}]] + ;; body + [:div.bd + {:on-mouse-leave #(reset! *hover nil)} + [:div.search-result + (if (seq result) + [:div.flex.flex-1.flex-col.gap-1 + (when (seq (:emojis result)) + (emojis-cp (:emojis result) opts)) + (when (seq (:icons result)) + (icons-cp (:icons result) opts))] + [:div.flex.flex-1.flex-col.gap-1 + (if emoji-tab? + (emojis-cp emojis opts) + (icons-cp (get-tabler-icons) opts))])]] + + ;; footer + [:div.ft + (if-not @*hover + ;; tabs + [:div.flex.flex-1.flex-row.items-center.gap-2 + (ui/button "Emojis" - {:intent "logseq" - :small? true + {:intent "logseq" + :small? true :on-click #(reset! *tab :emoji)}) - (ui/button + (ui/button "Icons" - {:intent "logseq" - :small? true + {:intent "logseq" + :small? true :on-click #(reset! *tab :icon)})] - (if emoji-tab? - (emojis-cp emojis opts) - (icons-cp (get-tabler-icons) opts))])] - (when @*hover - [:div.hover-preview - [:button.transition-opacity - {:style {:font-size 32} - :key (:id @*hover) - :title (:name @*hover)} - (if (= :tabler-icon (:type @*hover)) - (ui/icon (:icon @*hover) {:size 32}) - (:native (first (:skins @*hover))))] - - [:strong (:name @*hover)]])])) + ;; preview + [:div.hover-preview + [:strong (:name @*hover)] + [:button + {:style {:font-size 30} + :key (:id @*hover) + :title (:name @*hover)} + (if (= :tabler-icon (:type @*hover)) + (ui/icon (:icon @*hover) {:size 32}) + (:native (first (:skins @*hover))))]])]])) (rum/defc icon-picker [icon-value {:keys [disabled? on-chosen icon-props]}] @@ -181,11 +187,10 @@ (if config/publishing? (constantly []) (fn [{:keys [id]}] - [:div.p-2 - (icon-search - {:on-chosen (fn [e icon-value] - (on-chosen e icon-value) - (shui/popup-hide! id))})]))] + (icon-search + {:on-chosen (fn [e icon-value] + (on-chosen e icon-value) + (shui/popup-hide! id))})))] ;; trigger (shui/button {:variant :ghost diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index c4f40155e..ce3dfadcd 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -1,8 +1,22 @@ .cp__emoji-icon-picker { - @apply w-[320px] max-h-[346px] relative; + @apply w-[380px] max-h-[396px] relative; + @apply pt-14 pb-16; + + > .hd { + @apply absolute w-full pt-3 pb-1 px-3 top-0 left-0; + } + + > .bd { + @apply pb-20 max-h-96 px-2 py-2; + @apply overflow-y-scroll; + } + + > .ft { + @apply absolute w-full py-3 px-3 bg-gray-02 bottom-0 left-0; + @apply border-t h-[50px] overflow-hidden; + } .search-result { - @apply overflow-y-scroll max-h-80; } .emojis button:hover, .icons button:hover { @@ -15,22 +29,46 @@ } .hover-preview { - @apply flex flex-1 flex-row items-center gap-2 shadow-lg; - @apply absolute bottom-0 left-0 right-0 bg-gray-01 m-[-16px] p-2; + @apply flex flex-1 items-center justify-between leading-none; > strong { - @apply opacity-75 text-lg whitespace-nowrap font-normal - overflow-ellipsis overflow-hidden; + @apply opacity-60 text-base whitespace-nowrap font-normal + overflow-ellipsis overflow-hidden mr-2; } } } -.ls-icon { - &-Backlog { @apply text-gray-05; } - &-Todo { @apply text-gray-11; } - &-InProgress50 { @apply text-yellow-rx-08; } - &-InReview { @apply text-blue-rx-09; } - &-Done { @apply text-green-rx-08; } - &-Cancelled { @apply text-red-rx-08; } +.dropdown-wrapper .cp__emoji-icon-picker { + @apply -m-4; +} + +.ui__dropdown-menu-content .cp__emoji-icon-picker { + @apply -m-1; +} + +.ls-icon { + &-Backlog { + @apply text-gray-05; + } + + &-Todo { + @apply text-gray-11; + } + + &-InProgress50 { + @apply text-yellow-rx-08; + } + + &-InReview { + @apply text-blue-rx-09; + } + + &-Done { + @apply text-green-rx-08; + } + + &-Cancelled { + @apply text-red-rx-08; + } }