Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

✨ Enhance modal of convert graphics into components

Browse source
This commit is contained in:
Andrés Moya 2022-11-16 14:21:45 +01:00 • committed by Andrey Antukh
parent 879c477ada
commit cc60cfc86d
6 changed files with 191 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
frontend/resources/styles/main/partials/modal.scss
View file

@ -1849,6 +1849,41 @@
}
.remove-graphics-dialog {
.modal-content {
padding-top: 16px;
}
h2 {
font-size: $fs18;
}
p {
font-size: $fs12;
color: $color-gray-30;
&:last-child {
margin-bottom: 0;
}
&.progress-message {
color: $color-info;
}
&.error-message {
color: $color-black;
& svg {
width: 16px;
height: 16px;
fill: $color-danger;
margin-right: 0.5rem;
position: relative;
bottom: -4px;
transform: rotate(45deg);
}
}
}
.close {
border: 1px solid $color-gray-30;
background: $color-canvas;
@ -1861,6 +1896,32 @@
background: $color-gray-20;
}
}
.button-primary {
background: $color-primary;
border: 1px solid $color-primary;
border-radius: 3px;
color: $color-black;
cursor: pointer;
padding: 0.5rem 1rem;
&:hover {
background: $color-primary-dark;
}
}
.button-secondary {
border: 1px solid $color-gray-30;
background: $color-white;
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
//- LOGIN

44
frontend/src/app/main/data/workspace.cljs
View file

@ -15,6 +15,7 @@
[app.common.geom.proportions :as gpr]
[app.common.geom.shapes :as gsh]
[app.common.geom.shapes.rect :as gpsr]
[app.common.logging :as log]
[app.common.pages.changes-builder :as pcb]
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
@ -123,8 +124,8 @@
ptk/WatchEvent
(watch [_ state _]
(let [file (:workspace-file state)
has-graphics? (-> file :data :media seq)
(let [file (:workspace-data state)
has-graphics? (-> file :media seq)
components-v2 (features/active-feature? state :components-v2)]
(rx/merge
(rx/of (fbc/fix-bool-contents))
@ -1674,7 +1675,9 @@
ptk/UpdateEvent
(update [_ state]
(assoc state :remove-graphics {:total total
:current nil}))))
:current nil
:error false
:completed false}))))
(defn- update-remove-graphics
[current]
@ -1683,12 +1686,31 @@
(update [_ state]
(assoc-in state [:remove-graphics :current] current))))
(defn- error-in-remove-graphics
[]
(ptk/reify ::error-in-remove-graphics
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:remove-graphics :error] true))))
(defn clear-remove-graphics
[]
(ptk/reify ::clear-remove-graphics
ptk/UpdateEvent
(update [_ state]
(dissoc state :remove-graphics))))
(defn- complete-remove-graphics
[]
(ptk/reify ::complete-remove-graphics
ptk/UpdateEvent
(update [_ state]
(dissoc state :remove-graphics))))
(assoc-in state [:remove-graphics :completed] true))
ptk/WatchEvent
(watch [_ state _]
(when-not (get-in state [:remove-graphics :error])
(rx/of (modal/hide))))))
(defn- remove-graphic
[it file-data page [index [media-obj pos]]]
@ -1727,9 +1749,14 @@
(rx/mapcat (partial dwm/create-shapes-svg (:id file-data) (:objects page) pos)))
(dwm/create-shapes-img pos media-obj))]
(rx/concat
(rx/of (update-remove-graphics index))
(rx/map process-shapes shapes))))
(->> (rx/concat
(rx/of (update-remove-graphics index))
(rx/map process-shapes shapes))
(rx/catch #(do
(log/error :msg (str "Error removing " (:name media-obj))
:hint (ex-message %)
:error %)
(rx/of (error-in-remove-graphics)))))))
(defn- remove-graphics
[file-id file-name]
@ -1766,8 +1793,7 @@
(pcb/add-page (:id page) page)))))
(rx/mapcat (partial remove-graphic it file-data' page)
(rx/from (d/enumerate (d/zip media shape-grid))))
(rx/of (modal/hide)
(complete-remove-graphics)))))))
(rx/of (complete-remove-graphics)))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Exports

35
frontend/src/app/main/ui/workspace.cljs
View file

@ -174,14 +174,35 @@
::mf/register-as :remove-graphics-dialog}
[{:keys [] :as ctx}]
(let [remove-state (mf/deref refs/remove-graphics)
close #(modal/hide!)]
close #(modal/hide!)
reload-file #(dom/reload-current-window)]
(mf/use-effect
(fn []
#(st/emit! (dw/clear-remove-graphics))))
[:div.modal-overlay
[:div.modal-container.remove-graphics-dialog
[:div.modal-header
[:div.modal-header-title
[:h2 (str "Updating " (:file-name ctx) "...")]]
[:div.modal-close-button
{:on-click close} i/close]]
[:div.modal-content
[:p (str "Converting " (:current remove-state) " / " (:total remove-state))]]]]))
[:h2 (tr "workspace.remove-graphics.title" (:file-name ctx))]]
(when (and (:completed remove-state) (:error remove-state))
[:div.modal-close-button
{:on-click close} i/close])]
(if-not (and (:completed remove-state) (:error remove-state))
[:div.modal-content
[:p (tr "workspace.remove-graphics.text1")]
[:p (tr "workspace.remove-graphics.text2")]
[:p.progress-message (tr "workspace.remove-graphics.progress"
(:current remove-state)
(:total remove-state))]]
[:*
[:div.modal-content
[:p.error-message [:span i/close] (tr "workspace.remove-graphics.error-msg")]
[:p (tr "workspace.remove-graphics.error-hint")]]
[:div.modal-footer
[:div.action-buttons
[:input.button-secondary {:type "button"
:value (tr "labels.close")
:on-click close}]
[:input.button-primary {:type "button"
:value (tr "labels.reload-file")
:on-click reload-file}]]]])]]))

4
frontend/src/app/util/dom.cljs
View file

@ -596,6 +596,10 @@
[]
(.back (.-history js/window)))
(defn reload-current-window
[]
(.reload (.-location js/window)))
(defn animate!
([item keyframes duration] (animate! item keyframes duration nil))
([item keyframes duration onfinish]

30
frontend/translations/en.po
View file

@ -1351,6 +1351,10 @@ msgstr "Projects"
msgid "labels.release-notes"
msgstr "Release notes"
#: src/app/main/ui/workspace.cljs
msgid "labels.reload-file"
msgstr "Reload file"
#: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
msgid "labels.remove"
msgstr "Remove"
@ -3915,6 +3919,32 @@ msgstr "Separate nodes (%s)"
msgid "workspace.path.actions.snap-nodes"
msgstr "Snap nodes (%s)"
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.title"
msgstr "Updating %s..."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.text1"
msgstr "Library Graphics are Components from now on, which will make them much more powerful."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.text2"
msgstr "This update is a one time action."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.error-msg"
msgstr "Some graphics could not be updated."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.error-hint"
msgstr ""
"To try it again, you can reload this file. If the problem persists, we suggest you to take"
" a look at the list and consider to delete broken graphics."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.progress"
msgstr "Converting %s/%s"
#: src/app/main/ui/workspace/context_menu.cljs
msgid "workspace.shape.menu.back"
msgstr "Send to back"

33
frontend/translations/es.po
View file

@ -1518,6 +1518,10 @@ msgstr "Reciente"
msgid "labels.release-notes"
msgstr "Notas de versión"
#: src/app/main/ui/workspace.cljs
msgid "labels.reload-file"
msgstr "Recargar archivo"
#: src/app/main/ui/workspace/libraries.cljs,
#: src/app/main/ui/dashboard/team.cljs
msgid "labels.remove"
@ -4341,6 +4345,35 @@ msgstr "Separar nodos (%s)"
msgid "workspace.path.actions.snap-nodes"
msgstr "Alinear nodos (%s)"
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.title"
msgstr "Actualizando %s..."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.text1"
msgstr ""
"Desde ahora los gráficos de la librería serán componentes, lo cual"
" los hará mucho más potentes."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.text2"
msgstr "Esta actualización sólo ocurrirá una vez."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.error-msg"
msgstr "Algunos gráficos no han podido ser actualizados."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.error-hint"
msgstr ""
"Para intentarlo de nuevo, puedes recargar este archivo. Si el problema"
" persiste, te sugerimos que compruebes la lista y consideres borrar los"
" gráficos que estén mal."
#: src/app/main/ui/workspace.cljs
msgid "workspace.remove-graphics.progress"
msgstr "Convirtiendo %s/%s"
#: src/app/main/ui/workspace/context_menu.cljs
msgid "workspace.shape.menu.back"
msgstr "Enviar al fondo"