ability to hide icons

main.js

@@ -6,6 +6,7 @@ define(function (require, exports, module) {
     ExtensionUtils.loadStyleSheet(module, 'styles/pictonic.css');
 
     require('./services/injector').init();
+    require('./services/preferences').init();
 
     require('./services/onlineTracking').init();
 });

package.json

@@ -3,7 +3,7 @@
     "title": "Documents Toolbar",
     "description": "Adds toolbar with a list of open documents on the top of the editor.",
     "homepage": "https://github.com/dnbard/brackets-documents-toolbar",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "author": "Alex Bardanov <[email protected]>",
     "license": "MIT",
     "engines": {

services/preferences.js

@@ -0,0 +1,15 @@
+var PreferencesManager = require('preferences/PreferencesManager');
+
+define(function(require, exports){
+    var prefs = PreferencesManager.getExtensionPrefs('dnbard.documents-toolbar');
+
+    exports.init = function(){
+        if (prefs.get('icons') === undefined){
+            prefs.set('icons', true);
+        }
+    }
+
+    exports.get = function(id){
+        return prefs.get(id);
+    }
+});

styles/main.css

@@ -31,14 +31,15 @@
 
 .ext-documents .document-icon{
     font-size: 20px;
-    position: absolute;
     top: 5px;
     left: 4px;
+    vertical-align: top;
+    margin-right: 6px;
+    margin-left: -4px;
 }
 
 .ext-documents .document-name{
     padding-right: 4px;
-    margin-left: 14px;
 }
 
 .ext-documents .document:before{

templates/holder.html

@@ -5,7 +5,7 @@
         </span>
         <span data-bind="foreach: documents">
             <span class="document" data-bind="css:{selected: $data._path === $parent.selectedPath(), changed: $parent.isChanged($data)}, click: $parent.onDocumentClick">
-                <span class="document-icon" data-bind="css: $parent.getDocumentIcon($data), style:{color: $parent.getDocumentIconColor($data)}"></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="text: $data._name"></span>
                 <span class="document-close" data-bind="click: $parent.onDocumentClose">
                     <i class="fa fa-times-circle"></i>

viewmodels/documents.js

@@ -7,7 +7,8 @@ define(function(require, exports, module){
         _ = require('../vendor/lodash'),
         Icons = require('../services/icons'),
         config = require('../config'),
-        $DocumentManager = $(DocumentManager);
+        $DocumentManager = $(DocumentManager),
+        prefs = require('../services/preferences');
 
     function DocumentsViewModel(){
         var self = this;
@@ -18,6 +19,8 @@ define(function(require, exports, module){
         }, this);
         this.changed = ko.observableArray([]);
 
+        this.iconsEnabled = ko.observable(prefs.get('icons'));
+
         this.onDocumentClick = function(model){
             DocumentManager.getDocumentForPath(model._path)
                 .done(function(doc){