Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -12,10 +12,17 @@
 - Fix some texts and a typo [Taiga #4215](https://tree.taiga.io/project/penpot/issue/4215)
 - Fix twitter support account link [Taiga #4279](https://tree.taiga.io/project/penpot/issue/4279)
 
-
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)
 
+## 1.16.1-beta
+
+### :bug: Bugs fixed
+
+- Fix firefox changing layer color type is not applied [Taiga #4292](https://tree.taiga.io/project/penpot/issue/4292)
+- Fix justify alignes text left [Taiga #4322](https://tree.taiga.io/project/penpot/issue/4322)
+- Fix text out of borders with "auto width" and center align [Taiga #4308](https://tree.taiga.io/project/penpot/issue/4308)
+- Fix auto-width for texts can make text appear stretched [Github #2482](https://github.com/penpot/penpot/issues/2482)
 
 ## 1.16.0-beta
 
@@ -78,6 +85,8 @@
 - Fix copied & pasted layer is not visible [Taiga #4283](https://tree.taiga.io/project/penpot/issue/4283)
 - Fix notification to newsletter is shown in all cases [Taiga #4367](https://tree.taiga.io/project/penpot/issue/4367)
 - Fix comments section is not scrolling by mouse wheel [Taiga #4305](https://tree.taiga.io/project/penpot/issue/4305)
+- Fix justify alignes text left [Taiga #4322](https://tree.taiga.io/project/penpot/issue/4322)
+- Fix text out of borders with "auto width" and center align [Taiga #4308](https://tree.taiga.io/project/penpot/issue/4308)
 
 ## 1.15.4-beta
 

frontend/src/app/main/ui.cljs

@@ -76,6 +76,7 @@
 
        [:*
         #_[:div.modal-wrapper
+           #_[:& app.main.ui.releases/release-notes-modal {:version "1.16"}]
            #_[:& app.main.ui.onboarding/onboarding-templates-modal]
            #_[:& app.main.ui.onboarding/onboarding-modal]
            #_[:& app.main.ui.onboarding/onboarding-team-modal]]

frontend/src/app/main/ui/releases.cljs

@@ -16,6 +16,7 @@
    [app.main.ui.releases.v1-13]
    [app.main.ui.releases.v1-14]
    [app.main.ui.releases.v1-15]
+   [app.main.ui.releases.v1-16]
    [app.main.ui.releases.v1-4]
    [app.main.ui.releases.v1-5]
    [app.main.ui.releases.v1-6]
@@ -85,4 +86,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "1.15")))
+  (rc/render-release-notes (assoc params :version "1.16")))

frontend/src/app/main/ui/releases/v1_16.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) KALEIDOS INC
+
+(ns app.main.ui.releases.v1-16
+  (:require
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+(defmethod c/render-release-notes "1.16"
+  [{: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 Beta release 1.16"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "What's new?"]]
+         [:span.release "Beta version " version]
+         [:div.modal-content
+          [:p "Penpot continues to grow with new features that improve performance, user experience and visual design."]
+          [:p "We are happy to show you a sneak peek of the most important stuff that the Beta 1.16 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/1.16-dashboard.gif" :border "0" :alt "Dashboard refreshed look & feel"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "Dashboard refreshed look & feel"]]
+         [:div.modal-content
+          [:p "It’s been some time since we designed the project's dashboard and we felt that we could improve it in terms of accessibility, content hierarchy and aesthetics."]
+          [:p "We heard the users before refreshing the interface, simplifying it to give prominence to the content. And yes, now that you ask, the dark theme is coming soon."]]
+         [: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/1.16-slider.gif" :border "0" :alt "Libraries & templates module"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "Libraries & templates module"]]
+         [:div.modal-content
+          [:p "This new module will allow you to import a curated selection of the files that are available at the Libraries & Templates page directly from your projects dashboard."] 
+          [:p "You no longer need to to download most of them to the computer before importing."]]
+         [: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/1.16-onboarding.gif" :border "0" :alt "Improved onboarding"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "Improved onboarding"]]
+         [:div.modal-content
+          [:p "We’ve done a ton of improvements to the onboarding experience."]
+          [:p "More relevant info and better explanations, a refined new team and invitation flow, a beginners tutorial and a walkthrough file that will help newcomers learn how to use and start designing with Penpot faster."]]
+         [: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/1.16-click-zoom.gif" :border "0" :alt "Zoom to shape with double click"}]]
+        [:div.modal-right
+         [:div.modal-title
+          [:h2 "Zoom to shape with double click"]]
+         [:div.modal-content
+          [:p "The devil is in the details. At the layers panel, double clicking to the icon of a layer will zoom to it, making the layers navigation and selection easier."]
+          [:p "This was a contribution by our community member @andrewzhurov <3"]]
+         [:div.modal-navigation
+          [:button.btn-secondary {:on-click finish} "Start!"]
+          [:& c/navigation-bullets
+           {:slide @slide
+            :navigate navigate
+            :total 4}]]]]]])))

frontend/src/app/main/ui/shapes/text/svg_text.cljs

@@ -94,6 +94,8 @@
               props (-> #js {:key (dm/str "text-" (:id shape) "-" index)
                              :x (if rtl? (+ (:x data) (:width data)) (:x data))
                              :y (- (:y data) (:height data))
+                             :textLength (:width data)
+                             :lengthAdjust "spacingAndGlyphs"
                              :transform (position-data-transform shape data)
                              :alignmentBaseline alignment-bl
                              :dominantBaseline dominant-bl

frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs

@@ -189,16 +189,12 @@
                 (some? editor-state)
                 (update-with-editor-state editor-state))
 
-        ;; When we have a text with grow-type :auto-height we need to check the correct height
+        ;; When we have a text with grow-type :auto-height or :auto-height we need to check the correct height
         ;; otherwise the center alignment will break
-        shape
-        (if (or (not= :auto-height (:grow-type shape)) (empty? text-modifier))
-          shape
-          (let [tr-shape (dwt/apply-text-modifier shape text-modifier)]
-            (cond-> shape
-              ;; we only change the height otherwise could cause problems with the other fields
-              (some? text-modifier)
-              (assoc  :height (:height tr-shape)))))
+        tr-shape (when text-modifier (dwt/apply-text-modifier shape text-modifier))
+        shape (cond-> shape
+                (and (some? text-modifier) (#{:auto-height :auto-width} (:grow-type shape)))
+                (assoc :width (:width tr-shape) :height (:height tr-shape)))
 
         shape (hooks/use-equal-memo shape)
 

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -240,6 +240,13 @@
       (when (debug? :show-export-metadata)
         [:& use/export-page {:options options}])
 
+      ;; We need a "real" background shape so layer transforms work properly in firefox
+      [:rect {:width (:width vbox 0)
+              :height (:height vbox 0)
+              :x (:x vbox 0)
+              :y (:y vbox 0)
+              :fill background}]
+
       [:& (mf/provider use/include-metadata-ctx) {:value (debug? :show-export-metadata)}
        [:& (mf/provider embed/context) {:value true}
         ;; Render root shape

frontend/src/debug.cljs

@@ -74,7 +74,7 @@
   #{:app.main.data.workspace.notifications/handle-pointer-update
     :app.main.data.workspace.selection/change-hover-state})
 
-(defonce ^:dynamic *debug* (atom #{#_:events}))
+(defonce ^:dynamic *debug* (atom #{#_:events #_:text-outline}))
 
 (defn debug-all! [] (reset! *debug* debug-options))
 (defn debug-none! [] (reset! *debug* #{}))