Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-27 00:49:28 -05:00
Code Issues Activity

🐛 Fix viewer header hover

Browse source
This commit is contained in:
Aitor 2024-01-24 14:14:08 +01:00
parent 748bc45eb7
commit 74e10c3629
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -354,7 +354,6 @@
wrapper (dom/get-element "inspect-svg-wrapper")
section (dom/get-element "inspect-svg-container")
target (.-target event)]
;; TODO: Reemplazar el dom/class? por un data-attribute
(when (or (dom/child? target wrapper) (dom/id? target "inspect-svg-container"))
(let [norm-event ^js (nw/normalize-wheel event)
mod? (kbd/mod? event)
@ -436,7 +435,9 @@
fullscreen-dom? (dom/fullscreen?)]
(when (not= fullscreen? fullscreen-dom?)
(if fullscreen?
(wapi/request-fullscreen wrapper)
(let [layout (dom/get-element "viewer-layout")]
(dom/set-data! layout "force-visible" false)
(wapi/request-fullscreen wrapper))
(wapi/exit-fullscreen))))))
(mf/use-effect
@ -521,16 +522,9 @@
:data-fullscreen fullscreen?
:data-force-visible (:show-thumbnails local)}
[:div {:class (stl/css :viewer-content)}
[:& header/header {:project project
:index index
:file file
:page page
:frame frame
:permissions permissions
:zoom zoom
:section section
:interactions-mode interactions-mode}]
[:button {:on-click on-thumbnails-close
:class (stl/css-case :thumbnails-close true
@ -587,7 +581,17 @@
:overlays overlays
:zoom zoom
:section section
:index index}]]))]]]))
:index index}]]))]]
[:& header/header {:project project
:index index
:file file
:page page
:frame frame
:permissions permissions
:zoom zoom
:section section
:interactions-mode interactions-mode}]]))
;; --- Component: Viewer

12
frontend/src/app/main/ui/viewer/header.scss
View file

@ -303,10 +303,20 @@
}
/** FULLSCREEN */
[data-fullscreen="true"] .viewer-header::after {
content: " ";
position: absolute;
width: 100%;
height: $s-48;
left: 0;
top: $s-48;
}
[data-fullscreen="true"] .viewer-header {
transform: translateY(-$s-48);
}
[data-force-visible="true"] .viewer-header {
[data-force-visible="true"] .viewer-header,
[data-fullscreen="true"] .viewer-header:hover {
transform: translateY(0);
}