From b6839d0a345b14ad98f50f061c8d87f4c5264555 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 25 Jun 2016 21:48:06 +0800
Subject: [PATCH] support display error message when changing setting failed

---
 src/scripts/controllers/settings-aria2.js |  2 +-
 src/scripts/controllers/task-detail.js    |  2 +-
 src/scripts/directives/setting.js         | 33 +++++++++-
 src/styles/aria-ng.css                    | 77 +++++++++++++++++++++++
 4 files changed, 110 insertions(+), 4 deletions(-)

diff --git a/src/scripts/controllers/settings-aria2.js b/src/scripts/controllers/settings-aria2.js
index acc6dc6..a6f4a7a 100644
--- a/src/scripts/controllers/settings-aria2.js
+++ b/src/scripts/controllers/settings-aria2.js
@@ -23,7 +23,7 @@
                 if (response.success && response.data == 'OK') {
                     optionStatus.setSuccess();
                 } else {
-                    optionStatus.setFailed();
+                    optionStatus.setFailed(response.data.message);
                 }
             }, true);
         };
diff --git a/src/scripts/controllers/task-detail.js b/src/scripts/controllers/task-detail.js
index 6c5c3cb..f677fd5 100644
--- a/src/scripts/controllers/task-detail.js
+++ b/src/scripts/controllers/task-detail.js
@@ -197,7 +197,7 @@
                 if (response.success && response.data == 'OK') {
                     optionStatus.setSuccess();
                 } else {
-                    optionStatus.setFailed();
+                    optionStatus.setFailed(response.data.message);
                 }
             }, true);
         };
diff --git a/src/scripts/directives/setting.js b/src/scripts/directives/setting.js
index 1d12b18..44c7b7d 100644
--- a/src/scripts/directives/setting.js
+++ b/src/scripts/directives/setting.js
@@ -24,27 +24,56 @@
                 scope.optionStatus = (function () {
                     var value = 'ready';
 
+                    var destroyTooltip = function () {
+                        angular.element(element).tooltip('destroy');
+                    };
+
+                    var showTooltip = function (cause, type) {
+                        if (!cause) {
+                            return;
+                        }
+
+                        angular.element(element).tooltip({
+                            title: cause,
+                            trigger: 'focus',
+                            container: element,
+                            template:
+                            '<div class="tooltip' + (type ? ' tooltip-' + type : '') + '" role="tooltip">' +
+                                '<div class="tooltip-arrow"></div>' +
+                                '<div class="tooltip-inner"></div>' +
+                            '</div>'
+                        }).tooltip('show');
+                    };
+
                     return {
                         getValue: function () {
                             return value;
                         },
                         setReady: function () {
+                            destroyTooltip();
                             value = 'ready';
                         },
                         setPending: function () {
+                            destroyTooltip();
                             value = 'pending';
                         },
                         setSaving: function () {
+                            destroyTooltip();
                             value = 'pending';
                         },
                         setSuccess: function () {
+                            destroyTooltip();
                             value = 'success';
                         },
-                        setFailed: function () {
+                        setFailed: function (cause) {
+                            destroyTooltip();
                             value = 'failed';
+                            showTooltip(cause, 'warning');
                         },
-                        setError: function () {
+                        setError: function (cause) {
+                            destroyTooltip();
                             value = 'error';
+                            showTooltip(cause, 'error');
                         },
                         getStatusFeedbackStyle: function () {
                             if (value == 'success') {
diff --git a/src/styles/aria-ng.css b/src/styles/aria-ng.css
index 012a260..83db1f1 100644
--- a/src/styles/aria-ng.css
+++ b/src/styles/aria-ng.css
@@ -384,6 +384,83 @@ td {
     color: #208fe5;
 }
 
+.skin-aria-ng .tooltip.tooltip-success.in, .skin-aria-ng .tooltip.tooltip-warning.in, .skin-aria-ng .tooltip.tooltip-error.in {
+    filter: alpha(opacity=95);
+    opacity: 0.95
+}
+
+.skin-aria-ng .tooltip.tooltip-success.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.top-right .tooltip-arrow {
+    border-top-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.top-right .tooltip-arrow {
+    border-top-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.top-right .tooltip-arrow {
+    border-top-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.left .tooltip-arrow {
+    border-left-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.left .tooltip-arrow {
+    border-left-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.left .tooltip-arrow {
+    border-left-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.right .tooltip-arrow {
+    border-right-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.right .tooltip-arrow {
+    border-right-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.right .tooltip-arrow {
+    border-right-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.bottom-right .tooltip-arrow {
+    border-bottom-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.bottom-right .tooltip-arrow {
+    border-bottom-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.bottom-right .tooltip-arrow {
+    border-bottom-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success .tooltip-inner {
+    background-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning .tooltip-inner {
+    background-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error .tooltip-inner {
+    background-color: #dd4b39;
+}
+
 .skin-aria-ng .input-group .form-group.has-success + .input-group-addon {
     border-color: #00a65a;
     background-color: #00a65a;