[REF] mail: ChatWindowHiddenMenu, review and simplify scss

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

task-2781992

Part-of: odoo/odoo#86244
This commit is contained in:
Brieuc-brd
2022-03-24 17:11:51 +01:00
parent 1b5fa72056
commit f1555eac93
2 changed files with 9 additions and 64 deletions
@@ -3,80 +3,25 @@
// ------------------------------------------------------------------
.o_ChatWindowHiddenMenu {
position: fixed;
bottom: 0;
display: flex;
width: 50px;
height: 28px;
align-items: stretch;
}
.o_ChatWindowHiddenMenu_chatWindowHeader {
max-width: 200px;
}
.o_ChatWindowHiddenMenu_dropdownToggle {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
max-width: map-get($sizes, 100);
}
.o_ChatWindowHiddenMenu_dropdownToggleItem {
margin: map-get($spacers, 0) map-get($spacers, 1);
}
.o_ChatWindowHiddenMenu_list {
overflow: auto;
margin: map-get($spacers, 0);
padding: map-get($spacers, 0);
}
.o_ChatWindowHiddenMenu_listItem {
&:not(:last-child) {
border-bottom: $border-width solid $border-color;
}
}
.o_ChatWindowHiddenMenu_unreadCounter {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
z-index: 1001; // on top of bootstrap dropup menu
}
.o_ChatWindowHiddenMenu_windowCounter {
margin-left: map-get($spacers, 1);
z-index: $zindex-tooltip; // on top of bootstrap dropup menu
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_ChatWindowHiddenMenu {
background-color: gray('900');
border-radius: 6px 6px 0 0;
color: $white;
cursor: pointer;
}
.o_ChatWindowHiddenMenu_chatWindowHeader {
opacity: 0.95;
&:hover {
opacity: 1;
}
}
.o_ChatWindowHiddenMenu_dropdownToggle.show {
opacity: 0.5;
}
.o_ChatWindowHiddenMenu_unreadCounter {
background-color: $o-brand-primary;
}
.o_ChatWindowHiddenMenu_windowCounter {
@@ -2,18 +2,18 @@
<templates xml:space="preserve">
<t t-name="mail.ChatWindowHiddenMenu" owl="1">
<div class="dropup o_ChatWindowHiddenMenu" t-attf-class="{{ className }}" t-ref="root">
<div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
<div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
<div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
<div class="o_ChatWindowHiddenMenu dropup position-fixed bottom-0 align-items-stretch d-flex rounded-lg-top bg-900 o_cursor_pointer" t-attf-class="{{ className }}" t-ref="root">
<div class="o_ChatWindowHiddenMenu_dropdownToggle dropdown-toggle justify-content-center align-items-center flex-grow-1 d-flex mw-100" t-att-class="{ 'show opacity-50': messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
<div class="o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem mx-1 fa fa-comments-o"/>
<div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter mx-1 text-truncate">
<t t-esc="messaging.chatWindowManager.allOrderedHidden.length"/>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-right o_ChatWindowHiddenMenu_list" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
<ul class="o_ChatWindowHiddenMenu_list dropdown-menu dropdown-menu-right m-0 p-0 overflow-auto" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
<t t-foreach="messaging.chatWindowManager.allOrderedHidden" t-as="chatWindow" t-key="chatWindow.localId">
<li class="o_ChatWindowHiddenMenu_listItem" role="menuitem">
<li class="o_ChatWindowHiddenMenu_listItem" t-att-class="{ 'border-bottom' : !chatWindow_last }" role="menuitem">
<ChatWindowHeader
className="'o_ChatWindowHiddenMenu_chatWindowHeader'"
className="'o_ChatWindowHiddenMenu_chatWindowHeader opacity-100-hover'"
chatWindowLocalId="chatWindow.localId"
onClicked="_onClickedChatWindow"
/>
@@ -21,7 +21,7 @@
</t>
</ul>
<t t-if="messaging.chatWindowManager.unreadHiddenConversationAmount > 0">
<div class="badge badge-pill o_ChatWindowHiddenMenu_unreadCounter">
<div class="o_ChatWindowHiddenMenu_unreadCounter position-absolute end-0 top-0 badge badge-pill badge-primary">
<t t-esc="messaging.chatWindowManager.unreadHiddenConversationAmount"/>
</div>
</t>