diff --git a/CHANGES.md b/CHANGES.md index 467f7afaf..a64458248 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ ### :sparkles: New features - Navigate up in layer hierarchy with Shift+Enter shortcut [Taiga #5734](https://tree.taiga.io/project/penpot/us/5734) +- Click on the flow tags open viewer with the selected frame [Taiga #5044](https://tree.taiga.io/project/penpot/us/5044) ## 1.19.1 diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss index 8c164535c..77c39c9a9 100644 --- a/frontend/resources/styles/main/partials/sidebar-interactions.scss +++ b/frontend/resources/styles/main/partials/sidebar-interactions.scss @@ -176,6 +176,7 @@ } .flow-badge { + cursor: pointer; display: flex; & .content { @@ -199,7 +200,8 @@ } } - &.selected .content { + &.selected .content, + &:hover .content { background-color: $color-primary; & svg { diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 40df6b66c..68e958aa1 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -155,6 +155,8 @@ (rx/of (df/fonts-fetched fonts) (bundle-fetched (merge bundle params)))))))))) +(declare go-to-frame) +(declare go-to-frame-by-index) (declare go-to-frame-auto) (defn bundle-fetched @@ -182,16 +184,20 @@ ptk/WatchEvent (watch [_ state _] - (let [route (:route state) - qparams (:query-params route) - index (:index qparams)] + (let [route (:route state) + qparams (:query-params route) + index (:index qparams) + frame-id (:frame-id qparams)] (rx/merge (rx/of (case (:zoom qparams) "fit" zoom-to-fit "fill" zoom-to-fill nil)) - (when (nil? index) - (rx/of (go-to-frame-auto))))))))) + (rx/of + (cond + (some? frame-id) (go-to-frame (uuid frame-id)) + (some? index) (go-to-frame-by-index index) + :else (go-to-frame-auto))))))))) (defn fetch-comment-threads [{:keys [file-id page-id share-id] :as params}] diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 05c5f6f21..0af5a737b 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -1376,7 +1376,7 @@ (defn go-to-viewer ([] (go-to-viewer {})) - ([{:keys [file-id page-id section]}] + ([{:keys [file-id page-id section frame-id]}] (ptk/reify ::go-to-viewer ptk/WatchEvent (watch [_ state _] @@ -1384,7 +1384,9 @@ pparams {:file-id (or file-id current-file-id)} qparams (cond-> {:page-id (or page-id current-page-id)} (some? section) - (assoc :section section))] + (assoc :section section) + (some? frame-id) + (assoc :frame-id frame-id))] (rx/of ::dwp/force-persist (rt/nav-new-window* {:rname :viewer :path-params pparams diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 93c848be8..048c6cc9a 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 interactions-mode] :or {section :interactions interactions-mode :show-on-click}} query-params + {:keys [index share-id section page-id interactions-mode frame-id] :or {section :interactions interactions-mode :show-on-click}} query-params {:keys [file-id]} path-params] (if (:token query-params) [:& viewer/breaking-change-notice] @@ -119,7 +119,8 @@ :interactions-show? (case (keyword interactions-mode) :hide false :show true - :show-on-click false)}])) + :show-on-click false) + :frame-id frame-id}])) :workspace (let [project-id (some-> params :path :project-id uuid) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 7755d080a..71294dd08 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -222,11 +222,13 @@ (mf/use-callback (mf/deps (:id frame) on-frame-select) (fn [bevent] - (let [event (.-nativeEvent bevent)] + (let [event (.-nativeEvent bevent) + params {:section "interactions" + :frame-id (:id frame)}] (when (= 1 (.-which event)) (dom/prevent-default event) (dom/stop-propagation event) - (on-frame-select event (:id frame)))))) + (st/emit! (dw/go-to-viewer params)))))) on-double-click (mf/use-callback