Nikunj Ladava
c778de44c7
When someone mentions another person in discuss/chat window, the mentioned name was displayed just as a text, which may be unclear. With this commit, we display mentions with the same style as mentions in a message. To do that, the main idea is to change the input by a div with contenteditable set to true. This allows us to add <a>...</a> inside.
408 lines
11 KiB
Plaintext
408 lines
11 KiB
Plaintext
.o_chat_composer {
|
|
position: relative;
|
|
.o-flex(0, 0, auto);
|
|
.o-flex-display();
|
|
margin: 1px 0;
|
|
border-top: none;
|
|
background: @gray-lighter;
|
|
|
|
.o_composer, .o_composer_subject {
|
|
position: relative;
|
|
background: white;
|
|
|
|
input {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.o_composer_subject {
|
|
.o-flex-display();
|
|
padding-bottom: 5px;
|
|
|
|
> input {
|
|
.o-flex(1, 1, auto);
|
|
padding: 5px;
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
|
|
.o_composer {
|
|
.o_composer_input[contenteditable=true]:empty:before {
|
|
content: attr(placeholder);
|
|
opacity: 0.75;
|
|
}
|
|
.o_composer_input {
|
|
display: inline-block;
|
|
height: 100%;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.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);
|
|
}
|
|
@media (max-width: @screen-xs-max) {
|
|
.o_composer_button_send {
|
|
color: @odoo-brand-optional;
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_mail_emoji_container {
|
|
padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
|
|
border: 1px solid @gray-lighter-dark;
|
|
background-color: @gray-lighter;
|
|
|
|
.o_mail_emoji {
|
|
margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
|
|
cursor: pointer; // only in the popover
|
|
}
|
|
}
|
|
|
|
// 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_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_composer {
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
.o_composer, .o_composer_subject {
|
|
border: 1px solid @gray-lighter-dark;
|
|
|
|
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;
|
|
@media (max-width: @screen-xs-max) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&: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, 1, auto);
|
|
}
|
|
.o_composer {
|
|
display: flex;
|
|
min-height: 40px;
|
|
padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
|
|
border-radius: 2px 0 0 2px;
|
|
border-right-width: 0;
|
|
}
|
|
.o_mail_emoji_container {
|
|
text-align: right;
|
|
border-width: 1px;
|
|
}
|
|
.o_composer_input {
|
|
.o-flex-flow(row, wrap);
|
|
}
|
|
.o_composer_text_field {
|
|
.o-flex(1, 1, 50%);
|
|
margin: -4px 7px 5px 0px;
|
|
padding: 2.5px 0px 0px 5px;
|
|
}
|
|
.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 {
|
|
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_mail_emoji_container {
|
|
.o-position-absolute(auto, 0, 100%, 0);
|
|
border-bottom-width: 1px;
|
|
}
|
|
.o_composer_input {
|
|
.o-flex-flow(row, nowrap);
|
|
|
|
.o_chatter_composer_tools {
|
|
.o-flex(0, 0, auto);
|
|
}
|
|
}
|
|
.o_composer_button_send, .o_chatter_avatar {
|
|
display: none;
|
|
}
|
|
@media (max-width: @screen-xs-max) {
|
|
.o_composer_button_send {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_composer_attachments_list:not(:empty) {
|
|
margin-top: @o-mail-chatter-gap;
|
|
text-align: justify;
|
|
}
|
|
|
|
// Emoji
|
|
.o_mail_emoji {
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
padding: 0;
|
|
|
|
> img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Attachment Icons (common for chat thread and chat composer)
|
|
// ------------------------------------------------------------------
|
|
@-webkit-keyframes oe_mail_attach_loading_anim {
|
|
0% { background: @odoo-brand-optional }
|
|
50% { background: darken(@odoo-brand-optional, 10%) }
|
|
100% { background: @odoo-brand-optional }
|
|
}
|
|
@-moz-keyframes oe_mail_attach_loading_anim {
|
|
0% { background: @odoo-brand-optional }
|
|
50% { background: darken(@odoo-brand-optional, 10%) }
|
|
100% { background: @odoo-brand-optional }
|
|
}
|
|
@-o-keyframes oe_mail_attach_loading_anim {
|
|
0% { background: @odoo-brand-optional }
|
|
50% { background: darken(@odoo-brand-optional, 10%) }
|
|
100% { background: @odoo-brand-optional }
|
|
}
|
|
@keyframes oe_mail_attach_loading_anim {
|
|
0% { background: @odoo-brand-optional }
|
|
50% { background: darken(@odoo-brand-optional, 10%) }
|
|
100% { background: @odoo-brand-optional }
|
|
}
|
|
|
|
@o-mail-attachment-image-size: 100px;
|
|
.o_attachment {
|
|
position: relative;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: @o-mail-attachment-image-size;
|
|
margin: 5px;
|
|
.o_image_box {
|
|
position: relative;
|
|
img {
|
|
width: @o-mail-attachment-image-size;
|
|
height: @o-mail-attachment-image-size;
|
|
}
|
|
.o_image_overlay{
|
|
display: none;
|
|
}
|
|
&:hover .o_image_overlay {
|
|
display: block;
|
|
.o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0);
|
|
z-index: 20;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
.o_attachment_download {
|
|
.o-position-absolute(@left: 10px, @bottom:5px);
|
|
}
|
|
.o_attachment_play {
|
|
.o-position-absolute(@top: 50%, @left: 50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.o_overlay_download {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
i {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.caption {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
padding: 5px;
|
|
a {
|
|
color: @odoo-main-text-color;
|
|
}
|
|
}
|
|
.o_attachment_progress_bar {
|
|
display: none;
|
|
}
|
|
.o_attachment_delete {
|
|
.o-position-absolute(@top: -10px, @right: -8px);
|
|
color: @odoo-main-text-color;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
.o-transition(opacity, 0.2s, linear);
|
|
}
|
|
&.o_attachment_uploading {
|
|
.o_attachment_progress_bar {
|
|
display: block;
|
|
.o-position-absolute(@top: 18px, @left: 16px, @right: 16px);
|
|
height: 17px;
|
|
line-height: 13px;
|
|
color: white;
|
|
border-radius: @border-radius-base;
|
|
border: solid 1px grey;
|
|
box-shadow: 0px 1px 10px @odoo-shadow-color;
|
|
.o-animation(@name: oe_mail_attach_loading_anim, @duration: 1s, @timing-function: linear, @iteration-count: infinite);
|
|
}
|
|
.o_attachment_delete {
|
|
display: none;
|
|
}
|
|
}
|
|
&:hover .o_attachment_delete {
|
|
opacity: 1;
|
|
.o-transition(opacity, 0.2s, linear);
|
|
}
|
|
}
|
|
|
|
.o_modal_fullscreen {
|
|
.o_viewer_content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.o_viewer-header {
|
|
width: 100%;
|
|
height: 45px;
|
|
padding: 10px 10px 0;
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
cursor: auto;
|
|
.o_image_caption {
|
|
color: #FFFFFF;
|
|
display: inline;
|
|
}
|
|
}
|
|
.o_loading_img {
|
|
.o-position-absolute(@top: 50%);
|
|
width: 25px;
|
|
right: 50%;
|
|
z-index: 1;
|
|
}
|
|
.o_viewer_img_wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
.o_viewer_zoomer {
|
|
width: 100%;
|
|
height: 100%;
|
|
.o-flex-display();
|
|
justify-content: center;
|
|
align-items: center;
|
|
img, video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
transition: 0.3s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
|
|
}
|
|
.o_viewer_pdf {
|
|
width: 80%;
|
|
height: 90%;
|
|
border: 0px;
|
|
box-shadow: 1px 1px 20px 1px #000;
|
|
}
|
|
.o_viewer_video {
|
|
height: 80%;
|
|
}
|
|
}
|
|
}
|
|
.o_viewer_toolbar {
|
|
.o-position-absolute(@left: 50%);
|
|
bottom: 15px;
|
|
transform: translate(-50%, -50%);
|
|
padding: 8px 10px 0px 10px;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.arrow {
|
|
.o-position-absolute(@top: 50%);
|
|
color: #FFFFFF;
|
|
}
|
|
.arrow-left {
|
|
left: 0;
|
|
}
|
|
|
|
.arrow-right {
|
|
right: 0;
|
|
}
|
|
i.fa {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|