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

[REF] mail: Follower, review and simplify scss

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

task-2818584

closes odoo/odoo#88196

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-04-08 17:12:48 +02:00
parent a29a7183a4
commit bbe2702cec
2 changed files with 13 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/follower/follower.scss
+8 -38
View File
@@ -2,55 +2,25 @@
// Layout
// ------------------------------------------------------------------
.o_Follower {
display: flex;
flex-flow: row;
justify-content: space-between;
padding: map-get($spacers, 0);
}
.o_Follower_avatar {
width: 24px;
height: 24px;
margin-inline-end: map-get($spacers, 2);
width: $o-mail-partner-avatar-size;
height: $o-mail-partner-avatar-size;
}
.o_Follower_details {
align-items: center;
display: flex;
flex: 1;
min-width: 0;
padding-left: map-get($spacers, 3);
padding-right: map-get($spacers, 3);
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_Follower_avatar {
border-radius: 50%;
.o_Follower_button:hover {
background: $gray-400;
color: $black;
}
.o_Follower_button {
border-radius: 0;
&:hover {
background: gray('400');
color: $black;
}
}
.o_Follower_details {
color: gray('700');
&:hover {
background: gray('400');
color: $black;
}
&.o-inactive {
opacity: 0.25;
font-style: italic;
}
.o_Follower_details:hover {
background: $gray-400;
color: $black;
}
addons/mail/static/src/components/follower/follower.xml
+5 -5
View File
@@ -3,16 +3,16 @@
<t t-name="mail.Follower" owl="1">
<t t-if="follower">
<div class="o_Follower" t-attf-class="{{ className }}" t-on-click="props.onClick" t-ref="root">
<a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
<img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
<div class="o_Follower d-flex justify-content-between p-0" t-attf-class="{{ className }}" t-on-click="props.onClick" t-ref="root">
<a class="o_Follower_details d-flex align-items-center flex-grow-1 px-3 text-700" t-att-class="{ 'o-inactive font-italic opacity-25': !follower.isActive }" href="#" t-on-click="_onClickDetails">
<img class="o_Follower_avatar me-2 rounded-circle" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
<span class="o_Follower_name flex-shrink text-truncate" t-esc="follower.partner.nameOrDisplayName"/>
</a>
<t t-if="follower.isEditable">
<button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
<button class="o_Follower_button o_Follower_editButton btn btn-icon rounded-0" title="Edit subscription" t-on-click="_onClickEdit">
<i class="fa fa-pencil"/>
</button>
<button class="btn btn-icon o_Follower_button o_Follower_removeButton" title="Remove this follower" t-on-click="_onClickRemove">
<button class="o_Follower_button o_Follower_removeButton btn btn-icon rounded-0" title="Remove this follower" t-on-click="_onClickRemove">
<i class="fa fa-remove"/>
</button>
</t>