haeaeae/duplicati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/improve_ui_layout'

Browse Source
This commit is contained in:
Kenneth Skovhede
2017-04-06 10:07:18 +02:00
parent 0686d00993 addff70f10
commit b6593fb4d7
6 changed files with 192 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Duplicati/Server/webroot/ngax/img/progress-resume.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

Duplicati/Server/webroot/ngax/img/progress-stop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Duplicati/Server/webroot/ngax/index.html
+29 -28
View File
@@ -156,44 +156,45 @@
<div class="statepadding">
<div class="state" ng-controller="StateController">
<div class="content">
<div ng-hide="state.activeTask == null">
<span ng-hide="activeBackup == null">
<span ng-hide="StopReqId == activeTaskID">
<strong>{{activeBackup.Backup.Name}}:</strong> {{StateText}}
</span>
<span ng-show="StopReqId == activeTaskID">
<strong translate>Stopping after upload:</strong> {{activeBackup.Backup.Name}}
</span>
</span>
<span ng-show="activeBackup == null">
<strong ng-hide="StopReqId == activeTaskID" translate>Running task:</strong>
<strong ng-show="StopReqId == activeTaskID" translate>Stopping task:</strong>
{{StateText}}
</span>
</div>
<div ng-hide="state.programState == 'Running'">
<strong style="margin-right: 0px;" translate>Duplicati is paused</strong>
- <a href ng-click="sendResume()" translate>resume now</a>
<div ng-show="state.activeTask == null &amp;&amp; nextTask != null">
<strong translate>Next task:</strong> {{nextTask.Backup.Name}}
</div>
<div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask != null"><strong translate>Next scheduled task:</strong> {{nextScheduledTask.Backup.Name}} <span title="{{nextScheduledTime | parsetimestamp}}">{{nextScheduledTime | moment: 'calendar'}}</span></div>
<div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask == null" translate>No scheduled tasks</div>
</div>
<div ng-hide="activeBackup == null">
<strong>{{'Running task:' | translate}} </strong>
{{activeBackup.Backup.Name}}
<a class="button" ng-click="stopTask()" ng-show="StopReqId == state.activeTask.Item1" translate>Force stop</a>
<a class="button" ng-click="stopTask()" ng-hide="StopReqId == state.activeTask.Item1" translate>Stop</a>
<progress-bar ng-text="StateText" ng-progress="Progress"></progress-bar>
<div class="buttons">
<div ng-hide="state.activeTask == null" class="stop" ng-click="stopDialog()" translate></div>
<div ng-hide="state.activeTask != null || state.programState == 'Running'" class="resume" ng-click="sendResume()" translate></div>
</div>
<div ng-show="activeBackup == null &amp;&amp; state.activeTask != null">
<strong translate>Running task</strong>
<a class="button" ng-click="stopTask()" ng-show="StopReqId == state.activeTask.Item1" translate>Force stop</a>
<a class="button" ng-click="stopTask()" ng-hide="StopReqId == state.activeTask.Item1" translate>Stop</a>
</div>
<div ng-show="state.activeTask == null &amp;&amp; nextTask != null">
<strong>{{'Next task:' | translate}} </strong>
{{nextTask.Backup.Name}}
</div>
<div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask != null"><strong translate>Next scheduled task:</strong> {{nextScheduledTask.Backup.Name}} <span title="{{nextScheduledTime | parsetimestamp}}">{{nextScheduledTime | moment: 'calendar'}}</span></div>
<div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask == null" translate>No scheduled tasks</div>
<div class="progress-bar progress-bar-striped" ng-class="{active: Progress < 0}" role="progressbar" aria-valuenow="{{Progress * 100}}" aria-valuemin="0" aria-valuemax="100" style="width:{{Progress * 100}}%"></div>
</div>
<div class="action-icons">
<div class="pause" ng-class="{'active': state.programState != 'Running'}" ng-click="pauseOptions()" title="{{state.programState == 'Running' ? 'Click to see the pause options' : 'Click to resume'}}"></div>
<!-- <div class="throttle" ng-click="throttleOptions()"></div> -->
<!--<div class="throttle" ng-click="throttleOptions()"></div> -->
</div>
</div>
</div>
Duplicati/Server/webroot/ngax/less/style.less
+125 -9
View File
@@ -445,7 +445,12 @@ body {
line-height: 70px;
background: @headerBg;
overflow: hidden;
min-height: 70px;
height: 70px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 100;
a {
color: @lColor;
@@ -470,11 +475,11 @@ body {
.state {
float: left;
color: @hColor;
color: darken(@hColor, 10%);
width: 545px;
padding: 13px 15px;
margin: 10px 20px;
border: 1px @hColor solid;
border: 1px darken(@hColor, 10%) solid;
font-weight: 300;
font-size: 18px;
overflow: hidden;
@@ -482,16 +487,68 @@ body {
display: inline-block;
background-color: white;
text-overflow: ellipsis;
position: relative;
height: 25px;
strong {
display: inline-block;
display: inline;
margin-right: 10px;
}
span {
display: inline;
}
.button {
position: static;
margin-top: 70px;
}
.content {
position: relative;
z-index: 10;
margin-right: 40px;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buttons {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 26px;
margin: 13px 15px;
.stop {
display: block;
width: 26px;
height: 26px;
background: url('../img/progress-stop.png');
background-size: 26px;
cursor: pointer;
}
.resume {
display: block;
width: 26px;
height: 26px;
background: url('../img/progress-resume.png');
background-size: 26px;
cursor: pointer;
}
}
.progress-bar {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
background: fade(@hColor, 25%);
z-index: 5;
}
}
.action-icons {
@@ -583,7 +640,7 @@ body {
width: 100%;
overflow: hidden;
min-height: 500px;
padding-top: 50px;
padding-top: 120px;
padding-bottom: 70px;
a {
@@ -2043,7 +2100,7 @@ div.modal-dialog {
body {
.container {
.header {
min-height: 140px;
height: 140px;
.statepadding {
padding-right: 90px;
@@ -2092,7 +2149,7 @@ div.modal-dialog {
.body {
position: relative;
padding-top: 0;
padding-top: 140px;
.mainmenu {
display: none;
@@ -2173,11 +2230,14 @@ div.modal-dialog {
padding-left: 10px;
}
.statepadding {
padding-right: 60px;
padding-right: 50px;
}
.state {
margin-left: 10px;
}
.menubutton {
margin-right: 5px;
}
}
.body {
@@ -2503,7 +2563,7 @@ div.modal-dialog {
}
.content {
padding: 50px 15px;
padding: 15px;
div.add,
div.restore {
@@ -2542,3 +2602,59 @@ div.modal-dialog {
}
}
}
@media (max-width: 400px) {
body {
font-size: 15px;
.container {
.header {
.menubutton {
margin-right: 0px;
padding-left: 0px;
padding-right: 40px;
span {
display: none;
}
}
}
}
}
}
@media (max-width: 325px) {
body {
font-size: 15px;
.container {
.header {
.logo {
div {
display: none;
}
}
}
}
}
}
@media (max-width: 200px) {
body {
font-size: 15px;
.container {
.header {
.menubutton {
position: static;
margin-top: 0px;
}
.action-icons-small {
clear: right;
margin-top: 0px;
}
}
}
}
}
Duplicati/Server/webroot/ngax/scripts/controllers/StateController.js
+36 -11
View File
@@ -1,4 +1,4 @@
backupApp.controller('StateController', function($scope, $timeout, ServerStatus, BackupList, AppService, AppUtils, gettextCatalog) {
backupApp.controller('StateController', function($scope, $timeout, ServerStatus, BackupList, AppService, AppUtils, DialogService, gettextCatalog) {
$scope.state = ServerStatus.watch($scope);
$scope.backups = BackupList.watch($scope);
$scope.ServerStatus = ServerStatus;
@@ -6,6 +6,7 @@ backupApp.controller('StateController', function($scope, $timeout, ServerStatus,
$scope.activeTask = null;
var updateActiveTask = function() {
$scope.activeTaskID = $scope.state.activeTask == null ? null : $scope.state.activeTask.Item1;
$scope.activeBackup = $scope.state.activeTask == null ? null : BackupList.lookup[$scope.state.activeTask.Item2];
$scope.nextTask = ($scope.state.schedulerQueueIds == null || $scope.state.schedulerQueueIds.length == 0) ? null : BackupList.lookup[$scope.state.schedulerQueueIds[0].Item2];
$scope.nextScheduledTask = ($scope.state.proposedSchedule == null || $scope.state.proposedSchedule.length == 0) ? null : BackupList.lookup[$scope.state.proposedSchedule[0].Item1];
@@ -72,19 +73,43 @@ backupApp.controller('StateController', function($scope, $timeout, ServerStatus,
$scope.$watch('state.lastPgEvent', updateStateDisplay, true);
$scope.stopTask = function() {
var taskId = $scope.state.activeTask.Item1;
if ($scope.StopReqId == taskId) {
AppService.post('/task/' + taskId + '/abort');
} else {
AppService.post('/task/' + taskId + '/stop');
}
$scope.stopDialog = function() {
if ($scope.activeTaskID == null)
return;
$scope.StopReqId = taskId;
var taskId = $scope.activeTaskID;
var txt = $scope.state.lastPgEvent == null ? '' : ($scope.state.lastPgEvent.Phase || '');
function handleClick(ix) {
if (ix == 0)
{
AppService.post('/task/' + taskId + '/stop');
$scope.StopReqId = taskId;
}
else if (ix == 1)
AppService.post('/task/' + taskId + '/abort');
};
if (txt.indexOf('Backup_') == 0)
{
DialogService.dialog(
gettextCatalog.getString('Stop running backup'),
gettextCatalog.getString('You can stop the backup immediately, or stop after the current file has been uploaded.'),
[gettextCatalog.getString('Stop after upload'), gettextCatalog.getString('Stop now'), gettextCatalog.getString('Cancel')],
handleClick
);
}
else
{
DialogService.dialog(
gettextCatalog.getString('Stop running task'),
gettextCatalog.getString('You can stop the task immediately, or allow the process to continue its current file and the stop.'),
[gettextCatalog.getString('Stop after the current file'), gettextCatalog.getString('Stop now'), gettextCatalog.getString('Cancel')],
handleClick
);
}
};
updateStateDisplay();
updateActiveTask();
});
Duplicati/Server/webroot/ngax/styles/style.css
+2 -2
View File
File diff suppressed because one or more lines are too long