Skip to content

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

Initial work on showing avatars in messages. 

- Update the mockups to show avatars.
parent 2b5b2fae
Show whitespace changes
Inline Side-by-side
Showing with 1157 additions and 574 deletions
Makefile
View file @ aa6a739c
......@@ -150,7 +150,7 @@ css/%.min.css:: css/%.css
.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
......
css/converse.css
View file @ aa6a739c
......@@ -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;
......
css/inverse.css
View file @ aa6a739c
......@@ -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; }
......
mockup/chatbox.html
View file @ aa6a739c
......@@ -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>
<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>
<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="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>
<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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
<p class="chat-msg-text">
He jests at scars that never felt a wound.
</p>
</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 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:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</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>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
<p class="chat-msg-text">
But soft, what light through yonder window breaks?
</p>
</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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
<p class="chat-msg-text">
It is the east and Juliet is the sun!
</p>
</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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
<p class="chat-msg-text">
Arise, fair sun, and kill the envious moon,
</p>
</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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</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 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>
......@@ -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>
......
mockup/chatroom.html
View file @ aa6a739c
......@@ -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 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-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>
<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>
<span class="chat-msg-content">leia: hi :)</span>
<p class="chat-msg-text">He jests at scars that never felt a wound.</p>
</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>
</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>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
<p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
</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">
</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>
<span class="chat-msg-author chat-msg-room">19:36&nbsp;
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<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>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</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;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-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>
<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>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</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-message">
<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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</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>
<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>
<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>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</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>
<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>
<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>
<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>
<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>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jerec</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>Luke Skywalker</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-online circle" title="Online"></div>Han Solo</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>TC-14</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>Booster Terrik</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>Mirax Terrik</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>Mod Terrik</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>Tessek</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>Darth Vader</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>Supreme Chancellor Finis Valorum</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>Nahdar Vebb</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>General Maximilian Veers</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>Tahiri Veila</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>Asajj Ventress</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>Vergere</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>King Veruna</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>Vima-Da-Boda</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>Quinlan Vos</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>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>
......
mockup/index.html
View file @ aa6a739c
......@@ -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>
mockup/converse.html → mockup/overlayed.html
View file @ aa6a739c
......@@ -28,66 +28,103 @@
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col-9">
<div class="col">
<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 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="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>
<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 class="chat-message">
<span class="chat-msg-author chat-msg-them">
19:25&nbsp; <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
</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>
<span class="chat-msg-content">Dagsê</span>
<p class="chat-msg-text">
But soft, what light through yonder window breaks?
</p>
</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>
</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>
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
<p class="chat-msg-text">
It is the east and Juliet is the sun!
</p>
</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>
</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>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
<p class="chat-msg-text">
Arise, fair sun, and kill the envious moon,
</p>
</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>
<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>
<span class="chat-msg-content">Another message to check that scrolling works.</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>
......@@ -121,59 +158,143 @@
<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 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="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>
<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>
<span class="chat-msg-content">leia: hi :)</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-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">leia:&nbsp;</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="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>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
<p class="chat-msg-text">
But, soft! what light through yonder window breaks?
</p>
</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>
</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>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
<p class="chat-msg-text">It is the east, and Juliet is the sun.</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>
<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>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</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 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>
</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>
<span class="chat-msg-content">Another message to check that scrolling works.</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>
......@@ -192,14 +313,46 @@
</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="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>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>
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
......
mockup/user-panel.html
View file @ aa6a739c
<!-- <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>
......
mockup/user-panel.js
View file @ aa6a739c
......@@ -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;
});
}
});
sass/_chatbox.scss
View file @ aa6a739c
......@@ -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;
......
sass/_chatrooms.scss
View file @ aa6a739c
......@@ -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 {
......
sass/_controlbox.scss
View file @ aa6a739c
......@@ -228,7 +228,7 @@
#chatrooms {
padding: 0;
padding-bottom: 1em;
padding-bottom: 0.5em;
form.add-chatroom {
input[type=button],
......
sass/_messages.scss 0 → 100644
View file @ aa6a739c
#conversejs {
.message {
&.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0;
.separator {
border: 0.5px solid $chat-head-color;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5;
}
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: #666;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5;
}
}
&.chat-info {
color: $chat-head-color;
font-size: $message-font-size;
line-height: $line-height-small;
padding: 0.5rem 1rem;
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
&.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%;
}
&.chat-action {
font-style: italic;
}
&.chat-msg {
display: flex;
flex-direction: row;
overflow: auto; // Ensures that content stays inside
padding: 0.5rem 1rem;
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
}
.avatar {
background: $gray-color;
height: 36px;
vertical-align: middle;
width: 36px;
}
.chat-msg-content {
margin-left: 0.5rem;
}
.chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word;
&.spoiler {
border-radius: $chatbox-border-radius;
padding: 0.5em;
}
.emojione {
margin-bottom: -6px;
}
}
.chat-msg-heading {
padding-bottom: 0.5rem;
display: block;
.chat-msg-author {
font-weight: bold;
}
.chat-msg-time {
padding-left: 0.5em;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
}
&.chat-msg-followup {
.chat-msg-heading,
.avatar {
display: none;
}
.chat-msg-content {
margin-left: 2.75rem;
}
}
}
}
.chatroom-body .message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($chatroom-message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
.chat-msg-them {
color: $chatroom-message-them-color;
}
.separator {
border: 0.5px solid $chatroom-head-color;
}
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) {
.message {
&.chat-msg {
.chat-msg-author {
white-space: normal;
}
}
}
}
}
sass/converse/converse.scss → sass/converse.scss
View file @ aa6a739c
......@@ -5,9 +5,9 @@
* 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";
sass/converse/_variables.scss
View file @ aa6a739c
......@@ -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;
......
sass/inverse/inverse.scss → sass/inverse.scss
View file @ aa6a739c
......@@ -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"
sass/inverse/_chatbox.scss
View file @ aa6a739c
......@@ -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;
}
......
sass/inverse/_chatrooms.scss
View file @ aa6a739c
......@@ -29,7 +29,6 @@
.chat-content {
border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding;
}
&.full {
max-width: 100%;
......
sass/inverse/_variables.scss
View file @ aa6a739c
......@@ -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;
......
src/templates/chatroom_head.html
View file @ aa6a739c
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7