gui: Modal tweaks

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3292
LGTM: AudriusButkevicius, calmh

44 files changed, 733 insertions, 945 deletions

diff --git a/gui/default/index.html b/gui/default/index.html
index a30e061f2..0c6e352c4 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -45,7 +45,7 @@
           </button>
         </li>
         <li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major">
-          <button type="button" class="btn navbar-btn btn-danger btn-sm" ng-click="upgradeMajor()">
+          <button type="button" class="btn navbar-btn btn-danger btn-sm" data-toggle="modal" data-target="#majorUpgrade">
             <span class="fa fa-arrow-circle-up"></span>
             <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
           </button>
@@ -65,7 +65,7 @@
           </a>
           <ul class="dropdown-menu">
             <li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
-            <li><a href="" ng-click="idDevice(thisDevice())"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
+            <li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
             <li class="divider"></li>
             <li><a href="" ng-click="shutdown()"><span class="fa fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li>
             <li><a href="" ng-click="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li>
@@ -75,7 +75,7 @@
                 <span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span>
               </a>
             </li>
-            <li><a href="" ng-click="about()"><span class="fa fa-fw fa-heart-o"></span>&nbsp;<span translate>About</span></a></li>
+            <li><a href="" data-toggle="modal" data-target="#about"><span class="fa fa-fw fa-heart-o"></span>&nbsp;<span translate>About</span></a></li>
             <li class="divider"></li>
             <li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li>
           </ul>
@@ -628,23 +628,23 @@
     </div>
   </nav>
 
-  <div network-error-dialog></div>
-  <div http-error-dialog></div>
-  <div restarting-dialog></div>
-  <div upgrading-dialog></div>
-  <div shutdown-dialog></div>
-  <div idqr-modal></div>
-  <div major-upgrade-modal></div>
-  <div edit-device-modal></div>
-  <div edit-folder-modal></div>
-  <div edit-ignores-modal></div>
-  <div settings-modal></div>
-  <div advanced-settings-modal></div>
-  <div usage-report-modal></div>
-  <div usage-report-preview-modal></div>
-  <div needed-files-modal></div>
-  <div failed-files-modal></div>
-  <div about-modal></div>
+  <ng-include src="'syncthing/core/networkErrorDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/core/httpErrorDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/core/restartingDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/core/upgradingDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/core/shutdownDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/device/idqrModalView.html'"></ng-include>
+  <ng-include src="'syncthing/device/editDeviceModalView.html'"></ng-include>
+  <ng-include src="'syncthing/folder/editFolderModalView.html'"></ng-include>
+  <ng-include src="'syncthing/folder/editIgnoresModalView.html'"></ng-include>
+  <ng-include src="'syncthing/settings/settingsModalView.html'"></ng-include>
+  <ng-include src="'syncthing/settings/advancedSettingsModalView.html'"></ng-include>
+  <ng-include src="'syncthing/usagereport/usageReportModalView.html'"></ng-include>
+  <ng-include src="'syncthing/usagereport/usageReportPreviewModalView.html'"></ng-include>
+  <ng-include src="'syncthing/transfer/neededFilesModalView.html'"></ng-include>
+  <ng-include src="'syncthing/transfer/failedFilesModalView.html'"></ng-include>
+  <ng-include src="'syncthing/core/majorUpgradeModalView.html'"></ng-include>
+  <ng-include src="'syncthing/core/aboutModalView.html'"></ng-include>
 
   <!-- vendor scripts -->
   <script src="vendor/jquery/jquery-2.2.2.js"></script>
@@ -657,52 +657,24 @@
 
   <!-- gui application code -->
   <script src="syncthing/core/module.js"></script>
-  <script src="syncthing/core/aboutModalDirective.js"></script>
   <script src="syncthing/core/alwaysNumberFilter.js"></script>
   <script src="syncthing/core/basenameFilter.js"></script>
   <script src="syncthing/core/binaryFilter.js"></script>
   <script src="syncthing/core/durationFilter.js"></script>
   <script src="syncthing/core/eventService.js"></script>
-  <script src="syncthing/core/httpErrorDialogDirective.js"></script>
   <script src="syncthing/core/identiconDirective.js"></script>
   <script src="syncthing/core/languageSelectDirective.js"></script>
   <script src="syncthing/core/lastErrorComponentFilter.js"></script>
   <script src="syncthing/core/localeService.js"></script>
-  <script src="syncthing/core/majorUpgradeModalDirective.js"></script>
   <script src="syncthing/core/modalDirective.js"></script>
   <script src="syncthing/core/naturalFilter.js"></script>
-  <script src="syncthing/core/networkErrorDialogDirective.js"></script>
   <script src="syncthing/core/pathIsSubDirDirective.js"></script>
   <script src="syncthing/core/popoverDirective.js"></script>
-  <script src="syncthing/core/restartingDialogDirective.js"></script>
   <script src="syncthing/core/selectOnClickDirective.js"></script>
-  <script src="syncthing/core/shutdownDialogDirective.js"></script>
   <script src="syncthing/core/syncthingController.js"></script>
   <script src="syncthing/core/tooltipDirective.js"></script>
   <script src="syncthing/core/uniqueFolderDirective.js"></script>
-  <script src="syncthing/core/upgradingDialogDirective.js"></script>
   <script src="syncthing/core/validDeviceidDirective.js"></script>
-
-  <script src="syncthing/device/module.js"></script>
-  <script src="syncthing/device/editDeviceModalDirective.js"></script>
-  <script src="syncthing/device/idqrModalDirective.js"></script>
-
-  <script src="syncthing/folder/module.js"></script>
-  <script src="syncthing/folder/editFolderModalDirective.js"></script>
-  <script src="syncthing/folder/editIgnoresModalDirective.js"></script>
-
-  <script src="syncthing/settings/module.js"></script>
-  <script src="syncthing/settings/settingsModalDirective.js"></script>
-  <script src="syncthing/settings/advancedSettingsModalDirective.js"></script>
-
-  <script src="syncthing/transfer/module.js"></script>
-  <script src="syncthing/transfer/failedFilesModalDirective.js"></script>
-  <script src="syncthing/transfer/neededFilesModalDirective.js"></script>
-
-  <script src="syncthing/usagereport/module.js"></script>
-  <script src="syncthing/usagereport/usageReportModalDirective.js"></script>
-  <script src="syncthing/usagereport/usageReportPreviewModalDirective.js"></script>
-
   <script src="assets/lang/valid-langs.js"></script>
   <script src="assets/lang/prettyprint.js"></script>
   <script src="meta.js"></script>
diff --git a/gui/default/modal.html b/gui/default/modal.html
index 0b552b234..636ca76b1 100644
--- a/gui/default/modal.html
+++ b/gui/default/modal.html
@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" ng-attr-data-backdrop="{{ close ? true : 'static' }}" ng-attr-data-keyboard="{{ Boolean(close) }}">
+<div class="modal fade" tabindex="-1" ng-attr-data-backdrop="{{ closeable == 'yes' ? true : 'static' }}" ng-attr-data-keyboard="{{ closeable == 'yes' ? true : false }}">
   <!--
   // Copyright (C) 2014 The Syncthing Authors.
   //
@@ -6,23 +6,17 @@
   // License, v. 2.0. If a copy of the MPL was not distributed with this file,
   // You can obtain one at http://mozilla.org/MPL/2.0/.
   -->
-  <div class="modal-dialog" ng-class="{'modal-lg': large}">
+  <div class="modal-dialog {{ large == 'yes' ? 'modal-lg' : '' }}">
     <div class="modal-content">
-      <div class="modal-header alert alert-{{status}}">
+      <div class="modal-header {{status == 'default' ? '' : 'alert alert-'+status }}">
         <h4 class="modal-title">
-          <div class="panel-icon">
-            <span ng-if="icon" class="fa fa-{{icon}}"></span>
+          <div ng-if="icon" class="panel-icon">
+            <span class="fa fa-{{icon}}"></span>
           </div>
           {{heading}}
         </h4>
       </div>
-      <div class="modal-body" ng-transclude>
-      </div>
-      <div ng-if="close" 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>
+      <div ng-transclude></div>
     </div>
   </div>
 </div>
diff --git a/gui/default/syncthing/app.js b/gui/default/syncthing/app.js
index 0c2370d1c..576de8d85 100644
--- a/gui/default/syncthing/app.js
+++ b/gui/default/syncthing/app.js
@@ -12,12 +12,7 @@ var syncthing = angular.module('syncthing', [
     'angularUtils.directives.dirPagination',
     'pascalprecht.translate',
 
-    'syncthing.core',
-    'syncthing.device',
-    'syncthing.folder',
-    'syncthing.settings',
-    'syncthing.transfer',
-    'syncthing.usagereport'
+    'syncthing.core'
 ]);
 
 var urlbase = 'rest';
diff --git a/gui/default/syncthing/core/aboutModalDirective.js b/gui/default/syncthing/core/aboutModalDirective.js
deleted file mode 100644
index f20bfa34e..000000000
--- a/gui/default/syncthing/core/aboutModalDirective.js
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('syncthing.core')
-    .directive('aboutModal', function () {
-        return {
-            restrict: 'A',
-            templateUrl: 'syncthing/core/aboutModalView.html'
-        };
-});
diff --git a/gui/default/syncthing/core/aboutModalView.html b/gui/default/syncthing/core/aboutModalView.html
index 7d78ba81f..5e1695d48 100644
--- a/gui/default/syncthing/core/aboutModalView.html
+++ b/gui/default/syncthing/core/aboutModalView.html
@@ -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>
diff --git a/gui/default/syncthing/core/httpErrorDialogDirective.js b/gui/default/syncthing/core/httpErrorDialogDirective.js
deleted file mode 100644
index ec95bb50a..000000000
--- a/gui/default/syncthing/core/httpErrorDialogDirective.js
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('syncthing.core')
-    .directive('httpErrorDialog', function () {
-        return {
-            restrict: 'A',
-            templateUrl: 'syncthing/core/httpErrorDialogView.html'
-        };
-});
diff --git a/gui/default/syncthing/core/httpErrorDialogView.html b/gui/default/syncthing/core/httpErrorDialogView.html
index 0ed1a9c12..5df93f25a 100644
--- a/gui/default/syncthing/core/httpErrorDialogView.html
+++ b/gui/default/syncthing/core/httpErrorDialogView.html
@@ -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>
diff --git a/gui/default/syncthing/core/majorUpgradeModalDirective.js b/gui/default/syncthing/core/majorUpgradeModalDirective.js
deleted file mode 100644
index e6ed01db6..000000000
--- a/gui/default/syncthing/core/majorUpgradeModalDirective.js
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('syncthing.core')
-    .directive('majorUpgradeModal', function () {
-        return {
-            restrict: 'A',
-            templateUrl: 'syncthing/core/majorUpgradeModalView.html'
-        };
-});
diff --git a/gui/default/syncthing/core/majorUpgradeModalView.html b/gui/default/syncthing/core/majorUpgradeModalView.html
index 1f672e0f0..8e66ec557 100644
--- a/gui/default/syncthing/core/majorUpgradeModalView.html
+++ b/gui/default/syncthing/core/majorUpgradeModalView.html
@@ -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>
diff --git a/gui/default/syncthing/core/modalDirective.js b/gui/default/syncthing/core/modalDirective.js
index dcf1c7011..e90f43f57 100644
--- a/gui/default/syncthing/core/modalDirective.js
+++ b/gui/default/syncthing/core/modalDirective.js
@@ -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;
diff --git a/gui/default/syncthing/core/networkErrorDialogDirective.js b/gui/default/syncthing/core/networkErrorDialogDirective.js
deleted file mode 100644
index bae20f6ba..000000000
--- a/gui/default/syncthing/core/networkErrorDialogDirective.js
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('syncthing.core')
-    .directive('networkErrorDialog', function () {
-        return {
-            restrict: 'A',
-            templateUrl: 'syncthing/core/networkErrorDialogView.html'
-        };
-});
diff --git a/gui/default/syncthing/core/networkErrorDialogView.html b/gui/default/syncthing/core/networkErrorDialogView.html
index 07a591393..032807643 100644
--- a/gui/default/syncthing/core/networkErrorDialogView.html
+++ b/