mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 00:01:51 -05:00
🐌 adds modals to deletions
This commit is contained in:
alonso.torres
parent
fdb3b8aacb
commit
0f501ed85d
5 changed files with 130 additions and 47 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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))))))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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]]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue