diff --git a/backend/src/app/rpc/commands/files_snapshot.clj b/backend/src/app/rpc/commands/files_snapshot.clj index f470e5135..43e3f1c95 100644 --- a/backend/src/app/rpc/commands/files_snapshot.clj +++ b/backend/src/app/rpc/commands/files_snapshot.clj @@ -28,13 +28,19 @@ [cuerdas.core :as str])) (def sql:get-file-snapshots - "SELECT id, label, revn, created_at, created_by, profile_id - FROM file_change - WHERE file_id = ? - AND data IS NOT NULL - AND (deleted_at IS NULL OR deleted_at > now()) - ORDER BY created_at DESC - LIMIT 20") + "WITH changes AS ( + SELECT id, label, revn, created_at, created_by, profile_id + FROM file_change + WHERE file_id = ? + AND data IS NOT NULL + AND (deleted_at IS NULL OR deleted_at > now()) + ), versions AS ( + (SELECT * FROM changes WHERE created_by = 'system' LIMIT 1000) + UNION ALL + (SELECT * FROM changes WHERE created_by != 'system' LIMIT 1000) + ) + SELECT * FROM versions + ORDER BY created_at DESC;") (defn get-file-snapshots [conn file-id] diff --git a/docs/img/styling/blend-opacity.webp b/docs/img/styling/blend-opacity.webp new file mode 100644 index 000000000..4a2a3d4eb Binary files /dev/null and b/docs/img/styling/blend-opacity.webp differ diff --git a/docs/user-guide/introduction/shortcuts.njk b/docs/user-guide/introduction/shortcuts.njk index 61644e32a..cfc2b5acf 100644 --- a/docs/user-guide/introduction/shortcuts.njk +++ b/docs/user-guide/introduction/shortcuts.njk @@ -429,11 +429,6 @@ title: Shortcuts AltP ⌥P - - History - AltH - ⌥H - Layers AltL diff --git a/docs/user-guide/styling/index.njk b/docs/user-guide/styling/index.njk index 4da6ff2d3..f59373839 100644 --- a/docs/user-guide/styling/index.njk +++ b/docs/user-guide/styling/index.njk @@ -155,4 +155,30 @@ title: 06· Styling - \ No newline at end of file + + +

Opacity and blend

+

Set the overal opacity for layers and their blend mode.

+

Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.

+
+ Layer blend and opacity +
+

Blend options available:

+ \ No newline at end of file diff --git a/frontend/resources/images/features/2.4-format.gif b/frontend/resources/images/features/2.4-format.gif new file mode 100644 index 000000000..2d8139ad1 Binary files /dev/null and b/frontend/resources/images/features/2.4-format.gif differ diff --git a/frontend/resources/images/features/2.4-history.gif b/frontend/resources/images/features/2.4-history.gif new file mode 100644 index 000000000..8ce09dd4b Binary files /dev/null and b/frontend/resources/images/features/2.4-history.gif differ diff --git a/frontend/resources/images/features/2.4-slide-0.jpg b/frontend/resources/images/features/2.4-slide-0.jpg new file mode 100644 index 000000000..ae439a146 Binary files /dev/null and b/frontend/resources/images/features/2.4-slide-0.jpg differ diff --git a/frontend/resources/images/features/2.4-viewer.gif b/frontend/resources/images/features/2.4-viewer.gif new file mode 100644 index 000000000..b194f12ea Binary files /dev/null and b/frontend/resources/images/features/2.4-viewer.gif differ diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index ab1c753f5..7fef9a6f4 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -213,7 +213,7 @@ search-term (some-> params :search-term) plugin-url (some-> params :plugin)] [:? - #_[:& app.main.ui.releases/release-notes-modal {:version "2.3"}] + #_[:& app.main.ui.releases/release-notes-modal {:version "2.4"}] #_[:& 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 aa03e0754..da769523d 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -30,6 +30,7 @@ [app.main.ui.releases.v2-1] [app.main.ui.releases.v2-2] [app.main.ui.releases.v2-3] + [app.main.ui.releases.v2-4] [app.util.object :as obj] [app.util.timers :as tm] [rumext.v2 :as mf])) @@ -94,4 +95,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "2.2"))) + (rc/render-release-notes (assoc params :version "2.4"))) diff --git a/frontend/src/app/main/ui/releases/v2_4.cljs b/frontend/src/app/main/ui/releases/v2_4.cljs new file mode 100644 index 000000000..1559911a4 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_4.cljs @@ -0,0 +1,141 @@ +;; 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-4 + (: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.4" + [{: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.4-slide-0.jpg" + :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)} + "At Penpot we are at full speed!"] + + [:p {:class (stl/css :feature-content)} + "With the release of the long-awaited Plugins System still fresh, this 2.4 brings improvements in a wide range of areas that will serve a variety of use cases."] + + [:p {:class (stl/css :feature-content)} + "This release combines some of the most requested features—such as versioning and the viewer-only role—with performance improvements and a new .penpot format that will streamline the export of files and assets."] + + [: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.4-viewer.gif" + :class (stl/css :start-image) + :border "0" + :alt "Viewer role, designed to enhance collaboration"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "Viewer role, designed to enhance collaboration"]] + + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "Collaboration takes many forms, and sometimes the risk of making unwanted or accidental adjustments can be a barrier to engaging with a design file."] + + [:p {:class (stl/css :feature-content)} + "Now, you can invite members to your teams who only need to view and comment on files. Team members, stakeholders, developers… pick your case. Anyone who doesn't need to edit can participate confidently."]] + + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [: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.4-history.gif" + :class (stl/css :start-image) + :border "0" + :alt "A timeline for your design process"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "A timeline for your design process"]] + + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "Version History allows you to save different stages of your design process, so you can revisit them whenever needed."] + + [:p {:class (stl/css :feature-content)} + "Some versions are saved automatically, serving as an invaluable emergency backup. Additionally, you can manually save versions, giving you full control over the timeline associated with a file. This way, you can always restore specific versions that you've intentionally saved."]] + + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [: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.4-format.gif" + :class (stl/css :start-image) + :border "0" + :alt "New export format: fast and open"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "New export format: fast and open"]] + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "The new .penpot format will streamline the import and export of files and assets by being more efficient and interoperable."] + [:p {:class (stl/css :feature-content)} + "This format replaces the previous two—so no more choosing between them or accidentally picking the wrong one! It's better for both scenarios: if you just need to import or export files quickly, it’ll be a bit faster. And if you want to extract data (like a list of color assets), this new format is much easier to read."]] + + [:div {:class (stl/css :navigation)} + + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [:button {:on-click finish + :class (stl/css :next-btn)} "Let's go"]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss new file mode 100644 index 000000000..dd1b81c82 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_4.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; +}