enhance(mobile): improve actions sheet style

This commit is contained in:
charlie
2025-08-06 14:01:50 +08:00
parent 6bf87990ff
commit 099d27fda5
4 changed files with 55 additions and 23 deletions

View File

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

View File

@@ -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}))]))))

View File

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

View File

@@ -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)]))))))