Skip to content

C
converse.js
Commit b154d6d5 authored by JC Brand's avatar JC Brand
Browse files
Options

Render chat head, content and message form as flex items.

parent e3350ab7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 357 deletions
css/converse-muc-embedded.css
View file @ b154d6d5
...@@ -43,11 +43,9 @@ ...@@ -43,11 +43,9 @@
height: calc(100% - 55px); } height: calc(100% - 55px); }
#conversejs.converse-embedded .chatroom .box-flyout .occupants-heading { #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
font-size: 120%; } font-size: 120%; }
#conversejs.converse-embedded .chatroom .box-flyout .chat-content { #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
height: calc(100% - 97px); } margin: 0.5em;
#conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message { font-size: 120%; }
margin: 0.5em;
font-size: 120%; }
#conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea { #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em; padding: 0.5em;
font-size: 110%; } font-size: 110%; }
......
css/converse.css
View file @ b154d6d5
...@@ -5228,6 +5228,9 @@ body.reset { ...@@ -5228,6 +5228,9 @@ body.reset {
background-color: #e7f7ee; } background-color: #e7f7ee; }
#converse-embedded-chat .chatbox .box-flyout, #converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white; background-color: white;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 450px; height: 450px;
...@@ -5261,13 +5264,14 @@ body.reset { ...@@ -5261,13 +5264,14 @@ body.reset {
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-body, #converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
background-color: white; display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
background-color: #3AA569;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-top: 0; border-top: 0; }
height: 289px;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .chat-body, #converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
...@@ -5363,23 +5367,20 @@ body.reset { ...@@ -5363,23 +5367,20 @@ body.reset {
white-space: nowrap; } white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-content, #converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
position: relative;
padding: 0.5em; padding: 0.5em;
font-size: 13px; font-size: 13px;
color: #777; color: #777;
overflow-y: auto; overflow-y: auto;
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em; }
height: 206px;
height: calc(100% - 96px); }
#converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before, #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
#conversejs .chatbox .chat-content .toggle-spoiler:before { #conversejs .chatbox .chat-content .toggle-spoiler:before {
padding-right: 0.25em; padding-right: 0.25em;
whitespace: nowrap; } whitespace: nowrap; }
#converse-embedded-chat .chatbox .chat-content-sendbutton, #converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 128px); } height: calc(100% - 93px); }
#converse-embedded-chat .chatbox .dropdown, #converse-embedded-chat .chatbox .dropdown,
#conversejs .chatbox .dropdown { #conversejs .chatbox .dropdown {
/* status dropdown styles */ /* status dropdown styles */
...@@ -5397,12 +5398,9 @@ body.reset { ...@@ -5397,12 +5398,9 @@ body.reset {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
background-clip: padding-box; background-clip: padding-box;
background-color: white; background-color: white;
border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0; }
position: relative;
height: 95px; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .sendXMPPMessage, #converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
...@@ -5420,11 +5418,10 @@ body.reset { ...@@ -5420,11 +5418,10 @@ body.reset {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
height: 70px;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border: none; border: none;
resize: none; } min-height: 60px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
...@@ -5444,7 +5441,6 @@ body.reset { ...@@ -5444,7 +5441,6 @@ body.reset {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0.25em; padding: 0.25em;
height: 25px;
display: block; display: block;
border-top: 8px solid #3AA569; border-top: 8px solid #3AA569;
background-color: white; background-color: white;
...@@ -6184,6 +6180,7 @@ body.reset { ...@@ -6184,6 +6180,7 @@ body.reset {
height: 100vh; } } height: 100vh; } }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body, #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
background-color: white; background-color: white;
...@@ -6218,6 +6215,8 @@ body.reset { ...@@ -6218,6 +6215,8 @@ body.reset {
padding: 2em 2em 0 2em; } padding: 2em 2em 0 2em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area { #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word; word-wrap: break-word;
min-width: 200px; } min-width: 200px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
...@@ -6226,6 +6225,7 @@ body.reset { ...@@ -6226,6 +6225,7 @@ body.reset {
max-width: 70%; } max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full { #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
...@@ -6339,8 +6339,6 @@ body.reset { ...@@ -6339,8 +6339,6 @@ body.reset {
font-size: 14px; font-size: 14px;
height: 289px; height: 289px;
width: 100%; width: 100%;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
overflow-y: auto; overflow-y: auto;
position: absolute; } position: absolute; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
......
css/inverse.css
View file @ b154d6d5
This diff is collapsed.
mockup/chatbox.html
View file @ b154d6d5
...@@ -90,6 +90,97 @@ ...@@ -90,6 +90,97 @@
</span> </span>
<span class="chat-msg-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
</div> </div>
<form class="sendXMPPMessage"> <form class="sendXMPPMessage">
......
sass/_chatbox.scss
View file @ b154d6d5
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
} }
.box-flyout { .box-flyout {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white; background-color: white;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height; height: $chat-height;
...@@ -144,7 +147,11 @@ ...@@ -144,7 +147,11 @@
} }
} }
.chat-body { .chat-body {
background-color: white; display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
background-color: $chat-head-color;
border-bottom-left-radius: $chatbox-border-radius; border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
...@@ -156,8 +163,6 @@ ...@@ -156,8 +163,6 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
border-top: 0; border-top: 0;
height: 289px;
@include calc(height, '100% - #{$chat-head-height}');
p { p {
color: $text-color; color: $text-color;
font-size: $font-size; font-size: $font-size;
...@@ -250,7 +255,6 @@ ...@@ -250,7 +255,6 @@
white-space: nowrap; white-space: nowrap;
} }
.chat-content { .chat-content {
position: relative;
padding: 0.5em; padding: 0.5em;
font-size: 13px; font-size: 13px;
color: $text-color; color: $text-color;
...@@ -258,8 +262,6 @@ ...@@ -258,8 +262,6 @@
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em;
height: 206px;
height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
.toggle-spoiler:before { .toggle-spoiler:before {
padding-right: 0.25em; padding-right: 0.25em;
...@@ -267,7 +269,7 @@ ...@@ -267,7 +269,7 @@
} }
} }
.chat-content-sendbutton { .chat-content-sendbutton {
height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin}); height: calc(100% - #{$chat-textarea-height + $send-button-height + 2*$send-button-margin});
} }
.dropdown { /* status dropdown styles */ .dropdown { /* status dropdown styles */
...@@ -285,12 +287,9 @@ ...@@ -285,12 +287,9 @@
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
background-clip: padding-box; background-clip: padding-box;
background-color: white; background-color: white;
border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative;
height: #{$chat-textarea-height + $toolbar-height};
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
width: 100%; width: 100%;
} }
...@@ -306,11 +305,10 @@ ...@@ -306,11 +305,10 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
height: $chat-textarea-height;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border: none; border: none;
resize: none; min-height: $chat-textarea-height;
&.spoiler { &.spoiler {
height: 42px; height: 42px;
} }
...@@ -331,7 +329,6 @@ ...@@ -331,7 +329,6 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0.25em; padding: 0.25em;
height: $toolbar-height;
display: block; display: block;
border-top: 8px solid $chat-head-color; border-top: 8px solid $chat-head-color;
background-color: white; background-color: white;
......
sass/_chatrooms.scss
View file @ b154d6d5
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
height: 100vh; height: 100vh;
} }
.chatroom-body { .chatroom-body {
flex-direction: row;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
background-color: white; background-color: white;
border-top: 0; border-top: 0;
...@@ -120,6 +121,8 @@ ...@@ -120,6 +121,8 @@
padding: 2em 2em 0 2em; padding: 2em 2em 0 2em;
} }
.chat-area { .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word; word-wrap: break-word;
min-width: $chat-width; min-width: $chat-width;
.new-msgs-indicator { .new-msgs-indicator {
...@@ -127,6 +130,7 @@ ...@@ -127,6 +130,7 @@
max-width: 70%; max-width: 70%;
} }
.chat-content { .chat-content {
height: 100%;
padding: 0.5em; padding: 0.5em;
} }
&.full { &.full {
...@@ -246,7 +250,6 @@ ...@@ -246,7 +250,6 @@
font-size: $font-size; font-size: $font-size;
height: 289px; height: 289px;
width: 100%; width: 100%;
@include calc(height, '100% - #{$chat-head-height}');
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
......
sass/_muc_embedded.scss
View file @ b154d6d5
...@@ -54,7 +54,6 @@ ...@@ -54,7 +54,6 @@
font-size: 120%; font-size: 120%;
} }
.chat-content { .chat-content {
height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
.chat-message { .chat-message {
margin: 0.5em; margin: 0.5em;
font-size: 120%; font-size: 120%;
......
sass/converse/_variables.scss
View file @ b154d6d5
...@@ -48,7 +48,7 @@ $light-text-color: #A8ABA1 !default; ...@@ -48,7 +48,7 @@ $light-text-color: #A8ABA1 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$icon-color: $blue !default; $icon-color: $blue !default;
$save-button-color: $green !default; $save-button-color: $green !default;
$chat-textarea-height: 70px !default; $chat-textarea-height: 60px !default;
$send-button-height: 27px !default; $send-button-height: 27px !default;
$send-button-margin: 3px !default; $send-button-margin: 3px !default;
...@@ -101,7 +101,6 @@ $font-size-large: 16px !default; ...@@ -101,7 +101,6 @@ $font-size-large: 16px !default;
$font-size-huge: 20px !default; $font-size-huge: 20px !default;
$legend-font-size: 16px !default; $legend-font-size: 16px !default;
$toolbar-height: 25px !default;
$toolbar-color: $greenish-white !default; $toolbar-color: $greenish-white !default;
$emoji-picker-height: 100px !default; $emoji-picker-height: 100px !default;
......
sass/inverse/_chatbox.scss
View file @ b154d6d5
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
font-size: 20px; font-size: 20px;
padding: 0; padding: 0;
.user-custom-message { .user-custom-message {
font-size: 66%; font-size: 50%;
height: auto; height: auto;
line-height: $line-height; line-height: $line-height;
} }
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
} }
} }
.chat-content { .chat-content {
height: 100%;
padding: 0 $padding $padding $padding; padding: 0 $padding $padding $padding;
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
......
sass/inverse/_chatrooms.scss
View file @ b154d6d5
...@@ -26,7 +26,6 @@ ...@@ -26,7 +26,6 @@
.chat-area { .chat-area {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
min-width: auto; min-width: auto;
height: calc(100vh - 95px);
.chat-content { .chat-content {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
......
sass/inverse/_variables.scss
View file @ b154d6d5
...@@ -65,7 +65,7 @@ $chat-head-text-color: white !default; ...@@ -65,7 +65,7 @@ $chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 62px !default; $chat-head-height: 62px !default;
$chat-textarea-height: 70px !default; $chat-textarea-height: 60px !default;
$input-focus-color: #1A9707 !default; $input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default; $highlight-color: #DCF9F6 !default;
...@@ -104,13 +104,12 @@ $font-size-large: 18px !default; ...@@ -104,13 +104,12 @@ $font-size-large: 18px !default;
$font-size-huge: 26px !default; $font-size-huge: 26px !default;
$legend-font-size: 18px !default; $legend-font-size: 18px !default;
$toolbar-height: 29px !default;
$toolbar-color: $greenish-white !default; $toolbar-color: $greenish-white !default;
$line-height-small: 20px !default; $line-height-small: 20px !default;
$line-height: 22px !default; $line-height: 22px !default;
$line-height-large: 24px !default; $line-height-large: 24px !default;
$line-height-huge: 30px !default; $line-height-huge: 26px !default;
$controlbox-width: 250px !default; $controlbox-width: 250px !default;
$chat-width: 100% !default; $chat-width: 100% !default;
......
sass/inverse/inverse.scss
View file @ b154d6d5
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
@import "../fonts";
#conversejs { #conversejs {
@import "bootstrap/scss/root"; @import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; @import "bootstrap/scss/reboot";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7