mirror of
https://github.com/penpot/penpot.git
synced 2026-08-28 23:59:00 +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
5.0 KiB
Clojure
109 lines
5.0 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-17
|
||
(:require
|
||
[app.main.ui.releases.common :as c]
|
||
[rumext.v2 :as mf]))
|
||
|
||
(defmethod c/render-release-notes "1.17"
|
||
[{: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.17"}]]
|
||
[:div.modal-right
|
||
[:div.modal-title
|
||
[:h2 "What's new?"]]
|
||
[:span.release "Version " version]
|
||
[:div.modal-content
|
||
[:p "This is the first release in which Penpot is no longer Beta (hooray!) and it comes with very special features, starring the long awaited Flex Layout."]
|
||
[:p "On this 1.17 release, you’ll also be able to inspect the code and properties of your designs right from the workspace and to manage webhooks. We’ve also implemented a lot of accessibility improvements."]]
|
||
[: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.17-flex-layout.gif" :border "0" :alt "Flex-Layout"}]]
|
||
[:div.modal-right
|
||
[:div.modal-title
|
||
[:h2 "Flex-Layout"]]
|
||
[:div.modal-content
|
||
[:p "The Flex Layout allows you to automatically adapt your designs. Resize, fit, and fill content and containers without the need to do it manually."]
|
||
[:p "Penpot brings a layout system like no other. As described by one of our beta testers: 'I love the fact that Penpot is following the CSS FlexBox, which is making UI Design a step closer to the logic and behavior behind how things will be actually built after design.'"]]
|
||
[: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.17-inspect.gif" :border "0" :alt "Inspect at the workspace"}]]
|
||
[:div.modal-right
|
||
[:div.modal-title
|
||
[:h2 "Inspect at the workspace"]]
|
||
[:div.modal-content
|
||
[:p "Now you can inspect designs to get measures, properties and production-ready code right at the workspace, so designers and developers can share the same space while working."]
|
||
[:p "Also, inspect mode provides a safer view-only mode and other improvements."]]
|
||
[: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.17-webhook.gif" :border "0" :alt "Webhooks"}]]
|
||
[:div.modal-right
|
||
[:div.modal-title
|
||
[:h2 "Webhooks"]]
|
||
[:div.modal-content
|
||
[:p "Webhooks allow other websites and apps to be notified when certain events happen at Penpot, ensuring to create integrations with other services."]
|
||
[:p "While we are still working on a plugin system, this is a great and simple way to create integrations with other services."]]
|
||
[: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.17-ally.gif" :border "0" :alt "Accessibility improvements"}]]
|
||
[:div.modal-right
|
||
[:div.modal-title
|
||
[:h2 "Accessibility improvements"]]
|
||
[:div.modal-content
|
||
[:p "We're working to ensure that people with visual or physical impairments can use Penpot in the same conditions."]
|
||
[:p "This release comes with improvements on color contrasts, alt texts, semantic labels, focusable items and keyboard navigation at login and dashboard, but more will come."]]
|
||
[:div.modal-navigation
|
||
[:button.btn-secondary {:on-click finish} "Start!"]
|
||
[:> c/navigation-bullets*
|
||
{:slide slide
|
||
:navigate navigate
|
||
:total 4}]]]]]])))
|