3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 10:06:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Show interactions on click as default setting at the view mode

Browse source
This commit is contained in:
Alejandro Alonso 2023-06-14 09:30:29 +02:00 • committed by Andrés Moya
parent 23e200dece
commit 128fe29619
5 changed files with 54 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/app/main/data/viewer.cljs
View file

@ -30,7 +30,7 @@
default-local-state default-local-state
{:zoom 1 {:zoom 1
:fullscreen? false :fullscreen? false
:interactions-mode :hide :interactions-mode :show-on-click
:interactions-show? false :interactions-show? false
:comments-mode :all :comments-mode :all
:comments-show :unresolved :comments-show :unresolved
@ -53,7 +53,7 @@
[:page-id {:optional true} ::sm/uuid]]) [:page-id {:optional true} ::sm/uuid]])
(defn initialize (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)) (dm/assert! (sm/valid? schema:initialize params))
(ptk/reify ::initialize (ptk/reify ::initialize
ptk/UpdateEvent ptk/UpdateEvent
@ -61,11 +61,12 @@
(-> state (-> state
(assoc :current-file-id file-id) (assoc :current-file-id file-id)
(update :viewer-local (update :viewer-local
(fn [lstate] (fn [lstate]
(if (nil? lstate) (if (nil? lstate)
default-local-state default-local-state
lstate))) lstate)))
(assoc-in [:viewer-local :share-id] share-id))) (assoc-in [:viewer-local :share-id] share-id)
(assoc-in [:viewer-local :interactions-show?] interactions-show?)))
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
@ -400,7 +401,14 @@
(assoc-in [:viewer-local :interactions-show?] (case mode (assoc-in [:viewer-local :interactions-show?] (case mode
:hide false :hide false
:show true :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) (declare flash-done)

9
frontend/src/app/main/ui.cljs
View file

@ -106,7 +106,7 @@
:viewer :viewer
(let [{:keys [query-params path-params]} route (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] {:keys [file-id]} path-params]
(if (:token query-params) (if (:token query-params)
[:& viewer/breaking-change-notice] [:& viewer/breaking-change-notice]
@ -114,7 +114,12 @@
:file-id file-id :file-id file-id
:section section :section section
:index index :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 :workspace
(let [project-id (some-> params :path :project-id uuid) (let [project-id (some-> params :path :project-id uuid)

16
frontend/src/app/main/ui/viewer.cljs
View file

@ -158,7 +158,8 @@
:index index :index index
:page page :page page
:users users :users users
:frame frame}] :frame frame
:interactions-mode interactions-mode}]
[:div.viewer-wrapper [:div.viewer-wrapper
{:style {:width (:width wrapper-size) {:style {:width (:width wrapper-size)
@ -178,7 +179,7 @@
:size orig-size :size orig-size
:page page :page page
:users users :users users
:interactions-mode :hide}]]) :interactions-mode interactions-mode}]])
[:div.viewport-container [:div.viewport-container
{:ref current-viewport-ref {:ref current-viewport-ref
@ -214,7 +215,7 @@
(mf/defc viewer (mf/defc viewer
[{:keys [params data]}] [{: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 {:keys [file users project permissions]} data
allowed (or allowed (or
@ -281,9 +282,6 @@
(mf/with-memo [size orig-size zoom] (mf/with-memo [size orig-size zoom]
(calculate-wrapper size orig-size zoom)) (calculate-wrapper size orig-size zoom))
interactions-mode
(:interactions-mode local)
click-on-screen click-on-screen
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
@ -484,7 +482,8 @@
:frame frame :frame frame
:permissions permissions :permissions permissions
:zoom zoom :zoom zoom
:section section}] :section section
:interactions-mode interactions-mode}]
[:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel) [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
:class (dom/classnames :invisible (not (:show-thumbnails local false)))}] :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
[:& thumbnails-panel {:frames frames [:& thumbnails-panel {:frames frames
@ -516,7 +515,8 @@
:local local :local local
:size size :size size
:index index :index index
:viewer-pagination viewer-pagination}] :viewer-pagination viewer-pagination
:interactions-mode interactions-mode}]
[:& (mf/provider ctx/current-zoom) {:value zoom} [:& (mf/provider ctx/current-zoom) {:value zoom}

9
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -70,7 +70,7 @@
(mf/defc header-options (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) (let [fullscreen? (mf/deref fullscreen-ref)
toggle-fullscreen toggle-fullscreen
@ -95,7 +95,7 @@
:interactions [:* :interactions [:*
(when index (when index
[:& flows-menu {:page page :index index}]) [:& flows-menu {:page page :index index}])
[:& interactions-menu]] [:& interactions-menu {:interactions-mode interactions-mode}]]
:comments [:& comments-menu] :comments [:& comments-menu]
[:div.view-options]) [:div.view-options])
@ -184,7 +184,7 @@
(mf/defc header (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 (let [go-to-dashboard
#(st/emit! (dv/go-to-dashboard)) #(st/emit! (dv/go-to-dashboard))
@ -238,4 +238,5 @@
:page page :page page
:file file :file file
:index index :index index
:zoom zoom}]])) :zoom zoom
:interactions-mode interactions-mode}]]))

33
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -16,7 +16,6 @@
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.comments :as dcm] [app.main.data.comments :as dcm]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
@ -201,18 +200,19 @@
[:span.label (:name flow)]])]]]))) [:span.label (:name flow)]])]]])))
(mf/defc interactions-menu (mf/defc interactions-menu
[] [{:keys [interactions-mode]}]
(let [local (mf/deref refs/viewer-local) (let [show-dropdown? (mf/use-state false)
mode (:interactions-mode local)
show-dropdown? (mf/use-state false)
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
select-mode select-mode
(mf/use-callback (mf/use-fn
(fn [mode] (fn [event]
(st/emit! (dv/set-interactions-mode mode))))] (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} [:div.view-options {:on-click toggle-dropdown}
[:span.label (tr "viewer.header.interactions")] [:span.label (tr "viewer.header.interactions")]
@ -220,18 +220,21 @@
[:& dropdown {:show @show-dropdown? [:& dropdown {:show @show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
[:ul.dropdown.with-check [:ul.dropdown.with-check
[:li {:class (dom/classnames :selected (= mode :hide)) [:li {:class (dom/classnames :selected (= interactions-mode :hide))
:on-click #(select-mode :hide)} :on-click select-mode
:data-mode :hide}
[:span.icon i/tick] [:span.icon i/tick]
[:span.label (tr "viewer.header.dont-show-interactions")]] [:span.label (tr "viewer.header.dont-show-interactions")]]
[:li {:class (dom/classnames :selected (= mode :show)) [:li {:class (dom/classnames :selected (= interactions-mode :show))
:on-click #(select-mode :show)} :on-click select-mode
:data-mode :show}
[:span.icon i/tick] [:span.icon i/tick]
[:span.label (tr "viewer.header.show-interactions")]] [:span.label (tr "viewer.header.show-interactions")]]
[:li {:class (dom/classnames :selected (= mode :show-on-click)) [:li {:class (dom/classnames :selected (= interactions-mode :show-on-click))
:on-click #(select-mode :show-on-click)} :on-click select-mode
:data-mode :show-on-click}
[:span.icon i/tick] [:span.icon i/tick]
[:span.label (tr "viewer.header.show-interactions-on-click")]]]]])) [:span.label (tr "viewer.header.show-interactions-on-click")]]]]]))