added settings menu, fix #14

dnbard · Aug 28, 2014 · b333dba · b333dba
1 parent 033fbd9
commit b333dba
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 34 deletions.
diff --git a/bindings/mouseIndicator.js b/bindings/mouseIndicator.js
@@ -21,7 +21,7 @@ define(function(require, exports, module){
                 if (handlers[id]){
                     setTimeout(function(){
                         var tabResizer = require('../services/tabSize');
-                        tabResizer.tabResizeWorker(true);
+                        tabResizer.tabResizeWorker(false);
                         handlers[id] = null;
                     }, 250);
                 }

diff --git a/main.js b/main.js
@@ -1,5 +1,6 @@
 define(function (require, exports, module) {
-    var ExtensionUtils = brackets.getModule('utils/ExtensionUtils');
+    var ExtensionUtils = brackets.getModule('utils/ExtensionUtils'),
+        GeneralOptions = require('./viewmodels/generalOptions');
 
     ExtensionUtils.loadStyleSheet(module, 'styles/main.css');
     ExtensionUtils.loadStyleSheet(module, 'styles/awesome.css');
@@ -19,4 +20,6 @@ define(function (require, exports, module) {
     require('./services/tabSize');
 
     require('./services/onlineTracking').init();
+
+    new GeneralOptions();
 });
diff --git a/services/preferences.js b/services/preferences.js
@@ -3,10 +3,12 @@ var PreferencesManager = require('preferences/PreferencesManager');
 define(function(require, exports){
     var prefs = PreferencesManager.getExtensionPrefs('dnbard.documents-toolbar'),
         _ = require('../vendor/lodash'),
+        events = {},
         inits = {
             icons: true,
             tooltip: false,
-            close_left: false
+            close_left: false,
+            workingFiles: true
         };
 
     exports.init = function(){
@@ -20,4 +22,18 @@ define(function(require, exports){
     exports.get = function(id){
         return prefs.get(id);
     }
+
+    exports.set = function(id, value){
+        if (typeof id === 'string' && value !== undefined){
+            prefs.set(id, value);
+        }
+
+        if (typeof events[id] === 'function'){
+            events[id](value);
+        }
+    }
+
+    exports.notifier = function(id, handler){
+        events[id] = handler;
+    }
 });
diff --git a/styles/hideWorkingFiles.css b/styles/hideWorkingFiles.css
@@ -0,0 +1,7 @@
+#working-set-header{
+    display: none !important;
+}
+
+#open-files-container{
+    display: none !important;
+}
diff --git a/styles/main.css b/styles/main.css
@@ -139,6 +139,11 @@
     border-bottom: 15px solid lightgray;
 }
 
+.documents-toolbar_modal .modal-body{
+    max-height: 900px;
+    min-height: 440px;
+}
+
 .documents-toolbar_modal .rule-set{
     width: 200px;
     height: 350px;
@@ -176,16 +181,40 @@
 
 .documents-toolbar_modal .rule-options{
     display: inline-block;
-    width: 350px;
+    width: 345px;
     height: 350px;
     vertical-align: top;
     padding: 2px 5px;
+    overflow: hidden;
 }
 
 .documents-toolbar_modal .rule-options ._row{
     margin-bottom: 5px;
 }
 
+.documents-toolbar_modal .options-pages{
+    margin-bottom: 4px;
+    margin-top: -4px;
+}
+
+.documents-toolbar_modal .options-page{
+    display: inline-block;
+    margin: 2px 5px;
+    cursor: pointer;
+    background: white;
+    transition: 0.25s all;
+    padding: 2px 4px;
+}
+
+.documents-toolbar_modal .options-page:hover{
+    box-shadow: 0 -4px 0px rgb(255, 100, 255) inset;
+}
+
+.documents-toolbar_modal .options-page.selected{
+    background: rgb(0, 184, 255);
+    color: black;
+}
+
 .colorpicker{
     width: 30px;
     height: 30px;

diff --git a/templates/modal.html b/templates/modal.html
@@ -3,41 +3,57 @@
         <h1 class="dialog-title">Documents toolbar settings</h1>
     </div>
     <div class="modal-body">
-        <div class="rule-set" data-bind="foreach: rules">
-            <div class="dt-rule" data-bind="click: $parent.onSelectRule, css:{selected: $data === $parent.selectedRule()}">
-                <div class="dt-rule_background" data-bind="style:{background: background}"></div>
-                <div class="dt-rule_foreground" data-bind="style:{background: color}"></div>
-                <div class="dt-rule_name" data-bind="text: $parent.getCaption($data)"></div>
-            </div>
+        <div class="options-pages">
+            <span class="options-page" data-page="GENERAL" data-bind="css: {selected: isCurrentPageSelected($data, $element)}, click: setPage">General</span>
+            <span class="options-page" data-page="RULES" data-bind="css: {selected: isCurrentPageSelected($data, $element)}, click: setPage">Rules</span>
         </div>
-        <div class="rule-options" data-bind="with: selectedRule">
-            <div class="_row">
-                <span>Apply to</span>
-                <input data-bind="value: name"/>
-                <div class="muted">You can apply rules to set of files. Example: *.css</div>
+        <div data-page="GENERAL" data-bind="visible: isCurrentPageSelected($data, $element), with: generalOptions">
+            <div>
+                <input type="checkbox" data-bind="checked: showWorkingFiles" />
+                <span>Show Working Files panel</span>
+            </div>
+            <div>
+                <input type="checkbox" data-bind="checked: showIcons" />
+                <span>Show Icons</span>
             </div>
-            <div class="_row">
-                <input type="checkbox" data-bind="checked: forThisProjectOnly"/>
-                <span>Use this rule only for specific project</span>
-                <div data-bind="visible: project() !== null">
-                    <span>Project</span>
-                    <input data-bind="value: project" />
+        </div>
+        <div data-page="RULES" data-bind="visible: isCurrentPageSelected($data, $element)">
+            <div class="rule-set" data-bind="foreach: rules">
+                <div class="dt-rule" data-bind="click: $parent.onSelectRule, css:{selected: $data === $parent.selectedRule()}">
+                    <div class="dt-rule_background" data-bind="style:{background: background}"></div>
+                    <div class="dt-rule_foreground" data-bind="style:{background: color}"></div>
+                    <div class="dt-rule_name" data-bind="text: $parent.getCaption($data)"></div>
                 </div>
             </div>
-            <div class="_row">
-                <span>Background:</span>
-                <div class="colorpicker" data-bind="colorpicker: background"></div>
-                <span>Color:</span>
-                <div class="colorpicker" data-bind="colorpicker: color"></div>
+            <div class="rule-options" data-bind="with: selectedRule">
+                <div class="_row">
+                    <span>Apply to</span>
+                    <input data-bind="value: name"/>
+                    <div class="muted">You can apply rules to set of files. Example: *.css</div>
+                </div>
+                <div class="_row">
+                    <input type="checkbox" data-bind="checked: forThisProjectOnly"/>
+                    <span>Use this rule only for specific project</span>
+                    <div data-bind="visible: project() !== null">
+                        <span>Project</span>
+                        <input data-bind="value: project" />
+                    </div>
+                </div>
+                <div class="_row">
+                    <span>Background:</span>
+                    <div class="colorpicker" data-bind="colorpicker: background"></div>
+                    <span>Color:</span>
+                    <div class="colorpicker" data-bind="colorpicker: color"></div>
+                </div>
+                <div class="_row tab-preview" data-bind="style:{color: color, background: background}">
+                    <p>Preview</p>
+                </div>
             </div>
-            <div class="_row tab-preview" data-bind="style:{color: color, background: background}">
-                <p>Preview</p>
+            <div class="buttons-set">
+                <button class="btn" data-bind="click: addNewRule">Add rule</button>
+                <button class="btn" data-bind="click: removeRule, enable: selectedRule">Remove</button>
             </div>
         </div>
-        <div class="buttons-set">
-            <button class="btn" data-bind="click: addNewRule">Add rule</button>
-            <button class="btn" data-bind="click: removeRule, enable: selectedRule">Remove</button>
-        </div>
     </div>
     <div class="modal-footer">
         <button class="dialog-button btn primary" data-bind="click: onClose">Close</button>

diff --git a/viewmodels/documents.js b/viewmodels/documents.js
@@ -24,6 +24,9 @@ define(function(require, exports, module){
         this.changed = ko.observableArray([]);
 
         this.iconsEnabled = ko.observable(prefs.get('icons'));
+        prefs.notifier('icons', function(value){
+            self.iconsEnabled(value);
+        });
 
         this.onDocumentClick = function(model, event){
             DocumentManager.getDocumentForPath(model._path)

diff --git a/viewmodels/generalOptions.js b/viewmodels/generalOptions.js
@@ -0,0 +1,31 @@
+define(function(require, exports, module){
+    var ko = require('../vendor/knockout'),
+        prefs = require('../services/preferences'),
+        ExtensionUtils = brackets.getModule('utils/ExtensionUtils');
+
+    function showWorkingFiles(value){
+        if (value){
+            $('link[href*="/styles/hideWorkingFiles.css"]').remove();
+        } else {
+            ExtensionUtils.loadStyleSheet(module, '../styles/hideWorkingFiles.css');
+        }
+    }
+
+    function GeneralOptions(){
+        this.showWorkingFiles = ko.observable();
+        this.showWorkingFiles.subscribe(function(value){
+            showWorkingFiles(value);
+            prefs.set('workingFiles', value);
+        });
+
+        this.showIcons = ko.observable();
+        this.showIcons.subscribe(function(value){
+            prefs.set('icons', value);
+        });
+
+        this.showWorkingFiles(prefs.get('workingFiles'));
+        this.showIcons(prefs.get('icons'));
+    }
+
+    module.exports = GeneralOptions;
+});
diff --git a/viewmodels/options.js b/viewmodels/options.js
@@ -7,14 +7,15 @@ define(function(require, exports, module){
         defaultBackground = '#333333',
         defaultColor = '#FFFFFF',
         storage = require('../services/storage'),
-        storageRulesKey = 'rules';
+        storageRulesKey = 'rules',
+        GeneralOptions = require('./generalOptions');
 
     function Rule(data){
         data = data || {};
 
         this.name = ko.observable(data.name || 'Change name');
 
-        this.project = ko.observable(data.project || null)
+        this.project = ko.observable(data.project || null);
 
         this.forThisProjectOnly = ko.observable(data.forThisProjectOnly || false);
         this.forThisProjectOnly.subscribe(_.bind(function(value){
@@ -32,9 +33,21 @@ define(function(require, exports, module){
     function OptionsViewModel(){
         var self = this;
 
+        this.generalOptions = new GeneralOptions();
+
         this.rules = ko.observableArray([]);
         this.selectedRule = ko.observable(null);
 
+        this.selectedRule.subscribe(function(value){
+            if (value === null){
+                return;
+            }
+
+            self.currentPage('RULES');
+        });
+
+        this.currentPage = ko.observable('GENERAL');
+
         _.each(storage.getKey(storageRulesKey) || {}, function(rule){
             self.rules.push(new Rule(rule));
         });
@@ -76,6 +89,26 @@ define(function(require, exports, module){
             this.selectedRule(rule);
             return rule;
         }
+
+        this.setPage = function(model, event){
+            var page = $(event.target).attr('data-page');
+
+            if (!page){
+                throw new Error('Page cannot be empty');
+            }
+
+            this.currentPage(page.toUpperCase());
+        }
+
+        this.isCurrentPageSelected = function(model, element){
+            var page = $(element).attr('data-page');
+
+            if (!page){
+                throw new Error('Page cannot be empty');
+            }
+
+            return this.currentPage() === page;
+        }
     }
 
     OptionsViewModel.prototype.addNewRule = function(){