enhance dialogs

Author: sprocketc

src/renderer/dialog/events.cljs

@@ -4,29 +4,34 @@
    [renderer.dialog.views :as v]
    [renderer.dialog.cmdk :as cmdk]))
 
+(defn create
+  [db dialog]
+  (update db :dialogs conj dialog))
+
 (rf/reg-event-db
  ::cmdk
  (fn [db [_]]
-   (update db :dialogs conj {:content [cmdk/root]
-                             :attrs {:class "dialog-content dialog-cmdk-content"}})))
+   (create db {:content [cmdk/root]
+               :attrs {:class "dialog-content dialog-cmdk-content"}})))
 
 (rf/reg-event-db
  ::about
  (fn [db [_]]
-   (update db :dialogs conj {:title "Repath Studio"
-                             :content [v/about]})))
+   (create db {:title "Repath Studio"
+               :content [v/about]})))
 
 (rf/reg-event-fx
  ::save
  (fn [{:keys [db]} [_ k]]
-   {:db (update db :dialogs conj {:title "Do you want to save your changes?"
-                                  :content [v/save k]
-                                  :attrs {:onOpenAutoFocus #(.preventDefault %)}})}))
+   {:db (create db {:title "Do you want to save your changes?"
+                    :content [v/save k]
+                    :attrs {:onOpenAutoFocus #(.preventDefault %)}})}))
 
-#_(rf/reg-event-db
-   ::confirmation
-   (fn [db [_ data]]
-     (update db :dialogs conj {:content [v/confirmation data]})))
+(rf/reg-event-db
+ ::confirmation
+ (fn [db [_ data]]
+   (create db {:title (:title data)
+               :content [v/confirmation data]})))
 
 (rf/reg-event-db
  ::close

src/renderer/dialog/styles.css

@@ -1,7 +1,8 @@
 .dialog-content {
   @apply fixed bg-secondary rounded-lg overflow-hidden shadow-xl border border-default;
-  ;
+
   width: 500px;
+  max-width: 90%;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

src/renderer/dialog/views.cljs

@@ -22,29 +22,28 @@
   [:div.p-5
    [:div.flex.gap-3.items-start.pb-2
     [:div
-     [:div  [:strong "Version: "] config/version]
-     [:div  [:strong "Browser: "] platform/user-agent]]]
+     [:div [:strong "Version: "] config/version]
+     [:div [:strong "Browser: "] platform/user-agent]]]
    [:button.button.px-2.bg-primary.rounded.w-full
     {:auto-focus true
      :on-click #(rf/dispatch [::dialog.e/close])}
     "OK"]
    [close-button]])
 
-#_(defn confirmation
-    [{:keys [title description action]}]
-    [:div.p-4
-     [:h1.text-3xl.mb-2.font-light title]
-     [:div description]
-     [:div.flex.justify-end
-      [:button.button.px-2.bg-primary.rounded
-       {:on-click #(rf/dispatch [::dialog.e/close])}
-       "No"]
-      [:button.button.px-2.bg-primary.rounded
-       {:auto-focus true
-        :on-click #(do (rf/dispatch [::dialog.e/close])
-                       (rf/dispatch action))}
-       "Yes"]]
-     [close-button]])
+(defn confirmation
+  [{:keys [description action confirm-label cancel-label]}]
+  [:div.p-5
+   [:p description]
+   [:div.flex.gap-2.flex-wrap
+    [:button.button.px-2.bg-primary.rounded.flex-1
+     {:on-click #(rf/dispatch [::dialog.e/close])}
+     (or cancel-label "Cancel")]
+    [:button.button.px-2.bg-primary.rounded.flex-1
+     {:auto-focus true
+      :on-click #(do (rf/dispatch [::dialog.e/close])
+                     (rf/dispatch action))}
+     (or confirm-label "OK")]]
+   [close-button]])
 
 (defn save
   [k]
@@ -53,7 +52,7 @@
      [:p
       "Your changes to " [:strong (:title document)]
       " will be lost if you close the document without saving."]
-     [:div.flex.gap-2
+     [:div.flex.gap-2.flex-wrap
       [:button.button.px-2.bg-primary.rounded.flex-1
        {:on-click #(do (rf/dispatch [::dialog.e/close])
                        (rf/dispatch [::document.e/close k false]))}

src/renderer/history/views.cljs

@@ -7,6 +7,7 @@
    [re-frame.core :as rf]
    [reagent.core :as ra]
    [renderer.components :as comp]
+   [renderer.dialog.events :as-alias dialog.e]
    [renderer.history.events :as-alias history.e]
    [renderer.history.subs :as-alias history.s]))
 
@@ -111,7 +112,11 @@
        {:on-click #(rf/dispatch [::history.e/tree-view-updated 0.5 (center ref)])}
        "Center view"]
       [:button.button.flex-1
-       {:on-click #(rf/dispatch [::history.e/clear])}
+       {:on-click #(rf/dispatch [::dialog.e/confirmation
+                                 {:title "This action cannot be undone."
+                                  :description "Are you sure you wish to clear the document history?"
+                                  :confirm-label "Clear history"
+                                  :action [::history.e/clear]}])}
        "Clear history"]]
      [:div.flex-1 {:ref ref}
       [tree ref]]]))

src/renderer/styles.css

@@ -107,7 +107,7 @@
   }
 
   .button {
-    @apply inline-block relative cursor-pointer text-center outline-none;
+    @apply inline-block relative cursor-pointer text-center outline-none text-nowrap;
     background-color: transparent;
     color: var(--font-color);
     fill: var(--font-color);
@@ -203,8 +203,8 @@ label {
   width: auto;
 
   &:hover {
-      color: var(--font-color-hovered);
-      cursor: pointer;
+    color: var(--font-color-hovered);
+    cursor: pointer;
   }
 }
 
@@ -392,14 +392,13 @@ pre {
 .fps-wrapper {
   @apply drop-shadow-md;
 
-  > div {
-    @apply absolute top-2 left-auto right-2 overflow-hidden font-sans text-sm
-    px-2 py-1.5 bg-white text-gray-500 !important;
+  >div {
+    @apply absolute top-2 left-auto right-2 overflow-hidden font-sans text-sm px-2 py-1.5 bg-white text-gray-500 !important;
 
-    > div {
+    >div {
       @apply left-0 right-0 bottom-0 bg-white !important;
 
-      > div {
+      >div {
         background-color: var(--accent) !important;
       }
     }
@@ -421,19 +420,22 @@ pre {
   &[data-state='open'][data-side='top'] {
     animation-name: slideDownAndFade;
   }
+
   &[data-state='open'][data-side='right'] {
     animation-name: slideLeftAndFade;
   }
+
   &[data-state='open'][data-side='bottom'] {
     animation-name: slideUpAndFade;
   }
+
   &[data-state='open'][data-side='left'] {
     animation-name: slideRightAndFade;
   }
 }
 
 .popover-arrow,
-.menu-arrow  {
+.menu-arrow {
   fill: var(--bg-secondary);
 }