support swipe tab pages in task detail page

2016-05-25 01:30:02 +08:00 · 2016-05-25 01:30:02 +08:00 · 1b66822f44
parent 2e44b47d31
commit 1b66822f44
7 changed files with 84 additions and 32 deletions
--- a/app/index.html
+++ b/app/index.html
@ -26,7 +26,7 @@
    <!-- endbuild -->
 </head>
 <body class="hold-transition skin-aria-ng sidebar-mini fixed">
-<div class="wrapper" ng-controller="MainController" ng-swipe-left="hideSidebar()" ng-swipe-right="showSidebar()" ng-swipe-disable-mouse>
+<div class="wrapper" ng-controller="MainController" ng-swipe-left="swipeActions.leftSwipe()" ng-swipe-right="swipeActions.rightSwipe()" ng-swipe-disable-mouse>
    <header class="main-header">
        <a class="logo" href="#">
            <span class="logo-mini">Aria</span>
--- a/app/scripts/controllers/main.js
+++ b/app/scripts/controllers/main.js
@ -47,14 +47,6 @@
            }
        };

-        $scope.showSidebar = function () {
-            angular.element('body').removeClass('sidebar-collapse').addClass('sidebar-open');
-        };
-
-        $scope.hideSidebar = function () {
-            angular.element('body').addClass('sidebar-collapse').removeClass('sidebar-open');
-        };
-
        if (ariaNgSettingService.getGlobalStatRefreshInterval() > 0) {
            globalStatRefreshPromise = $interval(function () {
                refreshGlobalStat();
--- a/app/scripts/controllers/task-detail.js
+++ b/app/scripts/controllers/task-detail.js
@ -1,7 +1,8 @@
 (function () {
    'use strict';

-    angular.module('ariaNg').controller('TaskDetailController', ['$scope', '$routeParams', '$interval', 'aria2RpcService', 'ariaNgSettingService', 'utils', function ($scope, $routeParams, $interval, aria2RpcService, ariaNgSettingService, utils) {
+    angular.module('ariaNg').controller('TaskDetailController', ['$rootScope', '$scope', '$routeParams', '$interval', 'aria2RpcService', 'ariaNgSettingService', 'utils', function ($rootScope, $scope, $routeParams, $interval, aria2RpcService, ariaNgSettingService, utils) {
+        var tabOrders = ['overview', 'blocks', 'filelist', 'btpeers'];
        var downloadTaskRefreshPromise = null;

        var refreshPeers = function (task) {
@ -30,6 +31,10 @@

                    if (task.status == 'active' && task.bittorrent) {
                        refreshPeers(task);
+                    } else {
+                        if (tabOrders.indexOf('btpeers') >= 0) {
+                            tabOrders.splice(tabOrders.indexOf('btpeers'), 1);
+                        }
                    }

                    $scope.task = utils.copyObjectTo(task, $scope.task);
@ -44,6 +49,28 @@
        $scope.healthPercent = 0;
        $scope.loadPromise = refreshDownloadTask();

+        $rootScope.swipeActions.extentLeftSwipe = function () {
+            var tabIndex = tabOrders.indexOf($scope.context.currentTab);
+
+            if (tabIndex < tabOrders.length - 1) {
+                $scope.context.currentTab = tabOrders[tabIndex + 1];
+                return true;
+            } else {
+                return false;
+            }
+        };
+
+        $rootScope.swipeActions.extentRightSwipe = function () {
+            var tabIndex = tabOrders.indexOf($scope.context.currentTab);
+
+            if (tabIndex > 0) {
+                $scope.context.currentTab = tabOrders[tabIndex - 1];
+                return true;
+            } else {
+                return false;
+            }
+        };
+
        if (ariaNgSettingService.getDownloadTaskRefreshInterval() > 0) {
            downloadTaskRefreshPromise = $interval(function () {
                refreshDownloadTask();
--- a/app/scripts/core/config.js
+++ b/app/scripts/core/config.js
@ -37,7 +37,42 @@
            });
        };

+        var showSidebar = function () {
+            angular.element('body').removeClass('sidebar-collapse').addClass('sidebar-open');
+        };
+
+        var hideSidebar = function () {
+            angular.element('body').addClass('sidebar-collapse').removeClass('sidebar-open');
+        };
+
+        var isSidebarShowInSmallScreen = function () {
+            return angular.element('body').hasClass('sidebar-open');
+        };
+
+        $rootScope.swipeActions = {
+            leftSwipe: function () {
+                if (isSidebarShowInSmallScreen()) {
+                    hideSidebar();
+                    return;
+                }
+
+                if (!this.extentLeftSwipe ||
+                    (angular.isFunction(this.extentLeftSwipe) && !this.extentLeftSwipe())) {
+                    hideSidebar();
+                }
+            },
+            rightSwipe: function () {
+                if (!this.extentRightSwipe ||
+                    (angular.isFunction(this.extentRightSwipe) && !this.extentRightSwipe())) {
+                    showSidebar();
+                }
+            }
+        };
+
        $rootScope.$on('$locationChangeStart', function (event) {
+            delete $rootScope.swipeActions.extentLeftSwipe;
+            delete $rootScope.swipeActions.extentRightSwipe;
+
            SweetAlert.close();
        });

--- a/app/scripts/langs/en-US.js
+++ b/app/scripts/langs/en-US.js
@ -65,6 +65,8 @@
            'Address': 'Address',
            'Status': 'Status',
            'Percent': 'Percent',
+            'Download / Upload Speed': 'Download / Upload Speed',
+            'No connected peers': 'No connected peers',
            'Language': 'Language',
            'Aria2 RPC Host': 'Aria2 RPC Host',
            'Aria2 RPC Port': 'Aria2 RPC Port',
--- a/app/scripts/langs/zh-CN.js
+++ b/app/scripts/langs/zh-CN.js
@ -65,6 +65,8 @@
            'Address': '地址',
            'Status': '状态',
            'Percent': '完成度',
+            'Download / Upload Speed': '下载 / 上传速度',
+            'No connected peers': '没有连接到其他节点',
            'Language': '语言',
            'Aria2 RPC Host': 'Aria2 RPC 主机',
            'Aria2 RPC Port': 'Aria2 RPC 端口',
--- a/app/views/task-detail.html
+++ b/app/views/task-detail.html
@ -45,18 +45,10 @@
                    </div>
                    <div class="row">
                        <div class="setting-key col-sm-4">
-                            <span translate>Completed Percent</span>
+                            <span ng-bind="('Completed Percent' | translate) + (task.status == 'active' && task.bittorrent ? ' (' + ('Health Percent' | translate) + ')' : '')"></span>
                        </div>
                        <div class="setting-value col-sm-8">
-                            <span ng-bind="(task.completePercent | percent: 2) + '%'"></span>
-                        </div>
-                    </div>
-                    <div class="row" ng-if="task.bittorrent">
-                        <div class="setting-key col-sm-4">
-                            <span translate>Health Percent</span>
-                        </div>
-                        <div class="setting-value col-sm-8">
-                            <span ng-bind="(healthPercent | percent: 2) + '%'"></span>
+                            <span ng-bind="(task.completePercent | percent: 2) + '%' + (task.status == 'active' && task.bittorrent ? ' (' + (healthPercent | percent: 2) + '%' + ')' : '')"></span>
                        </div>
                    </div>
                    <div class="row">
@ -163,11 +155,8 @@
                            <div class="col-sm-2 col-xs-4">
                                <span translate>Percent</span>
                            </div>
-                            <div class="col-sm-2 col-xs-4">
-                                <span translate>Download Speed</span>
-                            </div>
-                            <div class="col-sm-2 col-xs-4">
-                                <span translate>Upload Speed</span>
+                            <div class="col-sm-4 col-xs-4">
+                                <span translate>Download / Upload Speed</span>
                            </div>
                        </div>
                    </div>
@ -182,13 +171,18 @@
                            <div class="col-sm-2 col-xs-4">
                                <span ng-bind="(peer.completePercent | percent: 2) + '%'"></span>
                            </div>
-                            <div class="col-sm-2 col-xs-4">
-                                <i class="fa fa-arrow-down visible-xs-inline-block"></i>
-                                <span class="task-download-speed" ng-bind="(peer.downloadSpeed | readableVolumn) + '/s'"></span>
+                            <div class="col-sm-4 col-xs-8">
+                                <div class="task-download-speed">
+                                    <i class="fa fa-arrow-down"></i>
+                                    <span ng-bind="(peer.downloadSpeed | readableVolumn) + '/s'"></span>&nbsp;
+                                    <i class="fa fa-arrow-up"></i>
+                                    <span ng-bind="(peer.uploadSpeed | readableVolumn) + '/s'"></span>
                                </div>
-                            <div class="col-sm-2 col-xs-4">
-                                <i class="fa fa-arrow-up visible-xs-inline-block"></i>
-                                <span class="task-download-speed" ng-bind="(peer.uploadSpeed | readableVolumn) + '/s'"></span>
+                            </div>
+                        </div>
+                        <div class="row" ng-if="!peers || peers.length < 1">
+                            <div class="col-sm-12 text-center">
+                                <span translate>No connected peers</span>
                            </div>
                        </div>
                    </div>