Merge pull request #352 from glowing-bear/fontchoice

User configurable font choice. Fixes #351

css/glowingbear.css

@@ -361,9 +361,15 @@ table.notimestampseconds td.time span.seconds {
     font-size: medium;
 }
 .modal-header {
+    padding-top: 23px;
     border-bottom: 0;
 }
 
+#fontchoice label {
+    font-weight: normal;
+    text-align: left;
+}
+
 h2 {
     padding-bottom: 5px;
     height: 72px;

index.html

@@ -271,10 +271,25 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Settings</h4>
+            <p>Settings will be stored in your browser.</p>
           </div>
           <div class="modal-body">
-            <p>Settings will be stored in your browser.</p>
             <ul class="">
+              <li id="fontchoice">
+                <form class="form-horizontal" role="form">
+                  <div class="form-group">
+                    <label for="font" class="col-sm-3 control-label">Preferred font</label>
+                    <div class="col-sm-4" style="padding-left: 0;">
+                      <input type="text" ng-model="fontfamily" class="form-control" id="font">
+                    </div>
+
+                    <label for="size" class="col-sm-1 control-label">Size</label>
+                    <div class="col-sm-2">
+                      <input type="text" ng-model="fontsize" class="form-control" id="size" placeholder="14px">
+                    </div>
+                  </div>
+                </form>
+              </li>
               <li>
                 <form class="form-inline" role="form">
                   <div class="checkbox">

js/glowingbear.js

@@ -14,6 +14,19 @@ weechat.filter('toArray', function () {
     };
 });
 
+// Helper to change style of a class
+var changeClassStyle = function(classSelector, attr, value) {
+    _.each(document.getElementsByClassName(classSelector), function(e) {
+        e.style[attr] = value;
+    });
+};
+// Helper to get style from a class
+var getClassStyle = function(classSelector, attr) {
+    _.each(document.getElementsByClassName(classSelector), function(e) {
+        return e.style[attr];
+    });
+};
+
 weechat.filter('irclinky', ['$filter', function($filter) {
     'use strict';
     return function(text, target) {
@@ -842,6 +855,10 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $store.bind($scope, "showtimestampSeconds", false);
     // Save setting for playing sound on notification
     $store.bind($scope, "soundnotification", false);
+    // Save setting for font family
+    $store.bind($scope, "fontfamily", getClassStyle('monospace', 'fontFamily'));
+    // Save setting for font size
+    $store.bind($scope, "fontsize", getClassStyle('monospace', 'fontSize'));
 
     // Save setting for displaying embeds in rootScope so it can be used from service
     $rootScope.visible = $scope.noembed === false;
@@ -890,6 +907,14 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     });
 
+    // Update font family when changed
+    $scope.$watch('fontfamily', function() {
+        changeClassStyle('monospace', 'fontFamily', $scope.fontfamily);
+    });
+    // Update font size when changed
+    $scope.$watch('fontsize', function() {
+        changeClassStyle('monospace', 'fontSize', $scope.fontsize);
+    });
 
     $scope.setActiveBuffer = function(bufferId, key) {
         // If we are on mobile we need to collapse the menu on sidebar clicks