diff --git a/src/main/frontend/components/commit.cljs b/src/main/frontend/components/commit.cljs index 96f3f3854a..d3083771cc 100644 --- a/src/main/frontend/components/commit.cljs +++ b/src/main/frontend/components/commit.cljs @@ -8,7 +8,8 @@ [goog.dom :as gdom] [goog.object :as gobj] [promesa.core :as p] - [rum.core :as rum])) + [rum.core :as rum] + [logseq.shui.core :as shui])) (defn- commit-all! [] @@ -63,11 +64,10 @@ [:h3#modal-headline.text-lg.leading-6.font-medium "No changes to commit!"]]] [:div.mt-5.sm:mt-4.flex - [:span.flex.w-full.rounded-md.shadow-sm - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click #(state/close-modal!)} - "Close"]]]] + (shui/button + {:text "Close" + :on-click state/close-modal!} + (shui/make-context))]] [:<> [:div.sm:flex.sm:items-start @@ -82,11 +82,10 @@ {:auto-focus true :default-value ""}] [:div.mt-5.sm:mt-4.flex - [:span.flex.w-full.rounded-md.shadow-sm - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click commit-all!} - "Commit"]]]])])) + (shui/button + {:text "Commit" + :on-click commit-all!} + (shui/make-context))]])])) (defn show-commit-modal! [e] (state/set-modal! add-commit-message) diff --git a/src/main/frontend/components/git.cljs b/src/main/frontend/components/git.cljs index e0b9e17259..20642a7018 100644 --- a/src/main/frontend/components/git.cljs +++ b/src/main/frontend/components/git.cljs @@ -34,17 +34,15 @@ {:on-change (fn [e] (reset! email (util/evalue e)))}] - [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse - [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click (fn [] + [:div.mt-5.sm:mt-4.flex + (ui/button + "Submit" + {:on-click (fn [] (let [username @username email @email] (when (and (not (string/blank? username)) (not (string/blank? email))) - (shell/set-git-username-and-email username email))))} - "Submit"]]]])) + (shell/set-git-username-and-email username email))))})]])) (rum/defc file-specific-version [path hash content] diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 1670ed593d..3d1a906b61 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -867,22 +867,21 @@ (when-not orphaned-pages? [:td.created-at [:span (if created-at (date/int->local-time-2 created-at) "Unknown")]]) (when-not orphaned-pages? [:td.updated-at [:span (if updated-at (date/int->local-time-2 updated-at) "Unknown")]])])]] - [:div.pt-6.flex.justify-end - - [:span.pr-2 - (ui/button - (t :cancel) - :intent "logseq" - :on-click close-fn)] + [:div.pt-6.flex.justify-end.gap-4 (ui/button - (t :yes) - :on-click (fn [] - (close-fn) - (doseq [page-name (map :block/name pages)] - (page-handler/delete! page-name #())) - (notification/show! (t :tips/all-done) :success) - (js/setTimeout #(refresh-fn) 200)))]])) + (t :cancel) + :theme :gray + :on-click close-fn) + + (ui/button + (t :yes) + :on-click (fn [] + (close-fn) + (doseq [page-name (map :block/name pages)] + (page-handler/delete! page-name #())) + (notification/show! (t :tips/all-done) :success) + (js/setTimeout #(refresh-fn) 200)))]])) (rum/defc pagination "Pagination component, like `<< >>`. diff --git a/src/main/frontend/components/page_menu.cljs b/src/main/frontend/components/page_menu.cljs index 8227592545..750f15eb55 100644 --- a/src/main/frontend/components/page_menu.cljs +++ b/src/main/frontend/components/page_menu.cljs @@ -40,19 +40,17 @@ [:h3#modal-headline.text-lg.leading-6.font-medium (t :page/delete-confirmation)]]] - [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse - [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :class "ui__modal-enter" - :on-click (fn [] - (delete-page! page-name))} - (t :yes)]] - [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click close-fn} - (t :cancel)]]]])) + [:div.mt-5.sm:mt-4.flex.gap-4 + (ui/button + (t :cancel) + {:theme :gray + :on-click close-fn}) + (ui/button + (t :yes) + {:class "ui__modal-enter" + :on-click (fn [] + (delete-page! page-name)) + :button-props {:autoFocus "on"}})]])) (defn ^:large-vars/cleanup-todo page-menu [page-name] diff --git a/src/main/frontend/extensions/pdf/core.cljs b/src/main/frontend/extensions/pdf/core.cljs index 217bc2b736..46e683286a 100644 --- a/src/main/frontend/extensions/pdf/core.cljs +++ b/src/main/frontend/extensions/pdf/core.cljs @@ -17,7 +17,8 @@ [frontend.util :as util] [medley.core :as medley] [promesa.core :as p] - [rum.core :as rum])) + [rum.core :as rum] + [frontend.ui :as ui])) (declare pdf-container system-embed-playground) @@ -844,14 +845,12 @@ :on-change (fn [e] (reset! password (util/evalue e)))}] - [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse - [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click (fn [] + [:div.mt-5.sm:mt-4.flex + (ui/button + "Submit" + {:on-click (fn [] (let [password @password] - (confirm-fn password)))} - "Submit"]]]])) + (confirm-fn password)))})]])) (rum/defc ^:large-vars/data-var pdf-loader [{:keys [url hls-file identity filename] :as pdf-current}] diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 153aa9244c..c724cc2855 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -242,6 +242,7 @@ wrapper-children))) opts)) +(declare button) (rum/defc notification-content [state content status uid] (when (and content status) @@ -275,18 +276,19 @@ :overflow-x "hidden"}} [:div.p-4 [:div.flex.items-start - [:div.flex-shrink-0 + [:div.flex-shrink-0.pt-2 svg] - [:div.ml-3.w-0.flex-1 + [:div.ml-3.w-0.flex-1.pt-2 [:div.text-sm.leading-5.font-medium.whitespace-pre-line {:style {:margin 0}} content]] - [:div.ml-4.flex-shrink-0.flex - [:button.inline-flex.text-gray-400.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150.notification-close-button - {:aria-label "Close" - :on-click (fn [] - (notification/clear! uid))} - - (icon "x" {:fill "currentColor"})]]]]]]]))) + [:div.flex-shrink-0.flex {:style {:margin-top -9 + :margin-right -18}} + (button + {:button-props {:aria-label "Close"} + :intent "link" + :on-click (fn [] + (notification/clear! uid)) + :icon "x"})]]]]]]))) (declare button) @@ -691,21 +693,18 @@ (t sub-title) sub-title)]]]] - [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse - [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :autoFocus "on" - :class "ui__modal-enter" + [:div.mt-5.sm:mt-4.flex.gap-4 + (button + (t :cancel) + {:theme :gray + :on-click (comp on-cancel close-fn)}) + (button + (t :yes) + {:class "ui__modal-enter" :on-click #(and (fn? on-confirm) (on-confirm % {:close-fn close-fn - :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)}))} - (t :yes)]] - [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto - [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5 - {:type "button" - :on-click (comp on-cancel close-fn)} - (t :cancel)]]]]))) + :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)})) + :button-props {:autoFocus "on"}})]]))) (rum/defc sub-modal < rum/reactive [] @@ -1008,11 +1007,11 @@ (def icon shui/icon) (rum/defc button-inner - [text & {:keys [background href class intent on-click small? icon icon-props disabled? button-props] + [text & {:keys [theme background href class intent on-click small? icon icon-props disabled? button-props] :or {small? false} :as option}] (let [opts {:text text - :theme (when (contains? #{"link" "border-link"} intent) :text) + :theme (or (when (contains? #{"link" "border-link"} intent) :text) theme) :href href :on-click on-click :size (if small? :sm :md)