mirror of https://github.com/logseq/logseq
enhance(ui): refactor the plugin manager menu with the shui popup
parent
5cf8915f6e
commit
7a59ef7413
|
@ -1029,18 +1029,9 @@
|
||||||
(rum/defc toolbar-plugins-manager-list
|
(rum/defc toolbar-plugins-manager-list
|
||||||
[updates-coming items]
|
[updates-coming items]
|
||||||
(let [badge-updates? (and (not (plugin-handler/get-auto-checking?))
|
(let [badge-updates? (and (not (plugin-handler/get-auto-checking?))
|
||||||
(seq (state/all-available-coming-updates updates-coming)))]
|
(seq (state/all-available-coming-updates updates-coming)))
|
||||||
(ui/dropdown-with-links
|
items (fn []
|
||||||
(fn [{:keys [toggle-fn]}]
|
(->> (concat
|
||||||
[:div.toolbar-plugins-manager
|
|
||||||
{:on-click toggle-fn}
|
|
||||||
[:a.button.relative
|
|
||||||
(ui/icon "puzzle" {:size 20})
|
|
||||||
(when badge-updates?
|
|
||||||
(ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]])
|
|
||||||
|
|
||||||
;; items
|
|
||||||
(concat
|
|
||||||
(for [[_ {:keys [key pinned?] :as opts} pid] items
|
(for [[_ {:keys [key pinned?] :as opts} pid] items
|
||||||
:let [pkey (str (name pid) ":" key)]]
|
:let [pkey (str (name pid) ":" key)]]
|
||||||
{:title key
|
{:title key
|
||||||
|
@ -1054,8 +1045,8 @@
|
||||||
(let [^js target (.-target e)
|
(let [^js target (.-target e)
|
||||||
user-btn? (boolean (.closest target "div[data-injected-ui]"))]
|
user-btn? (boolean (.closest target "div[data-injected-ui]"))]
|
||||||
(when-not user-btn?
|
(when-not user-btn?
|
||||||
(plugin-handler/op-pinned-toolbar-item! pkey (if pinned? :remove :add))))
|
(plugin-handler/op-pinned-toolbar-item! pkey (if pinned? :remove :add)))
|
||||||
false)}})
|
true))}})
|
||||||
[{:hr true}
|
[{:hr true}
|
||||||
{:title (t :plugins)
|
{:title (t :plugins)
|
||||||
:options {:on-click #(plugin-handler/goto-plugins-dashboard!)
|
:options {:on-click #(plugin-handler/goto-plugins-dashboard!)
|
||||||
|
@ -1076,7 +1067,33 @@
|
||||||
[{:hr true :key "dropdown-more"}
|
[{:hr true :key "dropdown-more"}
|
||||||
{:title (auto-check-for-updates-control)
|
{:title (auto-check-for-updates-control)
|
||||||
:options {:no-padding? true}}])
|
:options {:no-padding? true}}])
|
||||||
{:trigger-class "toolbar-plugins-manager-trigger"})))
|
(remove nil?)))]
|
||||||
|
|
||||||
|
[:div.toolbar-plugins-manager
|
||||||
|
{:on-click (fn [^js e]
|
||||||
|
(shui/popup-show! (.-target e)
|
||||||
|
(fn [{:keys [id]}]
|
||||||
|
(for [{:keys [hr item title options icon]} (items)]
|
||||||
|
(let [on-click' (:on-click options)]
|
||||||
|
(if hr
|
||||||
|
(shui/dropdown-menu-separator)
|
||||||
|
(shui/dropdown-menu-item
|
||||||
|
(assoc options
|
||||||
|
:on-click (fn [^js e]
|
||||||
|
(when on-click'
|
||||||
|
(when-not (false? (on-click' e))
|
||||||
|
(shui/popup-hide! id)))))
|
||||||
|
(or item
|
||||||
|
[:span.flex.items-center.gap-1.w-full
|
||||||
|
icon [:div title]]))))))
|
||||||
|
{:as-dropdown? true
|
||||||
|
:content-props {:class "toolbar-plugins-manager-content"}}))}
|
||||||
|
|
||||||
|
[:a.button.relative.toolbar-plugins-manager-trigger
|
||||||
|
(ui/icon "puzzle" {:size 20})
|
||||||
|
(when badge-updates?
|
||||||
|
(ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]]
|
||||||
|
))
|
||||||
|
|
||||||
(rum/defc header-ui-items-list-wrap
|
(rum/defc header-ui-items-list-wrap
|
||||||
[children]
|
[children]
|
||||||
|
|
|
@ -847,37 +847,33 @@
|
||||||
color: var(--ls-primary-text-color);
|
color: var(--ls-primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.toolbar-plugins-manager {
|
.toolbar-plugins-manager {
|
||||||
&-trigger {
|
&-content {
|
||||||
.menu-links-wrapper {
|
@apply max-h-[80vh];
|
||||||
max-height: 80vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link {
|
> .ui__dropdown-menu-item {
|
||||||
@apply px-[5px] py-1.5;
|
@apply px-[5px] py-1 text-sm relative w-full;
|
||||||
|
|
||||||
&.extra-item {
|
&.extra-item {
|
||||||
@apply opacity-80 px-4 py-1.5;
|
@apply opacity-80 px-4 py-1.5 hover:opacity-100;
|
||||||
|
|
||||||
.title-wrap {
|
|
||||||
margin-left: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrap {
|
.item-wrap {
|
||||||
padding-right: 28px;
|
@apply pr-[28px] text-sm relative w-full;
|
||||||
font-size: 14px;
|
|
||||||
position: relative;
|
.ti {
|
||||||
|
@apply text-[18px];
|
||||||
|
}
|
||||||
|
|
||||||
|
div[data-injected-ui] > a.button {
|
||||||
|
@apply h-auto;
|
||||||
|
}
|
||||||
|
|
||||||
div[data-injected-ui] :is(.ti, .tie) {
|
div[data-injected-ui] :is(.ti, .tie) {
|
||||||
position: relative;
|
@apply relative bottom-[-2px];
|
||||||
bottom: -1px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -893,17 +889,6 @@
|
||||||
opacity: 90;
|
opacity: 90;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-links-wrapper {
|
|
||||||
a {
|
|
||||||
@apply !text-popover-foreground/80;
|
|
||||||
|
|
||||||
&.button {
|
|
||||||
@apply h-auto hover:bg-transparent scale-95;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue