add modify task setting link

app/scripts/controllers/task-detail.js

@@ -70,6 +70,15 @@
             }
         };
 
+        $scope.loadTaskOption = function (task) {
+            $scope.loadPromise = aria2RpcService.getOption({
+                params: [task.gid],
+                callback: function (result) {
+                    $scope.options = result;
+                }
+            });
+        };
+
         $scope.changeFileListDisplayOrder = function (type, autoSetReverse) {
             var oldType = utils.parseOrderType(ariaNgSettingService.getFileListDisplayOrder());
             var newType = utils.parseOrderType(type);

app/styles/aria-ng.css

@@ -3,6 +3,7 @@
  * https://github.com/mayswind/AriaNg
  */
 
+/* basic */
 body {
     -ms-user-select: none;
     -webkit-user-select: none;
@@ -10,6 +11,120 @@ body {
     user-select: none;
 }
 
+td {
+    vertical-align: middle !important;
+}
+
+.main-header .navbar .navbar-searchbar {
+    padding-top: 8px;
+    padding-right: 20px;
+    float: right;
+}
+
+.content-wrapper > .content-body {
+    overflow-y: scroll;
+}
+
+.default-cursor {
+    cursor: default !important;
+}
+
+.pointer-cursor {
+    cursor: pointer !important;
+}
+
+@media (max-width: 767px) {
+    .navbar-nav .open .dropdown-menu {
+        position: absolute;
+        background-color: #fff;
+    }
+}
+
+/* toolbar */
+.toolbar {
+    cursor: pointer;
+}
+
+.toolbar:active {
+    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+    -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+}
+
+/* dropdown-submenu */
+.dropdown-menu small {
+    color: #999;
+}
+
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -6px;
+    margin-left: -1px;
+    -webkit-border-radius: 0 6px 6px 6px;
+    -moz-border-radius: 0 6px 6px;
+    border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu > a:after {
+    display: block;
+    content: " ";
+    float: right;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #ccc;
+    margin-top: 5px;
+    margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+    border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+    float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: #c4d2db;
+    min-height: 28px;
+}
+
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
+    background-color: #d4dfe7;
+}
+
+@media (max-width: 767px) {
+    ::-webkit-scrollbar {
+        width: 6px;
+    }
+}
+
 /* skin-aria-ng */
 .skin-aria-ng {
     overflow-y: hidden;
@@ -70,12 +185,6 @@ body {
     color: #0080ff;
 }
 
-.skin-aria-ng .main-header .navbar .navbar-searchbar {
-    padding-top: 8px;
-    padding-right: 20px;
-    float: right;
-}
-
 .skin-aria-ng .main-header .navbar .navbar-searchbar .form-control-icon {
     color: #999999;
 }
@@ -174,10 +283,6 @@ body {
     background-color: #fff;
 }
 
-.skin-aria-ng .content-wrapper > .content-body {
-    overflow-y: scroll;
-}
-
 @media screen and (max-width: 767px) {
     .skin-aria-ng .content-wrapper .content {
         margin-top: 5px;
@@ -229,6 +334,16 @@ body {
     border-bottom: 2px solid #208fe5;
 }
 
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim > a {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim.active {
+    margin-bottom: -1px;
+    border-bottom: inherit;
+}
+
 .skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a {
     color: #aaa;
     border: 0;
@@ -240,27 +355,6 @@ body {
     color: #208fe5;
 }
 
-
-/* override */
-td {
-    vertical-align: middle !important;
-}
-
-.default-cursor {
-    cursor: default !important;
-}
-
-.pointer-cursor {
-    cursor: pointer !important;
-}
-
-@media (max-width: 767px) {
-    .navbar-nav .open .dropdown-menu {
-        position: absolute;
-        background-color: #fff;
-    }
-}
-
 /* font-awesome extend */
 .fa-half {
     font-size: 0.5em;
@@ -292,97 +386,16 @@ td {
     bottom: 2px;
 }
 
-/* toolbar */
-.toolbar {
-    cursor: pointer;
-}
-
-.toolbar:active {
-    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-    -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-}
-
-/* dropdown-submenu */
-.dropdown-menu small {
-    color: #999;
-}
-
-.dropdown-submenu {
-    position: relative;
-}
-
-.dropdown-submenu > .dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px;
-    border-radius: 0 6px 6px 6px;
-}
-
-.dropdown-submenu:hover > .dropdown-menu {
-    display: block;
-}
-
-.dropdown-submenu > a:after {
-    display: block;
-    content: " ";
-    float: right;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 0 5px 5px;
-    border-left-color: #ccc;
-    margin-top: 5px;
-    margin-right: -10px;
-}
-
-.dropdown-submenu:hover > a:after {
-    border-left-color: #fff;
-}
-
-.dropdown-submenu.pull-left {
-    float: none;
-}
-
-.dropdown-submenu.pull-left > .dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
-}
-
-/* scrollbar */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: #c4d2db;
-    min-height: 28px;
-}
-
-::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
-    background-color: #d4dfe7;
-}
-
-@media (max-width: 767px) {
-    ::-webkit-scrollbar {
-        width: 6px;
-    }
-}
-
 /* task-table */
 .task-table {
     margin-left: 15px;
     margin-right: 15px;
 }
 
+.skin-aria-ng .task-table {
+    background-color: #fff;
+}
+
 .task-table .task-table-title {
     font-size: 12px;
     padding-top: 4px;
@@ -404,11 +417,11 @@ td {
     border-top: 0;
 }
 
-.task-table > .task-table-body > div.row:nth-of-type(odd) {
+.skin-aria-ng .task-table > .task-table-body > div.row:nth-of-type(odd) {
     background-color: #f9f9f9;
 }
 
-.task-table > .task-table-body > div.row:hover {
+.skin-aria-ng .task-table > .task-table-body > div.row:hover {
     background-color: #f5f5f5;
 }
 
@@ -478,6 +491,10 @@ td {
     margin-right: 15px;
 }
 
+.skin-aria-ng .settings-table {
+    background-color: #fff;
+}
+
 .settings-table > div.row {
     padding-top: 8px;
     padding-bottom: 8px;
@@ -488,11 +505,11 @@ td {
     border-top: 0;
 }
 
-.settings-table > div.row:nth-of-type(odd) {
+.skin-aria-ng .settings-table > div.row:nth-of-type(odd) {
     background-color: #f9f9f9;
 }
 
-.settings-table > div.row:hover {
+.skin-aria-ng .settings-table > div.row:hover {
     background-color: #f5f5f5;
 }
 

app/views/task-detail.html

@@ -13,6 +13,11 @@
             <li ng-class="{'active': context.currentTab == 'btpeers'}" ng-if="task.status == 'active' && task.bittorrent">
                 <a class="pointer-cursor" ng-click="context.currentTab = 'btpeers'" translate>Peers</a>
             </li>
+            <li ng-class="{'active': context.currentTab == 'settings'}" class="slim">
+                <a class="pointer-cursor" ng-click="context.currentTab = 'settings';loadTaskOption(task);">
+                    <i class="fa fa-gear"></i>
+                </a>
+            </li>
         </ul>
 
         <div class="tab-content no-padding">
@@ -202,6 +207,11 @@
                     </div>
                 </div>
             </div>
+            <div class="tab-pane" ng-class="{'active': context.currentTab == 'settings'}">
+                <div class="settings-table settings-table-firstrow-noborder">
+
+                </div>
+            </div>
         </div>
     </div><!-- /.nav-tabs-custom -->
 </section>