select control support displaying default value in setting page

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;
+                });
             }
         };
     }]);

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;

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>

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>

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>

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>