Merge pull request #68 from eepp/weechat-js-full-styling

Full styling

css/glowingbear.css

@@ -49,6 +49,9 @@ table {
 tr {
     line-height: 100%;
 }
+tr:hover {
+    background-color: #222222;
+}
 td.time {
     padding-right: 5px;
     vertical-align: top;
@@ -59,6 +62,7 @@ td.prefix {
     vertical-align: top;
     padding-right: 5px;
     white-space: pre;
+    border-right: 1px solid #444;
 }
 td.message {
     word-wrap: break-word;
@@ -85,7 +89,7 @@ hr {
 
 body {
     color: #ddd;
-    background-color: #222;
+    background-color: #181818;
     padding-left: 0;
     padding-right: 5px;
     padding-bottom:70px;
@@ -175,13 +179,14 @@ input[type=text], input[type=password], .badge {
 }
 
 #bufferlines {
-    font-family: 'Terminus', 'Inconsolata', 'Consolas', 'Monaco', 'Ubuntu Mono', monospace;
+    font-family: 'Terminus', 'Consolas', 'Monaco', 'Inconsolata', 'Ubuntu Mono', monospace;
     position: relative;
     height: 99%;
     overflow-y: auto;
     margin-left: 14%;
     width: auto;
     top: 25px; /* topbar */
+    padding-bottom: 10px;
 }
 #bufferlines .btn {
     font-family: sans-serif;
@@ -190,6 +195,9 @@ input[type=text], input[type=password], .badge {
 .navbar-fixed-bottom {
     margin: 0 5px 0 14%;
 }
+.navbar-inverse {
+    background-color: #181818;
+}
 @media (max-width: 968px) {
     #sidebar, #bufferlines {
         position: relative;

index.html

@@ -7,6 +7,7 @@
     <title ng-bind-template="WeeChat {{ pageTitle}}"></title>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
+    <link href="css/style.css" rel="stylesheet" media="screen">
     <link href="css/glowingbear.css" rel="stylesheet" media="screen">
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
@@ -89,9 +90,10 @@
             <div id="collapseTwo" class="panel-collapse collapse">
               <div class="panel-body">
                 <div>To start using, please enable relay in your WeeChat client:
-                  <pre>
+<pre>
-          /set relay.network.password yourpassword
+/set relay.network.password yourpassword
-          /relay add weechat 9001</pre>
+/relay add weechat 9001
+</pre>
                 <span class="label label-warning">WeeChat version 0.4.2 or higher is required.</span><br>
                 The communication goes directly between your browser and your weechat in clear text.
                 Connection settings are saved between sessions, including password, in your own browser.
@@ -112,16 +114,16 @@
                 If you check the encryption box, communication between browser and WeeChat will be encrypted.<br>
                 <strong>Note</strong>: Due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">bug</a> encryption will not work in Firefox. You must also first visit the URL https://weechathost:relayport/ to accept the certificate</p>
                 If you want to use encrypted session you first have to set up the relay using SSL like this:
-                <pre>
+<pre>
-          $ mkdir -p ~/.weechat/ssl
+$ mkdir -p ~/.weechat/ssl
-          $ cd ~/.weechat/ssl
+$ cd ~/.weechat/ssl
-          $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
+$ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
-          </pre>
+</pre>
                 If WeeChat is already running, you can reload the certificate and private key with command:
-                <pre>
+<pre>
-          /relay sslcertkey
+/relay sslcertkey
-          /relay add ssl.weechat 8000
+/relay add ssl.weechat 8000
-          </pre>
+</pre>
               </div>
             </div>
           </div>
@@ -217,12 +219,12 @@
             <tr class="bufferline" ng-repeat-start="bufferline in activeBuffer().lines">
               <td ng-hide="notimestamp" class="time">
                 <span class="date text-muted">
-                  {{ bufferline.date | date:'HH:mm' }}
+                  <span class="cof-chat_time cob-chat_time coa-chat_time">{{ bufferline.date | date:'HH' }}</span><span class="cof-chat_time_delimiters cob-chat_time_delimiters coa-chat_time_delimiters">:</span><span class="cof-chat_time cob-chat_time coa-chat_time">{{ bufferline.date | date:'mm' }}</span>
                 </span>
               </td>
-              <td class="prefix vertical-line"><span ng-repeat="part in bufferline.prefix" style="{{ part.fg }}">{{ part.text }}</span></td>
+              <td class="prefix"><span ng-repeat="part in bufferline.prefix" ng-class="{{ part.classes }}">{{ part.text }}</span></td>
               <td class="message">
-                <span ng-repeat="part in bufferline.content" class="text" style="{{ part.fg }}" ng-bind-html="part.text"></span>
+                <span ng-repeat="part in bufferline.content" class="text" ng-class="{{ part.classes }}" ng-bind-html="part.text"></span>
 
                 <div ng-repeat="metadata in bufferline.metadata">
                   <div ng-show="metadata.visible">

js/models.js

@@ -4,7 +4,7 @@
  */
 var models = angular.module('weechatModels', []);
 
-models.service('models', ['$rootScope', 'colors', function($rootScope, colors) {
+models.service('models', ['$rootScope', function($rootScope) {
     /*
      * Buffer class
      */
@@ -59,36 +59,55 @@ models.service('models', ['$rootScope', 'colors', function($rootScope, colors) {
      * BufferLine class
      */
     this.BufferLine = function(message) {
-
-        /*
-         * Parse the text elements from the buffer line added
-         *
-         * @param message weechat message
-         */
-        function parseLineAddedTextElements(message) {
-            var text = colors.parse(message);
-            text_elements =_.map(text, function(text_element) {
-                if (text_element && ('fg' in text_element)) {
-                    text_element['fg'] = colors.prepareCss(text_element['fg']);
-                }
-                // TODO: parse background as well
-
-                return text_element;
-            });
-            return text_elements;
-        }
-
-
         var buffer = message['buffer'];
         var date = message['date'];
 
+        function addClasses(textElements) {
+            var typeToClassPrefixFg = {
+                'option': 'cof-',
+                'weechat': 'cwf-',
+                'ext': 'cef-'
+            };
+            var typeToClassPrefixBg = {
+                'option': 'cob-',
+                'weechat': 'cwb-',
+                'ext': 'ceb-'
+            };
+            textElements.forEach(function(textEl) {
+                textEl.classes = [];
 
-        var prefix = parseLineAddedTextElements(message['prefix']);
+                // foreground color
+                var prefix = typeToClassPrefixFg[textEl.fgColor.type];
+                textEl.classes.push(prefix + textEl.fgColor.name);
+
+                // background color
+                prefix = typeToClassPrefixBg[textEl.bgColor.type];
+                textEl.classes.push(prefix + textEl.bgColor.name);
+
+                // attributes
+                if (textEl.attrs.name !== null) {
+                    textEl.classes.push('coa-' + textEl.attrs.name);
+                }
+                for (var attr in textEl.attrs.override) {
+                    val = textEl.attrs.override[attr];
+                    if (val) {
+                        textEl.classes.push('a-' + attr);
+                    } else {
+                        textEl.classes.push('a-no-' + attr);
+                    }
+                }
+            });
+        }
+
+
+        var prefix = weeChat.Protocol.rawText2Rich(message['prefix']);
+        addClasses(prefix);
 
         var tags_array = message['tags_array'];
         var displayed = message['displayed'];
         var highlight = message['highlight'];
-        var content = parseLineAddedTextElements(message['message']);
+        var content = weeChat.Protocol.rawText2Rich(message['message']);
+        addClasses(content);
 
         var rtext = "";
         if(content[0] != undefined) {
@@ -104,6 +123,7 @@ models.service('models', ['$rootScope', 'colors', function($rootScope, colors) {
             highlight: highlight,
             displayed: displayed,
             text: rtext,
+
         }
 
     }    

js/websockets.js

@@ -14,16 +14,7 @@ weechat.filter('toArray', function () {
     }
 });
 
-weechat.factory('colors', [function($scope) {
+weechat.factory('handlers', ['$rootScope', 'models', 'plugins', function($rootScope, models, plugins) {
-
-    return {
-        prepareCss: weeChat.color.prepareCss,
-        parse: weeChat.color.parse
-    };
-
-}]);
-
-weechat.factory('handlers', ['$rootScope', 'colors', 'models', 'plugins', function($rootScope, colors, models, plugins) {
 
     var handleBufferClosing = function(message) {
         var bufferMessage = message['objects'][0]['content'][0];
@@ -147,7 +138,7 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'models', 'plugins', functi
 
 }]);
 
-weechat.factory('connection', ['$q', '$rootScope', '$log', '$store', 'handlers', 'colors', 'models', function($q, $rootScope, $log, storage, handlers, colors, models) {
+weechat.factory('connection', ['$q', '$rootScope', '$log', '$store', 'handlers', 'models', function($q, $rootScope, $log, storage, handlers, models) {
     protocol = new weeChat.Protocol();
     var websocket = null;
 
@@ -570,4 +561,4 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     }
 
 }]
-                  );
+);