Merge remote-tracking branch 'origin/staging' into develop

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]

docs/user-guide/introduction/shortcuts.njk

@@ -429,11 +429,6 @@ title: Shortcuts
       <td style="text-align: center;"><kbd>Alt</kbd><kbd>P</kbd></td>
       <td style="text-align: center;"><kbd>⌥</kbd><kbd>P</kbd></td>
     </tr>
-    <tr>
-      <td>History</td>
-      <td style="text-align: center;"><kbd>Alt</kbd><kbd>H</kbd></td>
-      <td style="text-align: center;"><kbd>⌥</kbd><kbd>H</kbd></td>
-    </tr>
     <tr>
       <td>Layers</td>
       <td style="text-align: center;"><kbd>Alt</kbd><kbd>L</kbd></td>

docs/user-guide/styling/index.njk

@@ -155,4 +155,30 @@ title: 06· Styling
   <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
     <source src="/img/styling/blur.mp4" type="video/mp4">
   </video>
-</figure>
+</figure>
+
+<h2 id="blend">Opacity and blend</h2>
+<p>Set the overal opacity for layers and their blend mode.</p> 
+<p>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.</p>
+<figure>
+  <img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
+</figure>
+<p>Blend options available:</p>
+<ul>
+  <li><strong>Normal</strong></li>
+  <li><strong>Darken</strong></li>
+  <li><strong>Multiply</strong></li>
+  <li><strong>Color burn</strong></li>
+  <li><strong>Lighten</strong></li>
+  <li><strong>Screen</strong></li>
+  <li><strong>Color dodge</strong></li>
+  <li><strong>Overlay</strong></li>
+  <li><strong>Soft light</strong></li>
+  <li><strong>Hard light</strong></li>
+  <li><strong>Difference</strong></li>
+  <li><strong>Exclusion</strong></li>
+  <li><strong>Hue</strong></li>
+  <li><strong>Saturation</strong></li>
+  <li><strong>Color</strong></li>
+  <li><strong>Luminosity</strong></li>
+</ul>

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]

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")))

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"]]]]]])))
+

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;
+}