From 128fe29619c11270848383c060dab64f46bee95e Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 14 Jun 2023 09:30:29 +0200 Subject: [PATCH] :sparkles: Show interactions on click as default setting at the view mode --- frontend/src/app/main/data/viewer.cljs | 24 +++++++++----- frontend/src/app/main/ui.cljs | 9 +++-- frontend/src/app/main/ui/viewer.cljs | 16 ++++----- frontend/src/app/main/ui/viewer/header.cljs | 9 ++--- .../src/app/main/ui/viewer/interactions.cljs | 33 ++++++++++--------- 5 files changed, 54 insertions(+), 37 deletions(-) diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 76f5ba42e..a440c774c 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -30,7 +30,7 @@ default-local-state {:zoom 1 :fullscreen? false - :interactions-mode :hide + :interactions-mode :show-on-click :interactions-show? false :comments-mode :all :comments-show :unresolved @@ -53,7 +53,7 @@ [:page-id {:optional true} ::sm/uuid]]) (defn initialize - [{:keys [file-id share-id] :as params}] + [{:keys [file-id share-id interactions-show?] :as params}] (dm/assert! (sm/valid? schema:initialize params)) (ptk/reify ::initialize ptk/UpdateEvent @@ -61,11 +61,12 @@ (-> state (assoc :current-file-id file-id) (update :viewer-local - (fn [lstate] - (if (nil? lstate) - default-local-state - lstate))) - (assoc-in [:viewer-local :share-id] share-id))) + (fn [lstate] + (if (nil? lstate) + default-local-state + lstate))) + (assoc-in [:viewer-local :share-id] share-id) + (assoc-in [:viewer-local :interactions-show?] interactions-show?))) ptk/WatchEvent (watch [_ _ _] @@ -400,7 +401,14 @@ (assoc-in [:viewer-local :interactions-show?] (case mode :hide false :show true - :show-on-click false)))))) + :show-on-click false)))) + ptk/WatchEvent + (watch [_ state _] + (let [route (:route state) + screen (-> route :data :name keyword) + qparams (:query-params route) + pparams (:path-params route)] + (rx/of (rt/nav screen pparams (assoc qparams :interactions-mode mode))))))) (declare flash-done) diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index a35b7faf0..882de4b48 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -106,7 +106,7 @@ :viewer (let [{:keys [query-params path-params]} route - {:keys [index share-id section page-id] :or {section :interactions}} query-params + {:keys [index share-id section page-id interactions-mode] :or {section :interactions interactions-mode :show-on-click}} query-params {:keys [file-id]} path-params] (if (:token query-params) [:& viewer/breaking-change-notice] @@ -114,7 +114,12 @@ :file-id file-id :section section :index index - :share-id share-id}])) + :share-id share-id + :interactions-mode (keyword interactions-mode) + :interactions-show? (case (keyword interactions-mode) + :hide false + :show true + :show-on-click false)}])) :workspace (let [project-id (some-> params :path :project-id uuid) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 01ab8fb42..d33d9efd8 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -158,7 +158,8 @@ :index index :page page :users users - :frame frame}] + :frame frame + :interactions-mode interactions-mode}] [:div.viewer-wrapper {:style {:width (:width wrapper-size) @@ -178,7 +179,7 @@ :size orig-size :page page :users users - :interactions-mode :hide}]]) + :interactions-mode interactions-mode}]]) [:div.viewport-container {:ref current-viewport-ref @@ -214,7 +215,7 @@ (mf/defc viewer [{:keys [params data]}] - (let [{:keys [page-id section index]} params + (let [{:keys [page-id section index interactions-mode]} params {:keys [file users project permissions]} data allowed (or @@ -281,9 +282,6 @@ (mf/with-memo [size orig-size zoom] (calculate-wrapper size orig-size zoom)) - interactions-mode - (:interactions-mode local) - click-on-screen (mf/use-callback (fn [event] @@ -484,7 +482,8 @@ :frame frame :permissions permissions :zoom zoom - :section section}] + :section section + :interactions-mode interactions-mode}] [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel) :class (dom/classnames :invisible (not (:show-thumbnails local false)))}] [:& thumbnails-panel {:frames frames @@ -516,7 +515,8 @@ :local local :size size :index index - :viewer-pagination viewer-pagination}] + :viewer-pagination viewer-pagination + :interactions-mode interactions-mode}] [:& (mf/provider ctx/current-zoom) {:value zoom} diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 17eaca72b..34c7e5173 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -70,7 +70,7 @@ (mf/defc header-options - [{:keys [section zoom page file index permissions]}] + [{:keys [section zoom page file index permissions interactions-mode]}] (let [fullscreen? (mf/deref fullscreen-ref) toggle-fullscreen @@ -95,7 +95,7 @@ :interactions [:* (when index [:& flows-menu {:page page :index index}]) - [:& interactions-menu]] + [:& interactions-menu {:interactions-mode interactions-mode}]] :comments [:& comments-menu] [:div.view-options]) @@ -184,7 +184,7 @@ (mf/defc header - [{:keys [project file page frame zoom section permissions index]}] + [{:keys [project file page frame zoom section permissions index interactions-mode]}] (let [go-to-dashboard #(st/emit! (dv/go-to-dashboard)) @@ -238,4 +238,5 @@ :page page :file file :index index - :zoom zoom}]])) + :zoom zoom + :interactions-mode interactions-mode}]])) diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index cbed317ad..1b7a37aeb 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -16,7 +16,6 @@ [app.common.uuid :as uuid] [app.main.data.comments :as dcm] [app.main.data.viewer :as dv] - [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.hooks :as h] @@ -201,18 +200,19 @@ [:span.label (:name flow)]])]]]))) (mf/defc interactions-menu - [] - (let [local (mf/deref refs/viewer-local) - mode (:interactions-mode local) - - show-dropdown? (mf/use-state false) + [{:keys [interactions-mode]}] + (let [show-dropdown? (mf/use-state false) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) select-mode - (mf/use-callback - (fn [mode] - (st/emit! (dv/set-interactions-mode mode))))] + (mf/use-fn + (fn [event] + (let [mode (some-> (dom/get-current-target event) + (dom/get-data "mode") + (keyword))] + (dom/stop-propagation event) + (st/emit! (dv/set-interactions-mode mode)))))] [:div.view-options {:on-click toggle-dropdown} [:span.label (tr "viewer.header.interactions")] @@ -220,18 +220,21 @@ [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} [:ul.dropdown.with-check - [:li {:class (dom/classnames :selected (= mode :hide)) - :on-click #(select-mode :hide)} + [:li {:class (dom/classnames :selected (= interactions-mode :hide)) + :on-click select-mode + :data-mode :hide} [:span.icon i/tick] [:span.label (tr "viewer.header.dont-show-interactions")]] - [:li {:class (dom/classnames :selected (= mode :show)) - :on-click #(select-mode :show)} + [:li {:class (dom/classnames :selected (= interactions-mode :show)) + :on-click select-mode + :data-mode :show} [:span.icon i/tick] [:span.label (tr "viewer.header.show-interactions")]] - [:li {:class (dom/classnames :selected (= mode :show-on-click)) - :on-click #(select-mode :show-on-click)} + [:li {:class (dom/classnames :selected (= interactions-mode :show-on-click)) + :on-click select-mode + :data-mode :show-on-click} [:span.icon i/tick] [:span.label (tr "viewer.header.show-interactions-on-click")]]]]]))