diff options
Diffstat (limited to 'addons/mail/static/src/less')
| -rw-r--r-- | addons/mail/static/src/less/chat_window.less | 10 | ||||
| -rw-r--r-- | addons/mail/static/src/less/chatter.less | 177 | ||||
| -rw-r--r-- | addons/mail/static/src/less/client_action.less | 10 | ||||
| -rw-r--r-- | addons/mail/static/src/less/composer.less | 208 | ||||
| -rw-r--r-- | addons/mail/static/src/less/thread.less | 4 |
5 files changed, 191 insertions, 218 deletions
diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less index b7daa8d720f..3e93945d194 100644 --- a/addons/mail/static/src/less/chat_window.less +++ b/addons/mail/static/src/less/chat_window.less @@ -1,5 +1,7 @@ @o-chat-window-bg: white; @o-chat-window-width: 325px; +@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in + // backend and other assets (livechat) .o_chat_window { .o-flex-display(); @@ -33,7 +35,7 @@ color: white; padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap; border-radius: 3px 3px 0 0; - border-bottom: 1px solid @gray-lighter-dark; + border-bottom: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend background-color: @odoo-brand-primary; @media (max-width: @screen-xs-max) { @@ -64,7 +66,7 @@ .o_mail_thread { .o-flex(1, 1, auto); overflow: auto; - border: 1px solid @gray-lighter-dark; + border: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend border-width: 0 1px; .o_thread_date_separator { @@ -82,10 +84,6 @@ padding: 4px 5px; } } - - .o_chat_composer { - .o-chat-composer-design(@mini-composer: true); - } } .o_chat_window_dropdown { diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less index 131990db82e..9bf27a0c4f8 100644 --- a/addons/mail/static/src/less/chatter.less +++ b/addons/mail/static/src/less/chatter.less @@ -1,176 +1,3 @@ -@o-mail-chatter-gap: 10px; - -// Define the chat_composer design/layout as a mixin -.o-chat-composer-design(@inline: false, @mini-composer: false) { - // All designs/layouts - & { - position: relative; - .o-flex-display(); - .o-flex(0, 0, auto); - .o-align-items(flex-start); - margin: 1px 0; - border-top: none; - background: @gray-lighter; - - .o_composer, .o_composer_subject { - position: relative; - background: white; - - textarea, input { - border: none; - } - } - - .o_composer { - textarea { - resize: none; - } - - .btn-icon { - .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1); - border: none; - } - - .o_composer_button_full_composer { - .o-position-absolute(0, 0); - } - } - } - - // Both inline e not-inline design. Mini-composer disabled. - & when (@mini-composer = false) { - padding: @mail-thread-avatar-size*0.5; - padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap; - border: 1px solid @gray-lighter-dark; - border-top: none; - - .o_chatter_avatar { - .o-position-absolute(0, @left: -@mail-thread-avatar-size - @o-mail-chatter-gap); - } - - .o_composer_container, .o_composer_send { - .o-flex-display(); - } - - .o_chatter_composer_info, .o_composer_suggested_partners { - .o-flex(0, 0, 100%); - margin-bottom: @o-mail-chatter-gap*0.5; - } - - .o_composer_container { - position: relative; - .o-flex-flow(column, nowrap); - } - - .o_composer { - margin-bottom: @o-mail-chatter-gap; - border-radius: 2px; - textarea { - padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer - } - } - - .o_composer, .o_composer_subject { - border: 1px solid @gray-lighter-dark; - - textarea, input { - padding: 0 0 @o-mail-chatter-gap; - border: none; - } - } - .o_composer_subject { - border-bottom: 0; - border-radius: 2px 2px 0 0; - } - - .o_chatter_composer_tools { - border-top: 1px solid @gray-lighter-dark; - } - } - - // Not-inline design. - & when (@inline = false) and (@mini-composer = false) { - .o-flex-flow(row, wrap); - - .o_composer_container, .o_composer_button_send { - .o-flex(1, 0, 100%); - } - .o_composer, .o_composer_subject { - padding: @o-mail-chatter-gap @o-mail-chatter-gap 0; - } - } - - // Inline design. - & when (@inline = true) and (@mini-composer = false) { - .o_composer_container { - .o-flex(1, 0, auto); - } - .o_composer { - padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap; - border-radius: 2px 0 0 2px; - border-right: 0; - } - .o_composer_input { - .o-flex-display(); - .o-flex-flow(row, wrap); - } - .o_composer_text_field { - .o-flex(1, 1, 50%); - margin: 0; - padding: 0; - } - .o_chatter_composer_tools { - .o-flex(0, 1, auto); - } - .o_composer_attachments_list { - .o-flex(1, 0, 100%); - } - - .o_chatter_composer_tools { - border: none; - border-left: 1px solid @gray-lighter-dark; - padding-left: @o-mail-chatter-gap*0.5; - .o-transform(translateY(-@o-mail-chatter-gap*0.5)); - } - - .o_composer_button_send { - .o-flex(0, 0, auto); - border-radius: 0 3px 3px 0; - // Make the button appear as the same size as the subject input - padding: 10px @padding-base-horizontal; - border: 1px solid darken(@odoo-brand-optional, 5%); - border-left-width: 0; - } - } - - // Mini-composer enabled - & when (@mini-composer = true) { - .o_composer_container { - border-top: 1px solid @gray-lighter-dark; - width: 100%; - } - .o_composer_input { - .o-flex-display(); - .o-flex-flow(row, nowrap); - padding: @o-mail-chatter-gap; - - textarea.o_composer_text_field { - .o-flex(1, 1, auto); - padding-top: @o-mail-chatter-gap*0.5; - } - - .o_chatter_composer_tools { - .o-flex(0, 0, auto); - } - } - - .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list { - display: none; - } - } - -} - // Default chatter layout. // Extended in enterprise by form_view.less to achieve the side-chatter .o_chatter { @@ -201,10 +28,6 @@ } } - .o_chat_composer { - .o-chat-composer-design(); - } - &.o_chatter_composer_active .o_chatter_topbar { > .btn, > .o_followers{ border-radius: @border-radius-small @border-radius-small 0 0; diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less index df1e3bc8560..78a4f27f21b 100644 --- a/addons/mail/static/src/less/client_action.less +++ b/addons/mail/static/src/less/client_action.less @@ -115,7 +115,7 @@ padding: 2px 5px; } > span { - .o-position-absolute(7px, @left:27px); + .o-position-absolute(7px, @left: 27px); } } } @@ -149,14 +149,6 @@ } } - .o_chat_composer:not(.o_chat_composer_extended) { - .o-chat-composer-design(@inline: true); - - } - .o_chat_composer.o_chat_composer_extended { - .o-chat-composer-design(@inline: false); - } - .o_mail_snackbar { .o-position-absolute(15px, 15px); padding-top: 10px; diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less index 88418bfb4ef..970d0649aa9 100644 --- a/addons/mail/static/src/less/composer.less +++ b/addons/mail/static/src/less/composer.less @@ -1,42 +1,204 @@ -.o_composer_subject { +.o_chat_composer { + position: relative; + .o-flex(0, 0, auto); .o-flex-display(); - padding-bottom: 5px; + .o-align-items(flex-start); + margin: 1px 0; + border-top: none; + background: @gray-lighter; + + .o_composer, .o_composer_subject { + position: relative; + background: white; - > input { - .o-flex(1, 1, auto); - padding: 5px; - margin-right: 30px; + textarea, input { + border: none; + } } -} -.o_composer { - .o_composer_input > textarea { - width: 100%; - resize: none; + .o_composer_subject { + .o-flex-display(); + padding-bottom: 5px; + + > input { + .o-flex(1, 1, auto); + padding: 5px; + margin-right: 30px; + } } - .o_composer_mention_dropdown .o_mention_proposition > a { - .o-text-overflow(); - width: 100%; - padding: 3px 15px; - .o_mention_name { - font-weight: 500; + + .o_composer { + .o_composer_input > textarea { + width: 100%; + resize: none; + } + .o_composer_mention_dropdown .o_mention_proposition > a { + .o-text-overflow(); + width: 100%; + padding: 3px 15px; + .o_mention_name { + font-weight: 500; + } + .o_mention_info { + font-style: italic; + color: gray; + } + } + textarea { + resize: none; + } + .btn-icon { + .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1); + border: none; + } + .o_composer_button_full_composer { + .o-position-absolute(0, 0); + } + } + + // Both inline and not-inline design. Mini-composer disabled. + &:not(.o_chat_mini_composer) { + padding: @mail-thread-avatar-size*0.5; + padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap; + border: 1px solid @gray-lighter-dark; + border-top: none; + + .o_chatter_avatar { + .o-position-absolute(0, @left: -@mail-thread-avatar-size - @o-mail-chatter-gap); + } + + .o_composer_container, .o_composer_send { + .o-flex-display(); + } + + .o_chatter_composer_info, .o_composer_suggested_partners { + .o-flex(0, 0, 100%); + margin-bottom: @o-mail-chatter-gap*0.5; + } + + .o_composer_container { + position: relative; + .o-flex-flow(column, nowrap); } - .o_mention_info { - font-style: italic; - color: gray; + + .o_composer { + border-radius: 2px; + textarea { + padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer + } + } + + .o_composer, .o_composer_subject { + border: 1px solid @gray-lighter-dark; + + textarea, input { + padding: 0 0 @o-mail-chatter-gap; + border: none; + } + } + .o_composer_subject { + border-bottom: 0; + border-radius: 2px 2px 0 0; + } + + .o_chatter_composer_tools { + border-top: 1px solid @gray-lighter-dark; + } + + &:not(.o_chat_inline_composer) { + .o-flex-flow(row, wrap); + + .o_composer_container, .o_composer_button_send { + .o-flex(1, 0, 100%); + } + .o_composer, .o_composer_subject { + padding: @o-mail-chatter-gap @o-mail-chatter-gap 0; + } + .o_composer_send { + margin-top: @o-mail-chatter-gap; + } + } + + &.o_chat_inline_composer { + .o_composer_container { + .o-flex(1, 0, auto); + } + .o_composer { + padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap; + border-radius: 2px 0 0 2px; + border-right: 0; + } + .o_composer_input { + .o-flex-display(); + .o-flex-flow(row, wrap); + } + .o_composer_text_field { + .o-flex(1, 1, 50%); + margin: 0; + padding: 0; + } + .o_chatter_composer_tools { + .o-flex(0, 1, auto); + } + .o_composer_attachments_list { + .o-flex(1, 0, 100%); + } + + .o_chatter_composer_tools { + border: none; + border-left: 1px solid @gray-lighter-dark; + padding-left: @o-mail-chatter-gap*0.5; + .o-transform(translateY(-@o-mail-chatter-gap*0.5)); + } + + .o_composer_button_send { + .o-flex(0, 0, auto); + border-radius: 0 3px 3px 0; + // Make the button appear as the same size as the subject input + padding: 10px @padding-base-horizontal; + border: 1px solid darken(@odoo-brand-optional, 5%); + border-left-width: 0; + } + } + } + + // Mini-composer enabled + &.o_chat_mini_composer { + .o_composer_container { + border-top: 1px solid @gray-lighter-dark; + width: 100%; + } + .o_composer_input { + .o-flex-display(); + .o-flex-flow(row, nowrap); + padding: @o-mail-chatter-gap; + + textarea.o_composer_text_field { + .o-flex(1, 1, auto); + padding-top: @o-mail-chatter-gap*0.5; + } + + .o_chatter_composer_tools { + .o-flex(0, 0, auto); + } + } + + .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list { + display: none; } } } -.o_composer_attachments_list { - margin-bottom: 5px; +.o_composer_attachments_list:not(:empty) { + margin-top: @o-mail-chatter-gap; text-align: justify; } // Emoji .o_mail_emoji { display: inline-block; - .square(24px); + width: 24px; + height: 24px; > img { width: 100%; diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less index da06d8fe91d..be39413f573 100644 --- a/addons/mail/static/src/less/thread.less +++ b/addons/mail/static/src/less/thread.less @@ -11,7 +11,7 @@ .o_thread_date_separator { margin-top: 15px; margin-bottom: 30px; - border-bottom: solid #E5E5E5 1px; // @gray-lighter + border-bottom: 1px solid @gray-lighter; text-align: center; .o_thread_date { @@ -102,8 +102,6 @@ max-width: 100%; word-wrap: break-word; - &.o_mail_note {} - .o_mail_subject { font-style: italic; } |