Skip to content

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

More css refactoring.

parent ee9f73ab
Show whitespace changes
Inline Side-by-side
Showing with 89 additions and 118 deletions
converse.js
View file @ ca2b40f7
......@@ -1374,7 +1374,7 @@
if (!keep_old) {
this.$content.find('div.chat-event').remove();
}
this.$content.append($('<div class="chat-event"></div>').text(message));
this.$content.append($('<div class="chat-info chat-event"></div>').text(message));
this.scrollDown();
},
......
css/converse.css
View file @ ca2b40f7
......@@ -393,20 +393,6 @@
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
#conversejs .chat-blink {
background-color: #176679;
border-right: 1px solid #176679;
border-left: 1px solid #176679; }
#conversejs li.chat-info {
padding-left: 10px; }
#conversejs .not-implemented {
margin-top: 3em;
margin-left: 0.3em;
color: #808080; }
#conversejs .delayed .chat-message-them {
color: #FB5D50; }
#conversejs .delayed .chat-message-me {
color: #7EABBB; }
#conversejs .error {
color: red; }
#conversejs input.error {
......@@ -418,10 +404,6 @@
display: block;
text-align: center;
width: 100%; }
#conversejs .chat-message-error {
color: #76797C;
font-size: 90%;
font-weight: normal; }
#conversejs a.restore-chat,
#conversejs .chat-title {
padding: 1px 0 1px 5px;
......@@ -527,37 +509,41 @@
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-body .chat-event,
#conversejs .chatbox .chat-body .chat-date,
#conversejs .chatbox .chat-body .chat-info {
color: #808080; }
#conversejs .chatbox .chat-body .chat-date {
color: #6C4C44;
color: #808080;
margin: 0.2em 0; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; }
#conversejs .chatbox .chat-body .chat-info.chat-error {
color: #681F2C;
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
padding-top: 10px; }
#conversejs .chatbox .chat-body .chat-error,
#conversejs .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-message {
padding: 2px 0; }
height: 1.5em;
padding: 0.2em 0; }
#conversejs .chatbox .chat-body .chat-message span {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-them {
color: #346121; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-me {
color: #436F64; }
#conversejs .chatbox .chat-body .chat-message .chat-message-content {
#conversejs .chatbox .chat-body .chat-message span.chat-message-content {
word-wrap: break-word; }
#conversejs .chatbox .chat-body .chat-info {
color: #6C4C44; }
#conversejs .chatbox .chat-body .chat-error {
color: #681F2C;
font-weight: bold; }
#conversejs .chatbox .chat-body .delayed .chat-message-them {
color: #FB5D50; }
#conversejs .chatbox .chat-body .delayed .chat-message-me {
color: #7EABBB; }
#conversejs .chatbox .chat-content {
position: relative;
padding: 0.5em;
......@@ -1042,6 +1028,8 @@
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster.no-contact-requests {
height: calc(100% - 25px - 20px); }
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .filter-type {
display: table-cell;
float: right;
......
mockup/chatroom.html
View file @ ca2b40f7
......@@ -31,7 +31,7 @@
<p class="chatroom-topic"></p>
<p></p>
</div>
<div class="chatroom-body">
<div class="chat-body chatroom-body">
<div class="chatroom-form-container">
<form class="chatroom-form">
<legend>Configuration for discuss@conference.conversejs.com</legend>
......
mockup/chatroom2.html
View file @ ca2b40f7
......@@ -37,7 +37,7 @@
<div class="chat-title"> Chatroom </div>
<p class="chatroom-topic">May the force be with you</p>
</div>
<div class="chatroom-body">
<div class="chat-body chatroom-body">
<div class="chat-area">
<div class="chat-content">
<div class="chat-message ">
......@@ -49,7 +49,7 @@
<span class="chat-message-content">
I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="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 ">
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content">
......@@ -118,7 +118,7 @@
<p class="chatroom-topic"></p>
<p></p>
</div>
<div class="chatroom-body">
<div class="chat-body chatroom-body">
<div class="chatroom-form-container">
<form class="chatroom-form">
<!-- TODO: Make this a long form that scrolls -->
......
mockup/index.html
View file @ ca2b40f7
......@@ -296,7 +296,7 @@
<div class="chat-body">
<div class="chat-content">
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
<div class="chat-error">This is an error message</div>
<div class="chat-info chat-error">This is an error message</div>
<div class="chat-message">
<span class="chat-message-me">09:35 me:&nbsp;</span>
<span class="chat-message-content">
......@@ -305,7 +305,7 @@
</span>
</div>
<div class="chat-message ">
<span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
<span class="chat-msg-author chat-message-them">19:25 Benedict-John:&nbsp;</span>
<span class="chat-message-content">Dagsê</span>
</div>
<div class="chat-message">
......@@ -316,7 +316,7 @@
<span class="chat-message-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-event">JC Brand is busy</div>
<div class="chat-info chat-event">JC Brand is busy</div>
<div class="chat-message ">
<span class="chat-message-me">19:43 me:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span>
......@@ -370,7 +370,7 @@
<div class="chat-title"> Chatroom </div>
<p class="chatroom-topic">May the force be with you</p>
</div>
<div class="chatroom-body">
<div class="chat-body chatroom-body">
<div class="chat-area">
<div class="chat-content">
<div class="chat-message ">
......@@ -382,7 +382,7 @@
<span class="chat-message-content">
I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="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 ">
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content">
......@@ -451,7 +451,7 @@
<p class="chatroom-topic"></p>
<p></p>
</div>
<div class="chatroom-body">
<div class="chat-body chatroom-body">
<div class="chatroom-form-container">
<form class="chatroom-form">
<!-- TODO: Make this a long form that scrolls -->
......
sass/_chatbox.scss
View file @ ca2b40f7
......@@ -65,47 +65,54 @@
margin: 0;
padding: 5px;
}
.chat-event,
.chat-date,
.chat-info {
color: $text-color;
color: #808080;
margin: 0.2em 0;
&.chat-event {
clear: left;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
.chat-date {
&.chat-date {
display: inline-block;
padding-top: 10px;
}
.chat-error,
.chat-info,
.chat-message {
padding: 2px 0;
}
.chat-message {
height: 1.5em;
padding: 0.2em 0;
span {
max-width: 100px;
display: inline-block;
padding-right: 3px;
&.chat-message-author {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
float: left;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px;
}
&.chat-message-them {
color: $message-them-color;
}
&.chat-message-me {
color: $link-color;
}
}
.chat-message-content {
&.chat-message-content {
word-wrap: break-word;
}
}
.chat-info {
color: $text-color;
}
.chat-error {
color: $warning-color;
font-weight: bold;
.delayed {
.chat-message-them {
color: #FB5D50;
}
.chat-message-me {
color: #7EABBB;
}
}
}
.chat-content {
......
sass/_core.scss
View file @ ca2b40f7
......@@ -85,7 +85,6 @@
.tt-highlight {
background-color: #00230F;
}
.tt-suggestion {
p {
color: white;
......@@ -101,7 +100,6 @@
}
}
}
.tt-dropdown-menu {
margin: 0 1px 0 1px;
width: 96px;
......@@ -113,30 +111,6 @@
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
}
.chat-blink {
background-color: #176679;
border-right: 1px solid #176679;
border-left: 1px solid #176679;
}
li.chat-info {
padding-left: 10px;
}
.not-implemented {
margin-top: 3em;
margin-left: 0.3em;
color: #808080;
}
.delayed {
.chat-message-them {
color: #FB5D50;
}
.chat-message-me {
color: #7EABBB;
}
}
.error {
color: red;
......@@ -156,12 +130,6 @@
width: 100%;
}
.chat-message-error {
color: #76797C;
font-size: 90%;
font-weight: normal;
}
a.restore-chat,
.chat-title {
padding: 1px 0 1px 5px;
......
sass/_roster.scss
View file @ ca2b40f7
......@@ -12,6 +12,14 @@
height: calc(100% - #{$controlbox-dropdown-height} - 20px);
}
.search-xmpp {
ul {
li.chat-info {
padding-left: 10px;
}
}
}
.filter-type {
display: table-cell;
float: right;
......
spec/chatbox.js
View file @ ca2b40f7
......@@ -654,7 +654,7 @@
var $time = $chat_content.find('time');
var message_date = new Date();
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-date');
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment(message_date).format());
expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY"));
......
src/templates/chatroom.html
View file @ ca2b40f7
......@@ -9,5 +9,5 @@
<div class="chat-title"> {{ _.escape(name) }} </div>
<p class="chatroom-topic"><p/>
</div>
<div class="chatroom-body"><span class="spinner centered"/></div>
<div class="chat-body chatroom-body"><span class="spinner centered"/></div>
</div>
src/templates/new_day.html
View file @ ca2b40f7
<time class="chat-date" data-isodate="{{isodate}}">{{datestring}}</time>
<time class="chat-info chat-date" data-isodate="{{isodate}}">{{datestring}}</time>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7