fix #217: ability to increase font size

app/scripts/app.js

@@ -24,9 +24,7 @@ $(function() {
     window.kw = ExportApi;
 
     var appModel = new AppModel();
-    if (appModel.settings.get('theme')) {
-        ThemeChanger.setTheme(appModel.settings.get('theme'));
-    }
+    ThemeChanger.setBySettings(appModel.settings);
     var skipHttpsWarning = localStorage.skipHttpsWarning || appModel.settings.get('skipHttpsWarning');
     if (['https:', 'file:', 'app:'].indexOf(location.protocol) < 0 && !skipHttpsWarning) {
         Alerts.error({ header: Locale.appSecWarn, icon: 'user-secret', esc: false, enter: false, click: false,

app/scripts/models/app-settings-model.js

@@ -25,6 +25,7 @@ var AppSettingsModel = Backbone.Model.extend({
         hideEmptyFields: false,
         skipHttpsWarning: false,
         demoOpened: false,
+        fontSize: 0,
         dropbox: true,
         webdav: true,
         gdrive: true,

app/scripts/util/locale.js

@@ -301,6 +301,10 @@ var Locale = {
     setGenThemeDb: 'Dark brown',
     setGenThemeWh: 'White',
     setGenThemeHc: 'High contrast',
+    setGenFontSize: 'Font size',
+    setGenFontSizeNormal: 'Normal',
+    setGenFontSizeLarge: 'Large',
+    setGenFontSizeLargest: 'Largest',
     setGenShowSubgroups: 'Show entries from all subgroups',
     setGenTableView: 'Entries list table view',
     setGenColorfulIcons: 'Colorful custom icons in list',

app/scripts/util/theme-changer.js

@@ -1,6 +1,15 @@
 'use strict';
 
 var ThemeChanger = {
+    setBySettings: function(settings) {
+        if (settings.get('theme')) {
+            this.setTheme(settings.get('theme'));
+        }
+        if (settings.get('fontSize')) {
+            this.setFontSize(settings.get('fontSize'));
+        }
+    },
+
     setTheme: function(theme) {
         _.forEach(document.body.classList, function(cls) {
             if (/^th\-/.test(cls)) {
@@ -12,6 +21,10 @@ var ThemeChanger = {
         if (metaThemeColor) {
             metaThemeColor.content = window.getComputedStyle(document.body).backgroundColor;
         }
+    },
+
+    setFontSize: function(fontSize) {
+        document.documentElement.style.fontSize = fontSize ? (12 + fontSize * 2) + 'px' : '';
     }
 };
 

app/scripts/views/app-view.js

@@ -55,6 +55,7 @@ var AppView = Backbone.View.extend({
         this.views.list.listenDrag(this.views.listDrag);
 
         this.listenTo(this.model.settings, 'change:theme', this.setTheme);
+        this.listenTo(this.model.settings, 'change:fontSize', this.setFontSize);
         this.listenTo(this.model.files, 'update reset', this.fileListUpdated);
 
         this.listenTo(Backbone, 'select-all', this.selectAll);
@@ -548,6 +549,10 @@ var AppView = Backbone.View.extend({
         ThemeChanger.setTheme(this.model.settings.get('theme'));
     },
 
+    setFontSize: function() {
+        ThemeChanger.setFontSize(this.model.settings.get('fontSize'));
+    },
+
     extLinkClick: function(e) {
         if (Launcher) {
             e.preventDefault();

app/scripts/views/settings/settings-general-view.js

@@ -19,6 +19,7 @@ var SettingsGeneralView = Backbone.View.extend({
 
     events: {
         'change .settings__general-theme': 'changeTheme',
+        'change .settings__general-font-size': 'changeFontSize',
         'change .settings__general-expand': 'changeExpandGroups',
         'change .settings__general-auto-update': 'changeAutoUpdate',
         'change .settings__general-idle-minutes': 'changeIdleMinutes',
@@ -61,6 +62,7 @@ var SettingsGeneralView = Backbone.View.extend({
         this.renderTemplate({
             themes: this.allThemes,
             activeTheme: AppSettingsModel.instance.get('theme'),
+            fontSize: AppSettingsModel.instance.get('fontSize'),
             expandGroups: AppSettingsModel.instance.get('expandGroups'),
             canClearClipboard: !!Launcher,
             clipboardSeconds: AppSettingsModel.instance.get('clipboardSeconds'),
@@ -164,6 +166,11 @@ var SettingsGeneralView = Backbone.View.extend({
         AppSettingsModel.instance.set('theme', theme);
     },
 
+    changeFontSize: function(e) {
+        var fontSize = +e.target.value;
+        AppSettingsModel.instance.set('fontSize', fontSize);
+    },
+
     changeClipboard: function(e) {
         var clipboardSeconds = +e.target.value;
         AppSettingsModel.instance.set('clipboardSeconds', clipboardSeconds);

app/styles/areas/_list.scss

@@ -99,7 +99,7 @@
   }
 
   &__item {
-    padding: $base-padding-px;
+    padding: 6px 10px 0;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -111,7 +111,7 @@
     }
 
     &:not(.list__item--table) {
-      height: 32px;
+      height: 3rem;
     }
 
     &--expired {

app/styles/base/_buttons.scss

@@ -4,7 +4,7 @@
   cursor: pointer;
   display: inline-block;
   font-family: $base-font-family;
-  font-size: $base-font-size;
+  font-size: 1rem;
   -webkit-font-smoothing: antialiased;
   font-weight: 600;
   line-height: 1;

app/styles/base/_forms.scss

@@ -16,13 +16,13 @@ input,
 select {
   display: block;
   font-family: $base-font-family;
-  font-size: $base-font-size;
+  font-size: 1rem;
 }
 
 label {
   display: inline-block;
   font-family: $base-font-family;
-  font-size: $base-font-size;
+  font-size: 1rem;
   font-weight: 600;
   margin-bottom: $small-spacing / 2;
 
@@ -39,7 +39,7 @@ input[type=text], input[type=password], textarea, input:not([type]) {
   border-radius: $base-border-radius;
   box-sizing: border-box;
   font-family: $base-font-family;
-  font-size: $base-font-size;
+  font-size: 1rem;
   margin-bottom: $small-spacing;
   padding: $base-spacing / 3;
   transition: border-color $base-duration $base-timing;

app/styles/base/_typography.scss

@@ -1,3 +1,7 @@
+html {
+  font-size: $base-font-size;
+}
+
 body {
   @include size(100%);
   @include user-select(none);
@@ -7,7 +11,7 @@ body {
   }
   font-family: $base-font-family;
   font-feature-settings: "kern", "liga";
-  font-size: $base-font-size;
+  font-size: 1rem;
   line-height: $base-line-height;
 }
 
@@ -26,13 +30,13 @@ h6 {
   margin: 0 0 $small-spacing;
 }
 
-$small-header-font-size: modular-scale(2, $base-font-size);
-$large-header-font-size: modular-scale(3, $base-font-size);
+$small-header-font-size: modular-scale(2, 1rem);
+$large-header-font-size: modular-scale(3, 1rem);
 
-h6 { font-size: $base-font-size; }
-h5 { font-size: modular-scale(1, $base-font-size, 1.1); }
-h4 { font-size: modular-scale(2, $base-font-size, 1.1); }
-h3 { font-size: modular-scale(3, $base-font-size, 1.1); }
+h6 { font-size: 1rem; }
+h5 { font-size: modular-scale(1, 1rem, 1.1); }
+h4 { font-size: modular-scale(2, 1rem, 1.1); }
+h3 { font-size: modular-scale(3, 1rem, 1.1); }
 h2 { font-size: $small-header-font-size; }
 h1 { font-size: $large-header-font-size; }
 

app/templates/settings/settings-general.hbs

@@ -45,6 +45,14 @@
             {{/each}}
         </select>
     </div>
+    <div>
+        <label for="settings__general-font-size">{{res 'setGenFontSize'}}:</label>
+        <select class="settings__general-font-size settings__select input-base" id="settings__general-font-size">
+            <option value="0" {{#ifeq fontSize 0}}selected{{/ifeq}}>{{res 'setGenFontSizeNormal'}}</option>
+            <option value="1" {{#ifeq fontSize 1}}selected{{/ifeq}}>{{res 'setGenFontSizeLarge'}}</option>
+            <option value="2" {{#ifeq fontSize 2}}selected{{/ifeq}}>{{res 'setGenFontSizeLargest'}}</option>
+        </select>
+    </div>
     <div>
         <input type="checkbox" class="settings__input input-base settings__general-expand" id="settings__general-expand" {{#if expandGroups}}checked{{/if}} />
         <label for="settings__general-expand">{{res 'setGenShowSubgroups'}}</label>

release-notes.md

@@ -9,6 +9,7 @@ Auto-type, ui improvements
 `+` edit and remove tags  
 `+` register file associations  
 `+` high contrast theme  
+`+` ability to increase font size  
 `+` improved start page ux on mobile  
 `-` prevent second app instance on windows  
 `*` don't check updates at startup