octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-09 14:50:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modals into template

Browse Source
This commit is contained in:
Jakob Borg 2014-07-14 14:14:26 +02:00
parent d812f559ef
commit 35b5999cba
4 changed files with 90 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
auto/gui.files.go
View File

File diff suppressed because one or more lines are too long

20
gui/app.js
View File

@ -337,7 +337,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
$scope.restart = function () { $scope.restart = function () {
restarting = true; restarting = true;
$scope.restartingHeader = "Restarting" $scope.restartingTitle = "Restarting"
$scope.restartingBody = "Syncthing is restarting." $scope.restartingBody = "Syncthing is restarting."
$('#restarting').modal({backdrop: 'static', keyboard: false}); $('#restarting').modal({backdrop: 'static', keyboard: false});
$http.post(urlbase + '/restart'); $http.post(urlbase + '/restart');
@ -360,7 +360,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
}; };
$scope.upgrade = function () { $scope.upgrade = function () {
$scope.restartingHeader = "Upgrading" $scope.restartingTitle = "Upgrading"
$scope.restartingBody = "Syncthing is upgrading." $scope.restartingBody = "Syncthing is upgrading."
$('#restarting').modal({backdrop: 'static', keyboard: false}); $('#restarting').modal({backdrop: 'static', keyboard: false});
$http.post(urlbase + '/upgrade').success(function () { $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
View File

@ -352,86 +352,31 @@
<!-- Network error modal --> <!-- Network error modal -->
<div id="networkError" class="modal fade"> <modal id="networkError" status="danger" icon="exclamation-sign" title="Connection Error">
<div class="modal-dialog"> <p>
<div class="modal-content"> Syncthing seems to be down, or there is a problem with your Internet connection.
<div class="modal-header alert alert-danger"> Retrying&hellip;
<h4 class="modal-title"> </p>
<span class="glyphicon glyphicon-exclamation-sign"></span> </modal>
Connection Error
</h4>
</div>
<div class="modal-body">
<p>
Syncthing seems to be down, or there is a problem with your Internet connection.
Retrying&hellip;
</p>
</div>
</div>
</div>
</div>
<!-- Restarting modal --> <!-- Restarting modal -->
<div id="restarting" class="modal fade"> <modal id="restarting" icon="refresh" title="{{restartingTitle}}" status="info">
<div class="modal-dialog"> <p>{{restartingBody}} Please hold&hellip;</p>
<div class="modal-content"> </modal>
<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&hellip;
</p>
</div>
</div>
</div>
</div>
<!-- Shutdown modal --> <!-- Shutdown modal -->
<div id="shutdown" class="modal fade"> <modal id="shutdown" icon="off" status="success" title="Shutdown Complete">
<div class="modal-dialog"> <p>Syncthing has been shut down.</p>
<div class="modal-content"> </modal>
<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>
<!-- ID modal --> <!-- ID modal -->
<div id="idqr" class="modal fade"> <modal id="idqr" large="yes" status="info" close="yes" icon="qrcode" title="Node Identification &mdash; {{nodeName(thisNode())}}">
<div class="modal-dialog modal-lg"> <div class="well well-sm text-monospace text-center">{{myID}}</div>
<div class="modal-content"> <img ng-if="myID" class="center-block img-thumbnail" src="qr/{{myID}}"/>
<div class="modal-header"> </modal>
<h4 class="modal-title">
<span class="glyphicon glyphicon-qrcode"></span>
Node Identification &mdash; {{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>&emsp;Close</button>
</div>
</div>
</div>
</div>
<!-- Node editor modal --> <!-- Node editor modal -->
@ -654,43 +599,25 @@
<!-- Needed files modal --> <!-- Needed files modal -->
<div id="needed" class="modal fade"> <modal id="needed" large="yes" status="info" icon="cloud-download" close="yes" title="Out of Sync Items">
<div class="modal-dialog modal-lg"> <table class="table table-striped table-condensed">
<div class="modal-content"> <tr ng-repeat="f in needed" ng-init="a = needAction(f)">
<div class="modal-header alert alert-info"> <td class="small-data"><span class="glyphicon glyphicon-{{needIcons[a]}}"></span> {{needActions[a]}}</td>
<h4 class="modal-title">Out of Sync Items</h4> <td title="{{f.Name}}">{{f.Name | basename}}</td>
</div> <td class="text-right small-data"><span ng-if="f.Size > 0">{{f.Size | binary}}B</span></td>
<div class="modal-body"> </tr>
<table class="table table-striped table-condensed"> </table>
<tr ng-repeat="f in needed" ng-init="a = needAction(f)"> </modal>
<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>&emsp;Close</button>
</div>
</div>
</div>
</div>
<!-- About modal --> <!-- About modal -->
<div id="about" class="modal fade"> <modal id="about" large="yes" close="yes" status="info" title="About">
<div class="modal-dialog modal-lg"> <h1 class="text-center"><img src="st-logo-128.png" style="vertical-align: -16px" width="64" height="64"/> Syncthing<br/><small>{{version}}</small></h1>
<div class="modal-content"> <hr/>
<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/>
<p>Copyright &copy; 2014 <b>Jakob Borg</b> and the following <b>Contributors</b>:</p> <p>Copyright &copy; 2014 <b>Jakob Borg</b> and the following <b>Contributors</b>:</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<ul> <ul>
<li>Aaron Bieber</li> <li>Aaron Bieber</li>
<li>Andrew Dunham</li> <li>Andrew Dunham</li>
@ -699,7 +626,7 @@
<li>Brandon Philips</li> <li>Brandon Philips</li>
</ul> </ul>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<ul> <ul>
<li>James Patterson</li> <li>James Patterson</li>
<li>Jens Diemer</li> <li>Jens Diemer</li>
@ -708,29 +635,23 @@
<li>Veeti Paananen</li> <li>Veeti Paananen</li>
</ul> </ul>
</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 &copy; 2012 The Go Authors.</li>
<li><a href="https://bitbucket.org/kardianos/osext">kardianos/osext</a>, Copyright &copy; 2012 Daniel Theophanes.</li>
<li><a href="https://code.google.com/p/snappy-go/">snappy-go</a>, Copyright &copy; 2011 The Snappy-Go Authors.</li>
<li><a href="https://github.com/golang/groupcache">groupcache/lru</a>, Copyright &copy; 2013 Google Inc.</li>
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright &copy; 2014 Canonical Ltd.</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-2014 Google, Inc.</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 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>&emsp;Close</button>
</div>
</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 &copy; 2012 The Go Authors.</li>
<li><a href="https://bitbucket.org/kardianos/osext">kardianos/osext</a>, Copyright &copy; 2012 Daniel Theophanes.</li>
<li><a href="https://code.google.com/p/snappy-go/">snappy-go</a>, Copyright &copy; 2011 The Snappy-Go Authors.</li>
<li><a href="https://github.com/golang/groupcache">groupcache/lru</a>, Copyright &copy; 2013 Google Inc.</li>
<li><a href="https://github.com/juju/ratelimit">juju/ratelimit</a>, Copyright &copy; 2014 Canonical Ltd.</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-2014 Google, Inc.</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 2011-2014 Twitter, Inc.</li>
</ul>
</p>
</modal>
<script src="angular.min.js"></script> <script src="angular.min.js"></script>

17
gui/modal.html Normal file
View 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>&emsp;Close</button>
</div>
</div>
</div>
</div>