Improving UI for syncronization.

- Toggling synchronization controls - Support dark theme for StatusBar messages issue #65
albertinad · Jun 13, 2015 · 4ec222c · 4ec222c
1 parent bd0cc93
commit 4ec222c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/assets/styles.css b/assets/styles.css
@@ -101,6 +101,10 @@
     color: #1b5d1b;
 }
 
+.dark #status-bower .status-information {
+    color: #3b9b3b;
+}
+
 #status-bower .status-progress .info {
     display: inline-block;
     padding-right: 5px;

diff --git a/src/panel/controllers/PanelController.js b/src/panel/controllers/PanelController.js
@@ -233,7 +233,8 @@ define(function (require, exports, module) {
      * @param {string} option
      */
     PanelController.prototype.syncProject = function (option) {
-        var syncOption;
+        var that = this,
+            syncOption;
 
         if (option === "file") {
             syncOption = ProjectManager.SyncOptions.MATCH_BOWER_JSON;
@@ -248,7 +249,11 @@ define(function (require, exports, module) {
             StatusBarController.update(statusId, "Successfuly synchronized", false);
         }).fail(function (error) {
 
-            NotificationDialog.showError(error.message);
+            that._view.syncFailed();
+
+            if (error) {
+                NotificationDialog.showError(error.message);
+            }
         }).always(function () {
 
             StatusBarController.remove(statusId);

diff --git a/src/panel/views/DependenciesView.js b/src/panel/views/DependenciesView.js
@@ -59,7 +59,6 @@ define(function (require, exports, module) {
         this._$panel = $container;
 
         this._$panel.on("click", "[data-bower-installed-action]", function () {
-            /*jshint validthis:true */
             var $selectedItem = $(this),
                 action = $selectedItem.data("bower-installed-action"),
                 actionFn = that._actions[action];

diff --git a/src/panel/views/PanelView.js b/src/panel/views/PanelView.js
@@ -94,17 +94,13 @@ define(function (require, exports, module) {
             .on("click", ".close", this._onClose.bind(this))
             .on("click", "[data-bower-btn-id='settings']", this._onSettingsSelected.bind(this))
             .on("click", "[data-bower-panel-key]", function () {
-                /*jshint validthis:true */
                 that._onPanelSelected($(this).data("bower-panel-key"));
             })
             .on("click", "[data-bower-sync]", function () {
-                var option = $(this).data("bower-sync");
-
-                that._controller.syncProject(option);
+                that._onSyncOptionSelected($(this).data("bower-sync"));
             });
 
         this._$commands.on("click", "[data-bower-cmd-key]", function () {
-            /*jshint validthis:true */
             that._onCommandSelected($(this).data("bower-cmd-key"));
         });
 
@@ -258,6 +254,16 @@ define(function (require, exports, module) {
         this._enableButton(this._$commands.find(".bower-btn"));
     };
 
+    /**
+     * Callback for when the synchronization fails. Enable the synchronization
+     * options buttons.
+     */
+    PanelView.prototype.syncFailed = function () {
+        var $btns = this._$statusSection.find("[data-bower-sync]");
+
+        this._enableButton($btns);
+    };
+
     /**
      * Callback for when a command is selected, notify the controller to
      * start the command execution.
@@ -294,6 +300,18 @@ define(function (require, exports, module) {
         this._controller.toggle();
     };
 
+    /**
+     * @param {string} option
+     * @private
+     */
+    PanelView.prototype._onSyncOptionSelected = function (option) {
+        var $btns = this._$statusSection.find("[data-bower-sync]");
+
+        this._disableButton($btns);
+
+        this._controller.syncProject(option);
+    };
+
     /**
      * Helper function to enable a given jQuery button object.
      * @private