🎉 Improvements on view mode

frontend/src/app/main/data/comments.cljs

@@ -243,7 +243,7 @@
           (update :workspace-drawing dissoc :comment)))))
 
 (defn update-filters
-  [{:keys [mode show] :as params}]
+  [{:keys [mode show list] :as params}]
   (ptk/reify ::update-filters
     ptk/UpdateEvent
     (update [_ state]
@@ -254,7 +254,10 @@
                   (assoc :mode mode)
 
                   (some? show)
-                  (assoc :show show)))))))
+                  (assoc :show show)
+
+                  (some? list)
+                  (assoc :list list)))))))
 
 (s/def ::create-draft-params
   (s/keys :req-un [::page-id ::file-id ::position]))

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

@@ -303,6 +303,18 @@
            (dcm/close-thread)
            (rt/nav :viewer pparams (assoc qparams :index (inc index)))))))))
 
+
+(def select-first-frame
+  (ptk/reify ::select-first-frame
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [route   (:route state)
+            qparams (:query-params route)
+            pparams (:path-params route)]
+        (rx/of
+         (dcm/close-thread)
+         (rt/nav :viewer pparams (assoc qparams :index 0)))))))
+
 (s/def ::interactions-mode #{:hide :show :show-on-click})
 
 (defn set-interactions-mode

frontend/src/app/main/data/viewer/shortcuts.cljs

@@ -42,12 +42,12 @@
                         :fn #(st/emit! dv/toggle-fullscreen)}
 
    :next-frame         {:tooltip ds/left-arrow
-                        :command "left"
+                        :command ["left" "up"]
                         :subsections [:general-viewer]
                         :fn #(st/emit! dv/select-prev-frame)}
 
    :prev-frame         {:tooltip ds/right-arrow
-                        :command "right"
+                        :command ["right" "down"]
                         :subsections [:general-viewer]
                         :fn #(st/emit! dv/select-next-frame)}
 

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

@@ -67,6 +67,8 @@
 (def full-screen-off (icon-xref :full-screen-off))
 (def grid (icon-xref :grid))
 (def grid-snap (icon-xref :grid-snap))
+(def go-next (icon-xref :go-next))
+(def go-prev (icon-xref :go-prev))
 (def help (icon-xref :help))
 (def icon-empty (icon-xref :icon-empty))
 (def icon-filter (icon-xref :filter))
@@ -134,6 +136,7 @@
 (def radius-4 (icon-xref :radius-4))
 (def recent (icon-xref :recent))
 (def redo (icon-xref :redo))
+(def reset (icon-xref :reset))
 (def rotate (icon-xref :rotate))
 (def ruler (icon-xref :ruler))
 (def ruler-tool (icon-xref :ruler-tool))

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

@@ -24,7 +24,7 @@
    [app.main.ui.shapes.filters :as filters]
    [app.main.ui.share-link]
    [app.main.ui.static :as static]
-   [app.main.ui.viewer.comments :refer [comments-layer]]
+   [app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]   
    [app.main.ui.viewer.handoff :as handoff]
    [app.main.ui.viewer.header :refer [header]]
    [app.main.ui.viewer.interactions :as interactions]
@@ -32,6 +32,7 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.webapi :as wapi]
+   [cuerdas.core :as str]
    [goog.events :as events]
    [rumext.alpha :as mf]))
 
@@ -60,6 +61,113 @@
              :height (* height zoom)
              :vbox   (str "0 0 " width " " height)})))
 
+
+(mf/defc viewer-pagination
+  [{:keys [index num-frames left-bar right-bar] :as props}]
+  [:*
+   (when (pos? index)
+     [:div.viewer-go-prev {:class (when left-bar "left-bar")}
+      [:div.arrow {:on-click #(st/emit! dv/select-prev-frame)} i/go-prev]])
+   (when (< (+ index 1) num-frames)
+     [:div.viewer-go-next {:class (when right-bar "right-bar")}
+      [:div.arrow {:on-click #(st/emit! dv/select-next-frame)} i/go-next]])
+   [:div.viewer-bottom {:class (when left-bar "left-bar")}
+    [:div.reset {:on-click #(st/emit! dv/select-first-frame)} i/reset]
+    [:div.counter (str/join " / " [(+ index 1) num-frames])]
+    [:span]]])
+
+
+(mf/defc viewer-wrapper
+  [{:keys [wrapper-size scroll orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
+           size frame interactions-mode overlays zoom close-overlay section index] :as props}]
+  (let [{clist :list} (mf/deref refs/comments-local)
+        show-comments-list (and (= section :comments) (= :show clist))]
+    [:*
+     [:& viewer-pagination {:index index :num-frames (count (:frames page)) :right-bar show-comments-list}]
+
+     (when show-comments-list
+       [:& comments-sidebar {:users users :frame frame :page page}])
+     
+     [:div.viewer-wrapper
+      {:style {:width (:width wrapper-size)
+               :height (:height wrapper-size)}}
+      [:& (mf/provider ctx/scroll-ctx) {:value @scroll}
+       [:div.viewer-clipper
+        [:*
+         (when orig-frame
+           [:div.viewport-container
+            {:ref orig-viewport-ref
+             :style {:width (:width orig-size)
+                     :height (:height orig-size)
+                     :position "relative"}}
+
+            [:& interactions/viewport
+             {:frame orig-frame
+              :base-frame orig-frame
+              :frame-offset (gpt/point 0 0)
+              :size orig-size
+              :page page
+              :file file
+              :users users
+              :interactions-mode :hide}]])
+
+         [:div.viewport-container
+          {:ref current-viewport-ref
+           :style {:width (:width size)
+                   :height (:height size)
+                   :position "relative"}}
+
+          [:& interactions/viewport
+           {:frame frame
+            :base-frame frame
+            :frame-offset (gpt/point 0 0)
+            :size size
+            :page page
+            :file file
+            :users users
+            :interactions-mode interactions-mode}]
+
+          (for [overlay overlays]
+            (let [size-over (calculate-size (:frame overlay) zoom)]
+              [:*
+               (when (or (:close-click-outside overlay)
+                         (:background-overlay  overlay))
+                 [:div.viewer-overlay-background
+                  {:class (dom/classnames
+                           :visible (:background-overlay overlay))
+                   :style {:width (:width wrapper-size)
+                           :height (:height wrapper-size)
+                           :position "absolute"
+                           :left 0
+                           :top 0}
+                   :on-click #(when (:close-click-outside overlay)
+                                (close-overlay (:frame overlay)))}])
+               [:div.viewport-container.viewer-overlay
+                     
+                {:id (str "overlay-" (-> overlay :frame :id))
+                 :style {:width (:width size-over)
+                         :height (:height size-over)
+                         :left (* (:x (:position overlay)) zoom)
+                         :top (* (:y (:position overlay)) zoom)}}
+                [:& interactions/viewport
+                 {:frame (:frame overlay)
+                  :base-frame frame
+                  :frame-offset (:position overlay)
+                  :size size-over
+                  :page page
+                  :file file
+                  :users users
+                  :interactions-mode interactions-mode}]]]))]]
+
+        (when (= section :comments)
+          [:& comments-layer {:file file
+                              :users users
+                              :frame frame
+                              :page page
+                              :zoom zoom}])]]]]))
+
+
+
 (mf/defc viewer
   [{:keys [params data]}]
 
@@ -120,11 +228,6 @@
            (when (= section :comments)
              (st/emit! (dcm/close-thread)))))
 
-        close-overlay
-        (mf/use-callback
-         (fn [frame]
-           (st/emit! (dv/close-overlay (:id frame)))))
-
         set-up-new-size
         (mf/use-callback
          (fn [_]
@@ -288,85 +391,28 @@
              :page page
              :file file
              :section section
-             :local local}]
+             :local local
+             :index index
+             :viewer-pagination viewer-pagination}]
 
-           [:*
-            [:div.viewer-wrapper
-             {:style {:width (:width wrapper-size)
-                      :height (:height wrapper-size)}}
-             [:& (mf/provider ctx/scroll-ctx) {:value @scroll}
-              [:div.viewer-clipper
-               [:*
-                (when orig-frame
-                  [:div.viewport-container
-                   {:ref orig-viewport-ref
-                    :style {:width (:width orig-size)
-                            :height (:height orig-size)
-                            :position "relative"}}
-
-                   [:& interactions/viewport
-                    {:frame orig-frame
-                     :base-frame orig-frame
-                     :frame-offset (gpt/point 0 0)
-                     :size orig-size
-                     :page page
-                     :file file
-                     :users users
-                     :interactions-mode :hide}]])
-
-                [:div.viewport-container
-                 {:ref current-viewport-ref
-                  :style {:width (:width size)
-                          :height (:height size)
-                          :position "relative"}}
-
-                 [:& interactions/viewport
-                  {:frame frame
-                   :base-frame frame
-                   :frame-offset (gpt/point 0 0)
-                   :size size
-                   :page page
-                   :file file
-                   :users users
-                   :interactions-mode interactions-mode}]
-
-                 (for [overlay overlays]
-                   (let [size-over (calculate-size (:frame overlay) zoom)]
-                     [:*
-                      (when (or (:close-click-outside overlay)
-                                (:background-overlay  overlay))
-                        [:div.viewer-overlay-background
-                         {:class (dom/classnames
-                                  :visible (:background-overlay overlay))
-                          :style {:width (:width wrapper-size)
-                                  :height (:height wrapper-size)
-                                  :position "absolute"
-                                  :left 0
-                                  :top 0}
-                          :on-click #(when (:close-click-outside overlay)
-                                       (close-overlay (:frame overlay)))}])
-                      [:div.viewport-container.viewer-overlay
-                       {:id (str "overlay-" (str (:id (:frame overlay))))
-                        :style {:width (:width size-over)
-                                :height (:height size-over)
-                                :left (* (:x (:position overlay)) zoom)
-                                :top (* (:y (:position overlay)) zoom)}}
-                       [:& interactions/viewport
-                        {:frame (:frame overlay)
-                         :base-frame frame
-                         :frame-offset (:position overlay)
-                         :size size-over
-                         :page page
-                         :file file
-                         :users users
-                         :interactions-mode interactions-mode}]]]))]]
-
-               (when (= section :comments)
-                 [:& comments-layer {:file file
-                                     :users users
-                                     :frame frame
-                                     :page page
-                                     :zoom zoom}])]]]]))]]]))
+                       
+            [:& viewer-wrapper
+             {:wrapper-size wrapper-size
+              :scroll scroll
+              :orig-frame orig-frame
+              :orig-viewport-ref orig-viewport-ref
+              :orig-size orig-size
+              :page page
+              :file file
+              :users users
+              :current-viewport-ref current-viewport-ref              
+              :size size
+              :frame frame
+              :interactions-mode interactions-mode
+              :overlays overlays
+              :zoom zoom
+              :section section
+              :index index}]))]]]))
 
 ;; --- Component: Viewer Page
 

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

@@ -15,6 +15,7 @@
    [app.main.ui.comments :as cmt]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
+   [app.main.ui.workspace.comments :as wc]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [okulary.core :as l]
@@ -22,7 +23,7 @@
 
 (mf/defc comments-menu
   []
-  (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
+  (let [{cmode :mode cshow :show clist :list} (mf/deref refs/comments-local)
 
         show-dropdown?  (mf/use-state false)
         toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
@@ -36,7 +37,12 @@
         update-show
         (mf/use-callback
          (fn [mode]
-           (st/emit! (dcm/update-filters {:show mode}))))]
+           (st/emit! (dcm/update-filters {:show mode}))))
+
+        update-list
+        (mf/use-callback
+         (fn [show-list]
+           (st/emit! (dcm/update-filters {:list show-list}))))]
 
     [:div.view-options {:on-click toggle-dropdown}
      [:span.label (tr "labels.comments")]
@@ -59,7 +65,14 @@
        [:li {:class (dom/classnames :selected (= :pending cshow))
              :on-click #(update-show (if (= :pending cshow) :all :pending))}
         [:span.icon i/tick]
-        [:span.label (tr "labels.hide-resolved-comments")]]]]]))
+        [:span.label (tr "labels.hide-resolved-comments")]]
+
+       [:hr]
+
+       [:li {:class (dom/classnames :selected (= :show clist))
+             :on-click #(update-list (if (= :show clist) :hide :show))}
+        [:span.icon i/tick]
+        [:span.label (tr "labels.show-comments-list")]]]]]))
 
 
 (defn- frame-contains?
@@ -156,3 +169,17 @@
                                :on-cancel on-draft-cancel
                                :on-submit on-draft-submit
                                :zoom zoom}])]]]))
+
+
+(mf/defc comments-sidebar
+  [{:keys [users frame page]}]
+  (let [profile     (mf/deref refs/profile)
+        cstate      (mf/deref refs/comments-local)
+        threads-map (mf/deref threads-ref)
+        threads     (->> (vals threads-map)
+                         (dcm/apply-filters cstate profile)
+                         (filter (fn [{:keys [position]}]
+                                   (frame-contains? frame position))))]
+    [:aside.settings-bar.settings-bar-right.comments-right-sidebar
+     [:div.settings-bar-inside
+      [:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]]))

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

@@ -6,13 +6,13 @@
 
 (ns app.main.ui.viewer.handoff
   (:require
-   [app.main.data.viewer :as dv]
+   [app.main.data.viewer :as dv]   
    [app.main.store :as st]
    [app.main.ui.viewer.handoff.left-sidebar :refer [left-sidebar]]
    [app.main.ui.viewer.handoff.render :refer [render-frame-svg]]
    [app.main.ui.viewer.handoff.right-sidebar :refer [right-sidebar]]
    [app.util.dom :as dom]
-   [app.util.keyboard :as kbd]
+   [app.util.keyboard :as kbd]   
    [goog.events :as events]
    [rumext.alpha :as mf])
   (:import goog.events.EventType))
@@ -25,7 +25,7 @@
     (st/emit! (dv/select-shape (:id frame)))))
 
 (mf/defc viewport
-  [{:keys [local file page frame]}]
+  [{:keys [local file page frame index viewer-pagination]}]
   (let [on-mouse-wheel
         (fn [event]
           (when (kbd/mod? event)
@@ -58,6 +58,7 @@
                        :local local
                        :page page}]
      [:div.handoff-svg-wrapper {:on-click (handle-select-frame frame)}
+      [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
       [:div.handoff-svg-container
        [:& render-frame-svg {:frame frame :page page :local local}]]]
 

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

@@ -107,18 +107,17 @@
         i/full-screen)]
 
      (when (:is-admin permissions)
-       [:span.btn-primary {:on-click open-share-dialog} (tr "labels.share-prototype")])
+       [:span.btn-primary {:on-click open-share-dialog} i/export [:span (tr "labels.share-prototype")]])
 
      (when (:can-edit permissions)
        [:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")])]))
 
 (mf/defc header-sitemap
-  [{:keys [project file page frame index] :as props}]
+  [{:keys [project file page frame] :as props}]
   (let [project-name   (:name project)
         file-name      (:name file)
         page-name      (:name page)
         frame-name     (:name frame)
-        total          (count (:frames page))
         show-dropdown? (mf/use-state false)
 
         toggle-thumbnails
@@ -151,7 +150,7 @@
       [:span "/"]
 
       [:span.page-name page-name]
-      [:span.icon i/arrow-down]
+
 
       [:& dropdown {:show @show-dropdown?
                     :on-close close-dropdown}
@@ -161,12 +160,12 @@
                 :on-click (partial navigate-to id)}
            (get-in file [:data :pages-index id :name])])]]]
 
+     [:span.icon {:on-click open-dropdown} i/arrow-down]
      [:div.current-frame
       {:on-click toggle-thumbnails}
       [:span.label "/"]
-      [:span.label frame-name]
-      [:span.icon i/arrow-down]
-      [:span.counters (str (inc index) " / " total)]]]))
+      [:span.label frame-name]]
+     [:span.icon {:on-click toggle-thumbnails} i/arrow-down]]))
 
 
 (mf/defc header

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

@@ -57,20 +57,23 @@
       [:span.label (tr "labels.hide-resolved-comments")]]]))
 
 (mf/defc comments-sidebar
-  []
+  [{:keys [users threads page-id]}]
   (let [threads-map (mf/deref refs/threads-ref)
         profile     (mf/deref refs/profile)
-        users       (mf/deref refs/users)
+        users-refs  (mf/deref refs/users)
+        users       (or users users-refs)
         local       (mf/deref refs/comments-local)
         options?    (mf/use-state false)
+        threads     (if (nil? threads)
+                      (->> (vals threads-map)
+                           (sort-by :modified-at)
+                           (reverse)
+                           (dcm/apply-filters local profile))
+                      threads)
+        tgroups (->> threads
+                     (dcm/group-threads-by-page))
 
-        tgroups     (->> (vals threads-map)
-                         (sort-by :modified-at)
-                         (reverse)
-                         (dcm/apply-filters local profile)
-                         (dcm/group-threads-by-page))
-
-        page-id     (mf/use-ctx ctx/current-page-id)
+        page-id     (or page-id (mf/use-ctx ctx/current-page-id))
 
         on-thread-click
         (mf/use-callback
@@ -87,7 +90,7 @@
 
     [:div.comments-section.comment-threads-section
      [:div.workspace-comment-threads-sidebar-header
-      [:div.label "Comments"]
+      [:div.label (tr "labels.comments")]
       [:div.options {:on-click #(reset! options? true)}
        [:div.label (case (:mode local)
                      (nil :all) (tr "labels.all")