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

[FIX] mail: DocumentViewer's buttons alignment on mobile

Browse Source 
The action buttons in the document viewer were badly aligned on small
screens, and specifically when moving to multiple lines to fit on the
viewport.

This commit adjusts the positionning and margins between those buttons
to stay consistent on every screens size (smallest to biggest).

Task ID: 1917277
This commit is contained in:
Pierre Paridans
2019-05-23 13:12:58 +00:00
parent 71a2d7c06a
commit 627fd77248
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/scss/composer.scss
+13 -3
View File
@@ -437,6 +437,12 @@
box-shadow: 1px 1px 20px 1px #000;
}
@include media-breakpoint-down(sm) {
.o_viewer_pdf, .o_viewer_text {
width: 100%;
}
}
.o_viewer_text {
width: 80%;
height: 100%;
@@ -452,11 +458,15 @@
}
.o_viewer_toolbar {
@include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
transform: translate(-50%, -50%);
@include o-position-absolute($bottom: $grid-gutter-width*0.5);
width: 100%;
overflow: hidden;
justify-content: center;
border-radius: 4px;
background-color: rgba(black, 0.4);
> .btn-group {
background-color: rgba(black, 0.4);
}
.o_viewer_toolbar_btn {
@include o-viewer-black-btn;
addons/mail/static/src/xml/thread.xml
+3 -3
View File
@@ -61,15 +61,15 @@
</div>
</div>
<div t-if="widget.activeAttachment.fileType == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
<div class="btn-group ml0" role="group">
<div class="btn-group" role="group">
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
</div>
<div class="btn-group ml8" role="group">
<div class="btn-group" role="group">
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
</div>
<div class="btn-group ml8" role="group">
<div class="btn-group" role="group">
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
<a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
</div>