diff --git a/frontend/resources/styles/main/partials/lightbox.scss b/frontend/resources/styles/main/partials/lightbox.scss index 39f5c5aed..47521504a 100644 --- a/frontend/resources/styles/main/partials/lightbox.scss +++ b/frontend/resources/styles/main/partials/lightbox.scss @@ -222,13 +222,62 @@ } -// Confirm dialog -.confirm-dialog { - .btn-gray, - .btn-success, - .btn-delete { - margin: 2rem 1rem 0 1rem; - } +.lightbox .confirm-dialog { + background-color: $color-white; + width: 23rem; + + & .close { + 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 diff --git a/frontend/src/uxbox/main/data/library.cljs b/frontend/src/uxbox/main/data/library.cljs index 1adb784dd..ff9805d12 100644 --- a/frontend/src/uxbox/main/data/library.cljs +++ b/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)))))) diff --git a/frontend/src/uxbox/main/ui/components/editable_label.cljs b/frontend/src/uxbox/main/ui/components/editable_label.cljs index 2f1f23e7a..80eb3c153 100644 --- a/frontend/src/uxbox/main/ui/components/editable_label.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/ui/confirm.cljs b/frontend/src/uxbox/main/ui/confirm.cljs index d5d8731c7..72bfb1ddd 100644 --- a/frontend/src/uxbox/main/ui/confirm.cljs +++ b/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}] - (letfn [(accept [event] - (dom/prevent-default event) - (modal/hide!) - (on-accept (dissoc ctx :on-accept :on-cancel))) - (cancel [event] - (dom/prevent-default event) - (modal/hide!) - (when on-cancel - (on-cancel (dissoc ctx :on-accept :on-cancel))))] + [{:keys [message on-accept on-cancel hint cancel-text accept-text] :as ctx}] + (let [message (or message (tr "ds.confirm-title")) + cancel-text (or cancel-text (tr "ds.confirm-cancel")) + accept-text (or accept-text (tr "ds.confirm-ok")) + + accept + (fn [event] + (dom/prevent-default event) + (modal/hide!) + (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")] - (if hint - [:span hint]) - [:div.row-flex - [:input.btn-success.btn-small + [:h3.confirm-dialog-title message] + (if hint [:span hint]) + + [:div.confirm-dialog-buttons + [:input.confirm-dialog-cancel-button {:type "button" - :value (tr "ds.confirm-ok") - :on-click accept}] - [:input.btn-delete.btn-small + :value cancel-text + :on-click cancel}] + + [:input.confirm-dialog-accept-button {:type "button" - :value (tr "ds.confirm-cancel") - :on-click cancel}]] - [:a.close {:href "#" - :on-click #(do - (dom/prevent-default %) - (modal/hide!))} - i/close]])) + :value accept-text + :on-click accept}]] + + [:a.close {:href "#" :on-click cancel} i/close]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/library.cljs b/frontend/src/uxbox/main/ui/dashboard/library.cljs index d6b1a3e36..462830382 100644 --- a/frontend/src/uxbox/main/ui/dashboard/library.cljs +++ b/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"))] - (do - (st/emit! (dlib/delete-library section library-id)) - (st/emit! (rt/nav path {:team-id team-id}))))]]}]] + (fn [] + (let [path (keyword (str "dashboard-library-" (name section) "-index"))] + (modal/show! + 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)) - (st/emit! (dlib/batch-delete-item section library-id (:selected @state))))}] + (fn [] + (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