diff --git a/CHANGES.md b/CHANGES.md index 2ac85e15f..022d1f78d 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/resources/images/features/1.16-click-zoom.gif b/frontend/resources/images/features/1.16-click-zoom.gif new file mode 100644 index 000000000..038ccfac3 Binary files /dev/null and b/frontend/resources/images/features/1.16-click-zoom.gif differ diff --git a/frontend/resources/images/features/1.16-dashboard.gif b/frontend/resources/images/features/1.16-dashboard.gif new file mode 100644 index 000000000..e047d2237 Binary files /dev/null and b/frontend/resources/images/features/1.16-dashboard.gif differ diff --git a/frontend/resources/images/features/1.16-onboarding.gif b/frontend/resources/images/features/1.16-onboarding.gif new file mode 100644 index 000000000..43785fa72 Binary files /dev/null and b/frontend/resources/images/features/1.16-onboarding.gif differ diff --git a/frontend/resources/images/features/1.16-slider.gif b/frontend/resources/images/features/1.16-slider.gif new file mode 100644 index 000000000..0ca3283df Binary files /dev/null and b/frontend/resources/images/features/1.16-slider.gif differ diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index e78100a1a..5b1f41d93 100644 --- a/frontend/src/app/main/ui.cljs +++ b/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]] diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index 1db2254d1..dafc702d3 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/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"))) diff --git a/frontend/src/app/main/ui/releases/v1_16.cljs b/frontend/src/app/main/ui/releases/v1_16.cljs new file mode 100644 index 000000000..7502deaa1 --- /dev/null +++ b/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}]]]]]]))) diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs index 35124f6c6..6086efb9d 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs index 8326bbdb1..6ee6b3ddc 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 2d2be20f9..ee4110124 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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 diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 96c986604..a87d0cbac 100644 --- a/frontend/src/debug.cljs +++ b/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* #{}))