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

[REF] mail: AttachmentCard, review and simplify scss

Browse Source 
Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2781992

closes odoo/odoo#85592

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-03-16 18:50:51 +01:00
parent 9f4c66107e
commit b945d08c53
2 changed files with 13 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/attachment_card/attachment_card.scss
-67
View File
@@ -20,87 +20,20 @@
}
}
.o_AttachmentCard_asideItem {
width: 100%;
height: 100%;
}
.o_AttachmentCard_asideItemUnlink.o-pretty {
top: 0;
transform: translateX(100%);
}
.o_AttachmentCard_details {
flex-flow: column;
min-width: 0; /* This allows the text ellipsis in the flex element */
/* prevent hover delete button & attachment image to be too close to the text */
padding-left : map-get($spacers, 1);
padding-right : map-get($spacers, 1);
}
.o_AttachmentCard_filename {
text-overflow: ellipsis;
}
.o_AttachmentCard_image {
flex-shrink: 0;
margin: 3px;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_AttachmentCard.o-has-card-details {
background-color: gray('300');
border-radius: 5px;
}
.o_AttachmentCard_aside {
border-radius: 0 5px 5px 0;
}
.o_AttachmentCard_asideItemDownload {
cursor: pointer;
&:hover {
background-color: gray('400');
}
}
.o_AttachmentCard_asideItemUnlink {
cursor: pointer;
&:not(.o-pretty):hover {
background-color: gray('400');
}
&.o-pretty {
color: white;
background-color: $o-brand-primary;
&:hover {
background-color: darken($o-brand-primary, 10%);
}
}
}
.o_AttachmentCard_asideItemUploaded {
color: $o-brand-primary;
}
.o_AttachmentCard_extension {
font-size: 80%;
font-weight: 400;
}
.o_AttachmentCard_image.o-attachment-viewable {
cursor: zoom-in;
&:not(.o-details-overlay):hover {
opacity: 0.7;
}
}
// ------------------------------------------------------------------
addons/mail/static/src/components/attachment_card/attachment_card.xml
+13 -13
View File
@@ -3,7 +3,7 @@
<t t-name="mail.AttachmentCard" owl="1">
<div t-attf-class="{{ className }}" t-ref="root">
<t t-if="attachmentCard">
<div class="o_AttachmentCard d-flex o-has-card-details"
<div class="o_AttachmentCard o-has-card-details d-flex rounded bg-300"
t-att-class="{
'o-downloadable': !attachmentCard.attachmentList.composerViewOwner,
'o-isUploading': attachmentCard.attachment.isUploading,
@@ -12,47 +12,47 @@
>
<!-- Image style-->
<!-- o_image from mimetype.scss -->
<div class="o_AttachmentCard_image o_image" t-on-click="attachmentCard.onClickImage" t-att-class="{'o-attachment-viewable': attachmentCard.attachment.isViewable,}" t-att-data-mimetype="attachmentCard.attachment.mimetype">
<div class="o_AttachmentCard_image o_image flex-shrink-0 m-1" t-on-click="attachmentCard.onClickImage" t-att-class="{'o-attachment-viewable opacity-75-hover': attachmentCard.attachment.isViewable,}" t-att-data-mimetype="attachmentCard.attachment.mimetype">
</div>
<!-- Attachment details -->
<div class="o_AttachmentCard_details d-flex justify-content-center">
<div class="o_AttachmentCard_details d-flex justify-content-center flex-column px-1">
<t t-if="attachmentCard.attachment.displayName">
<div class="o_AttachmentCard_filename overflow-hidden text-nowrap">
<div class="o_AttachmentCard_filename text-truncate">
<t t-esc="attachmentCard.attachment.displayName"/>
</div>
</t>
<t t-if="attachmentCard.attachment.extension">
<div class="o_AttachmentCard_extension text-uppercase">
<small class="o_AttachmentCard_extension text-uppercase">
<t t-esc="attachmentCard.attachment.extension"/>
</div>
</small>
</t>
</div>
<!-- Attachment aside -->
<t t-if="(!attachmentCard.attachmentList.composerViewOwner or attachmentCard.attachment.isEditable)">
<div class="o_AttachmentCard_aside position-relative overflow-hidden" t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerViewOwner and attachmentCard.attachment.isEditable }">
<div class="o_AttachmentCard_aside position-relative rounded-right overflow-hidden" t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerViewOwner and attachmentCard.attachment.isEditable }">
<!-- Uploading icon -->
<t t-if="attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center" title="Uploading">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center w-100 h-100" title="Uploading">
<i class="fa fa-spin fa-spinner"/>
</div>
</t>
<!-- Uploaded icon -->
<t t-if="!attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploaded d-flex justify-content-center align-items-center" title="Uploaded">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploaded d-flex justify-content-center align-items-center w-100 h-100 text-primary" title="Uploaded">
<i class="fa fa-check"/>
</div>
</t>
<!-- Remove button -->
<t t-if="attachmentCard.attachment.isEditable">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink d-flex justify-content-center align-items-center" t-att-class="{ 'o-pretty position-absolute': attachmentCard.attachmentList.composerViewOwner }" t-on-click="attachmentCard.onClickUnlink" title="Remove">
<button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary' : 'bg-300' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
<i class="fa fa-trash"/>
</div>
</button>
</t>
<!-- Download button -->
<t t-if="!attachmentCard.attachmentList.composerViewOwner and !attachmentCard.attachment.isUploading">
<div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload d-flex justify-content-center align-items-center" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
<button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-300" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
<i class="fa fa-download"/>
</div>
</button>
</t>
</div>
</t>