3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 20:46:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add preserve scroll option

Browse source
This commit is contained in:
Andrés Moya 2021-11-02 15:19:11 +01:00
parent 3d59d31b0a
commit f913816d87
14 changed files with 94 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/main/layouts/handoff.scss
View file

@ -46,7 +46,7 @@ $width-settings-bar: 16rem;
}
.handoff-layout {
.viewer-preview {
.viewer-section {
flex-wrap: nowrap;
}
.settings-bar {

2
frontend/resources/styles/main/partials/viewer.scss
View file

@ -6,7 +6,7 @@
grid-template-columns: 1fr;
}
.viewer-preview {
.viewer-section {
height: calc(100vh - 48px);
grid-row: 1 / span 2;

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

@ -302,6 +302,21 @@
(update [_ state]
(assoc-in state [:viewer-local :interactions-show?] false))))
(defn set-nav-scroll
[scroll]
(ptk/reify ::set-nav-scroll
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :nav-scroll] scroll))))
(defn reset-nav-scroll
[]
(ptk/reify ::reset-nav-scroll
ptk/UpdateEvent
(update [_ state]
(d/dissoc-in state [:viewer-local :nav-scroll]))))
;; --- Navigation inside page
(defn go-to-frame-by-index

3
frontend/src/app/main/ui/shapes/export.cljs
View file

@ -242,7 +242,8 @@
:penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y])
:penpot:url (:url interaction)
:penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction))
:penpot:background-overlay ((d/nilf str) (:background-overlay interaction))}])]))
:penpot:background-overlay ((d/nilf str) (:background-overlay interaction))
:penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])]))
(mf/defc export-data
[{:keys [shape]}]

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

@ -43,6 +43,8 @@
local (mf/deref refs/viewer-local)
nav-scroll (:nav-scroll local)
page-id (or page-id (-> file :data :pages first))
page (mf/use-memo
@ -91,6 +93,14 @@
(fn []
(events/unlistenByKey key1)))))
(mf/use-layout-effect
(mf/deps nav-scroll)
(fn []
(when (number? nav-scroll)
(let [viewer-section (dom/get-element "viewer-section")]
(st/emit! (dv/reset-nav-scroll))
(dom/set-scroll-pos! viewer-section nav-scroll)))))
[:div {:class (dom/classnames
:force-visible (:show-thumbnails local)
:viewer-layout (not= section :handoff)
@ -110,7 +120,7 @@
:show? (:show-thumbnails local false)
:page page
:index index}]
[:section.viewer-preview
[:section.viewer-section {:id "viewer-section"}
(cond
(empty? frames)
[:section.empty-state

7
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -44,7 +44,12 @@
(case (:action-type interaction)
:navigate
(when-let [frame-id (:destination interaction)]
(st/emit! (dv/go-to-frame frame-id)))
(let [viewer-section (dom/get-element "viewer-section")
scroll (if (:preserve-scroll interaction)
(dom/get-scroll-pos viewer-section)
0)]
(st/emit! (dv/set-nav-scroll scroll)
(dv/go-to-frame frame-id))))
:open-overlay
(let [dest-frame-id (:destination interaction)

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -169,6 +169,7 @@
overlay-pos-type (:overlay-pos-type interaction)
close-click-outside? (:close-click-outside interaction false)
background-overlay? (:background-overlay interaction false)
preserve-scroll? (:preserve-scroll interaction false)
extended-open? (mf/use-state false)
@ -197,6 +198,11 @@
value (when (not= value "") (uuid/uuid value))]
(update-interaction index #(cti/set-destination % value))))
change-preserve-scroll
(fn [event]
(let [value (-> event dom/get-target dom/checked?)]
(update-interaction index #(cti/set-preserve-scroll % value))))
change-url
(fn [event]
(let [target (dom/get-target event)
@ -295,6 +301,17 @@
(not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame
[:option {:value (str (:id frame))} (:name frame)]))]])
; Preserve scroll
(when (cti/has-preserve-scroll interaction)
[:div.interactions-element
[:div.input-checkbox
[:input {:type "checkbox"
:id (str "preserve-" index)
:checked preserve-scroll?
:on-change change-preserve-scroll}]
[:label {:for (str "preserve-" index)}
(tr "workspace.options.interaction-preserve-scroll")]]])
; URL
(when (cti/has-url interaction)
[:div.interactions-element

8
frontend/src/app/util/dom.cljs
View file

@ -340,6 +340,14 @@
(defn remove-attribute [^js node ^string attr]
(.removeAttribute node attr))
(defn get-scroll-pos
[element]
(.-scrollTop ^js element))
(defn set-scroll-pos!
[element scroll]
(obj/set! ^js element "scrollTop" scroll))
(defn scroll-into-view!
([element]
(.scrollIntoView ^js element false))

3
frontend/src/app/util/import/parser.cljs
View file

@ -763,7 +763,8 @@
(assoc :delay (get-meta node :delay d/parse-double))
(cti/has-destination interaction)
(assoc :destination (get-meta node :destination uuid/uuid))
(assoc :destination (get-meta node :destination uuid/uuid)
:preserve-scroll (get-meta node :preserve-scroll str->bool))
(cti/has-url interaction)
(assoc :url (get-meta node :url str))

5
frontend/translations/en.po
View file

@ -2469,6 +2469,10 @@ msgstr "Top right"
msgid "workspace.options.interaction-position"
msgstr "Position"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-preserve-scroll"
msgstr "Preserve scroll position"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-prev-screen"
msgstr "Previous screen"
@ -3200,4 +3204,3 @@ msgstr "Update"
msgid "workspace.viewport.click-to-close-path"
msgstr "Click to close the path"

4
frontend/translations/es.po
View file

@ -2464,6 +2464,10 @@ msgstr "Arriba derecha"
msgid "workspace.options.interaction-position"
msgstr "Posición"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-preserve-scroll"
msgstr "Conservar posición de desplazamiento"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-prev-screen"
msgstr "Pantalla anterior"