gui: Improve layout of "out of sync" modal (fixes #3306)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3296

3 files changed, 52 insertions, 31 deletions

diff --git a/gui/dark/assets/css/theme.css b/gui/dark/assets/css/theme.css
index 15087aee0..2d03529fe 100644
--- a/gui/dark/assets/css/theme.css
+++ b/gui/dark/assets/css/theme.css
@@ -156,10 +156,26 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
 
 /* modal dialogs */
 .modal-header {
-    border-color: #222 !important;
+    border-bottom-color: #222 !important;
+}
+
+.modal-header:not(.alert) {
     background-color: #222;
 }
 
+.alert-info {
+    color: #222 !important;
+}
+
+.alert-warning {
+    color: #222 !important;
+}
+
+.alert-danger {
+    color: #222 !important;
+    background-color: #d62c1a !important;
+}
+
 .modal-content {
     border-color: #666 !important;
     border-width: 2px !important;
@@ -171,14 +187,6 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
     background-color: #111 !important;
 }
 
-.alert-warning {
-    background-color: #c29d0b !important;
-}
-
-.alert-danger {
-    background-color: #d62c1a !important;
-}
-
 .help-block {
     color: #aaa !important;
 }
@@ -230,4 +238,8 @@ code.ng-binding{
 
 .progress-bar-danger {
     background-color: #d62c1a !important;
-}
\ No newline at end of file
+}
+
+.progress .frontal {
+    color: #222;
+}
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index f128fa702..10ef4803f 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -93,7 +93,7 @@ ul+h5 {
 }
 
 .table td {
-    padding-left: 20px !important;
+    /*padding-left: 20px !important;*/
 }
 
 .table td.small-data {
diff --git a/gui/default/syncthing/transfer/neededFilesModalView.html b/gui/default/syncthing/transfer/neededFilesModalView.html
index e5c3ea9ab..a2b0b03f3 100644
--- a/gui/default/syncthing/transfer/neededFilesModalView.html
+++ b/gui/default/syncthing/transfer/neededFilesModalView.html
@@ -15,33 +15,42 @@
     <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="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}</td>
+        <td class="small-data col-xs-2">
+          <span class="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}
+        </td>
 
         <!-- Name -->
-        <td ng-if="f.type != 'queued'" tooltip data-original-title="{{f.name}}">{{f.name | basename}}</td>
-        <td ng-if="f.type == 'queued'">
-          <a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
-            <span class="fa fa-eject"></span>
-          </a>
-          <span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
+        <td class="small-data col-xs-6">
+          <span ng-if="f.type != 'queued'">
+            <span tooltip data-original-title="{{f.name}}">{{f.name | basename}}</span>
+          </span>
+          <span ng-if="f.type == 'queued'">
+            <a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
+              <span class="fa fa-eject"></span>
+            </a>
+            <span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
+          </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>
+        <td class="col-xs-4">
+          <div 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>
+          </div>
+          <div ng-if="f.type != 'progress' || f.action != 'sync' || !progress[neededFolder] || !progress[neededFolder][f.name]" class="text-right small-data">
+            <span ng-if="f.size > 0">{{f.size | 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>