From f3899e93a0bc24499b3c02f46dff59a50463aa61 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 26 Mar 2017 13:25:04 +0800
Subject: [PATCH] modify user interface of rpc setting page

---
 src/langs/zh_CN.txt                    |  5 +---
 src/scripts/config/defaultLanguage.js  |  5 +---
 src/styles/controls/settings-table.css | 18 ++++++++++++++
 src/views/settings-ariang.html         | 34 ++++++++------------------
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/langs/zh_CN.txt b/src/langs/zh_CN.txt
index 596e7b5..b4b3b3f 100644
--- a/src/langs/zh_CN.txt
+++ b/src/langs/zh_CN.txt
@@ -127,14 +127,11 @@ Example: ${downspeed:noprefix:nosuffix:scale\=1}=示例: ${downspeed:noprefix:no
 Page Title Refresh Interval=页面标题刷新间隔
 Enable Browser Notification=启用浏览器通知
 Aria2 RPC Alias=Aria2 RPC 别名
-Aria2 RPC Host=Aria2 RPC 主机
-Aria2 RPC Port=Aria2 RPC 端口
-Aria2 RPC Interface=Aria2 RPC 接口
+Aria2 RPC Address=Aria2 RPC 地址
 Aria2 RPC Protocol=Aria2 RPC 协议
 Aria2 RPC Http Request Method=Aria2 RPC Http 请求方法
 POST method only supports aria2 v1.15.2 and above.=POST 方法仅支持 aria2 v1.15.2 及以上.
 Aria2 RPC Secret Token=Aria2 RPC 密钥
-Aria2 RPC Address=Aria2 RPC 地址
 Set Default=设为默认
 Delete RPC Setting=删除 RPC 设置
 Add New RPC Setting=添加新 RPC 配置
diff --git a/src/scripts/config/defaultLanguage.js b/src/scripts/config/defaultLanguage.js
index f8d29ae..3b5e0d5 100644
--- a/src/scripts/config/defaultLanguage.js
+++ b/src/scripts/config/defaultLanguage.js
@@ -131,14 +131,11 @@
             'Page Title Refresh Interval': 'Page Title Refresh Interval',
             'Enable Browser Notification': 'Enable Browser Notification',
             'Aria2 RPC Alias': 'Aria2 RPC Alias',
-            'Aria2 RPC Host': 'Aria2 RPC Host',
-            'Aria2 RPC Port': 'Aria2 RPC Port',
-            'Aria2 RPC Interface': 'Aria2 RPC Interface',
+            'Aria2 RPC Address': 'Aria2 RPC Address',
             'Aria2 RPC Protocol': 'Aria2 RPC Protocol',
             'Aria2 RPC Http Request Method': 'Aria2 RPC Http Request Method',
             'POST method only supports aria2 v1.15.2 and above.': 'POST method only supports aria2 v1.15.2 and above.',
             'Aria2 RPC Secret Token': 'Aria2 RPC Secret Token',
-            'Aria2 RPC Address': 'Aria2 RPC Address',
             'Set Default': 'Set Default',
             'Delete RPC Setting': 'Delete RPC Setting',
             'Add New RPC Setting': 'Add New RPC Setting',
diff --git a/src/styles/controls/settings-table.css b/src/styles/controls/settings-table.css
index 923d3d0..d46af4e 100644
--- a/src/styles/controls/settings-table.css
+++ b/src/styles/controls/settings-table.css
@@ -68,6 +68,24 @@
     z-index: inherit;
 }
 
+.settings-table .setting-value .input-group .form-control-rpcport {
+    min-width: 70px;
+}
+
+.settings-table .setting-value .input-group .form-control-rpcinterface {
+    min-width: 100px;
+}
+
+@media (max-width: 991px) {
+    .settings-table .setting-value .input-group .form-control-rpcport {
+        min-width: 60px;
+    }
+
+    .settings-table .setting-value .input-group .form-control-rpcinterface {
+        min-width: 60px;
+    }
+}
+
 .settings-table .tip {
     font-size: 12px;
     padding: 4px 8px 4px 8px;
diff --git a/src/views/settings-ariang.html b/src/views/settings-ariang.html
index acd0a59..23a82fe 100644
--- a/src/views/settings-ariang.html
+++ b/src/views/settings-ariang.html
@@ -6,7 +6,7 @@
             </li>
             <li class="nav-tab-title-rpcname" ng-repeat="setting in context.rpcSettings" ng-class="{'active': isCurrentRpcTab($index)}">
                 <a class="pointer-cursor" ng-click="changeRpcTab($index)">
-                    <span class="nav-tab-rpcname" ng-bind="'RPC' + (setting.rpcAlias || setting.rpcHost ? '(' + (setting.rpcAlias ? setting.rpcAlias : setting.rpcHost + ':' + setting.rpcPort) + ')' : '')" title="{{(setting.rpcAlias ? setting.rpcAlias : setting.rpcHost + ':' + setting.rpcPort)}}">RPC</span>
+                    <span class="nav-tab-rpcname" ng-bind="'RPC' + (setting.rpcAlias || setting.rpcHost ? ' (' + (setting.rpcAlias ? setting.rpcAlias : setting.rpcHost + ':' + setting.rpcPort) + ')' : '')" title="{{(setting.rpcAlias ? setting.rpcAlias : setting.rpcHost + ':' + setting.rpcPort)}}">RPC</span>
                 </a>
                 <a class="pointer-cursor nav-tab-close" ng-if="!setting.isDefault" title="{{'Delete RPC Setting' | translate}}">
                     <i class="fa fa-times" ng-click="removeRpcSetting(setting)"></i>
@@ -134,38 +134,24 @@
                     </div>
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
-                            <span translate>Aria2 RPC Host</span>
+                            <span translate>Aria2 RPC Address</span>
                             <span class="asterisk">*</span>
                         </div>
                         <div class="setting-value col-sm-8">
                             <div class="input-group input-group-multiple">
                                 <span class="input-group-addon" ng-bind="setting.protocol + '://'"></span>
                                 <input class="form-control" type="text" ng-model="setting.rpcHost" ng-change="updateRpcSetting(setting, 'rpcHost')"/>
-                                <span class="input-group-addon" style="border-left: 0">:</span>
-                                <span class="input-group-addon" ng-bind="setting.rpcPort" style="border-left: 0"></span>
-                                <span class="input-group-addon" style="border-left: 0">/</span>
-                                <span class="input-group-addon" ng-if="setting.rpcInterface" ng-bind="setting.rpcInterface"></span>
+                                <span class="input-group-addon">:</span>
+                                <div class="input-grougp-addon-container">
+                                    <input class="form-control form-control-rpcport" type="text" ng-model="setting.rpcPort" ng-change="updateRpcSetting(setting, 'rpcPort')"/>
+                                </div>
+                                <span class="input-group-addon">/</span>
+                                <div class="input-grougp-addon-container">
+                                    <input class="form-control form-control-rpcinterface" type="text" ng-model="setting.rpcInterface" ng-change="updateRpcSetting(setting, 'rpcInterface')"/>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="setting-key setting-key-without-desc col-sm-4">
-                            <span translate>Aria2 RPC Port</span>
-                            <span class="asterisk">*</span>
-                        </div>
-                        <div class="setting-value col-sm-8">
-                            <input class="form-control" type="text" ng-model="setting.rpcPort" ng-change="updateRpcSetting(setting, 'rpcPort')"/>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="setting-key setting-key-without-desc col-sm-4">
-                            <span translate>Aria2 RPC Interface</span>
-                            <span class="asterisk">*</span>
-                        </div>
-                        <div class="setting-value col-sm-8">
-                            <input class="form-control" type="text" ng-model="setting.rpcInterface" ng-change="updateRpcSetting(setting, 'rpcInterface')"/>
-                        </div>
-                    </div>
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
                             <span translate>Aria2 RPC Protocol</span>