Merge remote-tracking branch 'origin/staging'

CHANGES.md

@@ -24,6 +24,7 @@
 
 ### :sparkles: New features
 
+- Add some cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
 - Allow for nested and rotated boards inside other boards and groups [Taiga #2874](https://tree.taiga.io/project/penpot/us/2874?milestone=319982)
 - View mode improvements to enable access and use in different conditions [Taiga #3023](https://tree.taiga.io/project/penpot/us/3023)
 - Improved share link options. Now you can allow non-team members to comment and/or inspect [Taiga #3056] (https://tree.taiga.io/project/penpot/us/3056)

backend/src/app/rpc/commands/comments.clj

@@ -496,16 +496,14 @@
 ;; --- COMMAND: Update comment thread position
 
 (s/def ::update-comment-thread-position
-  (s/keys :req-un [::profile-id ::id ::position ::frame-id]))
+  (s/keys :req-un [::profile-id ::id ::position ::frame-id ::share-id]))
 
 (sv/defmethod ::update-comment-thread-position
   {::doc/added "1.15"}
-  [{:keys [pool] :as cfg} {:keys [profile-id id position frame-id] :as params}]
+  [{:keys [pool] :as cfg} {:keys [profile-id id position frame-id share-id] :as params}]
   (db/with-atomic [conn pool]
     (let [thread (db/get-by-id conn :comment-thread id {:for-update true})]
-      (when-not (= (:owner-id thread) profile-id)
+      (files/check-comment-permissions! conn profile-id (:file-id thread) share-id)
-        (ex/raise :type :validation
-                  :code :not-allowed))
       (db/update! conn :comment-thread
                   {:modified-at (dt/now)
                    :position (db/pgpoint position)
@@ -516,16 +514,14 @@
 ;; --- COMMAND: Update comment frame
 
 (s/def ::update-comment-thread-frame
-  (s/keys :req-un [::profile-id ::id ::frame-id]))
+  (s/keys :req-un [::profile-id ::id ::frame-id ::share-id]))
 
 (sv/defmethod ::update-comment-thread-frame
   {::doc/added "1.15"}
-  [{:keys [pool] :as cfg} {:keys [profile-id id frame-id] :as params}]
+  [{:keys [pool] :as cfg} {:keys [profile-id id frame-id share-id] :as params}]
   (db/with-atomic [conn pool]
     (let [thread (db/get-by-id conn :comment-thread id {:for-update true})]
-      (when-not (= (:owner-id thread) profile-id)
+      (files/check-comment-permissions! conn profile-id (:file-id thread) share-id)
-        (ex/raise :type :validation
-                  :code :not-allowed))
       (db/update! conn :comment-thread
                   {:modified-at (dt/now)
                    :frame-id frame-id}

docker/devenv/Dockerfile

@@ -3,7 +3,7 @@ LABEL maintainer="Andrey Antukh <niwi@niwi.nz>"
 
 ARG DEBIAN_FRONTEND=noninteractive
 
-ENV NODE_VERSION=v16.16.0 \
+ENV NODE_VERSION=v16.17.0 \
     CLOJURE_VERSION=1.11.1.1149 \
     CLJKONDO_VERSION=2022.06.22 \
     BABASHKA_VERSION=0.8.156 \

docker/images/Dockerfile.exporter

@@ -5,7 +5,7 @@ ARG DEBIAN_FRONTEND=noninteractive
 
 ENV LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8 \
-    NODE_VERSION=v16.15.1
+    NODE_VERSION=v16.17.0
 
 RUN set -ex; \
     mkdir -p /etc/resolvconf/resolv.conf.d; \

docker/images/files/config.js

@@ -1,13 +1,2 @@
 // Frontend configuration
-
-//var penpotPublicURI = "https://penpot.example.com";
-//var penpotDemoWarning = <true|false>;
-//var penpotAllowDemoUsers = <true|false>;
-//var penpotGoogleClientID = "<google-client-id-here>";
-//var penpotGitlabClientID = "<gitlab-client-id-here>";
-//var penpotGithubClientID = "<github-client-id-here>";
-//var penpotOIDCClientID = "<oidc-client-id-here>";
-//var penpotLoginWithLDAP = <true|false>;
-//var penpotRegistrationEnabled = <true|false>;
-//var penpotAnalyticsEnabled = <true|false>;
 //var penpotFlags = "";

frontend/resources/styles/main/layouts/handoff.scss

@@ -19,14 +19,35 @@ $width-settings-bar: 256px;
   }
 }
 
+.fullscreen.handoff-layout.force-visible {
+  display: grid;
+  grid-template-rows: 1fr;
+
+  & .viewer-header {
+    position: fixed;
+    top: 0;
+    transition: top 400ms ease 300ms;
+    margin-bottom: 0;
+    z-index: 2;
+  }
+
+  & .viewer-bottom {
+    position: fixed;
+    bottom: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+  }
+}
+
 .fullscreen.handoff-layout:not(.force-visible) {
-  .viewer-header {
+  & .viewer-header {
     width: 100%;
     position: fixed;
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
-    z-index: 25;
+    z-index: 2;
+    margin-bottom: 48px;
 
     &::after {
       content: " ";
@@ -43,7 +64,29 @@ $width-settings-bar: 256px;
     transition: top 200ms;
   }
 
-  .viewer-content {
+  & .viewer-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: -48px;
+    left: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+    &::after {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 1rem;
+      left: 0;
+      bottom: 0px;
+    }
+  }
+
+  & .viewer-bottom:hover {
+    bottom: 0px;
+    transition: bottom 200ms;
+  }
+
+  & .viewer-content {
     grid-row: 1 / span 2;
   }
 }
@@ -51,6 +94,7 @@ $width-settings-bar: 256px;
 .handoff-layout {
   .viewer-section {
     flex-wrap: nowrap;
+    margin-top: 0;
     &.fullscreen {
       .settings-bar,
       .settings-bar {

frontend/resources/styles/main/layouts/viewer.scss

@@ -1,4 +1,5 @@
 .viewer-layout {
+  height: 100vh;
   display: grid;
   grid-template-rows: 48px auto;
   grid-template-columns: 1fr;
@@ -15,14 +16,34 @@
   }
 }
 
+.fullscreen.viewer-layout.force-visible {
+  grid-template-rows: 1fr;
+  & .viewer-header {
+    position: fixed;
+    top: 0;
+    transition: top 400ms ease 300ms;
+    margin-bottom: 0;
+    z-index: 2;
+  }
+
+  & .viewer-bottom {
+    position: fixed;
+    bottom: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+  }
+}
+
 .fullscreen.viewer-layout:not(.force-visible) {
+  grid-template-rows: 1fr;
   & .viewer-header {
     width: 100%;
     position: fixed;
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
-    z-index: 1;
+    z-index: 2;
+    margin-bottom: 48px;
     &::after {
       content: " ";
       position: absolute;
@@ -38,6 +59,28 @@
     transition: top 200ms;
   }
 
+  & .viewer-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: -48px;
+    left: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+    &::after {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 1rem;
+      left: 0;
+      bottom: 0px;
+    }
+  }
+
+  & .viewer-bottom:hover {
+    bottom: 0px;
+    transition: bottom 200ms;
+  }
+
   & .viewer-content {
     grid-row: 1 / span 2;
   }

frontend/resources/styles/main/partials/viewer-header.scss

@@ -6,7 +6,8 @@
   grid-template-columns: 45% 10% 45%;
   height: 48px;
   padding: 0 $size-4 0 55px;
-  position: relative;
+  top: 0;
+  position: absolute;
   justify-content: space-between;
   width: 100vw;
 

frontend/resources/styles/main/partials/viewer.scss

@@ -1,6 +1,5 @@
 .viewer-content {
   background-color: black;
-
   display: grid;
   grid-template-rows: 232px auto;
   grid-template-columns: 1fr;
@@ -8,19 +7,19 @@
 
 .viewer-section {
   height: calc(100vh - 48px);
-  &.fullscreen {
-    height: 100vh;
-  }
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
-
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: wrap;
-
   overflow: auto;
 
+  &.fullscreen {
+    height: 100vh;
+    margin-top: 0px;
+  }
+
   & .viewer-go-prev,
   & .viewer-go-next {
     position: absolute;
@@ -28,7 +27,7 @@
     display: flex;
     align-items: center;
     width: 53px;
-
+    z-index: 2;
     .arrow {
       display: none;
       align-items: center;
@@ -87,6 +86,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     &.left-bar {
       width: calc(100% - 512px);

frontend/src/app/main/ui/viewer.cljs

@@ -275,6 +275,19 @@
         interactions-mode
         (:interactions-mode local)
 
+        click-on-screen
+        (mf/use-callback
+         (fn [event]
+           (let [origin (dom/get-target event)
+                 over-section? (dom/class? origin "viewer-section")
+                 layout (dom/get-element "viewer-layout")
+                 has-force? (dom/class? layout "force-visible")]
+
+             (when over-section?
+               (if has-force?
+                 (dom/remove-class! layout "force-visible")
+                 (dom/add-class! layout "force-visible"))))))
+
         on-click
         (mf/use-fn
          (mf/deps section)
@@ -414,17 +427,15 @@
               :handoff-layout (= section :handoff)
               :fullscreen fullscreen?)}
 
-     [:& header/header
-      {:project project
-       :index index
-       :file file
-       :page page
-       :frame frame
-       :permissions permissions
-       :zoom zoom
-       :section section}]
-
      [:div.viewer-content
+      [:& header/header {:project project
+                  :index index
+                  :file file
+                  :page page
+                  :frame frame
+                  :permissions permissions
+                  :zoom zoom
+                  :section section}]
       [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
                              :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
       [:& thumbnails-panel {:frames frames
@@ -434,7 +445,8 @@
                             :thumbnail-data (:thumbnails file)}]
       [:section.viewer-section {:id "viewer-section"
                                 :ref viewer-section-ref
-                                :class (if fullscreen? "fullscreen" "")}
+                                :class (if fullscreen? "fullscreen" "")
+                                :on-click click-on-screen}
        (cond
          (empty? frames)
          [:section.empty-state

frontend/src/app/main/ui/viewer/comments.cljs

@@ -91,7 +91,6 @@
 
 (mf/defc comments-layer
   [{:keys [zoom file users frame page] :as props}]
-  (prn "comments-layer")
   (let [profile        (mf/deref refs/profile)
         local          (mf/deref refs/comments-local)
 
@@ -113,12 +112,12 @@
         modifier1    (mf/with-memo [frame-corner]
                        (-> (gmt/matrix)
                            (gmt/translate (gpt/negate frame-corner))))
+
         modifier2    (mf/with-memo [frame-corner]
                        (-> (gpt/point frame-corner)
                            (gmt/translate-matrix)))
 
-
+        threads      (mf/with-memo [threads-map positions frame local profile]
-        threads      (mf/with-memo [threads-map positions]
                        (->> (vals threads-map)
                             (map (partial update-thread-position positions))
                             (filter #(= (:frame-id %) (:id frame)))
@@ -126,7 +125,6 @@
                             (filter (fn [{:keys [position]}]
                                       (gsh/has-point? frame position)))))
 
-
         on-bubble-click
         (mf/use-fn
          (mf/deps open-thread-id)
@@ -160,9 +158,7 @@
         (mf/use-fn
          (mf/deps frame-id modifier2)
          (fn [draft]
-           (let [params (-> draft
+           (let [params (assoc draft :frame-id frame-id)]
-                            (update :position gpt/transform modifier2)
-                            (assoc :frame-id frame-id))]
              (st/emit! (dcm/create-thread-on-viewer params)
                        (dcm/close-thread)))))]
 

frontend/src/app/main/ui/viewer/handoff.cljs

@@ -22,7 +22,17 @@
   (fn [event]
     (dom/prevent-default event)
     (dom/stop-propagation event)
-    (st/emit! (dv/select-shape (:id frame)))))
+    (st/emit! (dv/select-shape (:id frame)))
+
+    (let [origin (dom/get-target event)
+          over-section? (dom/class? origin "handoff-svg-container")
+          layout (dom/get-element "viewer-layout")
+          has-force? (dom/class? layout "force-visible")]
+
+      (when over-section?
+        (if has-force?
+          (dom/remove-class! layout "force-visible")
+          (dom/add-class! layout "force-visible"))))))
 
 (mf/defc viewport
   [{:keys [local file page frame index viewer-pagination size]}]