enhance(mobile): add actions popup for the block page

src/main/capacitor/components/modal.cljs

@@ -5,6 +5,7 @@
             [capacitor.state :as state]
             [frontend.components.page :as page]
             [frontend.db :as db]
+            [frontend.ui :as frontend-ui]
             [frontend.mobile.action-bar :as action-bar]
             [frontend.mobile.mobile-bar :as mobile-bar]
             [frontend.state :as fstate]
@@ -19,7 +20,7 @@
       {:isOpen (boolean open?)
        :presenting-element presenting-element
        :onDidDismiss (fn [] (state/set-modal! nil))
-       :mode "ios" ;; force card modal for android
+       :mode "ios"                                          ;; force card modal for android
        :expand "block"}
 
       (ion/page
@@ -29,9 +30,24 @@
            {:on-click #(swap! state/*modal-data assoc :open? false)}
            (ion/tabler-icon "chevron-down" {:size 16 :stroke 3})]
           [:span.opacity-40.active:opacity-60
-           {:on-click (fn [^js e]
-                        (shui/popup-show! (.-target e)
-                          (fn [] [:strong.text-2xl.p-5.block.text-red-800 "TODO: block page actions"])))}
+           {:on-click (fn []
+                        (ui/open-popup!
+                          (fn []
+                            [:div.-mx-2
+                             (frontend-ui/menu-link
+                               {:on-click #(ui/close-popup!)}
+                               [:span.text-lg.flex.gap-2.items-center
+                                (ion/tabler-icon "trash" {:class "opacity-80" :size 18})
+                                "Delete"])
+
+                             (frontend-ui/menu-link
+                               {:on-click #(ui/close-popup!)}
+                               [:span.text-lg.flex.gap-2.items-center
+                                (ion/tabler-icon "copy" {:class "opacity-80" :size 18})
+                                "Copy"])])
+                          {:title "Actions"
+                           :modal-props {:initialBreakpoint 0.3}})
+                        )}
            (ion/tabler-icon "dots-vertical" {:size 18 :stroke 2})])
 
         (ion/content {:class "ion-padding scrolling"}

src/main/capacitor/components/popup.cljs

@@ -10,16 +10,16 @@
 (defn warp-calc-commands-popup-side
   [pos opts]
   (let [[side mh] (let [[_x y _ height] pos
-                   vh js/window.innerHeight
-                   [th bh] [y (- vh (+ y height) 300)]]
-               (case (if (> bh 280) "bottom"
-                       (if (> (- th bh) 100)
-                         "top" "bottom"))
-                 "top" ["top" th]
-                 ["bottom" bh]))]
+                        vh js/window.innerHeight
+                        [th bh] [y (- vh (+ y height) 300)]]
+                    (case (if (> bh 280) "bottom"
+                            (if (> (- th bh) 100)
+                              "top" "bottom"))
+                      "top" ["top" th]
+                      ["bottom" bh]))]
     (-> (assoc opts :auto-side? false)
-        (assoc :max-popup-height mh)
-        (assoc-in [:content-props :side] side))))
+      (assoc :max-popup-height mh)
+      (assoc-in [:content-props :side] side))))
 
 (defn popup-show!
   [event content-fn {:keys [id dropdown-menu?] :as opts}]
@@ -46,7 +46,7 @@
 
 (defn popup-hide!
   [& args]
-  (when-not  @*last-popup-modal?
+  (when-not @*last-popup-modal?
     (apply shui-popup/hide! args)))
 
 (set! shui/popup-show! popup-show!)
@@ -54,14 +54,19 @@
 
 (rum/defc popup < rum/reactive
   []
-  (let [{:keys [open? content-fn _opts]} (rum/react state/*popup-data)]
+  (let [{:keys [open? content-fn opts]} (rum/react state/*popup-data)]
     (ion/modal
-     {:isOpen (boolean open?)
-      :initialBreakpoint 0.75
-      :breakpoints #js [0 0.75 1]
-      :onDidDismiss (fn [] (state/set-popup! nil))
-      :expand "block"}
-     (ion/content
-      {:class "ion-padding"}
-      (when content-fn
-        (content-fn))))))
+      (merge
+        {:isOpen (boolean open?)
+         :initialBreakpoint 0.75
+         :breakpoints #js [0 0.75 1]
+         :onDidDismiss (fn [] (state/set-popup! nil))
+         :expand "block"}
+        (:modal-props opts))
+      (ion/content
+        {:class "ion-padding"}
+        [:<>
+         (when-let [title (:title opts)]
+           [:h2.py-2.opacity-40 title])
+         (when content-fn
+           (content-fn))]))))

src/main/capacitor/components/ui.cljs

@@ -5,6 +5,8 @@
             [frontend.rum :as r]
             [frontend.state :as fstate]
             [frontend.ui :as ui]
+            [capacitor.components.popup :as popup]
+            [capacitor.state :as state]
             [medley.core :as medley]
             [react-transition-group :refer [CSSTransition TransitionGroup]]
             [rum.core :as rum]))
@@ -185,6 +187,17 @@
   ([] (some-> @*modals (last) :id (close-modal!)))
   ([id] (delete-modal! id)))
 
+(defn open-popup!
+  [content-fn opts]
+  (state/set-popup!
+    {:open? true
+     :content-fn content-fn
+     :opts opts}))
+
+(defn close-popup! []
+  (some-> state/*popup-data
+    (swap! assoc :open? false)))
+
 (rum/defc install-modals []
   (let [_ (r/use-atom *modals)]
     [:<>