pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] slides: prevent the # anchors of the PDF controllers from triggering a scroll jump

Browse Source 
PURPOSE

Currently, the PDF viewer is loaded from an iframe and the PDF controllers
contains empty anchor links. When the user clicks on one of these links,
the browsers based on Chromium will trigger a "scroll jump" and the iframe
will be placed at the top of the browser window.

When the PDF document is larger than the viewport, this behavior can be
quite annoying: The user will have to scroll the browser window to
see the controllers each time they click on a controller (-> link) as
(1) the controllers triggers a scroll jump and (2) the controllers are
below the document that does not fit entirely on screen. To avoid that,
the links of the PDF controllers will be replaced with spans. The
controllers will then no longer trigger a scroll jump.

SPECS

- Replace the links of the PDF controllers with spans.
- Add css rules to prevent user selection.

LINKS

Task id: 2500574

closes odoo/odoo#73937

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Julien Banken
2021-07-19 06:54:10 +00:00
parent 637967b1f9
commit 8ab2adfbdd
2 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/scss/website_slides.scss
+6 -1
View File
@@ -574,7 +574,12 @@ $o-wslides-fs-side-width: 300px;
background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
}
.oe_slides_panel_footer a, .oe_slides_share_bar a {
.oe_slides_panel_footer span[role="button"],
.oe_slides_panel_footer a,
.oe_slides_share_bar span[role="button"],
.oe_slides_share_bar a {
cursor: pointer;
user-select: none;
@include o-hover-text-color(rgba(white, 0.7), white);
&.disabled {
addons/website_slides/views/website_slides_templates_lesson_embed.xml
+13 -13
View File
@@ -104,28 +104,28 @@
<span class="input-group-text" id="page_count"/>
</div>
</div>
<a id="zoomout" href="#" class="text-decoration-none d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
<span id="zoomout" class="d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
<i class="fa fa-search-minus" />
</a>
<a id="zoomin" href="#" class="text-decoration-none d-none d-sm-inline" title="Zoom in" aria-label="Zoom in" role="button">
</span>
<span id="zoomin" class="d-none d-sm-inline" title="Zoom in" aria-label="Zoom in" role="button">
<i class="fa fa-search-plus" />
</a>
</span>
</div>
<div class="col text-center">
<a id="first" href="#" class="text-decoration-none mr-1 mr-sm-2" title="First slide" role="button" aria-label="First slide"> <i class="fa fa-step-backward"/> </a>
<a id="previous" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"> <i class="fa fa-arrow-circle-left"/> </a>
<a id="next" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"> <i class="fa fa-arrow-circle-right"/> </a>
<a id="last" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"> <i class="fa fa-step-forward"/> </a>
<span id="first" class="mr-1 mr-sm-2" title="First slide" aria-label="First slide" role="button"><i class="fa fa-step-backward"/></span>
<span id="previous" class="mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"><i class="fa fa-arrow-circle-left"/></span>
<span id="next" class="mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"><i class="fa fa-arrow-circle-right"/></span>
<span id="last" class="mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"><i class="fa fa-step-forward"/></span>
<a t-if="slide.slide_resource_downloadable" id="download" t-attf-href="/web/content/slide.slide/#{slide.id}/datas?download=true"
class="text-decoration-none ml-1 ml-sm-2" title="Download Content" role="img" aria-label="Download">
class="ml-1 ml-sm-2" title="Download Content" aria-label="Download" role="button">
<i class="fa fa-download" />
</a>
</div>
</div>
<div class="col-3 text-right flex-grow-0">
<a id="fullscreen" href="#" class="text-decoration-none ml-1 ml-sm-2"
title="View fullscreen" role="img" aria-label="Fullscreen">
<span id="fullscreen" class="ml-1 ml-sm-2"
title="View fullscreen" aria-label="Fullscreen" role="button">
<i class="fa fa-arrows-alt"/>
</a>
</span>
</div>
</div>
</div>