diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index cbfc24e1b..d76703f51 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -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 diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index c658a3c9f..d8c4a9cc5 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 05e5e5783..1231a8292 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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}]]]])]])) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index d24e681af..60c62f863 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -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] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index ff785bab8..6c77b236f 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 52cb5c0b7..537142d3a 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"