[REF] mail: discuss scss refactoring

Current SCSS is replaced with global Bootstrap classes, in
order to reduce code lines and to increase performance.

Task-2813949

Part-of: odoo/odoo#87915
This commit is contained in:
Carlos Valverde
2022-06-15 17:18:55 +02:00
parent 11182f3479
commit 9cbbb02481
2 changed files with 11 additions and 90 deletions
@@ -1,87 +1,8 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_Discuss {
display: flex;
height: map-get($sizes, 100);
min-height: 0;
&.o-isDeviceSmall {
flex-flow: column;
align-items: center;
}
}
.o_Discuss_content {
height: map-get($sizes, 100);
overflow: auto;
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
.o_Discuss_mobileAddItemHeader {
display: flex;
justify-content: center;
width: map-get($sizes, 100);
padding: map-get($spacers, 3);
}
.o_Discuss_mobileAddItemHeaderInput {
flex: 1 1 auto;
margin-bottom: map-get($spacers, 3);
padding: map-get($spacers, 2);
}
.o_Discuss_mobileMailboxSelection {
width: map-get($sizes, 100);
}
.o_Discuss_mobileNavbar {
width: map-get($sizes, 100);
}
.o_Discuss_noThread {
display: flex;
flex: 1 1 auto;
width: map-get($sizes, 100);
align-items: center;
justify-content: center;
}
.o_Discuss_sidebar {
height: map-get($sizes, 100);
overflow: auto;
padding-top: map-get($spacers, 3);
flex: 0 0 auto;
}
.o_Discuss_thread {
flex: 1 1 0;
min-width: 0;
&.o-isDeviceSmall {
width: map-get($sizes, 100);
}
}
.o_Discuss_notificationList {
width: map-get($sizes, 100);
flex: 1 1 0;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_Discuss.o-isDeviceSmall {
background-color: $white;
}
.o_Discuss_mobileAddItemHeaderInput {
appearance: none;
border: $border-width solid gray('400');
border-radius: 5px;
outline: none;
}
@@ -3,16 +3,16 @@
<t t-name="mail.Discuss" owl="1">
<t t-if="discussView">
<div class="o_Discuss" t-attf-class="{{ className }}"
t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }"
<div class="o_Discuss d-flex h-100" t-attf-class="{{ className }}"
t-att-class="{ 'o-isDeviceSmall flex-column align-items-center bg-white': messaging.device.isSmall }"
t-ref="root"
>
<t t-if="!messaging.device.isSmall">
<DiscussSidebar className="'o_Discuss_sidebar bg-light border-right'" record="discussView"/>
<DiscussSidebar className="'o_Discuss_sidebar flex-shrink-0 h-100 pt-3 border-right bg-light'" record="discussView"/>
</t>
<t t-if="messaging.device.isSmall" t-call="mail.Discuss.content"/>
<t t-else="">
<div class="o_Discuss_content">
<div class="o_Discuss_content d-flex flex-column flex-grow-1 h-100 overflow-auto">
<t t-call="mail.Discuss.content"/>
</div>
</t>
@@ -22,12 +22,12 @@
<t t-name="mail.Discuss.content" owl="1">
<t t-if="messaging.device.isSmall and discussView.discuss.activeMobileNavbarTabId === 'mailbox'">
<DiscussMobileMailboxSelection className="'o_Discuss_mobileMailboxSelection border-bottom'" record="discussView"/>
<DiscussMobileMailboxSelection className="'o_Discuss_mobileMailboxSelection w-100 border-bottom'" record="discussView"/>
</t>
<t t-if="discussView.mobileAddItemHeaderAutocompleteInputView">
<div class="o_Discuss_mobileAddItemHeader border-bottom">
<div class="o_Discuss_mobileAddItemHeader d-flex justify-content-center w-100 p-3 border-bottom">
<AutocompleteInput
className="'o_Discuss_mobileAddItemHeaderInput'"
className="'o_Discuss_mobileAddItemHeaderInput flex-grow-1 mb-3 p-2 rounded border'"
record="discussView.mobileAddItemHeaderAutocompleteInputView"
select="discussView.onMobileAddItemHeaderInputSelect"
source="discussView.onMobileAddItemHeaderInputSource"
@@ -39,12 +39,12 @@
<t name="beforeThread"/>
<ThreadView
className="'o_Discuss_thread'"
classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
classNameObj="{ 'o-isDeviceSmall w-100': messaging.device.isSmall }"
record="discussView.discuss.threadView"
/>
</t>
<t t-if="!discussView.discuss.thread and (!messaging.device.isSmall or discussView.discuss.activeMobileNavbarTabId === 'mailbox')">
<div class="o_Discuss_noThread">
<div class="o_Discuss_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100">
No conversation selected.
</div>
</t>
@@ -61,11 +61,11 @@
</t>
</t>
<t t-if="discussView.discuss.notificationListView">
<NotificationList className="'o_Discuss_notificationList'" record="discussView.discuss.notificationListView"/>
<NotificationList className="'o_Discuss_notificationList flex-grow-1 w-100'" record="discussView.discuss.notificationListView"/>
</t>
<t t-if="discussView.discuss.mobileMessagingNavbarView">
<MobileMessagingNavbar
className="'o_Discuss_mobileNavbar'"
className="'o_Discuss_mobileNavbar w-100'"
record="discussView.discuss.mobileMessagingNavbarView"
/>
</t>