Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues 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
Show stats 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
{: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)

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

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

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

@ -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}

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

@ -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}]]))

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

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