Skip to content

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

Initial work on showing avatars in messages. 

- Update the mockups to show avatars.
parent 2b5b2fae
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1157 additions and 574 deletions
Makefile
View file @ aa6a739c
...@@ -150,7 +150,7 @@ css/%.min.css:: css/%.css ...@@ -150,7 +150,7 @@ css/%.min.css:: css/%.css
.PHONY: watch .PHONY: watch
watch: dev watch: dev
$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/inverse/inverse.scss:css/inverse.css $(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass:css
.PHONY: watchjs .PHONY: watchjs
watchjs: dev watchjs: dev
......
css/converse.css
View file @ aa6a739c
This diff is collapsed.
css/inverse.css
View file @ aa6a739c
This diff is collapsed.
mockup/chatbox.html
View file @ aa6a739c
This diff is collapsed.
mockup/chatroom.html
View file @ aa6a739c
This diff is collapsed.
mockup/index.html
View file @ aa6a739c
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li> <li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li> <li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li> <li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li> <li><a href="/mockup/overlayed.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul> </ul>
</body> </body>
</html> </html>
mockup/user-panel.html
View file @ aa6a739c
<!-- <div id="users" class="controlbox-pane"> --> <!-- <div id="users" class="controlbox-pane"> -->
<div class="userinfo"> <div class="userinfo">
<div class="profile d-flex"> <div class="profile d-flex">
<canvas height="40px" width="40px" class="avatar align-self-center"></canvas> <canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Walter White</span> <span class="username w-100 align-self-center">Romeo Montague</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> --> <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> --> <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
<a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a> <a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
...@@ -68,12 +68,12 @@ ...@@ -68,12 +68,12 @@
<span class="fa fa-caret-down"></span> Contact Requests</a> <span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts"> <ul class="roster-group-contacts">
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span> <span class="req-contact-name w-100">The Nurse</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span> <span class="req-contact-name w-100">Friar Laurence</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
...@@ -85,19 +85,14 @@ ...@@ -85,19 +85,14 @@
<span class="fa fa-caret-down"></span> Colleagues</a> <span class="fa fa-caret-down"></span> Colleagues</a>
<ul> <ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="away current-xmpp-contact d-flex"> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a> <span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="dnd current-xmpp-contact d-flex"> <li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a> <span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</li> </li>
...@@ -107,14 +102,19 @@ ...@@ -107,14 +102,19 @@
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"> <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a> <span class="fa fa-caret-down"></span> Family</a>
<ul> <ul>
<li class="away current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a> <span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline current-xmpp-contact d-flex"> <li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a> <span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
...@@ -126,12 +126,7 @@ ...@@ -126,12 +126,7 @@
<ul> <ul>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a> <span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
...@@ -143,7 +138,17 @@ ...@@ -143,7 +138,17 @@
<ul> <ul>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a> <span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
...@@ -154,11 +159,11 @@ ...@@ -154,11 +159,11 @@
<span class="fa fa-caret-down"></span> Pending Contacts</a> <span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul> <ul>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span> <span class="pending-contact-name w-100">An Apothecary</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span> <span class="pending-contact-name w-100">Abram</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
......
mockup/user-panel.js
View file @ aa6a739c
...@@ -16,7 +16,33 @@ const UserPanel = Backbone.NativeView.extend({ ...@@ -16,7 +16,33 @@ const UserPanel = Backbone.NativeView.extend({
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
keyboard: true // we want to dismiss Modal on pressing Esc key keyboard: true // we want to dismiss Modal on pressing Esc key
})); }));
this.renderAvatar();
} }
xhr.send(); xhr.send();
},
renderAvatar () {
const canvasses = document.querySelectorAll('canvas.avatar');
_.each(canvasses, (canvas_el) => {
const avatar_url = canvas_el.getAttribute('data-avatar');
if (!avatar_url) {
return;
}
const ctx = canvas_el.getContext('2d');
const img = new Image();
img.onload = function () {
const canvas = ctx.canvas ;
const hRatio = canvas.width / img.width ;
const vRatio = canvas.height / img.height ;
const ratio = Math.min ( hRatio, vRatio );
const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
const centerShift_y = ( canvas.height - img.height*ratio ) / 2;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
};
img.src = avatar_url;
});
} }
}); });
sass/_chatbox.scss
View file @ aa6a739c
...@@ -159,6 +159,7 @@ ...@@ -159,6 +159,7 @@
background-color: $chat-head-color; 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) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
...@@ -170,92 +171,13 @@ ...@@ -170,92 +171,13 @@
border-top: 0; border-top: 0;
p { p {
color: $text-color; color: $text-color;
font-size: $font-size; font-size: $message-font-size;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.message {
margin: 0.5em 0;
}
.chat-info {
line-height: $line-height-small;
color: $chat-head-color;
font-size: $font-size-small;
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%;
}
.chat-action {
font-style: italic;
}
.chat-message {
overflow: auto; // Ensures that content stays inside
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
canvas {
vertical-align: middle;
background: $gray-color;
}
.chat-msg-author {
font-weight: bold;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
.chat-msg-content {
max-width: 100%;
word-wrap: break-word;
&.spoiler {
border-radius: $chatbox-border-radius;
padding: 0.5em;
}
.emojione {
margin-bottom: -6px;
}
}
}
.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
} }
.new-msgs-indicator { .new-msgs-indicator {
position: absolute; position: relative;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
background-color: $chat-head-color; background-color: $chat-head-color;
...@@ -265,11 +187,11 @@ ...@@ -265,11 +187,11 @@
text-align: center; text-align: center;
z-index: 20; z-index: 20;
white-space: nowrap; white-space: nowrap;
margin-bottom: 0.25em;
} }
.chat-content { .chat-content {
height: 100%; height: 100%;
padding: 1em; font-size: $message-font-size;
font-size: 13px;
color: $text-color; color: $text-color;
overflow-y: auto; overflow-y: auto;
border: 0; border: 0;
...@@ -535,14 +457,6 @@ ...@@ -535,14 +457,6 @@
.chatbox { .chatbox {
width: calc(100% - 50px); width: calc(100% - 50px);
.chat-body {
.chat-message {
.chat-msg-author {
white-space: normal;
}
}
}
.row { .row {
.box-flyout { .box-flyout {
left: 50px; left: 50px;
......
sass/_chatrooms.scss
View file @ aa6a739c
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: $font-size-large;
} }
a, a:visited, a:hover, a:not([href]):not([tabindex]) { a, a:visited, a:hover, a:not([href]):not([tabindex]) {
...@@ -102,23 +103,6 @@ ...@@ -102,23 +103,6 @@
.mentioned { .mentioned {
font-weight: bold; font-weight: bold;
} }
.chat-message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
.chat-msg-them {
color: $chatroom-message-them-color;
canvas {
background: $red;
}
}
.chat-msg-me {
canvas {
background: $light-blue;
}
}
}
.disconnect-msg { .disconnect-msg {
padding: 2em 2em 0 2em; padding: 2em 2em 0 2em;
} }
...@@ -129,17 +113,12 @@ ...@@ -129,17 +113,12 @@
min-width: $chat-width; min-width: $chat-width;
.new-msgs-indicator { .new-msgs-indicator {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
max-width: 70%;
} }
.chat-content { .chat-content {
height: 100%; height: 100%;
padding: 0.5em;
} }
&.full { &.full {
min-width: 100%; min-width: 100%;
.new-msgs-indicator {
min-width: 100%;
}
} }
} }
.occupants { .occupants {
......
sass/_controlbox.scss
View file @ aa6a739c
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
#chatrooms { #chatrooms {
padding: 0; padding: 0;
padding-bottom: 1em; padding-bottom: 0.5em;
form.add-chatroom { form.add-chatroom {
input[type=button], input[type=button],
......
sass/_messages.scss 0 → 100644
View file @ aa6a739c
#conversejs {
.message {
&.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0;
.separator {
border: 0.5px solid $chat-head-color;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5;
}
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: #666;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5;
}
}
&.chat-info {
color: $chat-head-color;
font-size: $message-font-size;
line-height: $line-height-small;
padding: 0.5rem 1rem;
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
&.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%;
}
&.chat-action {
font-style: italic;
}
&.chat-msg {
display: flex;
flex-direction: row;
overflow: auto; // Ensures that content stays inside
padding: 0.5rem 1rem;
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
}
.avatar {
background: $gray-color;
height: 36px;
vertical-align: middle;
width: 36px;
}
.chat-msg-content {
margin-left: 0.5rem;
}
.chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word;
&.spoiler {
border-radius: $chatbox-border-radius;
padding: 0.5em;
}
.emojione {
margin-bottom: -6px;
}
}
.chat-msg-heading {
padding-bottom: 0.5rem;
display: block;
.chat-msg-author {
font-weight: bold;
}
.chat-msg-time {
padding-left: 0.5em;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
}
&.chat-msg-followup {
.chat-msg-heading,
.avatar {
display: none;
}
.chat-msg-content {
margin-left: 2.75rem;
}
}
}
}
.chatroom-body .message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($chatroom-message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
.chat-msg-them {
color: $chatroom-message-them-color;
}
.separator {
border: 0.5px solid $chatroom-head-color;
}
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) {
.message {
&.chat-msg {
.chat-msg-author {
white-space: normal;
}
}
}
}
}
sass/converse/converse.scss → sass/converse.scss
View file @ aa6a739c
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
* Copyright (c) 2012-2016, JC Brand <jc@opkode.com> * Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License * Licensed under the Mozilla Public License
*/ */
@import "../font-awesome"; @import "font-awesome";
@import "bourbon"; @import "bourbon";
@import "variables"; @import "converse/variables";
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
...@@ -37,19 +37,20 @@ ...@@ -37,19 +37,20 @@
@import "bootstrap/scss/popover"; @import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
} }
@import "../core";
@import "core"; @import "core";
@import "../profile"; @import "converse/core";
@import "../chatbox"; @import "profile";
@import "chatbox"; @import "chatbox";
@import "../controlbox"; @import "converse/chatbox";
@import "controlbox"; @import "controlbox";
@import "../roomslist"; @import "converse/controlbox";
@import "../roster"; @import "roomslist";
@import "../chatrooms"; @import "roster";
@import "chatrooms"; @import "chatrooms";
@import "../headline"; @import "converse/chatrooms";
@import "minimized_chats"; @import "headline";
@import "../bookmarks"; @import "messages";
@import "../awesomplete"; @import "converse/minimized_chats";
@import "../muc_embedded"; @import "bookmarks";
@import "awesomplete";
@import "muc_embedded";
sass/converse/_variables.scss
View file @ aa6a739c
...@@ -93,6 +93,8 @@ $chatbox-hover-height: 1em !default; ...@@ -93,6 +93,8 @@ $chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default; $font-size-tiny: 10px !default;
$font-size-small: 12px !default; $font-size-small: 12px !default;
$font-size: 14px !default; $font-size: 14px !default;
......
sass/inverse/inverse.scss → sass/inverse.scss
View file @ aa6a739c
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com> * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License * Licensed under the Mozilla Public License
*/ */
@import "../font-awesome"; @import "font-awesome";
@import "bourbon"; @import "bourbon";
@import "variables"; @import "inverse/variables";
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
...@@ -36,19 +36,20 @@ ...@@ -36,19 +36,20 @@
@import "bootstrap/scss/popover"; @import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
} }
@import "../core";
@import "core"; @import "core";
@import "../profile"; @import "inverse/core";
@import "../chatbox"; @import "profile";
@import "chatbox"; @import "chatbox";
@import "../controlbox"; @import "inverse/chatbox";
@import "controlbox"; @import "controlbox";
@import "../roster"; @import "inverse/controlbox";
@import "roster"; @import "roster";
@import "../bookmarks"; @import "inverse/roster";
@import "bookmarks"; @import "bookmarks";
@import "../chatrooms"; @import "inverse/bookmarks";
@import "chatrooms"; @import "chatrooms";
@import "../headline"; @import "inverse/chatrooms";
@import "headline"; @import "headline";
@import "../awesomplete" @import "inverse/headline";
@import "messages";
@import "awesomplete"
sass/inverse/_chatbox.scss
View file @ aa6a739c
...@@ -63,7 +63,6 @@ ...@@ -63,7 +63,6 @@
} }
} }
.chat-content { .chat-content {
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 @ aa6a739c
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
.chat-content { .chat-content {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding;
} }
&.full { &.full {
max-width: 100%; max-width: 100%;
......
sass/inverse/_variables.scss
View file @ aa6a739c
...@@ -97,6 +97,8 @@ $chatbox-hover-height: 6px !default; ...@@ -97,6 +97,8 @@ $chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default; $font-size-tiny: 10px !default;
$font-size-small: 14px !default; $font-size-small: 14px !default;
$font-size: 16px !default; $font-size: 16px !default;
...@@ -109,7 +111,7 @@ $toolbar-color: $greenish-white !default; ...@@ -109,7 +111,7 @@ $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: 26px !default; $line-height-huge: 30px !default;
$controlbox-width: 250px !default; $controlbox-width: 250px !default;
$chat-width: 100% !default; $chat-width: 100% !default;
......
src/templates/chatroom_head.html
View file @ aa6a739c
<div class="col"> <div class="col col-9">
<div class="chat-title" title="{{{o.jid}}}"> <div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]} {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span> <span class="chatroom-name">{{{ o.name }}}</span>
......
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