From cdcdcb096b58edc1176dc4e29dd6a272dee6ad07 Mon Sep 17 00:00:00 2001 From: Tor Hveem Date: Mon, 7 Jul 2014 01:48:19 +0200 Subject: [PATCH 1/6] User configurable font choice. Fixes #351 --- index.html | 5 +++++ js/glowingbear.js | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index cd8699f..1469329 100644 --- a/index.html +++ b/index.html @@ -367,6 +367,11 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel +
  • + Override font +
    + +
  • diff --git a/js/glowingbear.js b/js/glowingbear.js index d3e4c58..5453979 100644 --- a/js/glowingbear.js +++ b/js/glowingbear.js @@ -842,6 +842,8 @@ 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", $('.monospace').css('font-family')); // Save setting for displaying embeds in rootScope so it can be used from service $rootScope.visible = $scope.noembed === false; @@ -890,6 +892,10 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', } }); + // Update font family when changed + $scope.$watch('fontfamily', function() { + $('.monospace').css('font-family', $scope.fontfamily); + }); $scope.setActiveBuffer = function(bufferId, key) { // If we are on mobile we need to collapse the menu on sidebar clicks From 16f9897964d89e39710b42a473b87851d8d27ab0 Mon Sep 17 00:00:00 2001 From: Tor Hveem Date: Mon, 7 Jul 2014 16:03:33 +0200 Subject: [PATCH 2/6] use angular.element instead of jquery --- js/glowingbear.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/glowingbear.js b/js/glowingbear.js index 5453979..42aa45d 100644 --- a/js/glowingbear.js +++ b/js/glowingbear.js @@ -843,7 +843,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Save setting for playing sound on notification $store.bind($scope, "soundnotification", false); // Save setting for font family - $store.bind($scope, "fontfamily", $('.monospace').css('font-family')); + $store.bind($scope, "fontfamily", angular.element('.monospace').css('font-family')); // Save setting for displaying embeds in rootScope so it can be used from service $rootScope.visible = $scope.noembed === false; @@ -894,7 +894,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Update font family when changed $scope.$watch('fontfamily', function() { - $('.monospace').css('font-family', $scope.fontfamily); + angular.element('.monospace').css('font-family', $scope.fontfamily); }); $scope.setActiveBuffer = function(bufferId, key) { From 6a3b4a15062d91ed3e21fdcbd7e8c633d7df53db Mon Sep 17 00:00:00 2001 From: Tor Hveem Date: Mon, 7 Jul 2014 16:09:25 +0200 Subject: [PATCH 3/6] new option for overriding font size --- index.html | 7 ++++++- js/glowingbear.js | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1469329..c26a3be 100644 --- a/index.html +++ b/index.html @@ -368,10 +368,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
  • - Override font + Override font family
    • +
  • + Override font size (E.g. 16px) +
    + +
  • diff --git a/js/glowingbear.js b/js/glowingbear.js index 42aa45d..e81fa40 100644 --- a/js/glowingbear.js +++ b/js/glowingbear.js @@ -844,6 +844,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', $store.bind($scope, "soundnotification", false); // Save setting for font family $store.bind($scope, "fontfamily", angular.element('.monospace').css('font-family')); + // Save setting for font size + $store.bind($scope, "fontsize", angular.element('.monospace').css('font-size')); // Save setting for displaying embeds in rootScope so it can be used from service $rootScope.visible = $scope.noembed === false; @@ -896,6 +898,10 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', $scope.$watch('fontfamily', function() { angular.element('.monospace').css('font-family', $scope.fontfamily); }); + // Update font size when changed + $scope.$watch('fontsize', function() { + angular.element('.monospace').css('font-size', $scope.fontsize); + }); $scope.setActiveBuffer = function(bufferId, key) { // If we are on mobile we need to collapse the menu on sidebar clicks From 6318a941637ab59ad1b5ad2cda92a94abfdf9972 Mon Sep 17 00:00:00 2001 From: Tor Hveem Date: Mon, 7 Jul 2014 16:42:23 +0200 Subject: [PATCH 4/6] Helpers for class styling Implement our own helpers for getting and setting class styles instead of using jquery functions, since we are getting rid of jquery --- js/glowingbear.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/js/glowingbear.js b/js/glowingbear.js index e81fa40..a590bc9 100644 --- a/js/glowingbear.js +++ b/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) { @@ -843,9 +856,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Save setting for playing sound on notification $store.bind($scope, "soundnotification", false); // Save setting for font family - $store.bind($scope, "fontfamily", angular.element('.monospace').css('font-family')); + $store.bind($scope, "fontfamily", getClassStyle('monospace', 'font-family')); // Save setting for font size - $store.bind($scope, "fontsize", angular.element('.monospace').css('font-size')); + $store.bind($scope, "fontsize", getClassStyle('monospace', 'font-size')); // Save setting for displaying embeds in rootScope so it can be used from service $rootScope.visible = $scope.noembed === false; @@ -896,11 +909,11 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Update font family when changed $scope.$watch('fontfamily', function() { - angular.element('.monospace').css('font-family', $scope.fontfamily); + changeClassStyle('monospace', 'font-family', $scope.fontfamily); }); // Update font size when changed $scope.$watch('fontsize', function() { - angular.element('.monospace').css('font-size', $scope.fontsize); + changeClassStyle('monospace', 'font-size', $scope.fontsize); }); $scope.setActiveBuffer = function(bufferId, key) { From 836b2940ce7a600d208ecaecc2a8ce4aea99bbf0 Mon Sep 17 00:00:00 2001 From: Tor Hveem Date: Mon, 7 Jul 2014 20:11:14 +0200 Subject: [PATCH 5/6] Use crossbrowser compatible attr. names --- js/glowingbear.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/glowingbear.js b/js/glowingbear.js index a590bc9..e8e8a54 100644 --- a/js/glowingbear.js +++ b/js/glowingbear.js @@ -856,9 +856,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Save setting for playing sound on notification $store.bind($scope, "soundnotification", false); // Save setting for font family - $store.bind($scope, "fontfamily", getClassStyle('monospace', 'font-family')); + $store.bind($scope, "fontfamily", getClassStyle('monospace', 'fontFamily')); // Save setting for font size - $store.bind($scope, "fontsize", getClassStyle('monospace', '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; @@ -909,11 +909,11 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', // Update font family when changed $scope.$watch('fontfamily', function() { - changeClassStyle('monospace', 'font-family', $scope.fontfamily); + changeClassStyle('monospace', 'fontFamily', $scope.fontfamily); }); // Update font size when changed $scope.$watch('fontsize', function() { - changeClassStyle('monospace', 'font-size', $scope.fontsize); + changeClassStyle('monospace', 'fontSize', $scope.fontsize); }); $scope.setActiveBuffer = function(bufferId, key) { From fcfd9fce9174c356742924e0095dbf90519614f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenz=20H=C3=BCbschle-Schneider?= Date: Thu, 10 Jul 2014 17:37:39 +0100 Subject: [PATCH 6/6] Make it pretty --- css/glowingbear.css | 6 ++++++ index.html | 27 ++++++++++++++++----------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index 19cb22a..28f6726 100644 --- a/css/glowingbear.css +++ b/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; diff --git a/index.html b/index.html index c26a3be..6c360cc 100644 --- a/index.html +++ b/index.html @@ -271,10 +271,25 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel

    Settings

    +

    Settings will be stored in your browser.

    -

    Settings will be stored in your browser.

      +
    • + +
      + +
      + +
      + + +
      + +
      +
      +
      • +
    • @@ -367,16 +382,6 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
      • -
    • - Override font family -
      - -
      • -
    • - Override font size (E.g. 16px) -
      - -