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

Add new css chat-msg-author as base class.

Browse Source
This commit is contained in:
JC Brand 2015-10-28 09:03:37 +00:00
parent 7ad3c385aa
commit a89659425d
5 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/converse.css
View File

@ -512,7 +512,7 @@
#conversejs .chatbox .chat-body .chat-info { #conversejs .chatbox .chat-body .chat-info {
color: #6C4C44; color: #6C4C44;
color: #808080; color: #808080;
margin: 0.2em 0; } margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; } clear: left; }
#conversejs .chatbox .chat-body .chat-info.chat-error { #conversejs .chatbox .chat-body .chat-info.chat-error {
@ -520,29 +520,28 @@
font-weight: bold; } font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date { #conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block; display: inline-block;
padding-top: 10px; } margin-top: 2em; }
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
height: 1.5em; margin: 0.3em; }
padding: 0.2em 0; }
#conversejs .chatbox .chat-body .chat-message span { #conversejs .chatbox .chat-body .chat-message span {
max-width: 100px; display: inline-block; }
display: inline-block; #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
padding-right: 3px; } max-width: 100px;
#conversejs .chatbox .chat-body .chat-message span.chat-message-author {
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
float: left; float: left;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; } overflow: hidden; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-them { #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
color: #346121; } color: #346121; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-me { #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
color: #436F64; } color: #436F64; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-content { #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
max-width: 100%;
word-wrap: break-word; } word-wrap: break-word; }
#conversejs .chatbox .chat-body .delayed .chat-message-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; } color: #FB5D50; }
#conversejs .chatbox .chat-body .delayed .chat-message-me { #conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #7EABBB; } color: #7EABBB; }
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
position: relative; position: relative;
@ -1153,7 +1152,7 @@
padding: 0.5em 0.5em 0 0.5em; } padding: 0.5em 0.5em 0 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-message-room { #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
color: #346121; } color: #346121; }
#conversejs .chatroom .box-flyout .chatroom-body .participants { #conversejs .chatroom .box-flyout .chatroom-body .participants {
display: table-cell; display: table-cell;

18
mockup/index.html
View File

@ -298,7 +298,7 @@
<div class="chat-info"><strong>/help</strong>:This is an info message</div> <div class="chat-info"><strong>/help</strong>:This is an info message</div>
<div class="chat-info chat-error">This is an error message</div> <div class="chat-info chat-error">This is an error message</div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-me">09:35 me:&nbsp;</span> <span class="chat-msg-author chat-msg-me">09:35 me:&nbsp;</span>
<span class="chat-msg-content"> <span class="chat-msg-content">
Hello world Hello world
<span class="icon-smiley"></span> <span class="icon-smiley"></span>
@ -309,16 +309,16 @@
<span class="chat-msg-content">Dagsê</span> <span class="chat-msg-content">Dagsê</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-me">19:39 me:&nbsp;</span> <span class="chat-msg-author chat-msg-me">19:39 me:&nbsp;</span>
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span> <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-me">19:42 me:&nbsp;</span> <span class="chat-msg-author chat-msg-me">19:42 me:&nbsp;</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-info chat-event">JC Brand is busy</div> <div class="chat-info chat-event">JC Brand is busy</div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-me">19:43 me:&nbsp;</span> <span class="chat-msg-author chat-msg-me">19:43 me:&nbsp;</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>
@ -374,26 +374,26 @@
<div class="chat-area"> <div class="chat-area">
<div class="chat-content"> <div class="chat-content">
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-room">18:50 luke:&nbsp;</span> <span class="chat-msg-author chat-msg-room">18:50 luke:&nbsp;</span>
<span class="chat-msg-content">leia: hi :)</span> <span class="chat-msg-content">leia: hi :)</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-room">19:40 leia:&nbsp;</span> <span class="chat-msg-author chat-msg-room">19:40 leia:&nbsp;</span>
<span class="chat-msg-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time> <time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-author chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-msg-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-me">19:42 me:&nbsp;</span> <span class="chat-msg-author chat-msg-me">19:42 me:&nbsp;</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-author chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>

11
sass/_chatbox.scss
View File

@ -68,7 +68,7 @@
.chat-info { .chat-info {
color: $text-color; color: $text-color;
color: #808080; color: #808080;
margin: 0.2em 0; margin: 0.3em;
&.chat-event { &.chat-event {
clear: left; clear: left;
} }
@ -78,17 +78,15 @@
} }
&.chat-date { &.chat-date {
display: inline-block; display: inline-block;
padding-top: 10px; margin-top: 2em;
} }
} }
.chat-message { .chat-message {
height: 1.5em; margin: 0.3em;
padding: 0.2em 0;
span { span {
max-width: 100px;
display: inline-block; display: inline-block;
padding-right: 3px;
&.chat-msg-author { &.chat-msg-author {
max-width: 100px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
float: left; float: left;
@ -102,6 +100,7 @@
color: $link-color; color: $link-color;
} }
&.chat-msg-content { &.chat-msg-content {
max-width: 100%;
word-wrap: break-word; word-wrap: break-word;
} }
} }

2
src/templates/action.html
View File

@ -1,4 +1,4 @@
<div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}"> <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}">
<span class="chat-msg-{{sender}}">{{time}} **{{username}} </span> <span class="chat-msg-author chat-msg-{{sender}}">{{time}} **{{username}} </span>
<span class="chat-msg-content">{{message}}</span> <span class="chat-msg-content">{{message}}</span>
</div> </div>

2
src/templates/message.html
View File

@ -1,4 +1,4 @@
<div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}" data-msgid="{{msgid}}"> <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}" data-msgid="{{msgid}}">
<span class="chat-msg-{{sender}}">{{time}} {{username}}:&nbsp;</span> <span class="chat-msg-author chat-msg-{{sender}}">{{time}} {{username}}:&nbsp;</span>
<span class="chat-msg-content">{{message}}</span> <span class="chat-msg-content">{{message}}</span>
</div> </div>