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

[IMP] mail: AttachmentViewer, keep consistency with classes

Browse Source 
Prior this commit,`o_AttachmentViewer_toolbar`,
`o_AttachmentViewer_viewIframe` and buttons used CSS properties with
arbitrary values.

To keep the layout consistent and remove more raw css, this commit uses
component and utility classes instead.

task-2781992

closes odoo/odoo#85772

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-03-17 18:37:00 +01:00
parent 22286a1688
commit b2fa832fb8
2 changed files with 14 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+2 -37
View File
@@ -32,19 +32,6 @@
min-width: 0;
}
.o_AttachmentViewer_toolbar {
bottom: $o-navbar-height * 1.125;
transform: translateY(100%);
}
.o_AttachmentViewer_toolbarButton {
padding: 8px;
}
.o_AttachmentViewer_viewIframe {
width: 90%;
}
.o_AttachmentViewer_zoomer {
padding: ($o-navbar-height * 1.125) 0;
}
@@ -57,35 +44,13 @@
outline: none;
}
.o_AttachmentViewer_buttonNavigation {
color: gray('400');
background-color: lighten($black, 15%);
&:hover {
color: lighten(gray('400'), 15%);
background-color: $black;
}
}
.o_AttachmentViewer_headerItemButton:hover {
background-color: rgba($white, 0.1);
color: lighten($gray-400, 15%);
}
.o_AttachmentViewer_toolbarButton {
background-color: lighten($black, 15%);
&.o_disabled {
filter: brightness(1.3);
}
&:not(.o_disabled) {
@include o-hover-text-color($gray-400, lighten($gray-400, 15%));
&:hover {
background-color: $black;
}
}
.o_AttachmentViewer_toolbarButton.o_disabled {
filter: brightness(1.3);
}
.o_AttachmentViewer_view {
addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+12 -12
View File
@@ -47,13 +47,13 @@
</div>
</t>
<t t-if="attachmentViewer.attachment.isPdf">
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile w-100': messaging.device.isMobile }" t-att-src="attachmentViewer.attachment.defaultSource"/>
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf w-75 h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile w-100': messaging.device.isMobile }" t-att-src="attachmentViewer.attachment.defaultSource"/>
</t>
<t t-if="attachmentViewer.attachment.isText">
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text h-100 bg-white border-0" t-att-src="attachmentViewer.attachment.defaultSource"/>
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text w-75 h-100 bg-white border-0" t-att-src="attachmentViewer.attachment.defaultSource"/>
</t>
<t t-if="attachmentViewer.attachment.isUrlYoutube">
<iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube h-100 bg-black border-0" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
<iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube w-75 h-100 bg-black border-0" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
</t>
<t t-if="attachmentViewer.attachment.isVideo">
<video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75 bg-black" t-att-class="{ 'o-isMobile w-100 h-100': messaging.device.isMobile }" t-on-click="_onClickVideo" controls="controls">
@@ -62,32 +62,32 @@
</t>
</div>
<t t-if="attachmentViewer.attachment.isImage">
<div class="o_AttachmentViewer_toolbar position-absolute d-flex" role="toolbar">
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
<div class="o_AttachmentViewer_toolbar position-absolute bottom-0 d-flex" role="toolbar">
<div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
<i class="fa fa-fw fa-plus" role="img"/>
</div>
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
<div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
<i class="fa fa-fw fa-search" role="img"/>
</div>
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
<div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
<i class="fa fa-fw fa-minus" role="img"/>
</div>
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
<div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
<i class="fa fa-fw fa-repeat" role="img"/>
</div>
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickPrint" title="Print" role="button">
<div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="_onClickPrint" title="Print" role="button">
<i class="fa fa-fw fa-print" role="img"/>
</div>
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickDownload" title="Download" role="button">
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0 o_cursor_pointer" t-on-click="_onClickDownload" title="Download" role="button">
<i class="fa fa-download fa-fw" role="img"/>
</div>
</div>
</t>
<t t-if="attachmentViewer.attachments.length > 1">
<div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious o_AttachmentViewer_buttonNavigationPreviousIcon btn position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle text-400" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
<div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious o_AttachmentViewer_buttonNavigationPreviousIcon btn btn-dark position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
<span class="fa fa-chevron-left" role="img"/>
</div>
<div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext o_AttachmentViewer_buttonNavigationNextIcon btn position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle text-400" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
<div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext o_AttachmentViewer_buttonNavigationNextIcon btn btn-dark position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
<span class="fa fa-chevron-right" role="img"/>
</div>
</t>