mirror of
https://github.com/penpot/penpot.git
synced 2026-08-31 17:19:11 +00:00
76c1b9afab
Step toward issue #9260 (incremental migration of legacy UI components to the modern `*`-suffixed syntax, removing the per-render JS-to-Clojure props conversion overhead). Component --------- `app.main.ui.releases.common/navigation-bullets` is a small (7-line) self-contained presentational component used by every release-notes modal to render the slide-progress dots. It already used standard keyword destructuring (`[{:keys [slide navigate total]}]`), had no `?`-suffixed props, no `unchecked-get`, no `obj/merge!`, no `::mf/wrap-props false`, and (importantly) no `::mf/register`, so it satisfies the migration pre-flight checks unchanged. Changes ------- - `releases/common.cljs` — definition renamed to `navigation-bullets*`. Body, props and metadata are otherwise unchanged. - `releases/v1_4.cljs` … `v2_15.cljs` (29 files) — every existing call site `[:& c/navigation-bullets {…}]` becomes `[:> c/navigation-bullets* {…}]`. The `:slide`, `:navigate`, `:total` props are passed exactly as before. The `:as c` alias of the require is unchanged, so no require edits are needed. No props were renamed (none ended in `?`); no helpers had to be swapped for `mf/spread-props` / `mf/props` (callers pass plain literal maps); no metadata had to be removed (none of the legacy options were in use). Github #9260 Signed-off-by: FairyPigDev <luislee3108@gmail.com>
109 lines
4.8 KiB
Clojure
109 lines
4.8 KiB
Clojure
;; 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 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}]]]]]])))
|