mirror of
https://github.com/penpot/penpot.git
synced 2026-08-30 16:48:59 +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>
204 lines
8.1 KiB
Clojure
204 lines
8.1 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-0
|
||
(: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.0"
|
||
[{: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.0-intro-image.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)}
|
||
"Welcome to Penpot 2.0! "]
|
||
|
||
[:div {:class (stl/css :version-tag)}
|
||
(dm/str "Version " version)]]
|
||
|
||
[:div {:class (stl/css :features-block)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
[:spam {:class (stl/css :feature-title)}
|
||
"CSS Grid Layout: "]
|
||
"Bring your designs to life, knowing that what you create is what developers code."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
[:spam {:class (stl/css :feature-title)}
|
||
"Sleeker UI: "]
|
||
"We’ve polished Penpot to make your experience smoother and more enjoyable."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
[:spam {:class (stl/css :feature-title)}
|
||
"New Components System: "]
|
||
"Managing and using your design components got a whole lot better."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"And that’s not all - we’ve fined tuned performance and "
|
||
"accessibility to give you a better and more fluid design experience."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
" Ready to dive in? Let 's get started!"]]
|
||
|
||
[: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.0-css-grid.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "Penpot's CSS Grid Layout"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"CSS Grid Layout - Design Meets Development"]]
|
||
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"The much-awaited Grid Layout introduces 2-dimensional"
|
||
" layout capabilities to Penpot, allowing for the creation"
|
||
" of adaptive layouts by leveraging the power of CSS properties."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"It’s a host of new features, including columns and"
|
||
" rows management, flexible units such as FR (fractions),"
|
||
" the ability to create and name areas, and tons of new "
|
||
"and unique possibilities within a design tool."]
|
||
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Designers will learn CSS basics while working, "
|
||
"and as always with Penpot, developers can pick"
|
||
" up the design as code to take it from there."]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 4}]
|
||
|
||
[: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.0-new-ui.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "Penpot's UI Makeover"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"UI Makeover - Smoother, Sharper, and Simply More Fun"]]
|
||
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"We've completely overhauled Penpot's user interface. "
|
||
"The improvements in consistency, the introduction of "
|
||
"new microinteractions, and attention to countless details"
|
||
" will significantly enhance the productivity and enjoyment of using Penpot."]
|
||
[:p {:class (stl/css :feature-content)}
|
||
"Furthermore, we’ve made several accessibility improvements, "
|
||
"with better color contrast, keyboard navigation,"
|
||
" and adherence to other best practices."]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 4}]
|
||
|
||
[: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.0-components.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt "Penpot's new components system"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"New Components System"]]
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"The new Penpot components system improves"
|
||
" control over instances, including their "
|
||
"inheritances and properties overrides. "
|
||
"Main components are now accessible as design"
|
||
" elements, allowing a better updating "
|
||
"workflow through instant changes synchronization."]
|
||
[:p {:class (stl/css :feature-content)}
|
||
"And that’s not all, there are new capabilities "
|
||
"such as component swapping and annotations "
|
||
"that will help you to better manage your design systems."]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 4}]
|
||
|
||
[:button {:on-click next
|
||
:class (stl/css :next-btn)} "Continue"]]]]]]
|
||
|
||
3
|
||
[:div {:class (stl/css-case :modal-overlay true)}
|
||
[:div.animated {:class klass}
|
||
[:div {:class (stl/css :modal-container)}
|
||
[:img {:src "images/features/2.0-html.gif"
|
||
:class (stl/css :start-image)
|
||
:border "0"
|
||
:alt " Penpot's HTML code generator"}]
|
||
|
||
[:div {:class (stl/css :modal-content)}
|
||
[:div {:class (stl/css :modal-header)}
|
||
[:h1 {:class (stl/css :modal-title)}
|
||
"And much more"]]
|
||
[:div {:class (stl/css :feature)}
|
||
[:p {:class (stl/css :feature-content)}
|
||
"In addition to all of this, we’ve included several other requested improvements:"]
|
||
[:ul {:class (stl/css :feature-list)}
|
||
[:li "Access HTML markup code directly in inspect mode"]
|
||
[:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"]
|
||
[:li "Enjoy new color themes with options for both dark and light modes"]
|
||
[:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]]
|
||
|
||
[:div {:class (stl/css :navigation)}
|
||
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 4}]
|
||
|
||
[:button {:on-click finish
|
||
:class (stl/css :next-btn)} "Let's go"]]]]]])))
|
||
|