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

[REF] mail: chatWindowHeader, review and simplify scss

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

task-2785009

closes odoo/odoo#85842

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Elisabeth Dickinson
2022-04-29 13:12:44 +02:00
committed by Alexandre Kühn
parent b66409cad4
commit ed5f7007ff
2 changed files with 18 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+2 -68
View File
@@ -3,8 +3,6 @@
// ------------------------------------------------------------------
.o_ChatWindowHeader {
display: flex;
align-items: center;
height: $o-mail-chat-window-header-height;
&.o-mobile {
@@ -13,85 +11,21 @@
}
.o_ChatWindowHeader_command {
padding: map-get($spacers, 0) map-get($spacers, 3);
display: flex;
height: map-get($sizes, 100);
align-items: center;
&:hover {
background-color: rgba($black, 0.1);
}
}
.o_ChatWindowHeader_commandBack {
margin-right: map-get($spacers, 2);
}
.o_ChatWindowHeader_item {
margin: map-get($spacers, 0) map-get($spacers, 1);
&.o_ChatWindowHeader_rightArea {
margin-right: map-get($spacers, 0);
}
&:first-child {
margin-left: map-get($spacers, 3);
&.o_ChatWindowHeader_command {
margin-left: map-get($spacers, 0); // no margin for commands
}
}
&.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command {
margin-right: map-get($spacers, 0); // no margin for commands
}
}
.o_ChatWindowHeader_name {
max-height: map-get($sizes, 100);
}
.o_ChatWindowHeader_rightArea {
display: flex;
height: map-get($sizes, 100);
align-items: center;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_ChatWindowHeader {
background-color: $o-brand-odoo;
color: $white;
&:not(.o-mobile) {
cursor: pointer;
}
&:not(.o-mobile) {
&:hover .o_ChatWindowHeader_command {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
&:not(:hover) .o_ChatWindowHeader_command {
opacity: 0.5;
}
}
}
.o_ChatWindowHeader_command {
cursor: pointer;
&.o-mobile {
font-size: 1.3rem;
}
.o_ChatWindowHeader_command.o-mobile {
font-size: 1.3rem;
}
.o_ChatWindowHeader_name {
addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+16 -16
View File
@@ -3,77 +3,77 @@
<t t-name="mail.ChatWindowHeader" owl="1">
<t t-if="chatWindowHeaderView and chatWindow">
<div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
<div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'o_cursor_pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
<t t-if="chatWindow.hasCloseAsBackButton">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 mr-2" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
<i class="fa fa-arrow-left"/>
</div>
</t>
<t t-if="chatWindow.thread and chatWindow.thread.model === 'mail.channel'">
<ThreadIcon
className="'o_ChatWindowHeader_icon o_ChatWindowHeader_item'"
className="'o_ChatWindowHeader_icon o_ChatWindowHeader_item ms-3 me-1 my-0'"
threadLocalId="chatWindow.thread.localId"
/>
</t>
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_name text-truncate" t-att-title="chatWindow.name">
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_name mh-100 mx-1 my-0 text-truncate" t-att-class="{'ms-3':!chatWindow.thread or chatWindow.thread.model !== 'mail.channel'}" t-att-title="chatWindow.name">
<t t-esc="chatWindow.name"/>
</div>
<t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
<div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item">
<div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item mx-1 my-0">
(<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>)
</div>
</t>
<div class="o-autogrow"/>
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea">
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea d-flex align-items-center h-100 ms-1 me-0 my-0" t-att-class="{'opacity-75 opacity-100-hover': !messaging.device.isSmall }">
<t t-if="chatWindow.hasCallButtons">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
<i class="fa fa-video-camera"/>
</div>
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
<i class="fa fa-phone"/>
</div>
</t>
<t t-if="chatWindow.hasInviteFeature">
<t t-if="!chatWindow.channelInvitationForm">
<div class="o_ChatWindowHeader_command" title="Add users" t-on-click="chatWindow.onClickShowInviteForm">
<div class="o_ChatWindowHeader_command o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Add users" t-on-click="chatWindow.onClickShowInviteForm">
<i class="fa fa-lg fa-user-plus"/>
</div>
</t>
<t t-if="chatWindow.channelInvitationForm">
<div class="o_ChatWindowHeader_command" title="Stop adding users" t-on-click="chatWindow.onClickHideInviteForm">
<div class="o_ChatWindowHeader_command o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Stop adding users" t-on-click="chatWindow.onClickHideInviteForm">
<i class="fa fa-lg fa-user-plus"/>
</div>
</t>
</t>
<t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and !chatWindow.isMemberListOpened">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList" t-att-class="{ 'o-mobile': messaging.device.isSmall }" title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}" title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
<i class="fa fa-users"/>
</div>
</t>
<t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and chatWindow.isMemberListOpened">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList" t-att-class="{ 'o-mobile': messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
<i class="fa fa-users"/>
</div>
</t>
<t t-if="chatWindow.hasShiftPrev">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
<!-- this is reversed automatically when language is rtl -->
<i class="fa fa-angle-left"/>
</div>
</t>
<t t-if="chatWindow.hasShiftNext">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
<!-- this is reversed automatically when language is rtl -->
<i class="fa fa-angle-right"/>
</div>
</t>
<t t-if="chatWindow.isExpandable">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
<i class="fa fa-expand"/>
</div>
</t>
<t t-if="!chatWindow.hasCloseAsBackButton">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
<i class="fa fa-close"/>
</div>
</t>