Flatten GUI tree somewhat

The very deep tree structure didn't really aggree with me, sorry. This
makes the core module rather large, but on the other hand that just
highlights that it is rather large.

gui/syncthing/transfer/failedFilesModalDirective.js

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

gui/syncthing/transfer/failedFilesModalView.html

@@ -0,0 +1,19 @@
+<modal id="failed" large="yes" status="warning" icon="exclamation-sign" close="yes" title="{{'Failed Items' | translate}}">
+  <p>
+    <span translate>The following items could not be synchronized.</span>
+    <span translate>They are retried automatically and will be synced when the error is resolved.</span>
+  </p>
+  <table class="table table-striped table-condensed">
+    <tr dir-paginate="e in failedCurrent | itemsPerPage: failedPageSize" current-page="failedCurrentPage" pagination-id="failed">
+      <td><abbr title="{{e.path}}">{{e.path | basename}}</abbr></td>
+      <td><abbr title="{{e.error}}">{{e.error | lastErrorComponent}}</abbr></td>
+    </tr>
+  </table>
+  <dir-pagination-controls on-page-change="failedPageChanged(newPageNumber)" pagination-id="failed"></dir-pagination-controls>
+  <ul class="pagination pull-right">
+    <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: failedPageSize == option }">
+      <a href="#" ng-click="failedChangePageSize(option)">{{option}}</a>
+    <li>
+  </ul>
+  <div class="clearfix"></div>
+</modal>

gui/syncthing/transfer/module.js

@@ -0,0 +1 @@
+angular.module('syncthing.transfer', []);

gui/syncthing/transfer/neededFilesModalDirective.js

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

gui/syncthing/transfer/neededFilesModalView.html

@@ -0,0 +1,54 @@
+<div id="needed" class="modal fade" large="yes" status="info" icon="cloud-download" close="yes" title="{{'Out of Sync Items' | translate}}" tabindex="-1">
+  <div class="progress">
+    <div class="progress-bar progress-bar-success" style="width: 20%"><span translate class="show">Reused</span></div>
+    <div class="progress-bar" style="width: 20%"><span translate class="show">Copied from original</span></div>
+    <div class="progress-bar progress-bar-info" style="width: 20%"><span translate class="show">Copied from elsewhere</span></div>
+    <div class="progress-bar progress-bar-warning" style="width: 20%"><span translate class="show">Downloaded</span></div>
+    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%"><span translate class="show">Downloading</span></div>
+  </div>
+
+  <hr/>
+
+  <table class="table table-striped table-condensed">
+
+    <tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededTotal" pagination-id="needed">
+      <!-- Icon -->
+      <td class="small-data"><span class="glyphicon glyphicon-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}</td>
+
+      <!-- Name -->
+      <td ng-if="f.type != 'queued'" title="{{f.name}}">{{f.name | basename}}</td>
+      <td ng-if="f.type == 'queued'">
+        <a href="" ng-click="bumpFile(neededFolder, f.name)" title="{{'Move to top of queue' | translate}}">
+          <span class="glyphicon glyphicon-eject"></span>
+        </a>
+        <span title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
+      </td>
+
+      <!-- Size/Progress -->
+      <td ng-if="f.type == 'progress' && f.action == 'sync' && progress[neededFolder] && progress[neededFolder][f.name]">
+        <div class="progress">
+          <div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.name].reused}}%"></div>
+          <div class="progress-bar" style="width: {{progress[neededFolder][f.name].copiedFromOrigin}}%"></div>
+          <div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.name].copiedFromElsewhere}}%"></div>
+          <div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.name].pulled}}%"></div>
+          <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: {{progress[neededFolder][f.name].pulling}}%"></div>
+          <span class="show frontal">
+            {{progress[neededFolder][f.name].bytesDone | binary}}B / {{progress[neededFolder][f.name].bytesTotal | binary}}B
+          </span>
+        </div>
+      </td>
+      <td class="text-right small-data" ng-if="f.type != 'progress' || f.action != 'sync' || !progress[neededFolder] || !progress[neededFolder][f.name]">
+        <span ng-if="f.size > 0">{{f.size | binary}}B</span>
+      </td>
+
+    </tr>
+  </table>
+
+  <dir-pagination-controls on-page-change="neededPageChanged(newPageNumber)" pagination-id="needed"></dir-pagination-controls>
+  <ul class="pagination pull-right">
+    <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: neededPageSize == option }">
+      <a href="#" ng-click="neededChangePageSize(option)">{{option}}</a>
+    <li>
+  </ul>
+  <div class="clearfix"></div>
+</div>