ability to change tab's font, fix #3

main.js

@@ -18,6 +18,7 @@ define(function (require, exports, module) {
     require('./services/preferences').init();
     require('./services/storage').init();
     require('./services/tabSize');
+    require('./services/fonts').init();
 
     require('./services/onlineTracking').init();
 

package.json

@@ -3,7 +3,7 @@
     "title": "Documents Toolbar",
     "description": "Adds toolbar with tabs of open documents on the top of the editor. Now with drag and drop!",
     "homepage": "https://github.com/dnbard/brackets-documents-toolbar",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "author": "Alex Bardanov <dnbard@gmail.com>",
     "license": "MIT",
     "engines": {

services/fonts.js

@@ -0,0 +1,35 @@
+var PreferencesManager = require('preferences/PreferencesManager');
+
+define(function(require, exports, module){
+    var prefs  = PreferencesManager.getExtensionPrefs("fonts"),
+        isChange = false;
+
+    // monitor brackets.json file changes
+    prefs.on("change", "fontSize", applyFontChanges);
+
+    // monitor brackets.json file changes
+    prefs.on("change", "fontFamily", applyFontChanges);
+
+    function applyFontChanges(){
+        if (!isChange){
+            return;
+        }
+        $('.brFont').css('font-size', prefs.get("fontSize"))
+            .css('font-family', prefs.get("fontFamily"));
+    }
+
+    exports.init = function(){
+        console.log(prefs.get("fontSize"));
+        console.log(prefs.get("fontFamily"));
+    }
+
+    exports.change = function(value){
+        isChange = value;
+        if (value){
+            applyFontChanges();
+        } else {
+            $('.brFont').css('font-size', 'inherit')
+                .css('font-family', 'inherit');
+        }
+    }
+});

services/preferences.js

@@ -8,7 +8,8 @@ define(function(require, exports){
             icons: true,
             tooltip: false,
             close_left: false,
-            workingFiles: true
+            workingFiles: true,
+            brackets_font: true
         };
 
     exports.init = function(){

styles/main.css

@@ -3,6 +3,10 @@
     white-space: nowrap;
 }
 
+.ext-documents .document-holder{
+    position: absolute;
+}
+
 .ext-documents .document{
     padding-left: 12px;
     padding-right: 8px;
@@ -72,9 +76,9 @@
     padding-right: 4px;
     display: inline-block;
     overflow-x: hidden;
+    overflow-y: hidden;
     text-align: center;
     max-width: 12em;
-    /*transition: all 0.25s;*/
 }
 
 .ext-documents .document:before{

templates/holder.html

@@ -5,13 +5,13 @@
             <i class="fa fa-cog button-icon" data-bind="click: onShowOptions" title="Show extension's options"></i>
             <i class="fa fa-times button-icon" data-bind="click: onDocumentCloseAll" title="Close all open documents"></i>
         </span>
-        <span class="document-holder" data-bind="foreach: documents">
+        <span class="document-holder brFont" data-bind="foreach: documents">
             <span class="document" data-bind="style:{background: $parent.getDocumentBackground($data)}, css:{selected: $data._path === $parent.selectedPath(), changed: $parent.isChanged($data)}, click: $parent.onDocumentClick, event:{mouseover: $parent.onDocumentMouseIn, mouseleave: $parent.onDocumentMouseLeave, contextmenu: $parent.onDocumentContextMenu, mousedown: $parent.onDocumentMouseDown}, attr:{title: $data._path}, drag: true">
                 <span class="document-close" data-bind="click: $parent.onDocumentClose, style:{color: $parent.getDocumentNameColor($data)}, visible: $parent.isCloseOnLeft()">
                     <i class="fa fa-times-circle"></i>
                 </span>
                 <span class="document-icon" data-bind="css: $parent.getDocumentIcon($data), style:{color: $parent.getDocumentIconColor($data)}, visible: $parent.iconsEnabled"></span>
-                <span class="document-name" data-bind="html: $parent.getDocumentName($data), style:{color: $parent.getDocumentNameColor($data)}"></span>
+                <span class="document-name" data-bind="text: $parent.getDocumentName($data), style:{color: $parent.getDocumentNameColor($data)}"></span>
                 <span class="document-close" data-bind="click: $parent.onDocumentClose, style:{color: $parent.getDocumentNameColor($data)}, visible: !$parent.isCloseOnLeft()">
                     <i class="fa fa-times-circle"></i>
                 </span>

templates/modal.html

@@ -16,6 +16,10 @@ <h1 class="dialog-title">Documents toolbar settings</h1>
                 <input type="checkbox" data-bind="checked: showIcons" />
                 <span>Show Icons</span>
             </div>
+            <div>
+                <input type="checkbox" data-bind="checked: useBracketsFont" />
+                <span>Use Brackets font settings</span>
+            </div>
         </div>
         <div data-page="RULES" data-bind="visible: isCurrentPageSelected($data, $element)">
             <div class="rule-set" data-bind="foreach: rules">

viewmodels/documents.js

@@ -28,6 +28,11 @@ define(function(require, exports, module){
             self.iconsEnabled(value);
         });
 
+        this.fontEnabled = ko.observable(prefs.get('brackets_font'));
+        prefs.notifier('brackets_font', function(value){
+            self.fontEnabled(value);
+        });
+
         this.onDocumentClick = function(model, event){
             DocumentManager.getDocumentForPath(model._path)
                 .done(function(doc){

viewmodels/generalOptions.js

@@ -1,7 +1,8 @@
 define(function(require, exports, module){
     var ko = require('../vendor/knockout'),
         prefs = require('../services/preferences'),
-        ExtensionUtils = brackets.getModule('utils/ExtensionUtils');
+        ExtensionUtils = brackets.getModule('utils/ExtensionUtils'),
+        fonts = require('../services/fonts');
 
     function showWorkingFiles(value){
         if (value){
@@ -23,8 +24,15 @@ define(function(require, exports, module){
             prefs.set('icons', value);
         });
 
+        this.useBracketsFont = ko.observable();
+        this.useBracketsFont.subscribe(function(value){
+            fonts.change(value);
+            prefs.set('brackets_font', value);
+        });
+
         this.showWorkingFiles(prefs.get('workingFiles'));
         this.showIcons(prefs.get('icons'));
+        this.useBracketsFont(prefs.get('brackets_font'));
     }
 
     module.exports = GeneralOptions;