From 521450436969717a2dd997ae613f526bb0dbac6c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 3 Jul 2016 17:08:06 +0800
Subject: [PATCH] select control support displaying default value in setting
 page

---
 src/scripts/directives/setting.js | 19 ++++++++++++++++++-
 src/styles/aria-ng.css            | 11 +++++++++++
 src/views/new.html                |  2 +-
 src/views/setting.html            |  3 ++-
 src/views/settings-aria2.html     |  4 ++--
 src/views/task-detail.html        |  3 ++-
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/scripts/directives/setting.js b/src/scripts/directives/setting.js
index 9ba2d66..b5c85d6 100644
--- a/src/scripts/directives/setting.js
+++ b/src/scripts/directives/setting.js
@@ -10,7 +10,7 @@
             scope: {
                 option: '=',
                 ngModel: '=',
-                placeholder: '=?',
+                defaultValue: '=?',
                 onChangeValue: '&'
             },
             link: function (scope, element, attrs, ngModel) {
@@ -206,6 +206,23 @@
                 scope.$watch('option', function () {
                     element.find('[data-toggle="popover"]').popover();
                 });
+
+                scope.$watch('defaultValue', function (value) {
+                    var displayValue = value;
+
+                    if (scope.option && scope.option.options) {
+                        for (var i = 0; i < scope.option.options.length; i++) {
+                            var optionItem = scope.option.options[i];
+
+                            if (optionItem.value === value) {
+                                displayValue = optionItem.name;
+                                break;
+                            }
+                        }
+                    }
+
+                    scope.placeholder = displayValue;
+                });
             }
         };
     }]);
diff --git a/src/styles/aria-ng.css b/src/styles/aria-ng.css
index df0ca6e..60ef3c6 100644
--- a/src/styles/aria-ng.css
+++ b/src/styles/aria-ng.css
@@ -510,6 +510,17 @@ td {
     color: #ffffff;
 }
 
+.skin-aria-ng input::-webkit-input-placeholder,
+.skin-aria-ng input:-moz-placeholder,
+.skin-aria-ng input::-moz-placeholder,
+.skin-aria-ng input:-ms-input-placeholder {
+    color: #999;
+}
+
+.skin-aria-ng select.placeholder {
+    color: #999;
+}
+
 /* font-awesome extend */
 .fa-half {
     font-size: 0.5em;
diff --git a/src/views/new.html b/src/views/new.html
index a4d569d..ca1a31c 100644
--- a/src/views/new.html
+++ b/src/views/new.html
@@ -53,7 +53,7 @@
             <div class="tab-pane" ng-class="{'active': context.currentTab == 'options'}">
                 <div class="settings-table striped hoverable">
                     <ng-setting ng-repeat="option in context.availableOptions" option="option" lazy-save-timeout="0"
-                                placeholder="context.globalOptions[option.key]"
+                                default-value="context.globalOptions[option.key]"
                                 on-change-value="setOption(key, value, optionStatus)"></ng-setting>
                 </div>
             </div>
diff --git a/src/views/setting.html b/src/views/setting.html
index 9b87c1d..b228152 100644
--- a/src/views/setting.html
+++ b/src/views/setting.html
@@ -16,10 +16,11 @@
                 <textarea class="form-control" rows="6" placeholder="{{::placeholder}}" ng-disabled="!!option.readonly"
                           ng-if="option.type == 'text'"
                           ng-model="optionValue" ng-change="changeValue(optionValue, true)"></textarea>
-                <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
+                <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly" ng-class="{'placeholder': !optionValue}"
                         ng-if="option.type == 'boolean' || option.type == 'option'"
                         ng-model="optionValue" ng-change="changeValue(optionValue, false)"
                         ng-options="item.value as (item.name | translate) for item in option.options">
+                    <option value="" disabled="disabled" ng-bind="(placeholder | translate)" style="display: none;"></option>
                 </select>
                 <div class="form-control-icon" ng-if="optionStatus.isShowStatusIcon()">
                     <i class="fa form-control-feedback" ng-class="[optionStatus.getStatusIcon()]"></i>
diff --git a/src/views/settings-aria2.html b/src/views/settings-aria2.html
index 3a7bba8..388f62d 100644
--- a/src/views/settings-aria2.html
+++ b/src/views/settings-aria2.html
@@ -1,7 +1,7 @@
 <section class="content no-padding">
     <div class="settings-table striped hoverable">
-        <ng-setting ng-repeat="option in context.availableOptions" option="option" placeholder="option.defaultValue"
-                    ng-model="context.globalOptions[option.key]"
+        <ng-setting ng-repeat="option in context.availableOptions" option="option"
+                    ng-model="context.globalOptions[option.key]" default-value="option.defaultValue"
                     on-change-value="setGlobalOption(key, value, optionStatus)"></ng-setting>
     </div>
 </section>
diff --git a/src/views/task-detail.html b/src/views/task-detail.html
index 061908e..b6b4153 100644
--- a/src/views/task-detail.html
+++ b/src/views/task-detail.html
@@ -289,7 +289,8 @@
             <div class="tab-pane" ng-class="{'active': context.currentTab == 'settings'}" ng-if="task && (task.status == 'active' || task.status == 'waiting' || task.status == 'paused')">
                 <div class="settings-table striped hoverable">
                     <ng-setting ng-repeat="option in context.availableOptions" option="option"
-                                ng-model="context.options[option.key]" on-change-value="setOption(key, value, optionStatus)"></ng-setting>
+                                ng-model="context.options[option.key]" default-value="option.defaultValue"
+                                on-change-value="setOption(key, value, optionStatus)"></ng-setting>
                 </div>
             </div>
         </div>