gui: Modal tweaks

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3292
LGTM: AudriusButkevicius, calmh
This commit is contained in:
Daniel Harte
2016-06-12 14:06:48 +00:00
committed by Jakob Borg
parent 6f5ca53f99
commit de298da532
44 changed files with 750 additions and 962 deletions

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('aboutModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/aboutModalView.html'
};
});

View File

@@ -1,33 +1,40 @@
<modal id="about" status="info" icon="heart-o" heading="{{'About' | translate}}" large="yes" close="yes">
<h1 class="text-center">
<img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/>
<br/>
<small>{{versionString()}}</small>
<br/>
<small><i>"{{version.codename}}"</i></small>
</h1>
<hr/>
<modal id="about" status="info" icon="heart-o" heading="{{'About' | translate}}" large="yes" closeable="yes">
<div class="modal-body">
<h1 class="text-center">
<img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/>
<br/>
<small>{{versionString()}}</small>
<br/>
<small><i>"{{version.codename}}"</i></small>
</h1>
<hr/>
<p translate>Copyright &copy; 2014-2016 the following Contributors:</p>
<div class="row">
<div class="col-md-12" id="contributor-list">
<p translate>Copyright &copy; 2014-2016 the following Contributors:</p>
<div class="row">
<div class="col-md-12" id="contributor-list">
Jakob Borg, Audrius Butkevicius, Alexander Graf, Anderson Mesquita, Antony Male, Ben Schulz, Caleb Callaway, Daniel Harte, Lars K.W. Gohlke, Lode Hoste, Michael Ploujnikov, Philippe Schommers, Ryan Sullivan, Sergey Mishin, Stefan Tatschner, Aaron Bieber, Adam Piggott, Alessandro G., Alexandre Viau, Andrew Dunham, Arthur Axel fREW Schmidt, Bart De Vries, Ben Curthoys, Ben Sidhom, Benny Ng, Brandon Philips, Brendan Long, Brian R. Becker, Carsten Hagemann, Cathryne Linenweaver, Chris Howie, Chris Joel, Colin Kennedy, Daniel Bergmann, Daniel Martí, David Rimmer, Denis A., Dennis Wilson, Dominik Heidler, Elias Jarlebring, Emil Hessman, Erik Meitner, Federico Castagnini, Felix Ableitner, Felix Unterpaintner, Francois-Xavier Gsell, Frank Isemann, Gilli Sigurdsson, Jaakko Hannikainen, Jacek Szafarkiewicz, Jake Peterson, James Patterson, Jaroslav Malec, Jens Diemer, Jochen Voss, Johan Vromans, Karol Różycki, Kelong Cong, Ken'ichi Kamada, Kevin Allen, Laurent Etiemble, Lord Landon Agahnim, Majed Abdulaziz, Marc Laporte, Marc Pujol, Marcin Dziadus, Mateusz Naściszewski, Matt Burke, Max Schulze, Michael Jephcote, Michael Tilli, Nate Morrison, Pascal Jungblut, Peter Hoeg, Phill Luby, Piotr Bejda, Scott Klupfel, Stefan Kuntz, Tim Abell, Tobias Nygren, Tomas Cerveny, Tully Robinson, Tyler Brazier, Veeti Paananen, Victor Buinsky, Vil Brekin, William A. Kennington III, Wulf Weich, Yannic A.
</div>
</div>
</div>
<hr/>
<hr/>
<p translate>Syncthing includes the following software or portions thereof:</p>
<ul class="list-unstyled two-columns">
<li><a href="https://golang.org">The Go Programming Language</a>, Copyright &copy; 2012 The Go Authors.</li>
<li><a href="https://github.com/bkaradzic/go-lz4">bkaradzic/go-lz4</a>, Copyright &copy; 2011-2012 Branimir Karadzic, 2013 Damian Gryski.</li>
<li><a href="https://github.com/kardianos/osext">kardianos/osext</a>, Copyright &copy; 2012 Daniel Theophanes.</li>
<li><a href="https://github.com/golang/snappy">golang/snappy</a>, Copyright &copy; 2011 The Snappy-Go Authors.</li>
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright &copy; 2015 Canonical Ltd.</li>
<li><a href="https://github.com/thejerf/suture">thejerf/suture</a>, Copyright &copy; 2014-2015 Barracuda Networks, Inc.</li>
<li><a href="https://github.com/syndtr/goleveldb">syndtr/goleveldb</a>, Copyright &copy; 2012, Suryandaru Triandana</li>
<li><a href="https://github.com/vitrun/qart">vitrun/qart</a>, Copyright &copy; The Go Authors.</li>
<li><a href="https://angularjs.org/">AngularJS</a>, Copyright &copy; 2010-2015 Google, Inc.</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 2011-2015 Twitter, Inc.</li>
<li><a href="http://fontawesome.io/">Font Awesome</a>, Copyright &copy; 2015 Dave Gandy</li>
</ul>
<p translate>Syncthing includes the following software or portions thereof:</p>
<ul class="list-unstyled two-columns">
<li><a href="https://golang.org">The Go Programming Language</a>, Copyright &copy; 2012 The Go Authors.</li>
<li><a href="https://github.com/bkaradzic/go-lz4">bkaradzic/go-lz4</a>, Copyright &copy; 2011-2012 Branimir Karadzic, 2013 Damian Gryski.</li>
<li><a href="https://github.com/kardianos/osext">kardianos/osext</a>, Copyright &copy; 2012 Daniel Theophanes.</li>
<li><a href="https://github.com/golang/snappy">golang/snappy</a>, Copyright &copy; 2011 The Snappy-Go Authors.</li>
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright &copy; 2015 Canonical Ltd.</li>
<li><a href="https://github.com/thejerf/suture">thejerf/suture</a>, Copyright &copy; 2014-2015 Barracuda Networks, Inc.</li>
<li><a href="https://github.com/syndtr/goleveldb">syndtr/goleveldb</a>, Copyright &copy; 2012, Suryandaru Triandana</li>
<li><a href="https://github.com/vitrun/qart">vitrun/qart</a>, Copyright &copy; The Go Authors.</li>
<li><a href="https://angularjs.org/">AngularJS</a>, Copyright &copy; 2010-2015 Google, Inc.</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 2011-2015 Twitter, Inc.</li>
<li><a href="http://fontawesome.io/">Font Awesome</a>, Copyright &copy; 2015 Dave Gandy</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button>
</div>
</modal>

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('httpErrorDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/httpErrorDialogView.html'
};
});

View File

@@ -1,5 +1,7 @@
<modal id="httpError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}">
<p translate>
Syncthing seems to be experiencing a problem processing your request. Please refresh the page or restart Syncthing if the problem persists.
</p>
<modal id="httpError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no">
<div class="modal-body">
<p translate>
Syncthing seems to be experiencing a problem processing your request. Please refresh the page or restart Syncthing if the problem persists.
</p>
</div>
</modal>

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('majorUpgradeModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/majorUpgradeModalView.html'
};
});

View File

@@ -1,32 +1,20 @@
<div id="majorUpgrade" class="modal fade" tabindex="-1" data-backdrop="true" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-arrow-circle-up"></span>
</div>
<span translate>Major Upgrade</span>
</h4>
</div>
<div class="modal-body">
<p>
<span translate>This is a major version upgrade.</span>
<span translate>A new major version may not be compatible with previous versions.</span>
<span translate>Please consult the release notes before performing a major upgrade.</span>
</p>
<p>
<a href="https://github.com/syncthing/syncthing/releases/tag/{{upgradeInfo.latest}}" target="_blank" translate>Release Notes</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa fa-check"></span>&nbsp;<span translate>Upgrade</span>
</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button>
</div>
</div>
<modal id="majorUpgrade" status="danger" icon="arrow-circle-up" heading="{{'Major Upgrade' | translate}}" large="no" closeable="yes">
<div class="modal-body">
<p>
<span translate>This is a major version upgrade.</span>
<span translate>A new major version may not be compatible with previous versions.</span>
<span translate>Please consult the release notes before performing a major upgrade.</span>
</p>
<p>
<a href="https://github.com/syncthing/syncthing/releases/tag/{{upgradeInfo.latest}}" target="_blank" translate>Release Notes</a>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa fa-check"></span>&nbsp;<span translate>Upgrade</span>
</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button>
</div>
</modal>

View File

@@ -9,10 +9,10 @@ angular.module('syncthing.core')
heading: '@',
status: '@',
icon: '@',
close: '@',
closeable: '@',
large: '@'
},
link: function (scope, element, attrs, tabsCtrl) {
link: function (scope, element, attrs) {
// before modal show animation
$(element).on('show.bs.modal', function () {
@@ -44,7 +44,6 @@ angular.module('syncthing.core')
// find and unhide the next backdrop down in z order
var sel = false, largestZ = 0;
$('.modal-backdrop').each(function (i) {
console.log('sel each');
var thisZ = parseInt($(this).css('zIndex'));
if (thisZ > largestZ && $(this).attr('for-modal-id') !== $(element).attr('id')) {
largestZ = thisZ;

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('networkErrorDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/networkErrorDialogView.html'
};
});

View File

@@ -1,5 +1,7 @@
<modal id="networkError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}">
<p translate>
Syncthing seems to be down, or there is a problem with your Internet connection. Retrying&hellip;
</p>
<modal id="networkError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no">
<div class="modal-body">
<p translate>
Syncthing seems to be down, or there is a problem with your Internet connection. Retrying&hellip;
</p>
</div>
</modal>

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('restartingDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/restartingDialogView.html'
};
});

View File

@@ -1,3 +1,8 @@
<modal id="restarting" status="info" icon="refresh" heading="{{'Restarting' | translate}}">
<p><span translate>Syncthing is restarting.</span> <span translate>Please wait</span>...</p>
<modal id="restarting" status="info" icon="refresh" heading="{{'Restarting' | translate}}" large="no" closeable="no">
<div class="modal-body">
<p>
<span translate>Syncthing is restarting.</span>
<span translate>Please wait</span>...
</p>
</div>
</modal>

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('shutdownDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/shutdownDialogView.html'
};
});

View File

@@ -1,3 +1,7 @@
<modal id="shutdown" status="success" icon="power-off" heading="{{'Shutdown Complete' | translate}}">
<p translate>Syncthing has been shut down.</p>
<modal id="shutdown" status="success" icon="power-off" heading="{{'Shutdown Complete' | translate}}" large="no" closeable="no">
<div class="modal-body">
<p translate>
Syncthing has been shut down.
</p>
</div>
</modal>

View File

@@ -1028,10 +1028,6 @@ angular.module('syncthing.core')
});
};
$scope.upgradeMajor = function () {
$('#majorUpgrade').modal();
};
$scope.shutdown = function () {
restarting = true;
$http.post(urlbase + '/system/shutdown').success(function () {
@@ -1052,12 +1048,6 @@ angular.module('syncthing.core')
$('#editDevice').modal();
};
$scope.idDevice = function (deviceCfg) {
$scope.currentDevice = deviceCfg;
$('#editDevice').modal('hide');
$('#idqr').modal('show');
};
$scope.addDevice = function (deviceID, name) {
return $http.get(urlbase + '/system/discovery')
.success(function (registry) {
@@ -1229,6 +1219,18 @@ angular.module('syncthing.core')
}).error($scope.emitHTTPError);
});
$scope.loadFormIntoScope = function (form) {
console.log('loadFormIntoScope',form.$name);
switch (form.$name) {
case 'deviceEditor':
$scope.deviceEditor = form;
break;
case 'folderEditor':
$scope.folderEditor = form;
break;
}
}
$scope.editFolder = function (folderCfg) {
$scope.currentFolder = angular.copy(folderCfg);
if ($scope.currentFolder.path.slice(-1) === $scope.system.pathSeparator) {
@@ -1464,20 +1466,11 @@ angular.module('syncthing.core')
$http.get(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id))
.success(function (data) {
data.ignore = data.ignore || [];
$('#editFolder').modal('hide')
.one('hidden.bs.modal', function() {
var textArea = $('#editIgnores textarea');
textArea.val(data.ignore.join('\n'));
$('#editIgnores').modal()
.one('hidden.bs.modal', function () {
$('#editFolder').modal();
})
.one('shown.bs.modal', function () {
textArea.focus();
});
var textArea = $('#editIgnores textarea');
textArea.val(data.ignore.join('\n'));
$('#editIgnores').modal()
.one('shown.bs.modal', function () {
textArea.focus();
});
})
.then(function () {
@@ -1501,16 +1494,6 @@ angular.module('syncthing.core')
});
};
$scope.showURPreview = function () {
$('#settings').modal('hide')
.one('hidden.bs.modal', function() {
$('#urPreview').modal()
.one('hidden.bs.modal', function () {
$('#settings').modal();
});
});
};
$scope.acceptUR = function () {
$scope.config.options.urAccepted = 1000; // Larger than the largest existing report version
$scope.saveConfig();
@@ -1555,10 +1538,6 @@ angular.module('syncthing.core')
$http.post(urlbase + "/db/override?folder=" + encodeURIComponent(folder));
};
$scope.about = function () {
$('#about').modal('show');
};
$scope.advanced = function () {
$scope.advancedConfig = angular.copy($scope.config);
$('#advanced').modal('show');

View File

@@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('upgradingDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/upgradingDialogView.html'
};
});

View File

@@ -1,3 +1,8 @@
<modal id="upgrading" status="info" icon="arrow-circle-up" heading="{{'Upgrading' | translate}}">
<p><span translate>Syncthing is upgrading.</span> <span translate>Please wait</span>...</p>
<modal id="upgrading" status="info" icon="arrow-circle-up" heading="{{'Upgrading' | translate}}" large="no" closeable="no">
<div class="modal-body">
<p>
<span translate>Syncthing is upgrading.</span>
<span translate>Please wait</span>...
</p>
</div>
</modal>