mirror of
https://github.com/octoleo/syncthing.git
synced 2024-12-22 19:08:58 +00:00
Refactor modals into template
This commit is contained in:
Jakob Borg
parent
d812f559ef
commit
35b5999cba
File diff suppressed because one or more lines are too long
20
gui/app.js
20
gui/app.js
@ -337,7 +337,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
|
||||
|
||||
$scope.restart = function () {
|
||||
restarting = true;
|
||||
$scope.restartingHeader = "Restarting"
|
||||
$scope.restartingTitle = "Restarting"
|
||||
$scope.restartingBody = "Syncthing is restarting."
|
||||
$('#restarting').modal({backdrop: 'static', keyboard: false});
|
||||
$http.post(urlbase + '/restart');
|
||||
@ -360,7 +360,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
|
||||
};
|
||||
|
||||
$scope.upgrade = function () {
|
||||
$scope.restartingHeader = "Upgrading"
|
||||
$scope.restartingTitle = "Upgrading"
|
||||
$scope.restartingBody = "Syncthing is upgrading."
|
||||
$('#restarting').modal({backdrop: 'static', keyboard: false});
|
||||
$http.post(urlbase + '/upgrade').success(function () {
|
||||
@ -886,3 +886,19 @@ syncthing.directive('validNodeid', function() {
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
syncthing.directive('modal', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'modal.html',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
status: '@',
|
||||
icon: '@',
|
||||
close: '@',
|
||||
large: '@',
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
175
gui/index.html
175
gui/index.html
@ -352,86 +352,31 @@
|
||||
|
||||
<!-- Network error modal -->
|
||||
|
||||
<div id="networkError" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-danger">
|
||||
<h4 class="modal-title">
|
||||
<span class="glyphicon glyphicon-exclamation-sign"></span>
|
||||
Connection Error
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Syncthing seems to be down, or there is a problem with your Internet connection.
|
||||
Retrying…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal id="networkError" status="danger" icon="exclamation-sign" title="Connection Error">
|
||||
<p>
|
||||
Syncthing seems to be down, or there is a problem with your Internet connection.
|
||||
Retrying…
|
||||
</p>
|
||||
</modal>
|
||||
|
||||
<!-- Restarting modal -->
|
||||
|
||||
<div id="restarting" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-info">
|
||||
<h4 class="modal-title">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
{{restartingHeader}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{restartingBody}} Please hold…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal id="restarting" icon="refresh" title="{{restartingTitle}}" status="info">
|
||||
<p>{{restartingBody}} Please hold…</p>
|
||||
</modal>
|
||||
|
||||
<!-- Shutdown modal -->
|
||||
|
||||
<div id="shutdown" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-success">
|
||||
<h4 class="modal-title">
|
||||
<span class="glyphicon glyphicon-off"></span>
|
||||
Shutdown Complete
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Syncthing has been shut down.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal id="shutdown" icon="off" status="success" title="Shutdown Complete">
|
||||
<p>Syncthing has been shut down.</p>
|
||||
</modal>
|
||||
|
||||
<!-- ID modal -->
|
||||
|
||||
<div id="idqr" class="modal fade">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">
|
||||
<span class="glyphicon glyphicon-qrcode"></span>
|
||||
Node Identification — {{nodeName(thisNode())}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="well well-sm text-monospace text-center">{{myID}}</div>
|
||||
<img ng-if="myID" class="center-block img-thumbnail" src="qr/{{myID}}"/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal id="idqr" large="yes" status="info" close="yes" icon="qrcode" title="Node Identification — {{nodeName(thisNode())}}">
|
||||
<div class="well well-sm text-monospace text-center">{{myID}}</div>
|
||||
<img ng-if="myID" class="center-block img-thumbnail" src="qr/{{myID}}"/>
|
||||
</modal>
|
||||
|
||||
<!-- Node editor modal -->
|
||||
|
||||
@ -654,43 +599,25 @@
|
||||
|
||||
<!-- Needed files modal -->
|
||||
|
||||
<div id="needed" class="modal fade">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-info">
|
||||
<h4 class="modal-title">Out of Sync Items</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="table table-striped table-condensed">
|
||||
<tr ng-repeat="f in needed" ng-init="a = needAction(f)">
|
||||
<td class="small-data"><span class="glyphicon glyphicon-{{needIcons[a]}}"></span> {{needActions[a]}}</td>
|
||||
<td title="{{f.Name}}">{{f.Name | basename}}</td>
|
||||
<td class="text-right small-data"><span ng-if="f.Size > 0">{{f.Size | binary}}B</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal id="needed" large="yes" status="info" icon="cloud-download" close="yes" title="Out of Sync Items">
|
||||
<table class="table table-striped table-condensed">
|
||||
<tr ng-repeat="f in needed" ng-init="a = needAction(f)">
|
||||
<td class="small-data"><span class="glyphicon glyphicon-{{needIcons[a]}}"></span> {{needActions[a]}}</td>
|
||||
<td title="{{f.Name}}">{{f.Name | basename}}</td>
|
||||
<td class="text-right small-data"><span ng-if="f.Size > 0">{{f.Size | binary}}B</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</modal>
|
||||
|
||||
<!-- About modal -->
|
||||
|
||||
<div id="about" class="modal fade">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-info">
|
||||
<h4 class="modal-title">About</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h1>Syncthing <small>{{version}}</small></h1>
|
||||
<hr/>
|
||||
<modal id="about" large="yes" close="yes" status="info" title="About">
|
||||
<h1 class="text-center"><img src="st-logo-128.png" style="vertical-align: -16px" width="64" height="64"/> Syncthing<br/><small>{{version}}</small></h1>
|
||||
<hr/>
|
||||
|
||||
<p>Copyright © 2014 <b>Jakob Borg</b> and the following <b>Contributors</b>:</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>Copyright © 2014 <b>Jakob Borg</b> and the following <b>Contributors</b>:</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>Aaron Bieber</li>
|
||||
<li>Andrew Dunham</li>
|
||||
@ -699,7 +626,7 @@
|
||||
<li>Brandon Philips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>James Patterson</li>
|
||||
<li>Jens Diemer</li>
|
||||
@ -708,29 +635,23 @@
|
||||
<li>Veeti Paananen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<p>Syncthing includes the following software or portions thereof:
|
||||
<ul>
|
||||
<li><a href="http://golang.org/">The Go Programming Languange</a>, Copyright © 2012 The Go Authors.</li>
|
||||
<li><a href="https://bitbucket.org/kardianos/osext">kardianos/osext</a>, Copyright © 2012 Daniel Theophanes.</li>
|
||||
<li><a href="https://code.google.com/p/snappy-go/">snappy-go</a>, Copyright © 2011 The Snappy-Go Authors.</li>
|
||||
<li><a href="https://github.com/golang/groupcache">groupcache/lru</a>, Copyright © 2013 Google Inc.</li>
|
||||
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright © 2014 Canonical Ltd.</li>
|
||||
<li><a href="https://github.com/syndtr/goleveldb">syndtr/goleveldb</a>, Copyright © 2012, Suryandaru Triandana</li>
|
||||
<li><a href="https://github.com/vitrun/qart">vitrun/qart</a>, Copyright © The Go Authors.</li>
|
||||
<li><a href="https://angularjs.org/">AngularJS</a>, Copyright © 2010-2014 Google, Inc.</li>
|
||||
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright © 2011-2014 Twitter, Inc.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<p>Syncthing includes the following software or portions thereof:
|
||||
<ul>
|
||||
<li><a href="http://golang.org/">The Go Programming Languange</a>, Copyright © 2012 The Go Authors.</li>
|
||||
<li><a href="https://bitbucket.org/kardianos/osext">kardianos/osext</a>, Copyright © 2012 Daniel Theophanes.</li>
|
||||
<li><a href="https://code.google.com/p/snappy-go/">snappy-go</a>, Copyright © 2011 The Snappy-Go Authors.</li>
|
||||
<li><a href="https://github.com/golang/groupcache">groupcache/lru</a>, Copyright © 2013 Google Inc.</li>
|
||||
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright © 2014 Canonical Ltd.</li>
|
||||
<li><a href="https://github.com/syndtr/goleveldb">syndtr/goleveldb</a>, Copyright © 2012, Suryandaru Triandana</li>
|
||||
<li><a href="https://github.com/vitrun/qart">vitrun/qart</a>, Copyright © The Go Authors.</li>
|
||||
<li><a href="https://angularjs.org/">AngularJS</a>, Copyright © 2010-2014 Google, Inc.</li>
|
||||
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright © 2011-2014 Twitter, Inc.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</modal>
|
||||
|
||||
|
||||
<script src="angular.min.js"></script>
|
||||
|
||||
17
gui/modal.html
Normal file
17
gui/modal.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog" ng-class="{'modal-lg': large}">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header alert alert-{{status}}">
|
||||
<h4 class="modal-title">
|
||||
<span ng-if="icon" class="glyphicon glyphicon-{{icon}}"></span>
|
||||
{{title}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body" ng-transclude>
|
||||
</div>
|
||||
<div ng-if="close" class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user