Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
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 {
color: #6C4C44;
color: #808080;
margin: 0.2em 0; }
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; }
#conversejs .chatbox .chat-body .chat-info.chat-error {
@ -520,29 +520,28 @@
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
padding-top: 10px; }
margin-top: 2em; }
#conversejs .chatbox .chat-body .chat-message {
height: 1.5em;
padding: 0.2em 0; }
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-message span {
max-width: 100px;
display: inline-block;
padding-right: 3px; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-author {
display: inline-block; }
#conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
max-width: 100px;
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-them {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
color: #346121; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-me {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
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; }
#conversejs .chatbox .chat-body .delayed .chat-message-them {
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; }
#conversejs .chatbox .chat-body .delayed .chat-message-me {
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #7EABBB; }
#conversejs .chatbox .chat-content {
position: relative;
@ -1153,7 +1152,7 @@
padding: 0.5em 0.5em 0 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-message-room {
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
color: #346121; }
#conversejs .chatroom .box-flyout .chatroom-body .participants {
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 chat-error">This is an error message</div>
<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">
Hello world
<span class="icon-smiley"></span>
@ -309,16 +309,16 @@
<span class="chat-msg-content">Dagsê</span>
</div>
<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>
</div>
<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>
</div>
<div class="chat-info chat-event">JC Brand is busy</div>
<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>
</div>
</div>
@ -374,26 +374,26 @@
<div class="chat-area">
<div class="chat-content">
<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>
</div>
<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">
I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<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">
I'll be gone for a while, will be back in about an hour</span>
</div>
<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>
</div>
<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>
</div>
</div>

11
sass/_chatbox.scss
View File

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

2
src/templates/action.html
View File

@ -1,4 +1,4 @@
<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>
</div>

2
src/templates/message.html
View File

@ -1,4 +1,4 @@
<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>
</div>