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

dynamic layout for the plugins ui items from toolbar

src/main/frontend/components/plugins.cljs

@@ -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?

src/main/frontend/components/plugins.css

@@ -814,6 +814,10 @@
   &[data-type=toolbar] {
     @apply flex items-center;
 
+    > .list-wrap {
+      @apply flex items-center flex-nowrap overflow-x-hidden transition-[max-width];
+    }
+
     > .injected-ui-item-toolbar {
       @apply hover:opacity-100 transition-opacity;
     }

src/main/frontend/components/right_sidebar.cljs

@@ -177,7 +177,9 @@
         max-ratio 0.7
         keyboard-step 5
         add-resizing-class #(.. js/document.documentElement -classList (add "is-resizing-buf"))
-        remove-resizing-class #(.. js/document.documentElement -classList (remove "is-resizing-buf"))
+        remove-resizing-class (fn []
+                                (.. js/document.documentElement -classList (remove "is-resizing-buf"))
+                                (reset! ui-handler/*right-sidebar-resized-at (js/Date.now)))
         set-width! (fn [ratio element]
                      (when (and el-ref element)
                        (let [width (str (* ratio 100) "%")]
@@ -233,6 +235,14 @@
              (.on "keyup" remove-resizing-class)))
        #())
      [])
+
+    (rum/use-effect!
+      (fn []
+        ;; sidebar animation duration
+        (js/setTimeout
+          #(reset! ui-handler/*right-sidebar-resized-at (js/Date.now)) 300))
+      [sidebar-open?])
+
     [:.resizer {:ref el-ref
                 :role "separator"
                 :aria-orientation "vertical"

src/main/frontend/handler/ui.cljs

@@ -22,6 +22,8 @@
   (.getPropertyValue (js/getComputedStyle (.-documentElement js/document)) var-name))
 
 ;; sidebars
+(def *right-sidebar-resized-at (atom (js/Date.now)))
+
 (defn- get-right-sidebar-width
   []
   (or (.. (js/document.getElementById "right-sidebar") -style -width)