add quick setting in footer toolbar

This commit is contained in:
MaysWind 2017-05-14 22:45:35 +08:00
parent c92873bf68
commit 68a598b19e
10 changed files with 140 additions and 4 deletions

View file

@ -244,7 +244,20 @@
<footer class="main-footer">
<a class="sidebar-toggle" data-toggle="offcanvas" role="button" title="{{'Toggle Navigation' | translate}}"></a>
<span>&nbsp;</span>
<div class="toolbar dropup">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" title="{{'Quick Setting' | translate}}">
<i class="fa fa-wrench"></i>
<span translate>Quick Setting</span>
<i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a class="pointer-cursor" ng-click="showQuickSettingDialog('globalSpeedLimit', 'Global Speed Limit')">
<span translate>Global Speed Limit</span>
</a>
</li>
</ul>
</div>
<div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
<a class="global-status" title="{{('Click to pin' | translate)}}" ng-pop-chart ng-data="globalStatusContext.data"
@ -260,6 +273,8 @@
</a>
</div>
</footer>
<ng-setting-dialog setting="quickSettingContext"></ng-setting-dialog>
</div>
<!-- build:js js/jquery-2.2.4.min.js -->
@ -333,6 +348,7 @@
<script src="scripts/directives/chart.js"></script>
<script src="scripts/directives/placeholder.js"></script>
<script src="scripts/directives/setting.js"></script>
<script src="scripts/directives/settingDialog.js"></script>
<script src="scripts/directives/tooltip.js"></script>
<script src="scripts/filters/dateDuration.js"></script>
<script src="scripts/filters/fileOrderBy.js"></script>

View file

@ -164,6 +164,8 @@ Are you sure you want to shutdown aria2?=您是否要关闭 aria2?
Session has been saved successfully.=会话已经成功保存.
Aria2 has been shutdown successfully.=Aria2 已经成功关闭.
Toggle Navigation=切换导航
Quick Setting=快捷设置
Global Speed Limit=全局速度限制
Loading=正在加载...
More Than One Day=超过1天
Unknown=未知

View file

@ -861,6 +861,10 @@
'no-file-allocation-limit', 'parameterized-uri', 'quiet', 'realtime-chunk-checksum', 'remove-control-file',
'save-session', 'save-session-interval', 'socket-recv-buffer-size', 'stop', 'truncate-console-readout'
]
}).constant('aria2QuickSettingsAvailableOptions', {
globalSpeedLimitOptions: [
'max-download-limit', 'max-upload-limit'
]
}).constant('aria2TaskAvailableOptions', {
// Aria2 Task Option Defination EXAMPLE:
// {

View file

@ -168,6 +168,8 @@
'Session has been saved successfully.': 'Session has been saved successfully.',
'Aria2 has been shutdown successfully.': 'Aria2 has been shutdown successfully.',
'Toggle Navigation': 'Toggle Navigation',
'Quick Setting': 'Quick Setting',
'Global Speed Limit': 'Global Speed Limit',
'Loading': 'Loading...',
'More Than One Day': 'More than 1 day',
'Unknown': 'Unknown',

View file

@ -36,6 +36,8 @@
data: ariaNgMonitorService.getGlobalStatsData()
};
$scope.quickSettingContext = null;
$scope.rpcSettings = ariaNgSettingService.getAllRpcSettings();
$scope.isTaskSelected = function () {
@ -213,6 +215,13 @@
return orderType.equals(targetType);
};
$scope.showQuickSettingDialog = function (type, title) {
$scope.quickSettingContext = {
type: type,
title: title
};
};
$scope.switchRpcSetting = function (setting) {
if (setting.isDefault) {
return;

View file

@ -0,0 +1,69 @@
(function () {
'use strict';
angular.module('ariaNg').directive('ngSettingDialog', ['ariaNgCommonService', 'aria2SettingService', function (ariaNgCommonService, aria2SettingService) {
return {
restrict: 'E',
templateUrl: 'views/setting-dialog.html',
replace: true,
scope: {
setting: '='
},
link: function (scope, element, attrs) {
scope.context = {
isLoading: false,
availableOptions: [],
globalOptions: []
};
scope.setGlobalOption = function (key, value, optionStatus) {
return aria2SettingService.setGlobalOption(key, value, function (response) {
if (response.success && response.data === 'OK') {
optionStatus.setSuccess();
} else {
optionStatus.setFailed(response.data.message);
}
}, true);
};
var loadOptions = function (type) {
var keys = aria2SettingService.getaria2QuickSettingsAvailableOptions(type);
if (!keys) {
ariaNgCommonService.showError('Type is illegal!');
return;
}
scope.context.availableOptions = aria2SettingService.getSpecifiedOptions(keys);
};
var loadAria2OptionsValue = function () {
scope.context.isLoading = true;
return aria2SettingService.getGlobalOption(function (response) {
scope.context.isLoading = false;
if (response.success) {
scope.context.globalOptions = response.data;
}
});
};
$('#quickSettingModal').on('hidden.bs.modal', function () {
scope.setting = null;
scope.context.availableOptions = [];
scope.context.globalOptions = [];
});
scope.$watch('setting', function (setting) {
if (setting) {
loadOptions(setting.type);
loadAria2OptionsValue();
$('#quickSettingModal').modal('show');
}
}, true);
}
};
}]);
}());

View file

@ -1,7 +1,7 @@
(function () {
'use strict';
angular.module('ariaNg').factory('aria2SettingService', ['aria2AllOptions', 'aria2GlobalAvailableOptions', 'aria2TaskAvailableOptions', 'aria2RpcService', 'ariaNgLogService', function (aria2AllOptions, aria2GlobalAvailableOptions, aria2TaskAvailableOptions, aria2RpcService, ariaNgLogService) {
angular.module('ariaNg').factory('aria2SettingService', ['aria2AllOptions', 'aria2GlobalAvailableOptions', 'aria2QuickSettingsAvailableOptions', 'aria2TaskAvailableOptions', 'aria2RpcService', 'ariaNgLogService', function (aria2AllOptions, aria2GlobalAvailableOptions, aria2QuickSettingsAvailableOptions, aria2TaskAvailableOptions, aria2RpcService, ariaNgLogService) {
var processStatResult = function (stat) {
if (!stat) {
return stat;
@ -38,6 +38,13 @@
return false;
}
},
getaria2QuickSettingsAvailableOptions: function (type) {
if (type === 'globalSpeedLimit') {
return aria2QuickSettingsAvailableOptions.globalSpeedLimitOptions;
} else {
return false;
}
},
getAvailableTaskOptionKeys: function (status, isBittorrent) {
var allOptions = aria2TaskAvailableOptions.taskOptions;
var availableOptions = [];

View file

@ -69,6 +69,10 @@ td {
overflow-y: scroll;
}
.main-footer .toolbar {
display: inline-block;
}
.dropdown-menu.right-align {
left: inherit;
right: 0;

View file

@ -40,11 +40,11 @@
top: 15px;
}
.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle, .skin-aria-ng .main-footer .toolbar > a {
color: #707070;
}
.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover {
.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover, .skin-aria-ng .main-footer .toolbar > a:hover, .skin-aria-ng .main-footer .toolbar.open > a {
color: #0080ff;
}

View file

@ -0,0 +1,23 @@
<div id="quickSettingModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" ng-bind="(setting ? (setting.title) : 'Quick Settings') | translate">Quick Setting</h4>
</div>
<div class="modal-body overlay-wrapper no-padding">
<div class="settings-table striped hoverable">
<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>
<div class="overlay" ng-if="context.isLoading">
<i class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->