diff --git a/frontend/resources/images/features/1.18-absolute.gif b/frontend/resources/images/features/1.18-absolute.gif new file mode 100644 index 000000000..7e74681b8 Binary files /dev/null and b/frontend/resources/images/features/1.18-absolute.gif differ diff --git a/frontend/resources/images/features/1.18-scale.gif b/frontend/resources/images/features/1.18-scale.gif new file mode 100644 index 000000000..29200f653 Binary files /dev/null and b/frontend/resources/images/features/1.18-scale.gif differ diff --git a/frontend/resources/images/features/1.18-spacing.gif b/frontend/resources/images/features/1.18-spacing.gif new file mode 100644 index 000000000..30127b941 Binary files /dev/null and b/frontend/resources/images/features/1.18-spacing.gif differ diff --git a/frontend/resources/images/features/1.18-z-index.gif b/frontend/resources/images/features/1.18-z-index.gif new file mode 100644 index 000000000..78d90699d Binary files /dev/null and b/frontend/resources/images/features/1.18-z-index.gif differ diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index 840b20c8c..a62b76a83 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -18,6 +18,7 @@ [app.main.ui.releases.v1-15] [app.main.ui.releases.v1-16] [app.main.ui.releases.v1-17] + [app.main.ui.releases.v1-18] [app.main.ui.releases.v1-4] [app.main.ui.releases.v1-5] [app.main.ui.releases.v1-6] @@ -87,4 +88,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "1.17"))) + (rc/render-release-notes (assoc params :version "1.18"))) diff --git a/frontend/src/app/main/ui/releases/v1_18.cljs b/frontend/src/app/main/ui/releases/v1_18.cljs new file mode 100644 index 000000000..22ae6b153 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_18.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-18 + (:require + [app.main.ui.releases.common :as c] + [rumext.v2 :as mf])) + +(defmethod c/render-release-notes "1.18" + [{: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/onboarding-version.jpg" :border "0" :alt "What's new release 1.18"}]] + [:div.modal-right + [:div.modal-title + [:h2 "What's new?"]] + [:span.release "Version " version] + [:div.modal-content + [:p "On this 1.18 release we make Flex Layout even more powerful with smart spacing, absolute position and z-index management."] + [:p "We also continued implementing accessibility improvements to make Penpot more inclusive and published stability and performance enhancements."]] + [: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.18-spacing.gif" :border "0" :alt "Spacing management"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Spacing management for Flex layoutFlex-Layout"]] + [:div.modal-content + [:p "Managing Flex Layout spacing is much more intuitive now. Visualize paddings, margins and gaps and drag to resize them."] + [:p "And not only that, when creating Flex layouts, the spacing is predicted, helping you to maintain your design composition."]] + [: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.18-absolute.gif" :border "0" :alt "Position absolute feature"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Absolute position elements in Flex layout"]] + [:div.modal-content + [:p "Sometimes you need to freely position an element in a specific place regardless of the size of the layout where it belongs."] + [:p "Now you can exclude elements from the Flex layout flow using absolute position."]] + [: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.18-z-index.gif" :border "0" :alt "Z-index feature"}]] + [:div.modal-right + [:div.modal-title + [:h2 "More on Flex layout: z-index"]] + [:div.modal-content + [:p "With the new z-index option you can decide the order of overlapping elements while maintaining the layers order."] + [:p "This is another capability that brings Penpot Flex layout even closer to the power of CSS standards."]] + [: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.18-scale.gif" :border "0" :alt "Scale content proportionally"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Scale content proportionally affects strokes, shadows, blurs and corners"]] + [:div.modal-content + [:p "Now you can resize your layers and groups preserving their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners."] + [:p "Activate the scale tool by pressing K and scale your elements, maintaining their visual aspect."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]])))