Initial work on showing avatars in messages.
- Update the mockups to show avatars.
This commit is contained in:
parent
2b5b2fae2c
commit
aa6a739cfa
2
Makefile
2
Makefile
|
@ -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
197
css/converse.css
|
@ -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
207
css/inverse.css
|
@ -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; }
|
||||
|
|
|
@ -31,8 +31,8 @@
|
|||
height="50px" width="50px"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwHCy455JBsggAABkJJREFUeNrtnM1PE1sUwHvvTD8otWLHST/Gimi1CEgr6M6FEWuIBo2pujDVsNDEP8GN/4MbN7oxrlipG2OCgZgYlxAbkRYw1KqkIDRCSkM7nXvvW8x7vjyNeQ9m7p1p3z1LQk/v/Dhz7vkEXL161cHl9wI5Ag6IA+KAOCAOiAPigDggLhwQB2S+iNZ+PcYY/SWEEP2HAAAIoSAIoihCCP+ngDDGtVotGAz29/cfOXJEUZSOjg6n06lp2sbGRqlUWlhYyGazS0tLbrdbEASrzgksyeYJId3d3el0uqenRxRFAAAA4KdfIIRgjD9+/Pj8+fOpqSndslofEIQwHA6Pjo4mEon//qmFhYXHjx8vLi4ihBgDEnp7e9l8E0Jo165dQ0NDd+/eDYVC2/qsJElDQ0OEkKWlpa2tLZamxAhQo9EIBoOjo6MXL17csZLe3l5FUT59+lQul5l5JRaAVFWNRqN37tw5ceKEQVWRSOTw4cOFQuHbt2+iKLYCIISQLMu3b99OJpOmKAwEAgcPHszn8+vr6wzsiG6UQQhxuVyXLl0aGBgwUW0sFstkMl6v90fo1KyAMMYDAwPnzp0zXfPg4GAqlWo0Gk0MiBAiy/L58+edTqf5Aa4onj59OhaLYYybFRCEMBaL0fNxBw4cSCQStN0QRUBut3t4eJjq6U+dOiVJElVPRBFQIBDo6+ujCqirqyscDlONGykC2lYyYSR6pBoQQapHZwAoHo/TuARYAOrs7GQASFEUqn6aIiBJkhgA6ujooFpUo6iaTa7koFwnaoWadLNe81tbWwzoaJrWrICWl5cZAFpbW6OabVAEtLi4yABQsVjUNK0pAWWzWQaAcrlcswKanZ1VVZUqHYRQEwOq1Wpv3ryhCmh6erpcLjdrNl+v1ycnJ+l5UELI27dvv3//3qxxEADgy5cvExMT9Mznw4cPtFtAdAPFarU6Pj5eKpVM17yxsfHy5cvV1VXazXu62gVBKBQKT58+rdVqJqrFGL948eLdu3dU8/g/H4FBUaJYLAqC0NPTY9brMD4+PjY25mDSracOCABACJmZmXE6nUePHjWu8NWrV48ePSKEsGlAs7Agfd5nenq6Wq0mk0kjDzY2NvbkyRMIIbP2PLvhBUEQ8vl8NpuNx+M+n29bzhVjvLKycv/+/YmJCcazQuwA6YzW1tYmJyf1SY+2trZ/rRk1Go1SqfT69esHDx4UCgVmNaa/zZ/9ABUhRFXVYDB48uTJeDweiUQkSfL7/T9MA2NcqVTK5fLy8vL8/PzU1FSxWHS5XJaM4wGr9sUwxqqqer3eUCgkSZJuUBBCfTRvc3OzXC6vrKxUKhWn02nhCJ5lM4oQQo/HgxD6+vXr58+fHf8sDOp+HQDg8XgclorFU676dKLlo6yWRdItIBwQB8QBcUCtfosRQjRNQwhhjPUC4w46WXryBSHU1zgEQWBz99EFhDGu1+t+v//48ePxeFxRlD179ng8nh0Efgiher2+vr6ur3HMzMysrq7uTJVdACGEurq6Ll++nEgkPB7Pj9jPoDHqOxyqqubz+WfPnuVyuV9XPeyeagAAAoHArVu3BgcHab8CuVzu4cOHpVKJUnfA5GweY+xyuc6cOXPv3r1IJMLAR8iyPDw8XK/Xi8Wiqqqmm5KZgBBC7e3tN27cuHbtGuPVpf7+/lAoNDs7W61WzfVKpgHSSzw3b95MpVKW3MfRaDQSiczNzVUqFRMZmQOIEOL1eq9fv3727FlL1t50URRFluX5+flqtWpWEGAOIFEUU6nUlStXLKSjy759+xwOx9zcnKZpphzGHMzhcDiTydgk9r1w4YIp7RPTAAmCkMlk2FeLf/tIEKbTab/fbwtAhJBoNGrutpNx6e7uPnTokC1eMU3T0um0DZPMkZER6wERQnw+n/FFSxpy7Nix3bt3WwwIIcRgIWnHkkwmjecfRgGx7DtuV/r6+iwGhDHev3+/bQF1dnYaH6E2CkiWZdsC2rt3r8WAHA5HW1ubbQGZcjajgOwTH/4qNko1Wlg4IA6IA+KAOKBWBUQIsfNojyliKIoRRfH9+/dut9umf3wzpoUNNQ4BAJubmwz+ic+OxefzWWlBhJD29nbug7iT5sIBcUAcEAfEAXFAHBAHxOVn+QMrmWpuPZx12gAAAABJRU5ErkJggg=="/>
|
||||
</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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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>
|
||||
|
|
|
@ -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=""jc"">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: </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
|
||||
<span class="chat-msg-room">luke: </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
|
||||
<span class="chat-msg-room">leia: </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
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </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=""jcbrand"">jcbrand has entered the room</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""jcbrand"">Topic set by jcbrand</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Romeo Montague"">
|
||||
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=""Juliet"">
|
||||
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=""Mercutio"">Mercutio has entered the room</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">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
|
||||
<span class="chat-msg-me">me: </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
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </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>
|
||||
|
||||
|
|
|
@ -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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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 <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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </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
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </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> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </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
BIN
mockup/images/romeo.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
|
@ -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
436
mockup/overlayed.html
Normal 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,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwHCy455JBsggAABkJJREFUeNrtnM1PE1sUwHvvTD8otWLHST/Gimi1CEgr6M6FEWuIBo2pujDVsNDEP8GN/4MbN7oxrlipG2OCgZgYlxAbkRYw1KqkIDRCSkM7nXvvW8x7vjyNeQ9m7p1p3z1LQk/v/Dhz7vkEXL161cHl9wI5Ag6IA+KAOCAOiAPigDggLhwQB2S+iNZ+PcYY/SWEEP2HAAAIoSAIoihCCP+ngDDGtVotGAz29/cfOXJEUZSOjg6n06lp2sbGRqlUWlhYyGazS0tLbrdbEASrzgksyeYJId3d3el0uqenRxRFAAAA4KdfIIRgjD9+/Pj8+fOpqSndslofEIQwHA6Pjo4mEon//qmFhYXHjx8vLi4ihBgDEnp7e9l8E0Jo165dQ0NDd+/eDYVC2/qsJElDQ0OEkKWlpa2tLZamxAhQo9EIBoOjo6MXL17csZLe3l5FUT59+lQul5l5JRaAVFWNRqN37tw5ceKEQVWRSOTw4cOFQuHbt2+iKLYCIISQLMu3b99OJpOmKAwEAgcPHszn8+vr6wzsiG6UQQhxuVyXLl0aGBgwUW0sFstkMl6v90fo1KyAMMYDAwPnzp0zXfPg4GAqlWo0Gk0MiBAiy/L58+edTqf5Aa4onj59OhaLYYybFRCEMBaL0fNxBw4cSCQStN0QRUBut3t4eJjq6U+dOiVJElVPRBFQIBDo6+ujCqirqyscDlONGykC2lYyYSR6pBoQQapHZwAoHo/TuARYAOrs7GQASFEUqn6aIiBJkhgA6ujooFpUo6iaTa7koFwnaoWadLNe81tbWwzoaJrWrICWl5cZAFpbW6OabVAEtLi4yABQsVjUNK0pAWWzWQaAcrlcswKanZ1VVZUqHYRQEwOq1Wpv3ryhCmh6erpcLjdrNl+v1ycnJ+l5UELI27dvv3//3qxxEADgy5cvExMT9Mznw4cPtFtAdAPFarU6Pj5eKpVM17yxsfHy5cvV1VXazXu62gVBKBQKT58+rdVqJqrFGL948eLdu3dU8/g/H4FBUaJYLAqC0NPTY9brMD4+PjY25mDSracOCABACJmZmXE6nUePHjWu8NWrV48ePSKEsGlAs7Agfd5nenq6Wq0mk0kjDzY2NvbkyRMIIbP2PLvhBUEQ8vl8NpuNx+M+n29bzhVjvLKycv/+/YmJCcazQuwA6YzW1tYmJyf1SY+2trZ/rRk1Go1SqfT69esHDx4UCgVmNaa/zZ/9ABUhRFXVYDB48uTJeDweiUQkSfL7/T9MA2NcqVTK5fLy8vL8/PzU1FSxWHS5XJaM4wGr9sUwxqqqer3eUCgkSZJuUBBCfTRvc3OzXC6vrKxUKhWn02nhCJ5lM4oQQo/HgxD6+vXr58+fHf8sDOp+HQDg8XgclorFU676dKLlo6yWRdItIBwQB8QBcUCtfosRQjRNQwhhjPUC4w46WXryBSHU1zgEQWBz99EFhDGu1+t+v//48ePxeFxRlD179ng8nh0Efgiher2+vr6ur3HMzMysrq7uTJVdACGEurq6Ll++nEgkPB7Pj9jPoDHqOxyqqubz+WfPnuVyuV9XPeyeagAAAoHArVu3BgcHab8CuVzu4cOHpVKJUnfA5GweY+xyuc6cOXPv3r1IJMLAR8iyPDw8XK/Xi8Wiqqqmm5KZgBBC7e3tN27cuHbtGuPVpf7+/lAoNDs7W61WzfVKpgHSSzw3b95MpVKW3MfRaDQSiczNzVUqFRMZmQOIEOL1eq9fv3727FlL1t50URRFluX5+flqtWpWEGAOIFEUU6nUlStXLKSjy759+xwOx9zcnKZpphzGHMzhcDiTydgk9r1w4YIp7RPTAAmCkMlk2FeLf/tIEKbTab/fbwtAhJBoNGrutpNx6e7uPnTokC1eMU3T0um0DZPMkZER6wERQnw+n/FFSxpy7Nix3bt3WwwIIcRgIWnHkkwmjecfRgGx7DtuV/r6+iwGhDHev3+/bQF1dnYaH6E2CkiWZdsC2rt3r8WAHA5HW1ubbQGZcjajgOwTH/4qNko1Wlg4IA6IA+KAOKBWBUQIsfNojyliKIoRRfH9+/dut9umf3wzpoUNNQ4BAJubmwz+ic+OxefzWWlBhJD29nbug7iT5sIBcUAcEAfEAXFAHBAHxOVn+QMrmWpuPZx12gAAAABJRU5ErkJggg=="/>
|
||||
</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=""Romeo Montague"">
|
||||
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=""Juliet"">
|
||||
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=""Mercutio"">Mercutio has entered the room</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">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> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </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>
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
178
sass/_messages.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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";
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -29,7 +29,6 @@
|
|||
|
||||
.chat-content {
|
||||
border-top-left-radius: $chatbox-border-radius;
|
||||
padding: 0 $padding $padding $padding;
|
||||
}
|
||||
&.full {
|
||||
max-width: 100%;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user