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

🎉 Add interaction flows

Browse source
This commit is contained in:
Andrés Moya 2021-09-30 16:24:52 +02:00 • committed by Alonso Torres
parent f3bb5c55f5
commit 0159eea526
22 changed files with 856 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,14 +13,14 @@
[app.main.ui.components.fullscreen :as fs]
[app.main.ui.icons :as i]
[app.main.ui.viewer.comments :refer [comments-menu]]
[app.main.ui.viewer.interactions :refer [interactions-menu]]
[app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
[app.main.ui.workspace.header :refer [zoom-widget]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf]))
(mf/defc header-options
[{:keys [section zoom page file permissions]}]
[{:keys [section zoom page file index permissions]}]
(let [fullscreen (mf/use-ctx fs/fullscreen-context)
toggle-fullscreen
@ -43,7 +43,9 @@
[:div.options-zone
(case section
:interactions [:& interactions-menu]
:interactions [:*
[:& flows-menu {:page page :index index}]
[:& interactions-menu]]
:comments [:& comments-menu]
[:div.view-options])
@ -133,7 +135,6 @@
(fn [section]
(st/emit! (dv/go-to-section section)))]
[:header.viewer-header
[:div.main-icon
[:a {:on-click go-to-dashboard
@ -167,5 +168,6 @@
:permissions permissions
:page page
:file file
:index index
:zoom zoom}]]))

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

@ -10,6 +10,7 @@
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.pages :as cp]
[app.common.types.page-options :as cto]
[app.main.data.comments :as dcm]
[app.main.data.viewer :as dv]
[app.main.refs :as refs]
@ -99,6 +100,38 @@
:view-box (:vbox size)}]]]]))
(mf/defc flows-menu
{::mf/wrap [mf/memo]}
[{:keys [page index]}]
(let [flows (get-in page [:options :flows])
frames (:frames page)
frame (get frames index)
current-flow (cto/get-frame-flow flows (:id frame))
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-flow
(mf/use-callback
(fn [flow]
(st/emit! (dv/go-to-frame (:starting-frame flow)))))]
(when (seq flows)
[:div.view-options {:on-click toggle-dropdown}
[:span.icon i/play]
[:span.label (:name current-flow)]
[:span.icon i/arrow-down]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
[:ul.dropdown.with-check
(for [flow flows]
[:li {:class (dom/classnames :selected (= (:id flow) (:id current-flow)))
:on-click #(select-flow flow)}
[:span.icon i/tick]
[:span.label (:name flow)]])]]])))
(mf/defc interactions-menu
[]
(let [local (mf/deref refs/viewer-local)