From a5f8ed89758f1bff15cffeb134314d4fc2848923 Mon Sep 17 00:00:00 2001
From: stefanorigano <sri@odoo.com>
Date: Sat, 30 Sep 2017 11:53:10 +0200
Subject: [PATCH] [REF] mail: adapt systray mobile chatter to v11 design
---
.../mail/static/src/less/client_action.less | 100 ++++++++++--------
addons/mail/static/src/less/systray.less | 4 +-
2 files changed, 54 insertions(+), 50 deletions(-)
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index dc63c251db72..3b6b8432af7c 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -302,16 +302,17 @@
}
.o_mail_chat_mobile_inbox_buttons {
+ .o-flex-display();
.o-flex(0, 0, auto);
- padding: 15px 15px 10px 15px;
+ z-index: 2;
+ box-shadow: 0 2px 4px @gray-lighter-darker;
+
.o_channel_inbox_item {
- width: 50%;
- border: 1px solid @odoo-brand-optional;
- &:first-child {
- border-radius: 4px 0px 0px 4px;
- }
- &:last-child {
- border-radius: 0px 4px 4px 0px;
+ .o-flex(1, 1, 50%);
+ padding: 2%;
+
+ &.btn-default {
+ border-bottom: 1px solid @gray-lighter-darker
}
}
}
@@ -358,7 +359,6 @@
.o_mail_channel_preview {
.o-flex-display();
- border-bottom: 1px solid @gray-lighter-darker;
background-color: @gray-lighter;
color: @odoo-main-text-color;
cursor: pointer;
@@ -370,10 +370,14 @@
color: @headings-color;
}
}
+ &:not(:last-child) {
+ border-bottom: 1px solid @gray-lighter-darker;
+ }
.o_mail_channel_image {
.o-flex(0, 0, auto);
position: relative;
> img {
+ .square(100%);
border-radius: 50%;
}
&.o_mail_channel_app > img {
@@ -427,60 +431,62 @@
}
@media (max-width: @screen-xs-max) {
+ @o-mail-chatter-mobile-gap: 2%;
+
+ .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
+ border: none;
+ }
+
.o_mail_channel_preview {
- height: 85px;
- padding: 15px;
- .o_channel_info {
- margin-left: 15px;
- padding-top: 5px;
- .o_channel_title {
- .o_channel_name, .o_channel_counter {
- font-size: 15px;
- font-weight: 500;
- }
- .o_last_message_date {
- padding-top: 2px;
- margin-left: 10px;
- }
- }
+ padding: @o-mail-chatter-mobile-gap;
+
+ .o_mail_channel_image:not(img) {
+ width: @o-mail-chatter-mobile-gap*6;
}
- &.o_channel_unread {
- .o_channel_info .o_last_message_preview {
- font-weight: 500;
- }
+
+ .o_channel_info, .o_last_message_date {
+ margin-left: @o-mail-chatter-mobile-gap;
}
- }
- .o_mail_channel_image {
- width: 55px;
- > img {
- max-height: 55px;
+
+ .o_channel_name {
+ font-size: 1.1em;
+ }
+
+ .o_last_message_date {
+ font-size: 0.9em;
+ }
+
+ .o_last_message_preview {
+ margin-top: @o-mail-chatter-mobile-gap*0.5;
}
}
+
.o_mail_mobile_tabs {
.o-flex-display();
- .o-flex-flow(row, nowrap);
- border-top: 1px solid #ebebeb;
- box-shadow: 0px 0px 10px #afafaf;
- z-index: 1; // so that box shaddow is above thread's images
+ box-shadow: 0 0 8px @gray-lighter-darker;
+
.o_mail_mobile_tab {
+ .o-flex-display();
.o-flex(1, 1, 0);
- padding: 8px 4px;
+ .o-flex-flow(column, nowrap);
+ .o-justify-content(space-between);
+ padding: @o-mail-chatter-mobile-gap @o-mail-chatter-mobile-gap*2;
+ box-shadow: 1px 0 0 @gray-lighter-darker;
text-align: center;
- &:not(:last-child) {
- border-right: 1px solid #d7d7d7;
- }
+
> span {
display: block;
+ white-space: nowrap;
+ font-weight: 500;
+
&.fa {
- font-size: 16px;
- }
- &.o_tab_title{
- font-size: 8px;
- padding-top: 8px;
+ padding-bottom: @o-mail-chatter-mobile-gap*2;
+ font-size: 1.3em;
}
}
+
&.active > span {
- color: @odoo-brand-optional;
+ color: @odoo-brand-optional;
}
}
}
diff --git a/addons/mail/static/src/less/systray.less b/addons/mail/static/src/less/systray.less
index c6e7ad1a2ade..3f123ff70d63 100644
--- a/addons/mail/static/src/less/systray.less
+++ b/addons/mail/static/src/less/systray.less
@@ -72,9 +72,6 @@
padding: 5px;
.o_mail_channel_image {
width: 40px;
- > img {
- max-height: 40px;
- }
}
.o_channel_info {
margin-left: 10px;
@@ -123,6 +120,7 @@
padding: 5px;
height: 44px;
border-bottom: 1px solid #ebebeb;
+ box-shadow: 0 0 2px @gray-lighter-darker;
}
.o_mail_navbar_dropdown_channels {
max-height: none;
--
GitLab