diff --git a/frontend/resources/images/features/2.3-img-slide-1.gif b/frontend/resources/images/features/2.3-img-slide-1.gif new file mode 100644 index 000000000..9eea1236f Binary files /dev/null and b/frontend/resources/images/features/2.3-img-slide-1.gif differ diff --git a/frontend/resources/images/features/2.3-img-slide-2.gif b/frontend/resources/images/features/2.3-img-slide-2.gif new file mode 100644 index 000000000..200fa5f32 Binary files /dev/null and b/frontend/resources/images/features/2.3-img-slide-2.gif differ diff --git a/frontend/resources/images/features/2.3-slide-0.png b/frontend/resources/images/features/2.3-slide-0.png new file mode 100644 index 000000000..b1db57f33 Binary files /dev/null and b/frontend/resources/images/features/2.3-slide-0.png differ diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 9de71e8e2..1294bbe8e 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -105,7 +105,7 @@ :dashboard-team-webhooks :dashboard-team-settings) [:? - #_[:& app.main.ui.releases/release-notes-modal {:version "1.19"}] + #_[:& app.main.ui.releases/release-notes-modal {:version "2.3"}] #_[:& app.main.ui.onboarding/onboarding-templates-modal] #_[:& app.main.ui.onboarding/onboarding-modal] #_[:& app.main.ui.onboarding.team-choice/onboarding-team-modal] diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index 3337e468d..d07f2d95f 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -29,6 +29,7 @@ [app.main.ui.releases.v2-0] [app.main.ui.releases.v2-1] [app.main.ui.releases.v2-2] + [app.main.ui.releases.v2-3] [app.util.object :as obj] [app.util.timers :as tm] [rumext.v2 :as mf])) diff --git a/frontend/src/app/main/ui/releases/v2_3.cljs b/frontend/src/app/main/ui/releases/v2_3.cljs new file mode 100644 index 000000000..4d3789a10 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_3.cljs @@ -0,0 +1,115 @@ +;; 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 excitement 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 ouor 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 <3."]] + + [: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"]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss new file mode 100644 index 000000000..dd1b81c82 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_3.scss @@ -0,0 +1,102 @@ +// 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 + +@import "refactor/common-refactor.scss"; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-container { + display: grid; + grid-template-columns: $s-324 1fr; + height: $s-500; + width: $s-888; + border-radius: $br-8; + background-color: var(--modal-background-color); + border: $s-2 solid var(--modal-border-color); +} + +.start-image { + width: $s-324; + border-radius: $br-8 0 0 $br-8; +} + +.modal-content { + padding: $s-40; + display: grid; + grid-template-rows: auto 1fr $s-32; + gap: $s-24; + + a { + color: var(--button-primary-background-color-rest); + } +} + +.modal-header { + display: grid; + gap: $s-8; +} + +.version-tag { + @include flexCenter; + @include headlineSmallTypography; + height: $s-32; + width: $s-96; + background-color: var(--communication-tag-background-color); + color: var(--communication-tag-foreground-color); + border-radius: $br-8; +} + +.modal-title { + @include headlineLargeTypography; + color: var(--modal-title-foreground-color); +} + +.features-block { + display: flex; + flex-direction: column; + gap: $s-16; + width: $s-440; +} + +.feature { + display: flex; + flex-direction: column; + gap: $s-8; +} + +.feature-title { + @include bodyLargeTypography; + color: var(--modal-title-foreground-color); +} + +.feature-content { + @include bodyMediumTypography; + margin: 0; + color: var(--modal-text-foreground-color); +} + +.feature-list { + @include bodyMediumTypography; + color: var(--modal-text-foreground-color); + list-style: disc; + display: grid; + gap: $s-8; +} + +.navigation { + width: 100%; + display: grid; + grid-template-areas: "bullets button"; +} + +.next-btn { + @extend .button-primary; + width: $s-100; + justify-self: flex-end; + grid-area: button; +}