diff --git a/frontend/resources/images/features/export-artboards.gif b/frontend/resources/images/features/export-artboards.gif new file mode 100644 index 000000000..480a5213b Binary files /dev/null and b/frontend/resources/images/features/export-artboards.gif differ diff --git a/frontend/resources/images/features/navigate-history.gif b/frontend/resources/images/features/navigate-history.gif new file mode 100644 index 000000000..53c08b455 Binary files /dev/null and b/frontend/resources/images/features/navigate-history.gif differ diff --git a/frontend/resources/images/features/share-viewer.gif b/frontend/resources/images/features/share-viewer.gif new file mode 100644 index 000000000..487099cbc Binary files /dev/null and b/frontend/resources/images/features/share-viewer.gif differ diff --git a/frontend/resources/images/features/stroke-caps.gif b/frontend/resources/images/features/stroke-caps.gif new file mode 100644 index 000000000..7b823bf8c Binary files /dev/null and b/frontend/resources/images/features/stroke-caps.gif differ diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 8ee499756..0522cb6cd 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -811,7 +811,7 @@ border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 100%; - width: 106%; + width: 115%; } } } diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index fde18c31d..c30ed5bf2 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -305,7 +305,11 @@ (ptk/reify ::go-to-frame ptk/WatchEvent (watch [_ state _] - (let [frames (get-in state [:viewer-data :frames]) + (let [route (:route state) + qparams (:query-params route) + page-id (:page-id qparams) + + frames (get-in state [:viewer :pages page-id :frames]) index (d/index-of-pred frames #(= (:id %) frame-id))] (when index (rx/of (go-to-frame-by-index index))))))) @@ -320,12 +324,6 @@ qparams (:query-params route)] (rx/of (rt/nav :viewer pparams (assoc qparams :section section))))))) -(defn set-current-frame [frame-id] - (ptk/reify ::set-current-frame - ptk/UpdateEvent - (update [_ state] - (assoc-in state [:viewer-data :current-frame-id] frame-id)))) - (defn deselect-all [] (ptk/reify ::deselect-all ptk/UpdateEvent @@ -355,7 +353,10 @@ (ptk/reify ::shift-select-to ptk/UpdateEvent (update [_ state] - (let [objects (get-in state [:viewer-data :objects]) + (let [route (:route state) + qparams (:query-params route) + page-id (:page-id qparams) + objects (get-in state [:viewer :pages page-id :objects]) selection (-> state (get-in [:viewer-local :selected] #{}) (conj id))] @@ -368,8 +369,13 @@ (ptk/reify ::select-all ptk/UpdateEvent (update [_ state] - (let [objects (get-in state [:viewer-data :objects]) - frame-id (get-in state [:viewer-data :current-frame-id]) + (let [route (:route state) + qparams (:query-params route) + page-id (:page-id qparams) + index (:index qparams) + objects (get-in state [:viewer :pages page-id :objects]) + frame-id (get-in state [:viewer :pages page-id :frames index :id]) + selection (->> objects (filter #(= (:frame-id (second %)) frame-id)) (map first) diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index caa90ece3..bcec7a1b7 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -143,7 +143,7 @@ :dashboard-team-settings) [:* #_[:div.modal-wrapper - [:& app.main.ui.onboarding/release-notes-modal {:version "1.7"}]] + [:& app.main.ui.onboarding/release-notes-modal {:version "1.8"}]] [:& dashboard {:route route}]] :viewer diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 627f477ff..d25c4b0bf 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -19,6 +19,7 @@ [app.main.ui.releases.v1-5] [app.main.ui.releases.v1-6] [app.main.ui.releases.v1-7] + [app.main.ui.releases.v1-8] [app.util.i18n :as i18n :refer [tr]] [app.util.object :as obj] [app.util.router :as rt] @@ -297,5 +298,5 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "1.6"))) + (rc/render-release-notes (assoc params :version "1.8"))) diff --git a/frontend/src/app/main/ui/releases/v1_8.cljs b/frontend/src/app/main/ui/releases/v1_8.cljs new file mode 100644 index 000000000..7d88f71c1 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_8.cljs @@ -0,0 +1,108 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.releases.v1-8 + (:require + [app.main.ui.releases.common :as c] + [rumext.alpha :as mf])) + +(defmethod c/render-release-notes "1.8" + [{:keys [slide klass next finish navigate version]}] + (mf/html + (case @slide + :start + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.8"}]] + [:div.modal-right + [:div.modal-title + [:h2 "What's new?"]] + [:span.release "Alpha version " version] + [:div.modal-content + [:p "Penpot continues growing with new features that improve performance, user experience and visual design."] + [:p "We are happy to show you a sneak peak of the most important stuff that the Alpha 1.8 version brings."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"]]] + [:img.deco {:src "images/deco-left.png" :border "0"}] + [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]] + + 0 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/share-viewer.gif" :border "0" :alt "Share options and pages at view mode"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Share options and pages at view mode"]] + [:div.modal-content + [:p "Now you can navigate through prototype pages of the same file at the view mode."] + [:p "You can also create a shareable link deciding which pages will be available for the visitors. Sharing is caring!"]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 1 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/stroke-caps.gif" :border "0" :alt "Path stroke caps"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Path stroke caps"]] + [:div.modal-content + [:p "Ever needed an arrow to point something? Style the ends of any open paths."] + [:p "You can select different styles for each end of an open path: arrows, square, circle, diamond or just a round ending are the available options."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 2 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/navigate-history.gif" :border "0" :alt "Navigable history"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Navigable history"]] + [:div.modal-content + [:p "Click on a change of the history of a file to get the file to this very point without ctrl+z all the way."] + [:p "Quick and easy :)"]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 3 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/export-artboards.gif" :border "0" :alt "Export artboards PDF"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Export artboards PDF"]] + [:div.modal-content + [:p "If you have a presentation made at Penpot you might want to create a document that can be shared with anyone, regardless of having a Penpot account, or just to be able to use your presentation offline (essential for talks and classes)."] + [:p "Now you can easily export all the artboards of a page to a single pdf file."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]]))) diff --git a/frontend/src/app/main/ui/viewer/handoff.cljs b/frontend/src/app/main/ui/viewer/handoff.cljs index 1fa925678..f3cbeaa7b 100644 --- a/frontend/src/app/main/ui/viewer/handoff.cljs +++ b/frontend/src/app/main/ui/viewer/handoff.cljs @@ -51,8 +51,7 @@ (mf/use-effect (mf/deps (:id frame)) (fn [] - (st/emit! (dv/set-current-frame (:id frame)) - (dv/select-shape (:id frame))))) + (st/emit! (dv/select-shape (:id frame))))) [:* [:& left-sidebar {:frame frame diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs index c13617692..c7fa443ed 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs @@ -19,7 +19,7 @@ (def file-colors-ref - (l/derived (l/in [:viewer-data :file :colors]) st/state)) + (l/derived (l/in [:viewer :file :data :colors]) st/state)) (defn make-colors-library-ref [file-id] (let [get-library diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs index 9ed9c189d..e760b668f 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs @@ -22,7 +22,7 @@ (:content shape)) (def file-typographies-ref - (l/derived (l/in [:viewer-data :file :typographies]) st/state)) + (l/derived (l/in [:viewer :file :data :typographies]) st/state)) (defn make-typographies-library-ref [file-id] (let [get-library diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index d5eeb6379..15846eca9 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -49,7 +49,7 @@ (prepare-objects page frame)) wrapper (mf/use-memo - (mf/deps objects) + (mf/deps objects interactions?) #(shapes/frame-container-factory objects interactions?)) ;; Retrieve frame again with correct modifier @@ -77,16 +77,17 @@ (st/emit! (dcm/close-thread))))] (mf/use-effect - (fn [] - ;; bind with passive=false to allow the event to be cancelled - ;; https://stackoverflow.com/a/57582286/3219895 - (let [key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false}) - key2 (events/listen js/window "keydown" on-key-down) - key3 (events/listen js/window "click" on-click)] - (fn [] - (events/unlistenByKey key1) - (events/unlistenByKey key2) - (events/unlistenByKey key3))))) + (mf/deps local) ;; on-click event depends on local + (fn [] + ;; bind with passive=false to allow the event to be cancelled + ;; https://stackoverflow.com/a/57582286/3219895 + (let [key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false}) + key2 (events/listen js/window "keydown" on-key-down) + key3 (events/listen js/window "click" on-click)] + (fn [] + (events/unlistenByKey key1) + (events/unlistenByKey key2) + (events/unlistenByKey key3))))) [:svg {:view-box (:vbox size) :width (:width size)