🐌 adds modals to deletions

frontend/resources/styles/main/partials/lightbox.scss

@@ -222,13 +222,62 @@
 
 }
 
-// Confirm dialog
+.lightbox .confirm-dialog {
-.confirm-dialog {
+    background-color: $color-white;
-  .btn-gray,
+    width: 23rem;
-  .btn-success,
+
-  .btn-delete {
+    & .close {
-    margin: 2rem 1rem 0 1rem;
+        right: 1rem;
-  }
+        top: 1rem;
+
+        & svg {
+            fill: $color-black;
+        }
+    }
+}
+
+.lightbox .confirm-dialog-title {
+    font-size: 24px;
+    color: $color-black;
+    font-weight: normal;
+    text-align: center;
+}
+
+.confirm-dialog-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-top: 5rem;
+    width: 100%;
+}
+
+.confirm-dialog-cancel-button {
+    border: 1px solid $color-gray;
+    background: $color-gray-lightest;
+    border-radius: 2px;
+    padding: 0.5rem;
+    margin-right: 1rem;
+    justify-content: space-evenly;
+    margin-bottom: 0;
+    width: 100%;
+    cursor: pointer;
+
+    &:hover {
+        background: $color-gray-light;
+    }
+}
+
+.confirm-dialog-accept-button {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid $color-danger;
+    background: $color-danger;
+    color: $color-white;
+    margin-bottom: 0;
+    cursor: pointer;
+
+    &:hover {
+        background: $color-danger-dark;
+    }
 }
 
 // Export dialog

frontend/src/uxbox/main/data/library.cljs

@@ -147,7 +147,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [update-fn (fn [libraries]
-                        (filter #(not= library-id (:id %)) libraries))]
+                        (filterv #(not= library-id (:id %)) libraries))]
         (-> state
             (update-in [:library type] update-fn))))))
 
@@ -173,7 +173,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [update-fn (fn [items]
-                        (filter #(not= item-id (:id %)) items))]
+                        (filterv #(not= item-id (:id %)) items))]
         (-> state
             (update-in [:library :selected-items library-id] update-fn))))))
 
@@ -202,6 +202,6 @@
     (update [_ state]
       (let [item-ids-set (set item-ids)
             update-fn (fn [items]
-                        (filter #(not (item-ids-set (:id %))) items))]
+                        (filterv #(not (item-ids-set (:id %))) items))]
         (-> state
             (update-in [:library :selected-items library-id] update-fn))))))

frontend/src/uxbox/main/ui/components/editable_label.cljs

@@ -4,6 +4,7 @@
    [uxbox.builtins.icons :as i]
    [uxbox.main.ui.keyboard :as kbd]
    [uxbox.util.dom :as dom]
+   [uxbox.util.timers :as timers]
    [uxbox.util.data :refer [classnames]]))
 
 (mf/defc editable-label
@@ -13,7 +14,7 @@
         is-editing (or edit (:editing @state))
         start-editing (fn []
                         (swap! state assoc :editing true)
-                        (dom/timeout 100 #(dom/focus! (mf/ref-node input))))
+                        (timers/schedule 100 #(dom/focus! (mf/ref-node input))))
         stop-editing (fn [] (swap! state assoc :editing false))
         cancel-editing (fn []
                          (stop-editing)

frontend/src/uxbox/main/ui/confirm.cljs

@@ -14,31 +14,36 @@
    [uxbox.util.dom :as dom]))
 
 (mf/defc confirm-dialog
-  [{:keys [on-accept on-cancel hint] :as ctx}]
+  [{:keys [message on-accept on-cancel hint cancel-text accept-text] :as ctx}]
-  (letfn [(accept [event]
+  (let [message (or message (tr "ds.confirm-title"))
-            (dom/prevent-default event)
+        cancel-text (or cancel-text (tr "ds.confirm-cancel"))
-            (modal/hide!)
+        accept-text (or accept-text (tr "ds.confirm-ok"))
-            (on-accept (dissoc ctx :on-accept :on-cancel)))
+
-          (cancel [event]
+        accept
-            (dom/prevent-default event)
+        (fn [event]
-            (modal/hide!)
+          (dom/prevent-default event)
-            (when on-cancel
+          (modal/hide!)
-              (on-cancel (dissoc ctx :on-accept :on-cancel))))]
+          (on-accept (dissoc ctx :on-accept :on-cancel)))
+
+        cancel
+        (fn [event]
+          (dom/prevent-default event)
+          (modal/hide!)
+          (when on-cancel
+            (on-cancel (dissoc ctx :on-accept :on-cancel))))]
     [:div.lightbox-body.confirm-dialog
-     [:h3 (tr "ds.confirm-title")]
+     [:h3.confirm-dialog-title message]
-     (if hint
+     (if hint [:span hint])
-       [:span hint])
+
-     [:div.row-flex
+     [:div.confirm-dialog-buttons
-      [:input.btn-success.btn-small
+      [:input.confirm-dialog-cancel-button
        {:type "button"
-        :value (tr "ds.confirm-ok")
+        :value cancel-text
-        :on-click accept}]
+        :on-click cancel}]
-      [:input.btn-delete.btn-small
+
+      [:input.confirm-dialog-accept-button
        {:type "button"
-        :value (tr "ds.confirm-cancel")
+        :value accept-text
-        :on-click cancel}]]
+        :on-click accept}]]
-     [:a.close {:href "#"
+
-                :on-click #(do
+     [:a.close {:href "#" :on-click cancel} i/close]]))
-                             (dom/prevent-default %)
-                             (modal/hide!))}
-      i/close]]))

frontend/src/uxbox/main/ui/dashboard/library.cljs

@@ -150,10 +150,15 @@
                    #(swap! state assoc :editing-name true)]
 
                   [(t locale "ds.button.delete")
-                   #(let [path (keyword (str "dashboard-library-" (name section) "-index"))]
+                   (fn []
-                      (do
+                     (let [path (keyword (str "dashboard-library-" (name section) "-index"))]
-                        (st/emit! (dlib/delete-library section library-id))
+                       (modal/show!
-                        (st/emit! (rt/nav path {:team-id team-id}))))]]}]]
+                        confirm-dialog
+                        {:on-accept #(do
+                                       (st/emit! (dlib/delete-library section library-id))
+                                       (st/emit! (rt/nav path {:team-id team-id})))
+                         :message "Are you sure you want to delete this library?"
+                         :accept-text "Delete"})))]]}]]
 
      [:div.library-top-menu-actions
       [:a.library-top-menu-actions-delete
@@ -213,7 +218,12 @@
        {:show (:is-open @state)
         :on-close #(swap! state update :is-open not)
         :options [[(t locale "ds.button.delete")
-                   #(st/emit! (dlib/delete-item :icons library-id id))]]}]]]))
+                   (fn []
+                     (modal/show!
+                      confirm-dialog
+                      {:on-accept #(st/emit! (dlib/delete-item :icons library-id id))
+                       :message "Are you sure you want to delete this icon?"
+                       :accept-text "Delete"}))]]}]]]))
 
 (mf/defc library-image-card
   [{:keys [item on-select on-unselect]}]
@@ -231,7 +241,7 @@
       [:input {:type "checkbox"
                :id (str "image-" id)
                :on-change handle-change
-               #_(:checked false)}]
+               :checked (:selected @state)}]
       [:label {:for (str "image-" id)}]]
      [:div.library-card-image
       [:img {:src thumb-uri}]]
@@ -245,7 +255,12 @@
        {:show (:is-open @state)
         :on-close #(swap! state update :is-open not)
         :options [[(t locale "ds.button.delete")
-                   #(st/emit! (dlib/delete-item :images library-id id))]]}]]]))
+                   (fn []
+                     (modal/show!
+                      confirm-dialog
+                      {:on-accept #(st/emit! (dlib/delete-item :images library-id id))
+                       :message "Are you sure you want to delete this image?"
+                       :accept-text "Delete"}))]]}]]]))
 
 (mf/defc library-color-card
   [{:keys [item on-select on-unselect]}]
@@ -263,7 +278,7 @@
         [:input {:type "checkbox"
                  :id (str "color-" id)
                  :on-change handle-change
-                 #_(:checked false)}]
+                 :checked (:selected @state)}]
         [:label {:for (str "color-" id)}]]
        [:div.library-card-image
         { :style { :background-color content }}]
@@ -279,7 +294,12 @@
          {:show (:is-open @state)
           :on-close #(swap! state update :is-open not)
           :options [[(t locale "ds.button.delete")
-                     #(st/emit! (dlib/delete-item :palettes library-id id))]]}]]])))
+                     (fn []
+                       (modal/show!
+                        confirm-dialog
+                        {:on-accept #(st/emit! (dlib/delete-item :palettes library-id id))
+                         :message "Are you sure you want to delete this color?"
+                         :accept-text "Delete"}))]]}]]])))
 
 (defn libraries-ref [section]
   (-> (comp (l/key :library) (l/key section))
@@ -330,8 +350,16 @@
           :library-id library-id
           :team-id team-id
           :on-delete-selected
-          #(when (-> @state :selected count (> 0))
+          (fn []
-             (st/emit! (dlib/batch-delete-item section library-id (:selected @state))))}]
+            (when (-> @state :selected count (> 0))
+              (modal/show!
+               confirm-dialog
+               {:on-accept #(st/emit! (dlib/batch-delete-item section library-id (:selected @state)))
+                :message (str "Are you sure you want to delete " (-> @state :selected count) " items?")
+                :accept-text "Delete"})
+              )
+            )
+          }]
         [:*
          ;; TODO: Fix the chunked list
          #_[:& chunked-list {:items items