clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-04 02:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance(UI): dynamic layout of the plugin UI items from the app toolbar (#8962)

Browse Source 
dynamic layout for the plugins ui items from toolbar
This commit is contained in:
Charlie
2023-03-30 13:54:08 +08:00
committed by GitHub
parent d4cbe248f0
commit dd86856281
4 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/main/frontend/components/plugins.cljs
View File

@@ -4,6 +4,7 @@
[cljs-bean.core :as bean]
[frontend.context.i18n :refer [t]]
[frontend.ui :as ui]
[frontend.rum :as frontend-rum]
[frontend.handler.ui :as ui-handler]
[frontend.handler.plugin-config :as plugin-config-handler]
[frontend.handler.common.plugin :as plugin-common-handler]
@@ -1024,6 +1025,37 @@
:icon (ui/icon "adjustments")}])
{:trigger-class "toolbar-plugins-manager-trigger"}))
(rum/defc header-ui-items-list-wrap
[children]
(let [*wrap-el (rum/use-ref nil)
[right-sidebar-resized] (frontend-rum/use-atom ui-handler/*right-sidebar-resized-at)]
(rum/use-effect!
(fn []
(when-let [^js wrap-el (rum/deref *wrap-el)]
(let [^js header-el (.closest wrap-el ".cp__header")
^js header-l (.querySelector header-el "* > .l")
^js header-r (.querySelector header-el "* > .r")
set-max-width! #(when (number? %) (set! (.-maxWidth (.-style wrap-el)) (str % "px")))
calc-wrap-max-width #(let [width-l (.-offsetWidth header-l)
width-t (-> (js/document.querySelector "#main-content-container") (.-offsetWidth))
children (to-array (.-children header-r))
width-c' (reduce (fn [acc ^js e]
(when (some-> e (.-classList) (.contains "ui-items-container") (not))
(+ acc (or (.-offsetWidth e) 0)))) 0 children)]
(when-let [width-t (and (number? width-t)
(if-not (state/get-left-sidebar-open?)
(- width-t width-l) width-t))]
(set-max-width! (max (- width-t width-c' 100) 76))))]
(.addEventListener js/window "resize" calc-wrap-max-width)
(js/setTimeout calc-wrap-max-width 16)
#(.removeEventListener js/window "resize" calc-wrap-max-width))))
[right-sidebar-resized])
[:div.list-wrap
{:ref *wrap-el}
children]))
(rum/defcs hook-ui-items < rum/reactive
< {:key-fn #(identity "plugin-hook-items")}
"type of :toolbar, :pagebar"
@@ -1044,12 +1076,13 @@
items)
items))]
[:div {:class (str "ui-items-container")
:data-type (name type)}
(conj (for [[_ {:keys [key pinned?] :as opts} pid] items]
(when (or (not toolbar?)
(not (set? pinned-items)) pinned?)
(rum/with-key (ui-item-renderer pid type opts) key))))
[:div.ui-items-container
{:data-type (name type)}
(header-ui-items-list-wrap
(for [[_ {:keys [key pinned?] :as opts} pid] items]
(when (or (not toolbar?)
(not (set? pinned-items)) pinned?)
(rum/with-key (ui-item-renderer pid type opts) key))))
;; manage plugin buttons
(when toolbar?