diff --git a/CHANGES.md b/CHANGES.md index 3bf7904ba6..9b3188c6ff 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -49,6 +49,7 @@ - Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578) - Add the ability to show login dialog on profile settings [Github #6871](https://github.com/penpot/penpot/pull/6871) - Improve the application of tokens with object specific tokens [Taiga #10209](https://tree.taiga.io/project/penpot/us/10209) +- Add info to apply-token event [Taiga #11710](https://tree.taiga.io/project/penpot/task/11710) ### :bug: Bugs fixed @@ -77,6 +78,7 @@ - Fix tooltip position after first time [Taiga #11688](https://tree.taiga.io/project/penpot/issue/11688) - Fix export button width on inspect tab [Taiga #11394](https://tree.taiga.io/project/penpot/issue/11394) - Fix stroke width token application [Taiga #11724](https://tree.taiga.io/project/penpot/issue/11724) +- Fix number token application on shape [Taiga #11331](https://tree.taiga.io/project/penpot/task/11331) ## 2.8.1 diff --git a/frontend/resources/images/features/2.9-font-size.gif b/frontend/resources/images/features/2.9-font-size.gif new file mode 100644 index 0000000000..08effe6bf2 Binary files /dev/null and b/frontend/resources/images/features/2.9-font-size.gif differ diff --git a/frontend/resources/images/features/2.9-overrides.gif b/frontend/resources/images/features/2.9-overrides.gif new file mode 100644 index 0000000000..93cfd6f377 Binary files /dev/null and b/frontend/resources/images/features/2.9-overrides.gif differ diff --git a/frontend/resources/images/features/2.9-qol.gif b/frontend/resources/images/features/2.9-qol.gif new file mode 100644 index 0000000000..46ccfc50e4 Binary files /dev/null and b/frontend/resources/images/features/2.9-qol.gif differ diff --git a/frontend/resources/images/features/2.9-slide-0.jpg b/frontend/resources/images/features/2.9-slide-0.jpg new file mode 100644 index 0000000000..88065072bc Binary files /dev/null and b/frontend/resources/images/features/2.9-slide-0.jpg differ diff --git a/frontend/src/app/main/data/event.cljs b/frontend/src/app/main/data/event.cljs index 21033b9cd9..86330acc77 100644 --- a/frontend/src/app/main/data/event.cljs +++ b/frontend/src/app/main/data/event.cljs @@ -79,14 +79,29 @@ (defprotocol Event (-data [_] "Get event data")) +(defn- coerce-to-string + [v] + (cond + (keyword? v) + (name v) + (string? v) + v + (nil? v) + nil + :else + (str v))) + +(def ^:private xf:coerce-to-string + (keep coerce-to-string)) + (defn- simplify-props "Removes complex data types from props." [data] (reduce-kv (fn [data k v] (cond (map? v) (assoc data k :placeholder/map) - (vector? v) (assoc data k :placeholder/vec) - (set? v) (assoc data k :placeholder/set) + (vector? v) (assoc data k (into [] xf:coerce-to-string v)) + (set? v) (assoc data k (into [] xf:coerce-to-string v)) (coll? v) (assoc data k :placeholder/coll) (fn? v) (assoc data k :placeholder/fn) (nil? v) (dissoc data k) diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index f6a44a8c56..02ea07b465 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -350,9 +350,12 @@ []) resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value]) - tokenized-attributes (cft/attributes-map attributes token)] + tokenized-attributes (cft/attributes-map attributes token) + type (:type token)] (rx/of - (st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"})) + (st/emit! (ev/event {::ev/name "apply-tokens" + :type type + :applyed-to attributes})) (dwu/start-undo-transaction undo-id) (dwsh/update-shapes shape-ids (fn [shape] (cond-> shape diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index 6c8f035c9c..e5a45d5def 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -35,6 +35,7 @@ [app.main.ui.releases.v2-6] [app.main.ui.releases.v2-7] [app.main.ui.releases.v2-8] + [app.main.ui.releases.v2-9] [app.util.object :as obj] [app.util.timers :as tm] [rumext.v2 :as mf])) @@ -99,4 +100,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "2.8"))) + (rc/render-release-notes (assoc params :version "2.9"))) diff --git a/frontend/src/app/main/ui/releases/v2_9.cljs b/frontend/src/app/main/ui/releases/v2_9.cljs new file mode 100644 index 0000000000..1341105941 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_9.cljs @@ -0,0 +1,142 @@ +;; 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.v2-9 + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.main.ui.releases.common :as c] + [rumext.v2 :as mf])) + +(defmethod c/render-release-notes "2.9" + [{:keys [slide klass next finish navigate version]}] + (mf/html + (case slide + :start + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.9-slide-0.jpg" + :class (stl/css :start-image) + :border "0" + :alt "Penpot 2.9 is here!"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "What’s new in Penpot?"] + + [:div {:class (stl/css :version-tag)} + (dm/str "Version " version)]] + + [:div {:class (stl/css :features-block)} + [:span {:class (stl/css :feature-title)} + "Penpot 2.9 is out!"] + + [:p {:class (stl/css :feature-content)} + "We're keeping the momentum going with another exciting round of improvements and features!"] + + [:p {:class (stl/css :feature-content)} + "This release brings major progress in Design Token management (including our very first typography tokens!), smarter text overrides for components, and a rich collection of quality-of-life enhancements."] + + [:p {:class (stl/css :feature-content)} + "Let’s dive in!"]] + + [:div {:class (stl/css :navigation)} + [:button {:class (stl/css :next-btn) + :on-click next} "Continue"]]]]]] + + 0 + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.9-font-size.gif" + :class (stl/css :start-image) + :border "0" + :alt "New typography token type"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "New typography token type"]] + + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "You can now define and manage font size tokens right from the Design Tokens panel. This is just the first of many typography token types to come. Font weight token is next!"] + + [:p {:class (stl/css :feature-content)} + "And there’s more progress on Tokens, including support for importing multiple token files via .zip, and smarter token visibility, only showing the relevant tokens for each layer type."]] + + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] + + 1 + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.9-overrides.gif" + :class (stl/css :start-image) + :border "0" + :alt "Component text overrides"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "Component text overrides"]] + + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "When overriding text inside components, you can now tweak and preserve individual properties like color, effects, font size or font weight."] + + [:p {:class (stl/css :feature-content)} + "Now you can confidently apply different tokens to copies of a component, knowing that their intended overrides will remain. This greatly improves consistency, predictability, and control when working with texts in components."]] + + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] + + 2 + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.9-qol.gif" + :class (stl/css :start-image) + :border "0" + :alt "Quality-of-life galore"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "Quality-of-life galore"]] + [:div {:class (stl/css :feature)} + + [:p {:class (stl/css :feature-content)} + "This release packs dozens of small yet impactful usability improvements, including enhanced UX writing (thanks to community contributions!), a new visual indicator for comments directly in the design space, a reorganized dashboard sidebar, improved text resizing behavior, and much more."] + + [:p {:class (stl/css :feature-content)} + "As always, we've squashed plenty of bugs and made underlying performance improvements to keep everything running smoothly."]] + + [:div {:class (stl/css :navigation)} + + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [:button {:on-click finish + :class (stl/css :next-btn)} "Let's go"]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss new file mode 100644 index 0000000000..dd1b81c82b --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_9.scss @@ -0,0 +1,102 @@ +// 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 + +@import "refactor/common-refactor.scss"; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-container { + display: grid; + grid-template-columns: $s-324 1fr; + height: $s-500; + width: $s-888; + border-radius: $br-8; + background-color: var(--modal-background-color); + border: $s-2 solid var(--modal-border-color); +} + +.start-image { + width: $s-324; + border-radius: $br-8 0 0 $br-8; +} + +.modal-content { + padding: $s-40; + display: grid; + grid-template-rows: auto 1fr $s-32; + gap: $s-24; + + a { + color: var(--button-primary-background-color-rest); + } +} + +.modal-header { + display: grid; + gap: $s-8; +} + +.version-tag { + @include flexCenter; + @include headlineSmallTypography; + height: $s-32; + width: $s-96; + background-color: var(--communication-tag-background-color); + color: var(--communication-tag-foreground-color); + border-radius: $br-8; +} + +.modal-title { + @include headlineLargeTypography; + color: var(--modal-title-foreground-color); +} + +.features-block { + display: flex; + flex-direction: column; + gap: $s-16; + width: $s-440; +} + +.feature { + display: flex; + flex-direction: column; + gap: $s-8; +} + +.feature-title { + @include bodyLargeTypography; + color: var(--modal-title-foreground-color); +} + +.feature-content { + @include bodyMediumTypography; + margin: 0; + color: var(--modal-text-foreground-color); +} + +.feature-list { + @include bodyMediumTypography; + color: var(--modal-text-foreground-color); + list-style: disc; + display: grid; + gap: $s-8; +} + +.navigation { + width: 100%; + display: grid; + grid-template-areas: "bullets button"; +} + +.next-btn { + @extend .button-primary; + width: $s-100; + justify-self: flex-end; + grid-area: button; +} diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index 462c63caf4..8b76a51e4d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -94,7 +94,7 @@ (mf/deps selected-shapes not-editing?) (fn [event token] (dom/stop-propagation event) - (when (and not-editing? (seq selected-shapes)) + (when (and not-editing? (seq selected-shapes) (not= (:type token) :number)) (st/emit! (dwta/toggle-token {:token token :shapes selected-shapes})))))] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs index 52d630bc80..7a7aafa682 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs @@ -126,7 +126,9 @@ base-title (dm/str "Token: " name "\n" (tr "workspace.tokens.original-value" value) "\n" - (tr "workspace.tokens.resolved-value" resolved-value))] + (tr "workspace.tokens.resolved-value" resolved-value) + (when (= (:type token) :number) + (dm/str "\n" (tr "workspace.tokens.more-options"))))] (cond ;; If there are errors, show the appropriate message diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 01b3dd4091..50d56fe35a 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -7609,6 +7609,10 @@ msgstr "Type '%s' is not supported (%s)\n" msgid "workspace.tokens.value-not-valid" msgstr "The value is not valid" +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.tokens.more-options" +msgstr "Right click to see options" + #: src/app/main/data/workspace/tokens/errors.cljs:61 msgid "workspace.tokens.value-with-units" msgstr "Invalid value: Units are not allowed." diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 0261ad00c2..6a7c630359 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -7502,6 +7502,10 @@ msgstr "El tipo '%s' no está soportado (%s)\n" msgid "workspace.tokens.value-not-valid" msgstr "El valor no es válido" +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.tokens.more-options" +msgstr "Click derecho para ver opciones" + #: src/app/main/data/workspace/tokens/errors.cljs:61 msgid "workspace.tokens.value-with-units" msgstr "Valor no válido: No se permiten unidades."