Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Initial work on showing avatars in messages.

Browse Source 
- Update the mockups to show avatars.
This commit is contained in:
JC Brand 2018-04-25 19:27:55 +02:00
parent 2b5b2fae2c
commit aa6a739cfa
22 changed files with 1159 additions and 859 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -150,7 +150,7 @@ css/%.min.css:: css/%.css
.PHONY: watch
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
watchjs: dev

197
css/converse.css
View File

@ -7307,60 +7307,8 @@ body.reset {
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-body .message {
margin: 0.5em 0; }
#conversejs .chatbox .chat-body .chat-info {
line-height: 14px;
color: #3AA569;
font-size: 12px; }
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;
font-style: italic; }
#conversejs .chatbox .chat-body .chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .chatbox .chat-body .chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%; }
#conversejs .chatbox .chat-body .chat-action {
font-style: italic; }
#conversejs .chatbox .chat-body .chat-message {
overflow: auto; }
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #818479; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #3AA569; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
border-radius: 4px;
padding: 0.5em; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; }
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatbox .new-msgs-indicator {
position: absolute;
position: relative;
width: 100%;
cursor: pointer;
background-color: #3AA569;
@ -7369,11 +7317,11 @@ body.reset {
font-size: 0.9em;
text-align: center;
z-index: 20;
white-space: nowrap; }
white-space: nowrap;
margin-bottom: 0.25em; }
#conversejs .chatbox .chat-content {
height: 100%;
padding: 1em;
font-size: 13px;
font-size: 14px;
color: #777;
overflow-y: auto;
border: 0;
@ -7564,8 +7512,6 @@ body.reset {
display: block; }
#conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); }
#conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; }
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px;
bottom: 0;
@ -7772,7 +7718,7 @@ body.reset {
margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms {
padding: 0;
padding-bottom: 1em; }
padding-bottom: 0.5em; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
@ -8130,7 +8076,8 @@ body.reset {
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis; }
text-overflow: ellipsis;
font-size: 16px; }
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@ -8219,19 +8166,6 @@ body.reset {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
@ -8243,18 +8177,13 @@ body.reset {
min-width: 250px; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051;
max-width: 70%; }
background-color: #E77051; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%;
padding: 0.5em; }
height: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
@ -8426,6 +8355,114 @@ body.reset {
height: 100%;
border-radius: 4px; }
#conversejs .message.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0; }
#conversejs .message.date-separator .separator {
border: 0.5px solid #3AA569;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5; }
#conversejs .message.date-separator .separator-text {
background: white;
bottom: 1px;
color: #666;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5; }
#conversejs .message.chat-info {
color: #3AA569;
font-size: 14px;
line-height: 14px;
padding: 0.5rem 1rem; }
#conversejs .message.chat-info.badge {
color: white; }
#conversejs .message.chat-info.chat-state-notification {
font-style: italic; }
#conversejs .message.chat-info.chat-event {
clear: left;
font-style: italic; }
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%; }
#conversejs .message.chat-action {
font-style: italic; }
#conversejs .message.chat-msg {
display: flex;
flex-direction: row;
overflow: auto;
padding: 0.5rem 1rem; }
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg.delayed .chat-msg-them {
color: #41b875; }
#conversejs .message.chat-msg.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg .avatar {
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; }
#conversejs .message.chat-msg .chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-text.spoiler {
border-radius: 4px;
padding: 0.5em; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading {
padding-bottom: 0.5rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
color: #3AA569; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
color: #578EA9; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs .chatroom-body .message.delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatroom-body .message.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatroom-body .message .chat-msg-them {
color: #3AA569; }
#conversejs .chatroom-body .message .separator {
border: 0.5px solid #E77051; }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
white-space: normal; } }
#conversejs:not(.fullscreen) #minimized-chats {
order: 100;
width: 130px;

207
css/inverse.css
View File

@ -7357,63 +7357,11 @@ body {
border-bottom-right-radius: 0; } }
#conversejs .chatbox .chat-body p {
color: #777;
font-size: 16px;
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-body .message {
margin: 0.5em 0; }
#conversejs .chatbox .chat-body .chat-info {
line-height: 20px;
color: #3AA569;
font-size: 14px; }
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;
font-style: italic; }
#conversejs .chatbox .chat-body .chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .chatbox .chat-body .chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%; }
#conversejs .chatbox .chat-body .chat-action {
font-style: italic; }
#conversejs .chatbox .chat-body .chat-message {
overflow: auto; }
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #818479; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #3AA569; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
border-radius: 4px;
padding: 0.5em; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; }
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatbox .new-msgs-indicator {
position: absolute;
position: relative;
width: 100%;
cursor: pointer;
background-color: #3AA569;
@ -7422,11 +7370,11 @@ body {
font-size: 0.9em;
text-align: center;
z-index: 20;
white-space: nowrap; }
white-space: nowrap;
margin-bottom: 0.25em; }
#conversejs .chatbox .chat-content {
height: 100%;
padding: 1em;
font-size: 13px;
font-size: 14px;
color: #777;
overflow-y: auto;
border: 0;
@ -7617,8 +7565,6 @@ body {
display: block; }
#conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); }
#conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; }
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px;
bottom: 0;
@ -7678,12 +7624,11 @@ body {
height: 22px;
margin-bottom: -5.5px; }
#conversejs.fullscreen .chatbox .chat-content {
padding: 0 1em 1em 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-title {
font-size: 26px;
line-height: 26px; }
line-height: 30px; }
#conversejs.fullscreen .chatbox .sendXMPPMessage ul {
width: 100%; }
#conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
@ -7847,7 +7792,7 @@ body {
margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms {
padding: 0;
padding-bottom: 1em; }
padding-bottom: 0.5em; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
@ -8054,7 +7999,7 @@ body {
#conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 26px; }
line-height: 30px; }
#conversejs.fullscreen #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%;
@ -8273,7 +8218,8 @@ body {
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis; }
text-overflow: ellipsis;
font-size: 18px; }
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@ -8362,19 +8308,6 @@ body {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
@ -8386,18 +8319,13 @@ body {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051;
max-width: 70%; }
background-color: #E77051; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%;
padding: 0.5em; }
height: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
@ -8575,8 +8503,7 @@ body {
min-width: auto; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 4px;
padding: 0 1em 1em 1em; }
border-top-left-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
@ -8616,6 +8543,114 @@ body {
border: 1.2em solid #E7A151;
border-top: 0.8em solid #E7A151; }
#conversejs .message.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0; }
#conversejs .message.date-separator .separator {
border: 0.5px solid #3AA569;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5; }
#conversejs .message.date-separator .separator-text {
background: white;
bottom: 1px;
color: #666;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5; }
#conversejs .message.chat-info {
color: #3AA569;
font-size: 14px;
line-height: 20px;
padding: 0.5rem 1rem; }
#conversejs .message.chat-info.badge {
color: white; }
#conversejs .message.chat-info.chat-state-notification {
font-style: italic; }
#conversejs .message.chat-info.chat-event {
clear: left;
font-style: italic; }
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message.chat-info.chat-date {
display: inline-block;
margin-top: 1em; }
#conversejs .message.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%; }
#conversejs .message.chat-action {
font-style: italic; }
#conversejs .message.chat-msg {
display: flex;
flex-direction: row;
overflow: auto;
padding: 0.5rem 1rem; }
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg.delayed .chat-msg-them {
color: #41b875; }
#conversejs .message.chat-msg.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg .avatar {
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem; }
#conversejs .message.chat-msg .chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-text.spoiler {
border-radius: 4px;
padding: 0.5em; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-heading {
padding-bottom: 0.5rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
color: #3AA569; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
color: #578EA9; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs .chatroom-body .message.delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatroom-body .message.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatroom-body .message .chat-msg-them {
color: #3AA569; }
#conversejs .chatroom-body .message .separator {
border: 0.5px solid #E77051; }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
white-space: normal; } }
#converse-embedded-chat [hidden],
#conversejs [hidden] {
display: none; }

199
mockup/chatbox.html
View File

@ -31,8 +31,8 @@
height="50px" width="50px"
src="data:image/png;base64,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"/>
</div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
<p class="user-custom-message" title="On the balcony">On the balcony</p>
</div>
</div>
</div>
@ -46,134 +46,80 @@
<div class="chat-content">
<div class="message chat-info">This is an info message</div>
<div class="message chat-info chat-error">This is an error message</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">09:35&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Hello world
<span class="fa fa-smile-o"></span>
</span>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
He jests at scars that never felt a wound.
</p>
</div>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-them">19:25&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-them">Benedict-John:&nbsp;</span>
</span>
<span class="chat-msg-content">Dagsê</span>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:39&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
But soft, what light through yonder window breaks?
</p>
</div>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
It is the east and Juliet is the sun!
</p>
</div>
</div>
<div class="message chat-info chat-event">JC Brand is busy</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 class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
Arise, fair sun, and kill the envious moon,
</p>
</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 class="message chat-info chat-event">Romeo Montague is busy</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</p>
</div>
</div>
</div>
@ -182,9 +128,6 @@
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
<div class="emoji-picker-container toolbar-menu collapsed"></div>
</li>
<li class="toggle-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</li>
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
<span class="chat-toolbar-text">unencrypted</span>
<span class="fa fa-unlock"></span>

254
mockup/chatroom.html
View File

@ -23,9 +23,9 @@
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col">
<div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p>
<div class="col col-9">
<div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
<p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
@ -35,63 +35,135 @@
</div>
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-area">
<div class="chat-content">
<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-36T00:00:00+02:00">Tuesday Apr 36th 2018</time>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-36T18:07:26+02:00" data-msgid="4fb4d101-8136-4f2a-8dfb-2615896b8316">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
<span class="chat-msg-content">ee</span>
<div class="chat-msg-media"></div>
</div>
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
<span class="chat-msg-room">luke:&nbsp;</span>
</span>
<span class="chat-msg-content">leia: hi :)</span>
</div>
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:36&nbsp;
<span class="chat-msg-room">leia:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:36&nbsp;
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">jcbrand has entered the room</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">Topic set by jcbrand</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
Romeo Montague has entered the room</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">He jests at scars that never felt a wound.</p>
</div>
</div>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;">
Juliet has entered the room</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">
But, soft! what light through yonder window breaks?
</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</p>
</div>
</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
<span class="chat-msg-time text-muted">19:43</span>
</span>
<p class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</p>
</div>
</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Topic set by Mercutio</div>
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
patient if your questions aren't answered immediately. We're all in different timezones.</div>
<div class="message chat-message">
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="message chat-message">
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:43&nbsp;
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">
Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">
True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
Which is as thin of substance as the air And more inconstant than the wind, who wooes
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
Turning his face to the dew-dropping south.
</div>
</div>
</div>
<div class="new-msgs-indicator">▼ You have unread messages ▼</div>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-clear"><a class="fa fa-eraser" title="Clear all messages"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>
@ -106,91 +178,45 @@
<ul class="occupant-list">
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
<div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
<div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-Wan Kenobi</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>R2-D2</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>R5-D4</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Sidious</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Anakin Skywalker</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Luke Skywalker</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Han Solo</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>TC-14</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Booster Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mirax Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mod Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tessek</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Vader</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Supreme Chancellor Finis Valorum</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Nahdar Vebb</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>General Maximilian Veers</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tahiri Veila</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Asajj Ventress</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Vergere</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>King Veruna</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Vima-Da-Boda</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Quinlan Vos</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Yoda</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
@ -224,7 +250,7 @@
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
new UserPanel();
});
</script>

283
mockup/converse.html
View File

@ -1,283 +0,0 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overlayed chats</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
</head>
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="sidebar"></div>
<div class="controlbox-pane"></div>
</div>
</div>
</div>
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col-9">
<div class="row no-gutters">
<div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</div>
</div>
</div>
<div class="col-3">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-content">
<div class="chat-info">
<span class="badge badge-info">This is an info message</span></div>
<div class="chat-info">
<span class="badge badge-danger">This is an error message</span></div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">09:35&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Hello world
<span class="fa fa-smile-o"></span>
</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-them">
19:25&nbsp; <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
</span>
<span class="chat-msg-content">Dagsê</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:39&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-info chat-event">
<span class="badge badge-success">JC Brand is busy</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>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
<div class="emoji-picker-container toolbar-menu collapsed"></div>
</li>
<li class="toggle-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</li>
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
<span class="chat-toolbar-text">unencrypted</span>
<span class="fa fa-unlock"></span>
<ul class="toolbar-menu collapsed">
<li>
<a class="start-otr" href="#">Start encrypted conversation</a>
</li>
<li>
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
</li>
</ul>
</li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</form>
</div>
</div>
</div>
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col-sm-8 col-lg-10">
<div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p>
</div>
<div class="col-sm-4 col-lg-2">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
</div>
</div>
</div>
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">luke:&nbsp;</span>
</span>
<span class="chat-msg-content">leia: hi :)</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">leia:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
</div>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>
</div>
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form room-invite">
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
</form>
<ul class="occupant-list">
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
<ul class="features-list">
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="minimized-chats">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
</a>
<div class="flyout minimized-chats-flyout row no-gutters">
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">42</span>
Restricted Chatroom
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">4</span>
JC Brand
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">842</span>
Asmaa Haakman
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="user-panel.js"></script>
<script type="text/javascript" src="modals.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
});
</script>
</html>

BIN
mockup/images/romeo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2
mockup/index.html
View File

@ -21,7 +21,7 @@
<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/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>
</body>
</html>

436
mockup/overlayed.html Normal file
View File

@ -0,0 +1,436 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overlayed chats</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
</head>
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="sidebar"></div>
<div class="controlbox-pane"></div>
</div>
</div>
</div>
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<img alt="User Avatar"
class="avatar"
height="40px" width="40px"
src="data:image/png;base64,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"/>
</div>
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
<p class="user-custom-message" title="On the balcony">On the balcony</p>
</div>
</div>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
</div>
</div>
<div class="chat-body">
<div class="chat-content">
<div class="message chat-info">This is an info message</div>
<div class="message chat-info chat-error">This is an error message</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
He jests at scars that never felt a wound.
</p>
</div>
</div>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
But soft, what light through yonder window breaks?
</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
It is the east and Juliet is the sun!
</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
Arise, fair sun, and kill the envious moon,
</p>
</div>
</div>
<div class="message chat-info chat-event">Romeo Montague is busy</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</p>
</div>
</div>
</div>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
<div class="emoji-picker-container toolbar-menu collapsed"></div>
</li>
<li class="toggle-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</li>
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
<span class="chat-toolbar-text">unencrypted</span>
<span class="fa fa-unlock"></span>
<ul class="toolbar-menu collapsed">
<li>
<a class="start-otr" href="#">Start encrypted conversation</a>
</li>
<li>
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
</li>
</ul>
</li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</form>
</div>
</div>
</div>
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9">
<div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
<p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
</div>
</div>
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
Romeo Montague has entered the room</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">15:31</span>
</span>
<p class="chat-msg-text">He jests at scars that never felt a wound.</p>
</div>
</div>
<div class="message date-separator">
<hr class="separator">
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;">
Juliet has entered the room</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">
But, soft! what light through yonder window breaks?
</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time text-muted">19:36</span>
</span>
<p class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</p>
</div>
</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
<span class="chat-msg-time text-muted">19:43</span>
</span>
<p class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</p>
</div>
</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Topic set by Mercutio</div>
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
patient if your questions aren't answered immediately. We're all in different timezones.</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">
Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</p>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
<span class="chat-msg-time text-muted">19:49</span>
</span>
<p class="chat-msg-text">
True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
Which is as thin of substance as the air And more inconstant than the wind, who wooes
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
Turning his face to the dew-dropping south.
</div>
</div>
</div>
<div class="new-msgs-indicator">▼ You have unread messages ▼</div>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>
</div>
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form room-invite">
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
</form>
<ul class="occupant-list">
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
<ul class="features-list">
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="minimized-chats">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
</a>
<div class="flyout minimized-chats-flyout row no-gutters">
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">42</span>
Restricted Chatroom
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">4</span>
JC Brand
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">842</span>
Asmaa Haakman
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="user-panel.js"></script>
<script type="text/javascript" src="modals.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
});
</script>
</html>

51
mockup/user-panel.html
View File

@ -1,8 +1,8 @@
<!-- <div id="users" class="controlbox-pane"> -->
<div class="userinfo">
<div class="profile d-flex">
<canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Walter White</span>
<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">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-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>
@ -68,12 +68,12 @@
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts">
<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="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
<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="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
@ -85,19 +85,14 @@
<span class="fa fa-caret-down"></span> Colleagues</a>
<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">
<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>
</li>
<li class="dnd 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-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>
</li>
</li>
@ -107,14 +102,19 @@
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<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">
<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>
</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> 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>
</li>
</ul>
@ -126,12 +126,7 @@
<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> John Smit</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>
<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>
</ul>
@ -143,7 +138,17 @@
<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> 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>
</li>
</ul>
@ -154,11 +159,11 @@
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul>
<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>
</li>
<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>
</li>
</ul>

26
mockup/user-panel.js
View File

@ -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
keyboard: true // we want to dismiss Modal on pressing Esc key
}));
this.renderAvatar();
}
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;
});
}
});

96
sass/_chatbox.scss
View File

@ -159,6 +159,7 @@
background-color: $chat-head-color;
border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
@media screen and (max-height: $mobile-landscape-height) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@ -170,92 +171,13 @@
border-top: 0;
p {
color: $text-color;
font-size: $font-size;
font-size: $message-font-size;
margin: 0;
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 {
position: absolute;
position: relative;
width: 100%;
cursor: pointer;
background-color: $chat-head-color;
@ -265,11 +187,11 @@
text-align: center;
z-index: 20;
white-space: nowrap;
margin-bottom: 0.25em;
}
.chat-content {
height: 100%;
padding: 1em;
font-size: 13px;
font-size: $message-font-size;
color: $text-color;
overflow-y: auto;
border: 0;
@ -535,14 +457,6 @@
.chatbox {
width: calc(100% - 50px);
.chat-body {
.chat-message {
.chat-msg-author {
white-space: normal;
}
}
}
.row {
.box-flyout {
left: 50px;

23
sass/_chatrooms.scss
View File

@ -14,6 +14,7 @@
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
font-size: $font-size-large;
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
@ -102,23 +103,6 @@
.mentioned {
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 {
padding: 2em 2em 0 2em;
}
@ -129,17 +113,12 @@
min-width: $chat-width;
.new-msgs-indicator {
background-color: $chatroom-head-color;
max-width: 70%;
}
.chat-content {
height: 100%;
padding: 0.5em;
}
&.full {
min-width: 100%;
.new-msgs-indicator {
min-width: 100%;
}
}
}
.occupants {

2
sass/_controlbox.scss
View File

@ -228,7 +228,7 @@
#chatrooms {
padding: 0;
padding-bottom: 1em;
padding-bottom: 0.5em;
form.add-chatroom {
input[type=button],

178
sass/_messages.scss Normal file
View File

@ -0,0 +1,178 @@
#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;
}
}
}
}
}

29
sass/converse/converse.scss → sass/converse.scss
View File

@ -5,9 +5,9 @@
* Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "../font-awesome";
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "converse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@ -37,19 +37,20 @@
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core";
@import "core";
@import "../profile";
@import "../chatbox";
@import "converse/core";
@import "profile";
@import "chatbox";
@import "../controlbox";
@import "converse/chatbox";
@import "controlbox";
@import "../roomslist";
@import "../roster";
@import "../chatrooms";
@import "converse/controlbox";
@import "roomslist";
@import "roster";
@import "chatrooms";
@import "../headline";
@import "minimized_chats";
@import "../bookmarks";
@import "../awesomplete";
@import "../muc_embedded";
@import "converse/chatrooms";
@import "headline";
@import "messages";
@import "converse/minimized_chats";
@import "bookmarks";
@import "awesomplete";
@import "muc_embedded";

2
sass/converse/_variables.scss
View File

@ -93,6 +93,8 @@ $chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;

23
sass/inverse/inverse.scss → sass/inverse.scss
View File

@ -5,9 +5,9 @@
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "../font-awesome";
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "inverse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@ -36,19 +36,20 @@
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core";
@import "core";
@import "../profile";
@import "../chatbox";
@import "inverse/core";
@import "profile";
@import "chatbox";
@import "../controlbox";
@import "inverse/chatbox";
@import "controlbox";
@import "../roster";
@import "inverse/controlbox";
@import "roster";
@import "../bookmarks";
@import "inverse/roster";
@import "bookmarks";
@import "../chatrooms";
@import "inverse/bookmarks";
@import "chatrooms";
@import "../headline";
@import "inverse/chatrooms";
@import "headline";
@import "../awesomplete"
@import "inverse/headline";
@import "messages";
@import "awesomplete"

1
sass/inverse/_chatbox.scss
View File

@ -63,7 +63,6 @@
}
}
.chat-content {
padding: 0 $padding $padding $padding;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
}

1
sass/inverse/_chatrooms.scss
View File

@ -29,7 +29,6 @@
.chat-content {
border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding;
}
&.full {
max-width: 100%;

4
sass/inverse/_variables.scss
View File

@ -97,6 +97,8 @@ $chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 14px !default;
$font-size: 16px !default;
@ -109,7 +111,7 @@ $toolbar-color: $greenish-white !default;
$line-height-small: 20px !default;
$line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 26px !default;
$line-height-huge: 30px !default;
$controlbox-width: 250px !default;
$chat-width: 100% !default;

2
src/templates/chatroom_head.html
View File

@ -1,4 +1,4 @@
<div class="col">
<div class="col col-9">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>