diff --git a/frontend/resources/images/features/1.17-ally.gif b/frontend/resources/images/features/1.17-ally.gif new file mode 100644 index 000000000..05a408152 Binary files /dev/null and b/frontend/resources/images/features/1.17-ally.gif differ diff --git a/frontend/resources/images/features/1.17-flex-layout.gif b/frontend/resources/images/features/1.17-flex-layout.gif new file mode 100644 index 000000000..3cceaaddb Binary files /dev/null and b/frontend/resources/images/features/1.17-flex-layout.gif differ diff --git a/frontend/resources/images/features/1.17-inspect.gif b/frontend/resources/images/features/1.17-inspect.gif new file mode 100644 index 000000000..1dde7b296 Binary files /dev/null and b/frontend/resources/images/features/1.17-inspect.gif differ diff --git a/frontend/resources/images/features/1.17-webhook.gif b/frontend/resources/images/features/1.17-webhook.gif new file mode 100644 index 000000000..01b67d6c3 Binary files /dev/null and b/frontend/resources/images/features/1.17-webhook.gif differ diff --git a/frontend/resources/images/onboarding-version.jpg b/frontend/resources/images/onboarding-version.jpg new file mode 100644 index 000000000..de77659ad Binary files /dev/null and b/frontend/resources/images/onboarding-version.jpg differ diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 026deb7cf..404ebd4bd 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1195,9 +1195,10 @@ } &.right { - left: 731px; - top: 100px; + left: auto; color: $color-primary; + top: 100px; + right: -40px; } &.square { diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index dafc702d3..840b20c8c 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -17,6 +17,7 @@ [app.main.ui.releases.v1-14] [app.main.ui.releases.v1-15] [app.main.ui.releases.v1-16] + [app.main.ui.releases.v1-17] [app.main.ui.releases.v1-4] [app.main.ui.releases.v1-5] [app.main.ui.releases.v1-6] @@ -86,4 +87,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "1.16"))) + (rc/render-release-notes (assoc params :version "1.17"))) diff --git a/frontend/src/app/main/ui/releases/v1_17.cljs b/frontend/src/app/main/ui/releases/v1_17.cljs new file mode 100644 index 000000000..48910fe76 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_17.cljs @@ -0,0 +1,108 @@ +;; 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 "Penpot continues to grow with new features that improve performance, user experience and visual design."] + [:p "We are happy to show you a sneak peek of the most important stuff that the 1.17 version brings."]] + [: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}]]]]]])))