mirror of
https://github.com/penpot/penpot.git
synced 2026-08-28 07:38:42 +00:00
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>
116 lines
4.5 KiB
Clojure
116 lines
4.5 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.v2-3
|
||
(: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]))
|
||
|
||
;; TODO: Review all copies and alt text
|
||
(defmethod c/render-release-notes "2.3"
|
||
[{: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.3-slide-0.png"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "A graphic illustration with Penpot style"}]
|
||
|
||
[: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 can now be extended by using Plugins!"]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"The introduction of our brand new Plugin system allows you to access even richer ecosystem of capabilities."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"We are beyond excited about how this will further involve the Penpot community in building the best design and prototyping platform."]
|
||
|
||
[: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.3-img-slide-1.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "Build Plugins to enhance your workflow"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"Build Plugins and enhance your workflow"]]
|
||
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Penpot Plugins encourage developers to easily customize and expand the platform using standard web technologies like JavaScript, CSS, and HTML."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Find everything you need in our full comprehensive documentation to start building your plugins now!"]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 2}]
|
||
|
||
[: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.3-img-slide-2.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "Plugins are safe and extremely easy to use"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"Plugins are safe and extremely easy to use"]]
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Penpot plugins are quite easy to install."]
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Be sure to keep an eye on our evolving " [:a {:href "https://penpot.app/penpothub" :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 2}]
|
||
|
||
[:button {:on-click finish
|
||
:class (stl/css :next-btn)} "Let's go"]]]]]])))
|
||
|