fix(mobile): foldable control

Author: tiensonqin

src/main/frontend/components/page.cljs

@@ -701,7 +701,8 @@
                                                    :whiteboard? whiteboard?}))])])
 
          (when-not preview?
-           [:div.ml-1.flex.flex-col.gap-8
+           [:div.flex.flex-col.gap-8
+            {:class (when-not (util/mobile?) "ml-1")}
             (when today?
               (today-queries repo today? sidebar?))
 

src/main/frontend/components/views.cljs

@@ -2002,6 +2002,39 @@
 
       (when (and db-based? add-new-object!) (new-record-button table view-entity))]]))
 
+(rum/defc group-item
+  [view-entity table' group group-by-property value option view-opts {:keys [list-view? group-by-page? readable-property-value]}]
+  (let [title [:div
+               {:class (when-not list-view? "my-2")}
+               (cond
+                 group-by-page?
+                 (if value
+                   (let [c (state/get-component :block/page-cp)]
+                     (c {:disable-preview? true} value))
+                   [:div.text-muted-foreground.text-sm
+                    "Pages"])
+
+                 (some? value)
+                 (let [icon (pu/get-block-property-value value :logseq.property/icon)]
+                   [:div.flex.flex-row.gap-1.items-center
+                    (when icon (icon-component/icon icon {:color? true}))
+                    (readable-property-value value)])
+                 :else
+                 (str "No " (:block/title group-by-property)))]
+        body-fn (fn []
+                  (let [render (view-cp view-entity
+                                        (assoc table' :rows group)
+                                        (assoc option
+                                                                      ;; disabled virtualization for nested view
+                                               :disable-virtualized? true)
+                                        view-opts)]
+                    (if (and list-view? (not (util/mobile?)))
+                      [:div.-ml-2 render]
+                      render)))]
+    (if (util/mobile?)
+      [:div.flex.flex-1.flex-col  title (body-fn)]
+      (ui/foldable title body-fn {:title-trigger? false}))))
+
 (rum/defc ^:large-vars/cleanup-todo view-inner < rum/static
   [view-entity {:keys [view-parent data full-data set-data! columns add-new-object! foldable-options input set-input! sorting set-sorting! filters set-filters! display-type group-by-property-ident config] :as option*}
    *scroller-ref]
@@ -2121,36 +2154,14 @@
                                                                        :else
                                                                        (str %))
                                         group-by-page? (or (= :block/page group-by-property-ident)
-                                                           (and (not db-based?) (contains? #{:linked-references :unlinked-references} display-type)))]
+                                                           (and (not db-based?) (contains? #{:linked-references :unlinked-references} display-type)))
+                                        key (str (:db/id view-entity) "-group-idx-" idx)]
                                     (rum/with-key
-                                      (ui/foldable
-                                       [:div
-                                        {:class (when-not list-view? "my-2")}
-                                        (cond
-                                          group-by-page?
-                                          (if value
-                                            (let [c (state/get-component :block/page-cp)]
-                                              (c {:disable-preview? true} value))
-                                            [:div.text-muted-foreground.text-sm
-                                             "Pages"])
-
-                                          (some? value)
-                                          (let [icon (pu/get-block-property-value value :logseq.property/icon)]
-                                            [:div.flex.flex-row.gap-1.items-center
-                                             (when icon (icon-component/icon icon {:color? true}))
-                                             (readable-property-value value)])
-                                          :else
-                                          (str "No " (:block/title group-by-property)))]
-                                       (fn []
-                                         (let [render (view-cp view-entity
-                                                               (assoc table' :rows group)
-                                                               (assoc option
-                                                                      ;; disabled virtualization for nested view
-                                                                      :disable-virtualized? true)
-                                                               view-opts)]
-                                           (if list-view? [:div.-ml-2 render] render)))
-                                       {:title-trigger? false})
-                                      (str (:db/id view-entity) "-group-idx-" idx))))}
+                                      (group-item view-entity table' group group-by-property value option view-opts
+                                                  {:list-view? list-view?
+                                                   :group-by-page? group-by-page?
+                                                   :readable-property-value readable-property-value})
+                                      key)))}
                  disable-virtualized?)])
              (view-cp view-entity table
                       (assoc option

src/main/frontend/ui.cljs

@@ -628,38 +628,62 @@
                     (let [^js target (.-target e)]
                       (when (some-> target (.closest ".as-toggle"))
                         (reset! collapsed? (not @collapsed?)))))}
-       (when-not (mobile-util/native-platform?)
-         (let [style {:width 14 :height 16}]
-           [:a.ls-foldable-title-control.block-control.opacity-50.hover:opacity-100
-            (cond->
-             {:style style}
-              (not title-trigger?)
-              (assoc :on-pointer-down on-pointer-down))
-            [:span {:class (if (or @control? @collapsed?) "control-show cursor-pointer" "control-hide")}
-             (rotating-arrow @collapsed?)]]))
+       (let [style {:width 14 :height 16}]
+         [:a.ls-foldable-title-control.block-control.opacity-50.hover:opacity-100
+          (cond->
+           {:style style}
+            (not title-trigger?)
+            (assoc :on-pointer-down on-pointer-down))
+          [:span {:class (if (or @control? @collapsed? (util/mobile?))
+                           "control-show cursor-pointer"
+                           "control-hide")}
+           (rotating-arrow @collapsed?)]])
        (if (fn? header)
          (header @collapsed?)
          header)]]]))
 
 (rum/defcs foldable < db-mixins/query rum/reactive
   (rum/local false ::collapsed?)
+  (rum/local true ::render-content?)
+  (rum/local nil ::collapse-timeout)
   {:will-mount (fn [state]
                  (let [args (:rum/args state)]
                    (when (true? (:default-collapsed? (last args)))
-                     (reset! (get state ::collapsed?) true)))
+                     (reset! (get state ::collapsed?) true)
+                     (reset! (get state ::render-content?) false)))
                  state)
+   :will-unmount (fn [state]
+                   (when-let [timeout-id @(get state ::collapse-timeout)]
+                     (js/clearTimeout timeout-id))
+                   state)
    :did-mount (fn [state]
                 (when-let [f (:init-collapsed (last (:rum/args state)))]
                   (f (::collapsed? state)))
                 state)}
   [state header content {:keys [title-trigger? on-pointer-down class
                                 _default-collapsed? _init-collapsed]}]
   (let [collapsed? (get state ::collapsed?)
+        render-content? (get state ::render-content?)
+        collapse-timeout (get state ::collapse-timeout)
+        transition-ms 200
         on-pointer-down (fn [e]
                           (util/stop e)
-                          (swap! collapsed? not)
-                          (when on-pointer-down
-                            (on-pointer-down @collapsed?)))]
+                          (let [next-collapsed? (not @collapsed?)]
+                            (when-let [timeout-id @collapse-timeout]
+                              (js/clearTimeout timeout-id)
+                              (reset! collapse-timeout nil))
+                            (when (false? next-collapsed?)
+                              (reset! render-content? true))
+                            (reset! collapsed? next-collapsed?)
+                            (when (true? next-collapsed?)
+                              (reset! collapse-timeout
+                                      (js/setTimeout
+                                       (fn []
+                                         (reset! render-content? false)
+                                         (reset! collapse-timeout nil))
+                                       transition-ms)))
+                            (when on-pointer-down
+                              (on-pointer-down next-collapsed?))))]
     [:div.flex.flex-col
      {:class class}
      (foldable-title {:on-pointer-down on-pointer-down
@@ -668,10 +692,13 @@
                       :collapsed? collapsed?})
      ;; Don't stop propagation for the pointer down event to the high level content container.
      ;; That may cause the drag function to not work.
-     [:div {:class (if @collapsed? "hidden" "initial")}
-      (if (fn? content)
-        (if (not @collapsed?) (content) nil)
-        content)]]))
+     [:div.ls-foldable-content
+      {:class (when @collapsed? "is-collapsed")
+       :aria-hidden (boolean @collapsed?)}
+      [:div.ls-foldable-content-inner
+       (if (fn? content)
+         (when @render-content? (content))
+         content)]]]))
 
 (rum/defc admonition
   [type content]

src/main/frontend/ui.css

@@ -352,6 +352,29 @@ input[type='range'] {
   margin-left: -27px;
 }
 
+.ls-foldable-content {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 200ms ease-in-out;
+
+  .ls-foldable-content-inner {
+    overflow: hidden;
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  }
+
+  &.is-collapsed {
+    grid-template-rows: 0fr;
+
+    .ls-foldable-content-inner {
+      opacity: 0;
+      transform: translateY(-2px);
+      pointer-events: none;
+    }
+  }
+}
+
 .ls-nlp-calendar {
   @apply flex flex-col gap-2 relative;
 }

src/main/mobile/components/app.css

@@ -375,3 +375,10 @@ div[data-radix-menu-content] {
     width: 0.45em;
     height: 0.45em;
 }
+
+.ls-foldable-title {
+    margin-left: -5px;
+}
+.ls-foldable-title-control {
+    margin-left: 0px;
+}