Merge branch 'staging' into develop

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%;
       }
     }
   }

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)

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

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")))
 

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}]]]]]])))

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

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

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

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)