[REF] mail: AttachmentViewer, review and simplify scss
Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2781992 Part-of: odoo/odoo#85772
This commit is contained in:
Brieuc-brd
@@ -3,134 +3,50 @@
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_AttachmentViewer {
|
||||
display: flex;
|
||||
width: map-get($sizes, 100);
|
||||
height: map-get($sizes, 100);
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_buttonNavigation {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_buttonNavigationNext {
|
||||
right: 15px;
|
||||
|
||||
> .fa {
|
||||
margin: 1px 0 0 1px; // not correctly centered for some reasons
|
||||
}
|
||||
.o_AttachmentViewer_buttonNavigationNextIcon {
|
||||
margin: 1px 0 0 1px; // not correctly centered for some reasons
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_buttonNavigationPrevious {
|
||||
left: 15px;
|
||||
|
||||
> .fa {
|
||||
margin: 1px 1px 0 0; // not correctly centered for some reasons
|
||||
}
|
||||
.o_AttachmentViewer_buttonNavigationPreviousIcon {
|
||||
margin: 1px 1px 0 0; // not correctly centered for some reasons
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_header {
|
||||
display: flex;
|
||||
height: $o-navbar-height;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_headerItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_headerItemButton {
|
||||
padding: 0 map-get($spacers, 3);
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_headerItemButtonIcon.o-hasLabel {
|
||||
margin-right: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_icon {
|
||||
margin-inline-start: map-get($spacers, 4);
|
||||
margin-inline-end: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_loading {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: -1;
|
||||
padding: 45px 0;
|
||||
|
||||
&.o_with_img {
|
||||
overflow: hidden;
|
||||
}
|
||||
padding: ($o-navbar-height * 1.125) 0;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_name {
|
||||
margin: 0 map-get($spacers, 2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_toolbar {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
bottom: $o-navbar-height * 1.125;
|
||||
transform: translateY(100%);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_toolbarButton {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_viewImage {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_viewIframe {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
|
||||
&.o-isMobile {
|
||||
width: map-get($sizes, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_viewVideo {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
|
||||
&.o-isMobile {
|
||||
width: map-get($sizes, 100);
|
||||
height: map-get($sizes, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_zoomer {
|
||||
position: absolute;
|
||||
padding: 45px 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ($o-navbar-height * 1.125) 0;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
@@ -144,8 +60,6 @@
|
||||
.o_AttachmentViewer_buttonNavigation {
|
||||
color: gray('400');
|
||||
background-color: lighten($black, 15%);
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: lighten(gray('400'), 15%);
|
||||
@@ -153,57 +67,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_header {
|
||||
background-color: rgba($black, 0.7);
|
||||
color: gray('400');
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_headerItemButton {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($white, 0.1);
|
||||
color: lighten(gray('400'), 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_headerItemButtonClose {
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_toolbar {
|
||||
cursor: pointer;
|
||||
.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 {
|
||||
cursor: not-allowed;
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
&:not(.o_disabled) {
|
||||
color: gray('400');
|
||||
cursor: pointer;
|
||||
@include o-hover-text-color($gray-400, lighten($gray-400, 15%));
|
||||
|
||||
&:hover {
|
||||
background-color: $black;
|
||||
color: lighten(gray('400'), 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_AttachmentViewer_view {
|
||||
background-color: $black;
|
||||
box-shadow: 0 0 40px $black;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
&.o_text {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.AttachmentViewer" owl="1">
|
||||
<div class="o_AttachmentViewer" t-attf-class="{{ className }}" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0" t-ref="root">
|
||||
<div class="o_AttachmentViewer flex-column align-items-center d-flex w-100 h-100" t-attf-class="{{ className }}" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0" t-ref="root">
|
||||
<t t-if="attachmentViewer">
|
||||
<div class="o_AttachmentViewer_header" t-on-click="_onClickHeader">
|
||||
<div class="o_AttachmentViewer_header d-flex w-100 bg-black-75 text-400" t-on-click="_onClickHeader">
|
||||
<t t-if="attachmentViewer.attachment.isViewable">
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon">
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon d-flex align-items-center ms-4 me-2">
|
||||
<t t-if="attachmentViewer.attachment.isImage">
|
||||
<i class="fa fa-picture-o" role="img" title="Image"/>
|
||||
</t>
|
||||
@@ -21,73 +21,73 @@
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name d-flex align-items-center mx-2">
|
||||
<span class="o_AttachmentViewer_nameText text-truncate" t-esc="attachmentViewer.attachment.displayName"/>
|
||||
</div>
|
||||
<div class="o-autogrow"/>
|
||||
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
|
||||
<i class="o_AttachmentViewer_headerItemButtonIcon fa fa-download fa-fw" t-att-class="{ 'o-hasLabel': messaging.device.sizeClass > env.device.SIZES.MD }" role="img"/>
|
||||
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton d-flex align-items-center px-3 o_cursor_pointer" t-on-click="_onClickDownload" role="button" title="Download">
|
||||
<i class="o_AttachmentViewer_headerItemButtonIcon fa fa-download fa-fw" t-att-class="{ 'o-hasLabel me-2': messaging.device.sizeClass > env.device.SIZES.MD }" role="img"/>
|
||||
<t t-if="messaging.device.sizeClass > env.device.SIZES.MD">
|
||||
<span>Download</span>
|
||||
</t>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close">
|
||||
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose d-flex align-items-center mb-0 px-3 h4 text-reset o_cursor_pointer" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close">
|
||||
<i class="fa fa-fw fa-times" role="img"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_main" t-att-class="{ o_with_img: attachmentViewer.attachment.isImage }" t-on-mousemove="_onMousemoveView">
|
||||
<div class="o_AttachmentViewer_main position-absolute top-0 bottom-0 start-0 end-0 align-items-center justify-content-center d-flex" t-att-class="{ 'o_with_img overflow-hidden': attachmentViewer.attachment.isImage }" t-on-mousemove="_onMousemoveView">
|
||||
<t t-if="attachmentViewer.attachment.isImage">
|
||||
<div class="o_AttachmentViewer_zoomer" t-ref="zoomer">
|
||||
<div class="o_AttachmentViewer_zoomer position-absolute align-items-center justify-content-center d-flex w-100 h-100" t-ref="zoomer">
|
||||
<t t-if="attachmentViewer.isImageLoading">
|
||||
<div class="o_AttachmentViewer_loading">
|
||||
<i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/>
|
||||
<div class="o_AttachmentViewer_loading position-absolute">
|
||||
<i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
|
||||
</div>
|
||||
</t>
|
||||
<img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
|
||||
<img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="attachmentViewer.attachment.isPdf">
|
||||
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile': messaging.device.isMobile }" t-att-src="attachmentViewer.attachment.defaultSource"/>
|
||||
<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"/>
|
||||
</t>
|
||||
<t t-if="attachmentViewer.attachment.isText">
|
||||
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text" t-att-src="attachmentViewer.attachment.defaultSource"/>
|
||||
<iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text 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" 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 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" t-att-class="{ 'o-isMobile': messaging.device.isMobile }" t-on-click="_onClickVideo" controls="controls">
|
||||
<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">
|
||||
<source t-att-data-type="attachmentViewer.attachment.mimetype" t-att-src="attachmentViewer.attachment.defaultSource"/>
|
||||
</video>
|
||||
</t>
|
||||
</div>
|
||||
<t t-if="attachmentViewer.attachment.isImage">
|
||||
<div class="o_AttachmentViewer_toolbar" role="toolbar">
|
||||
<div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
|
||||
<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">
|
||||
<i class="fa fa-fw fa-plus" role="img"/>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
|
||||
<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)">
|
||||
<i class="fa fa-fw fa-search" role="img"/>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
|
||||
<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">
|
||||
<i class="fa fa-fw fa-minus" role="img"/>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
|
||||
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
|
||||
<i class="fa fa-fw fa-repeat" role="img"/>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickPrint" title="Print" role="button">
|
||||
<div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" 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" t-on-click="_onClickDownload" title="Download" role="button">
|
||||
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton 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" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
|
||||
<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">
|
||||
<span class="fa fa-chevron-left" role="img"/>
|
||||
</div>
|
||||
<div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
|
||||
<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">
|
||||
<span class="fa fa-chevron-right" role="img"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user