From 0931458d80f4465aabfe5284b74993bad9fcc323 Mon Sep 17 00:00:00 2001
From: Vincent Fournier <v.fournier11@gmail.com>
Date: Thu, 30 Jul 2015 16:07:03 -0400
Subject: [PATCH] Add theme size options

Change-Id: I30afc1473bf0f4ab1065816f00f1d73afa9cfbf9
---
 .../sass/modules-objects/_data-table.scss     |  50 ++++-
 app/assets/sass/modules-objects/_panes.scss   |  11 +-
 app/assets/sass/temporary.scss                | 212 +++++++++++++++++-
 .../authentication/authentication.js          |   2 +
 app/components/config/config.js               |  55 ++++-
 .../directive/host/host_main/host_main.html   |   4 +-
 .../current_health/current_health.html        |   7 +-
 .../tactical/current_health/current_health.js |  17 +-
 app/components/sidebar/_sidebar.scss          |  77 ++++++-
 app/components/topbar/_topbar.scss            | 149 +++++++++++-
 app/components/topbar/topbar.html             |   6 +
 app/components/topbar/topbar.js               |   4 +
 app/index.html                                |   2 +-
 13 files changed, 545 insertions(+), 51 deletions(-)

diff --git a/app/assets/sass/modules-objects/_data-table.scss b/app/assets/sass/modules-objects/_data-table.scss
index 4d614eb..e0a55b5 100644
--- a/app/assets/sass/modules-objects/_data-table.scss
+++ b/app/assets/sass/modules-objects/_data-table.scss
@@ -70,7 +70,15 @@
         border-width:0;
         display:block;
         padding:$_space_narrow 0 0;
-        vertical-align:top;
+        .size-scheme--small & {
+            vertical-align: middle;
+        }
+        .size-scheme--normal & {
+            vertical-align: middle;
+        }
+        .size-scheme--big & {
+            vertical-align: middle;
+        }
 
         @include medium-and-up-screen {
             border-width:0 0 1px;
@@ -240,14 +248,26 @@
             top:0;
             font-family:"adagios-fontawesome";
             left:0;
-            position:absolute;
+            position:relative;
             z-index:988888;
+            .size-scheme--small & {
+                line-height: 30px;
+            }
+            .size-scheme--normal & {
+                line-height: 35px;
+            }
+            .size-scheme--big & {
+                line-height: 40px;
+            }
+
+            float: left;
+            padding-right: 10px;
         }
     }
 
     .state--error & {
         @extend .ico-error;
-        padding-left:(16 + $_space_narrow);
+        padding-left:(-10 + $_space_narrow);
 
         &:before {
             color:$_color_error;
@@ -257,7 +277,7 @@
 
     .state--warning & {
         @extend .ico-warning;
-        padding-left:(16 + $_space_narrow);
+        padding-left:(-10 + $_space_narrow);
 
         &:before {
             color:$_color_warning;
@@ -267,7 +287,7 @@
 
     .state--ok & {
         @extend .ico-ok;
-        padding-left:(18 + $_space_narrow);
+        padding-left:(-10 + $_space_narrow);
 
         &:before {
             color:$_color_ok;
@@ -303,6 +323,16 @@ time.data-table__data {
 
 .data-table__host {
     width:auto;
+    .size-scheme--small & {
+        line-height: 30px;
+    }
+    .size-scheme--normal & {
+        line-height: 35px;
+    }
+    .size-scheme--big & {
+        line-height: 40px;
+    }
+
 
     @include medium-and-up-screen {
         width:percentage(368 / 1200);
@@ -312,6 +342,16 @@ time.data-table__data {
 .data-table__service {
     width:auto;
 
+    .size-scheme--small & {
+        line-height: 16px;
+    }
+    .size-scheme--normal & {
+        line-height: 20px;
+    }
+    .size-scheme--big & {
+        line-height: 24px;
+    }
+
     @include medium-and-up-screen {
         width:percentage(500 / 1200);
     }
diff --git a/app/assets/sass/modules-objects/_panes.scss b/app/assets/sass/modules-objects/_panes.scss
index ab9a824..8fbbb35 100644
--- a/app/assets/sass/modules-objects/_panes.scss
+++ b/app/assets/sass/modules-objects/_panes.scss
@@ -43,7 +43,16 @@
     border-style:solid;
     border-width:0 0 0 1px;
     display:table-cell;
-    padding:$_space_narrow;
+
+    .size-scheme--small & {
+        padding:$_space_narrow - 5px;
+    }
+    .size-scheme--normal & {
+        padding:$_space_narrow + 5px;
+    }
+    .size-scheme--big & {
+        padding:$_space_narrow + 15px;
+    }
 
     &:first-child {border-left:0;}
 
diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss
index 1a5ab38..a9eb0b0 100644
--- a/app/assets/sass/temporary.scss
+++ b/app/assets/sass/temporary.scss
@@ -64,9 +64,7 @@ md-checkbox.md-checked .md-icon:after {
 
 // host/service status page
 
-.data-table thead th:first-child + th {
-  padding-left: 15px;
-}
+
 
 .subcomponent__live {
 
@@ -78,15 +76,39 @@ md-checkbox.md-checked .md-icon:after {
         background-color:$_color_light_beta;
     }
 
-    padding: 0px 15px;
     float: left;
-    margin: 20px;
+
+   .size-scheme--small & {
+        padding: 0px 5px;
+        margin: 5px;
+    }
+    .size-scheme--normal & {
+        padding: 0px 10px;
+        margin: 10px;
+    }
+    .size-scheme--big & {
+        padding: 0px 15px;
+        margin: 20px;
+    }
+
 }
 
 .subcomponent__live .data-table thead th:first-child {
     border-width: 0 0 0 0px;
 }
 
+.subcomponent__live .data-table tbody td {
+    .size-scheme--small & {
+        line-height: 30px;
+    }
+    .size-scheme--normal & {
+        line-height: 35px;
+    }
+    .size-scheme--big & {
+        line-height: 40px;
+    }
+}
+
 .subcomponent__live table {
     .color-scheme--dark & {
         background-color:$_color_dark_gamma;
@@ -95,10 +117,21 @@ md-checkbox.md-checked .md-icon:after {
     .color-scheme--light & {
         background-color:$_color_light_gamma;
     }
-
 }
+
 .subcomponent__live h2 {
-    margin: 15px 0px 20px 0px;
+
+    .size-scheme--small & {
+        margin: 5px 0px 10px 0px;
+    }
+    .size-scheme--normal & {
+        margin: 10px 0px 15px 0px;
+    }
+    .size-scheme--big & {
+        margin: 15px 0px 20px 0px;
+    }
+
+
     .color-scheme--dark & {
         color:$_color_omega;
     }
@@ -150,7 +183,15 @@ md-checkbox.md-checked .md-icon:after {
     .color-scheme--light & {
         color:$_color_alpha;
     }
-
+    .size-scheme--small & {
+        margin: 0px 0px;
+    }
+    .size-scheme--normal & {
+        margin: 5px 0px;
+    }
+    .size-scheme--big & {
+        margin: 10px 0px;
+    }
 }
 
 .subcomponent__title h1 span {
@@ -170,7 +211,15 @@ md-checkbox.md-checked .md-icon:after {
 }
 
 .subcomponent__small {
-    min-height: 190px;
+    .size-scheme--small & {
+        min-height: 130px;
+    }
+    .size-scheme--normal & {
+        min-height: 150px;
+    }
+    .size-scheme--big & {
+        min-height: 190px;
+    }
 }
 
 
@@ -183,6 +232,15 @@ md-checkbox.md-checked .md-icon:after {
 .subcomponent__live .state--ok .data-table__data:before {
     position: relative;
     left: -10px;
+    .size-scheme--small & {
+        height: 22px;
+    }
+    .size-scheme--normal & {
+        height: 22px;
+    }
+    .size-scheme--big & {
+        height: 25px;
+    }
 }
 
 bansho-host-services-list .subcomponent__live {
@@ -197,6 +255,19 @@ just-gage tspan {
     font: 500 1em "Roboto", sans-serif !important;
 }
 
+just-gage div {
+    .size-scheme--small & {
+        height: 100px;
+    }
+    .size-scheme--normal & {
+        height: 125px;
+    }
+    .size-scheme--big & {
+        height: 150px;
+    }
+
+}
+
 
 // Notifications
 
@@ -306,11 +377,10 @@ bansho-table-actionbar menu {
     z-index: 988889;
 }
 
-input#filter__search {
+.filters__item input#filter__search {
     border: none;
     width: 100%;
-    padding: 0.8em;
-    margin: 10px 0px 0px 15px;
+    padding-left: 0.8em;
     outline: 0;
     .color-scheme--dark & {
         background-color:$_color_dark_gamma;
@@ -340,3 +410,121 @@ thead.moving-thead {
     display: none;
     z-index: 988889;
 }
+
+
+// Theme size
+.data-table tbody td,
+.data-table tbody td:first-child + td,
+.data-table thead th:first-child + th {
+    .size-scheme--small & {
+        padding: 0px 5px 0px 5px;
+    }
+    .size-scheme--normal & {
+        padding: 5px 5px 5px 15px;
+    }
+    .size-scheme--big & {
+        padding: 15px;
+    }
+}
+
+.data-table thead th {
+    .size-scheme--small & {
+        padding: 3px 5px 3px 5px;
+    }
+    .size-scheme--normal & {
+        padding: 5px 5px 5px 15px;
+    }
+    .size-scheme--big & {
+        padding: 15px;
+    }
+}
+
+.data-table thead th:first-child,
+.data-table tbody td:first-child {
+    .size-scheme--small & {
+        padding: 0px 5px 0px 5px;
+    }
+    .size-scheme--normal & {
+        padding-left: 5px;
+    }
+    .size-scheme--big & {
+        padding-left: 15px;
+    }
+}
+
+
+.data-table md-checkbox {
+    .size-scheme--small & {
+        line-height: 0px;
+    }
+    .size-scheme--normal & {
+        line-height: 5px;
+    }
+    .size-scheme--big & {
+        line-height: 15px;
+    }
+}
+
+.filters__button {
+    .size-scheme--small & {
+        min-height: 34px;
+    }
+    .size-scheme--normal & {
+        min-height: 45px;
+    }
+    .size-scheme--big & {
+        min-height: 56px;
+    }
+}
+
+.filters__item input#filter__search {
+    .size-scheme--small & {
+          min-height: 34px - 2px;
+      }
+      .size-scheme--normal & {
+          min-height: 45px - 2px;
+      }
+      .size-scheme--big & {
+          min-height: 56px - 2px;
+      }
+}
+
+bansho-actionbar-acknowledge button.filters__button,
+bansho-actionbar-recheck button.filters__button,
+bansho-actionbar-downtime button.filters__button {
+    padding: 0px;
+    .size-scheme--small & {
+        min-width: 34px;
+    }
+    .size-scheme--normal & {
+        min-width: 45px;
+    }
+    .size-scheme--big & {
+        min-width: 56px;
+    }
+}
+
+.tab-content {
+    .size-scheme--small & {
+        padding: 5px 0 10px;
+    }
+    .size-scheme--normal & {
+        padding: 10px 0 15px;
+    }
+    .size-scheme--big & {
+        padding: 30px 0 15px;
+    }
+
+}
+
+.main__content {
+    .size-scheme--small & {
+        padding: 5px;
+    }
+    .size-scheme--normal & {
+        padding: 10px;
+    }
+    .size-scheme--big & {
+        padding: 15px;
+    }
+}
diff --git a/app/components/authentication/authentication.js b/app/components/authentication/authentication.js
index d592be8..2673b70 100644
--- a/app/components/authentication/authentication.js
+++ b/app/components/authentication/authentication.js
@@ -11,6 +11,7 @@ angular.module('bansho.authentication', [])
 
     .controller('LoginController', ['$scope', '$rootScope', '$location', 'authService', 'configManager', 'themeManager', function ($scope, $rootScope, $location, authService, configManager, themeManager) {
         themeManager.setTheme(themeManager.THEMES.DEFAULT);
+        themeManager.setSize(themeManager.SIZES.DEFAULT, false);
         $rootScope.isAuthenticated = false;
 
         var login = function (credentials) {
@@ -70,6 +71,7 @@ angular.module('bansho.authentication', [])
 
                     configManager.fetchLayoutConfig(configManager.getConfig().useStoredConfig).then(function () {
                             themeManager.setTheme(configManager.getTheme());
+                            themeManager.setSize(configManager.getSize());
                             $location.path('/view');
 
                             angular.forEach(onLogin, function (f) {
diff --git a/app/components/config/config.js b/app/components/config/config.js
index dc4174b..91fff63 100644
--- a/app/components/config/config.js
+++ b/app/components/config/config.js
@@ -11,7 +11,14 @@ angular.module('bansho.config', [])
             LIGHT: "light",
             DEFAULT: "dark"
         };
+        var SIZES = {
+            BIG: "big",
+            NORMAL: "normal",
+            SMALL: "small",
+            DEFAULT: "normal"
+        };
         this.THEMES = THEMES;
+        this.SIZES = SIZES;
 
         var setThemeClass = function (theme, saveConfig) {
             $rootScope.themeClass = 'color-scheme--' + theme;
@@ -22,6 +29,15 @@ angular.module('bansho.config', [])
             }
         };
 
+        var setThemeSize = function (size, saveConfig) {
+            $rootScope.themeClassSize = 'size-scheme--' + size;
+            $rootScope.themeSize = size;
+
+            if (saveConfig) {
+                configManager.setSizeAndSave(size);
+            }
+        };
+
         /**
          * Set the application theme from configManager
          *
@@ -42,6 +58,17 @@ angular.module('bansho.config', [])
                 setThemeClass(THEMES.DARK, true);
             }
         };
+
+        this.setSize = function (size, saveConfig) {
+            if (saveConfig === undefined) {
+                saveConfig = true;
+            }
+            if (size) {
+                setThemeSize(size, saveConfig);
+            } else {
+                setThemeSize(SIZES.DEFAULT, saveConfig);
+            }
+        };
     }])
 
     .service('componentsConfig', ['$http', function($http) {
@@ -126,19 +153,33 @@ angular.module('bansho.config', [])
                 saveLayoutConfig();
             };
 
+            this.setSizeAndSave = function (size) {
+                layoutConfig.data.banshoConfig.size = size;
+                saveLayoutConfig();
+            };
+
             this.setThemeAndSave = function (theme) {
-               layoutConfig.data.banshoConfig.theme = theme;
-               saveLayoutConfig();
+                layoutConfig.data.banshoConfig.theme = theme;
+                saveLayoutConfig();
+            };
+
+            this.getSize = function () {
+                var size;
+
+                if (layoutConfig.data) {
+                    size = layoutConfig.data.banshoConfig.size;
+                }
+
+                return size;
             };
 
             this.getTheme = function () {
                 var theme;
 
-                if (layoutConfig.data) {
-                    theme = layoutConfig.data.banshoConfig.theme;
-                }
-
-                return theme;
+                    if (layoutConfig.data) {
+                        theme = layoutConfig.data.banshoConfig.theme;
+                    }
+                    return theme;
             };
 
             var saveLayoutConfig = function () {
diff --git a/app/components/directive/host/host_main/host_main.html b/app/components/directive/host/host_main/host_main.html
index cd3a7ca..445e4eb 100644
--- a/app/components/directive/host/host_main/host_main.html
+++ b/app/components/directive/host/host_main/host_main.html
@@ -1,9 +1,9 @@
 <div class="subcomponent__live subcomponent__title">
   <header class="main__content__header clearfix">
-    <h2 class="main__content__title">
+    <h1 class="main__content__title">
       {{param.host.host_host_name}}
       <span class="subtitle" ng-show="param.host.host_config_alias">(param.host.host_config_alias)</span>
       <span class="subtitle">{{param.host.host_address}}</span>
-    </h2>
+    </h1>
   </header>
 </div>
diff --git a/app/components/directive/tactical/current_health/current_health.html b/app/components/directive/tactical/current_health/current_health.html
index deb3f0d..3c17aef 100644
--- a/app/components/directive/tactical/current_health/current_health.html
+++ b/app/components/directive/tactical/current_health/current_health.html
@@ -1,5 +1,4 @@
-<table ng-controller="TacticalCurrentHealth"
-       class="current-health"
+<table class="current-health"
        ng-if="hostsRatio != undefined && servicesRatio != undefined">
   <thead>
     <tr>
@@ -10,10 +9,10 @@
   <tbody>
     <tr>
       <td class="layout__half">
-        <just-gage id="allservices" class="someClass" min=0 max=100 value=servicesRatio title="ALL SERVICES"></just-gage>
+        <just-gage id="allhosts" min=0 max=100 value=hostsRatio title="ALL HOSTS"></just-gage>
       </td>
       <td class="layout__half">
-        <just-gage id="allhosts" class="someClass" min=0 max=100 value=hostsRatio title="ALL HOSTS"></just-gage>
+        <just-gage id="allservices" min=0 max=100 value=servicesRatio title="ALL SERVICES"></just-gage>
       </td>
     </tr>
   </tbody>
diff --git a/app/components/directive/tactical/current_health/current_health.js b/app/components/directive/tactical/current_health/current_health.js
index 9e029bd..5ed7242 100644
--- a/app/components/directive/tactical/current_health/current_health.js
+++ b/app/components/directive/tactical/current_health/current_health.js
@@ -3,13 +3,16 @@
 angular.module('bansho.tactical.current_health', ['bansho.surveil',
                                                    'ngJustGage'])
 
-    .controller('TacticalCurrentHealth', ['$scope', function ($scope) {
-        angular.noop();
-    }])
-
-    .directive('banshoCurrentHealth', function () {
+    .directive('banshoCurrentHealth', ['$compile', '$rootScope', function ($compile, $rootScope) {
         return {
             restrict: 'E',
-            templateUrl: 'components/directive/tactical/current_health/current_health.html'
+            templateUrl: 'components/directive/tactical/current_health/current_health.html',
+            link: function (scope, element) {
+                $rootScope.$watch('themeClassSize', function( sizeclass) {
+                    scope.themeClassSize = sizeclass;
+                    $compile(element.contents())(scope);
+                });
+            }
+
         };
-    });
+    }]);
diff --git a/app/components/sidebar/_sidebar.scss b/app/components/sidebar/_sidebar.scss
index a6461e0..630c937 100644
--- a/app/components/sidebar/_sidebar.scss
+++ b/app/components/sidebar/_sidebar.scss
@@ -73,9 +73,19 @@
 
 .sidebar__item {
     border-top:1px solid;
-    margin-bottom:$_space;
     position:relative;
 
+    .size-scheme--small & {
+        margin-bottom:$_space - 20px;
+    }
+    .size-scheme--normal & {
+        margin-bottom:$_space - 15px;
+    }
+    .size-scheme--big & {
+        margin-bottom:$_space;
+    }
+
+
     .color-scheme--dark & {
         border-top-color:$_color_dark_gamma;
     }
@@ -91,7 +101,23 @@
     @extend %button-reset;
     @extend %typo-title;
     display:block;
-    padding:$_space $_space_narrow 0 $_space;
+
+    .size-scheme--small & {
+        padding-top:$_space - 20px;
+        padding-right: $_space_narrow;
+        padding-bottom: 0;
+        padding-left: $_space - 22px;
+    }
+    .size-scheme--normal & {
+        padding-top:$_space - 15px;
+        padding-right: $_space_narrow;
+        padding-bottom: 0;
+        padding-left: $_space - 15px;
+    }
+    .size-scheme--big & {
+        padding:$_space $_space_narrow 0 $_space;
+    }
+
     text-align:left;
     width:100%;
 
@@ -119,7 +145,25 @@
     display:inline-block;
     font-size:em(24, $_base_font_size);
     line-height:1;
-    padding:$_space $_space_narrow 0;
+
+    .size-scheme--small & {
+        padding-top:$_space - 20px;
+        padding-right: $_space_narrow;
+        padding-bottom: 0;
+        padding-left: $_space_narrow;
+    }
+    .size-scheme--normal & {
+        padding-top:$_space - 15px;
+        padding-right: $_space_narrow;
+        padding-bottom: 0;
+        padding-left: $_space_narrow;
+    }
+    .size-scheme--big & {
+        padding:$_space $_space_narrow 0;
+    }
+
+
+
     position:absolute;
     right:0;
     top:0 ;
@@ -154,7 +198,21 @@
 }
 
 .sidebar__sublist {
-    padding:0 $_space_narrow 0 $_space;
+    padding-top:0;
+    padding-bottom: 0;
+
+    .size-scheme--small & {
+        padding-right: $_space_narrow;
+        padding-left: $_space - 15px;
+    }
+    .size-scheme--normal & {
+        padding-right: $_space_narrow;
+        padding-left: $_space - 5px;
+    }
+    .size-scheme--big & {
+        padding-right: $_space_narrow;
+        padding-left: $_space;
+    }
 
     @include large-xlarge-screen {
         padding:0 $_space;
@@ -163,7 +221,16 @@
 
 .sidebar__subitem {
     @extend %typo-menu;
-    margin-top:$_space;
+
+    .size-scheme--small & {
+        margin-top:$_space - 20px;
+    }
+    .size-scheme--normal & {
+        margin-top:$_space - 15px;
+    }
+    .size-scheme--big & {
+        margin-top:$_space;
+    }
 
     .state--current {
         .color-scheme--dark & {
diff --git a/app/components/topbar/_topbar.scss b/app/components/topbar/_topbar.scss
index 5ed898f..a442f5d 100644
--- a/app/components/topbar/_topbar.scss
+++ b/app/components/topbar/_topbar.scss
@@ -13,11 +13,21 @@
 
 .topbar__item {
     @extend %colorBorderThin;
-    height:80px;
     border:0 solid;
     display:inline-block;
     position:relative;
 
+   .size-scheme--small & {
+        height: 50px;
+    }
+    .size-scheme--normal & {
+        height: 60px;
+    }
+    .size-scheme--big & {
+        height: 80px;
+    }
+
+
     .topbar__list--left & {
         border-right-width:1px;
         float:left;
@@ -54,16 +64,43 @@
         }
     }
 
-    .topbar__panel__content {padding:$_space $_space_narrow 0;}
+    .topbar__panel__content {
+        .size-scheme--small & {
+            padding-top: $_space - 20px;
+            padding-right: $_space_narrow;
+            padding-bottom: 0;
+            padding-left: $_space_narrow;
+        }
+        .size-scheme--normal & {
+            padding-top: $_space - 10px;
+            padding-right: $_space_narrow;
+            padding-bottom: 0;
+            padding-left: $_space_narrow;
+        }
+        .size-scheme--big & {
+            padding: $_space $_space_narrow 0;
+        }
+    }
 }
 
 .topbar__button {
     @extend %button-reset;
     @extend %colorBkgTopbarButton;
     @extend %colorLink;
-    height:80px;
+   .size-scheme--small & {
+        width: 49px;
+        height: 50px;
+    }
+    .size-scheme--normal & {
+        width: 59px;
+        height: 60px;
+    }
+    .size-scheme--big & {
+        width:79px;
+        height: 80px;
+    }
+
     position:relative;
-    width:79px;
 
     &[aria-expanded="true"] {
         .color-scheme--dark & {
@@ -78,7 +115,15 @@
 
     [class^="ico-"],
     [class*=" ico-"] {
-        bottom:30px;
+       .size-scheme--small & {
+            bottom:15px;
+        }
+        .size-scheme--normal & {
+            bottom:20px;
+        }
+        .size-scheme--big & {
+            bottom:30px;
+        }
         display:block;
         font-size:em(20, $_base_font_size);
         height:1em;
@@ -171,7 +216,19 @@
         float:right;
         font-size:1.1em;
         height:16px;
-        margin:32px $_space 0 0;
+
+       .size-scheme--small & {
+            margin:16px $_space 0 0;
+            bottom:15px;
+        }
+        .size-scheme--normal & {
+            margin:22px $_space 0 0;
+            bottom:20px;
+        }
+        .size-scheme--big & {
+            margin:32px $_space 0 0;
+        }
+
         vertical-align:baseline;
         .color-scheme--dark & {
             color:$_color_omega;
@@ -223,11 +280,89 @@
 .topbar__settings__subitem {
     cursor: pointer;
     display: block;
+    outline:0;
 }
 
 .topbar__settings__subitem {
     @extend %typo-menu;
-    margin-bottom:$_space;
+    .size-scheme--small & {
+        margin-bottom:$_space - 20px;
+    }
+    .size-scheme--normal & {
+        margin-bottom:$_space - 10px;
+    }
+    .size-scheme--big & {
+        margin-bottom:$_space;
+    }
+
 
     a {display:block;}
+
+}
+
+
+
+.topbar__settings__subitem div.set-size-small.active,
+.topbar__settings__subitem div.set-size-normal.active,
+.topbar__settings__subitem div.set-size-big.active {
+    .color-scheme--light & {
+        color:$_color_alpha;
+    }
+    .color-scheme--dark & {
+        color:$_color_omega;
+     }
+}
+
+.topbar__settings__subitem .set-size-small,
+.topbar__settings__subitem .set-size-normal,
+.topbar__settings__subitem .set-size-big
+{
+    float: left;
+    width: 30%;
+    line-height: 1px;
+    text-align: center;
+    outline:0;
+
+    .color-scheme--light & {
+        color:$_color_light_delta;
+        transition-duration: 0.5s;
+        transition-property: color;
+        &:hover {
+            color:$_color_alpha;
+            outline:0;
+        }
+    }
+
+    .color-scheme--dark & {
+        color:$_color_light_delta;
+        transition-duration: 0.5s;
+        transition-property: color;
+        &:hover {
+            color:$_color_omega;
+            outline:0;
+        }
+    }
+
+
+
+
+}
+.topbar__settings__subitem .set-size-clear{
+    clear: both;
+}
+
+.topbar__settings__subitem .set-size-small
+{
+    font-size: em(15, $_base_font_size);
+    line-height: 20px;
+}
+.topbar__settings__subitem .set-size-normal
+{
+    font-size: em(20, $_base_font_size);
+    line-height: 20px;
+}
+.topbar__settings__subitem .set-size-big
+{
+    font-size: em(25, $_base_font_size);
+    line-height: 20px;
 }
diff --git a/app/components/topbar/topbar.html b/app/components/topbar/topbar.html
index 687a31d..5cae0e9 100644
--- a/app/components/topbar/topbar.html
+++ b/app/components/topbar/topbar.html
@@ -51,6 +51,12 @@
                 <li class="topbar__settings__subitem"><a href="#">Object History</a></li>
                 <li class="topbar__settings__subitem"><a href="#/view?view=config">Configure</a></li>
                 <li class="topbar__settings__subitem" ng-click="switchTheme()"><a>Change theme</a></li>
+                <li class="topbar__settings__subitem" >
+                    <div class="set-size-big" ng-class="{active: themeClassSize=='size-scheme--big'}" ng-click="setSize('big')">A</div>
+                    <div class="set-size-normal" ng-class="{active: themeClassSize=='size-scheme--normal'}" ng-click="setSize('normal')">A</div>
+                    <div class="set-size-small" ng-class="{active: themeClassSize=='size-scheme--small'}" ng-click="setSize('small')">A</div>
+                    <div class="set-size-clear"></div>
+                </li>
                 <li class="topbar__settings__subitem" ng-click="logout()"><a>Logout</a></li>
               </ul>
             </li>
diff --git a/app/components/topbar/topbar.js b/app/components/topbar/topbar.js
index 665b952..a986b7a 100644
--- a/app/components/topbar/topbar.js
+++ b/app/components/topbar/topbar.js
@@ -16,6 +16,10 @@ angular.module('bansho.topbar', ['bansho.surveil'])
                         themeManager.switchTheme();
                     };
 
+                    $scope.setSize = function (size) {
+                        themeManager.setSize(size);
+                    };
+
                     authService.registerOnLogin(function () {
                         $scope.allProblems = sharedData.getData('nbServicesHostsOpenProblems', function (data) {
                             $scope.allProblems = data;
diff --git a/app/index.html b/app/index.html
index 946c112..1b95ec6 100644
--- a/app/index.html
+++ b/app/index.html
@@ -122,7 +122,7 @@
     <!-- endbuild -->
   </head>
 
-  <body class="layout" ng-class="themeClass" ng-app="bansho">
+  <body class="layout" ng-class="[themeClass, themeClassSize]" ng-app="bansho">
     <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
     <div class="layout__container">
       <aside class="layout__aside sidebar-wrapper collapse" id="sidebarWrapper">