More css refactoring.

converse.js

@@ -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

@@ -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 {
-      display: inline-block;
-      padding-top: 10px; }
-    #conversejs .chatbox .chat-body .chat-error,
-    #conversejs .chatbox .chat-body .chat-info,
+      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-message {
-      padding: 2px 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-them {
-        color: #346121; }
-      #conversejs .chatbox .chat-body .chat-message span.chat-message-me {
-        color: #436F64; }
-    #conversejs .chatbox .chat-body .chat-message .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; }
+      height: 1.5em;
+      padding: 0.2em 0; }
+      #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 {
+          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 span.chat-message-content {
+          word-wrap: break-word; }
+    #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

@@ -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

@@ -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

@@ -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

@@ -65,47 +65,54 @@
                 margin: 0;
                 padding: 5px;
             }
-            .chat-event,
-            .chat-date,
             .chat-info {
+                color: $text-color;
                 color: #808080;
-            }
-            .chat-date {
-                display: inline-block;
-                padding-top: 10px;
-            }
-            .chat-error,
-            .chat-info,
-            .chat-message {
-                padding: 2px 0;
+                margin: 0.2em 0;
+                &.chat-event {
+                    clear: left;
+                }
+                &.chat-error {
+                    color: $warning-color;
+                    font-weight: bold;
+                }
+                &.chat-date {
+                    display: inline-block;
+                    padding-top: 10px;
+                }
             }
             .chat-message {
+                height: 1.5em;
+                padding: 0.2em 0;
                 span {
-                    font-weight: bold;
-                    white-space: nowrap;
                     max-width: 100px;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
                     display: inline-block;
-                    float: left;
                     padding-right: 3px;
+                    &.chat-message-author {
+                        font-weight: bold;
+                        white-space: nowrap;
+                        float: left;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
                     &.chat-message-them {
                         color: $message-them-color;
                     }
                     &.chat-message-me {
                         color: $link-color;
                     }
-                }
-                .chat-message-content {
-                    word-wrap: break-word;
+                    &.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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1 +1 @@
-<time class="chat-date" data-isodate="{{isodate}}">{{datestring}}</time>
+<time class="chat-info chat-date" data-isodate="{{isodate}}">{{datestring}}</time>