diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css index 97755ceb81..ae1092bf57 100644 --- a/src/main/mobile/components/app.css +++ b/src/main/mobile/components/app.css @@ -163,6 +163,36 @@ ul { .cp__emoji-icon-picker { @apply w-full; } + + &.as-action-sheet { + .app-silk-popup-content-inner { + > h2 { + @apply text-center pb-3; + } + } + + .menu-link { + @apply border-b -mx-2 py-3; + + .text-lg { + @apply inline-block w-full text-center text-xl; + } + + .ui__icon { + @apply hidden; + } + + &:first-child { + @apply border-t; + } + + &:last-child { + @apply -mb-4; + + padding-bottom: calc(env(safe-area-inset-bottom) + 6px); + } + } + } } .blocks-container { diff --git a/src/main/mobile/components/header.cljs b/src/main/mobile/components/header.cljs index 09d0a73662..7ab1969c31 100644 --- a/src/main/mobile/components/header.cljs +++ b/src/main/mobile/components/header.cljs @@ -130,5 +130,6 @@ [:span.text-lg.flex.gap-2.items-center (shui/tabler-icon "bug" {:class "opacity-70" :size 22}) "Report bug"])]) - {:title "Actions"}))} + {:title "Actions" + :type :action-sheet}))} (shui/tabler-icon "dots" {:size 23}))])))) diff --git a/src/main/mobile/components/modal.cljs b/src/main/mobile/components/modal.cljs index 8be466342d..0690099176 100644 --- a/src/main/mobile/components/modal.cljs +++ b/src/main/mobile/components/modal.cljs @@ -55,6 +55,12 @@ (mobile-ui/open-popup! (fn [] [:div.-mx-2 + (ui/menu-link + {:on-click #(mobile-ui/close-popup!)} + [:span.text-lg.flex.gap-2.items-center + (shui/tabler-icon "copy" {:class "opacity-80" :size 22}) + "Copy"]) + (ui/menu-link {:on-click #(-> (shui/dialog-confirm! (str "⚠️ Are you sure you want to delete this " @@ -72,14 +78,9 @@ (notification/show! msg :warning))})))))} [:span.text-lg.flex.gap-2.items-center.text-red-700 (shui/tabler-icon "trash" {:class "opacity-80" :size 22}) - "Delete"]) - - (ui/menu-link - {:on-click #(mobile-ui/close-popup!)} - [:span.text-lg.flex.gap-2.items-center - (shui/tabler-icon "copy" {:class "opacity-80" :size 22}) - "Copy"])]) - {:title "Actions"}))} + "Delete"])]) + {:title "Actions" + :type :action-sheet}))} (shui/tabler-icon "dots-vertical" {:size 18 :stroke 2})]] ;; block page content diff --git a/src/main/mobile/components/popup.cljs b/src/main/mobile/components/popup.cljs index 64e143432a..8feff75333 100644 --- a/src/main/mobile/components/popup.cljs +++ b/src/main/mobile/components/popup.cljs @@ -81,17 +81,17 @@ (state/clear-edit!) (state/pub-event! [:mobile/keyboard-will-hide])))} (:modal-props opts)) - (silkhq/bottom-sheet-portal - (silkhq/bottom-sheet-view - {:class "app-silk-popup-sheet-view" - :onTravelEnd (fn [] - (when (= :ls-quick-add (:id opts)) - (js/setTimeout #(editor-handler/quick-add-open-last-block!) 50)))} - (silkhq/bottom-sheet-backdrop) - (silkhq/bottom-sheet-content - {:class "flex flex-col items-center p-2"} - (silkhq/bottom-sheet-handle) - [:div.w-full.app-silk-popup-content-inner.p-2 - (when-let [title (:title opts)] - [:h2.py-2.opacity-40 title]) - (if (fn? content-fn) (content-fn) content-fn)])))))) + (silkhq/bottom-sheet-portal + (silkhq/bottom-sheet-view + {:class (str "app-silk-popup-sheet-view as-" (name (or (:type opts) "default"))) + :onTravelEnd (fn [] + (when (= :ls-quick-add (:id opts)) + (js/setTimeout #(editor-handler/quick-add-open-last-block!) 50)))} + (silkhq/bottom-sheet-backdrop) + (silkhq/bottom-sheet-content + {:class "flex flex-col items-center p-2"} + (silkhq/bottom-sheet-handle) + [:div.w-full.app-silk-popup-content-inner.p-2 + (when-let [title (:title opts)] + [:h2.py-2.opacity-40 title]) + (if (fn? content-fn) (content-fn) content-fn)]))))))