mirror of https://github.com/logseq/logseq
enhance(ui): WIP polish emojis&icons picker
charlie
parent
b43c576158
commit
15dce782ae
|
|
@ -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"]
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue