gui: Improve layout of accordion titles

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

gui/dark/assets/css/theme.css

@@ -77,6 +77,10 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
     background-color: #222 !important;
 }
 
+.panel-progress {
+    background: #3498db;
+}
+
 .panel-footer {
     background-color: #111 !important;
     border-width: 0 !important;
@@ -94,6 +98,11 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
     fill: #aaa !important;
 }
 
+.panel-heading:hover, .panel-heading:focus {
+    text-decoration: none;
+}
+
+
 /* buttons */
 .btn {
     border-radius: 3px !important;

gui/default/assets/css/overrides.css

@@ -33,29 +33,6 @@ ul+h5 {
     display: block;
 }
 
-.panel-title {
-    position: relative;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-a.panel-heading:hover {
-    text-decoration: none;
-}
-
-identicon {
-    display: inline-block;
-    position: relative;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    margin-right: 5px;
-}
-
-.identicon {
-    width: 1em;
-    height: 1em;
-}
-
 .checkbox {
     margin-top: 0px;
 }
@@ -73,13 +50,8 @@ identicon {
     word-wrap:break-word;
 }
 
-.panel-heading .fa, .modal-header .fa {
+.modal-header .fa {
-    margin-right: 10px;
+    margin-right: 15px;
-}
-
-.panel-heading {
-    position: relative;
-    overflow: hidden;
 }
 
 .text-monospace {
@@ -183,6 +155,44 @@ table.table-condensed td.no-overflow-ellipse {
     margin-left: 60px;
 }
 
+/**
+ * Accordion Title bars
+ */
+
+.panel-icon{
+    float:left;
+    margin-right: 15px;
+}
+
+.panel-heading {
+    display: block;
+    cursor: pointer;
+    position: relative;
+}
+
+.panel-heading .panel-title-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.panel-heading .panel-status {
+    margin-left:15px;
+}
+
+identicon {
+    display: inline-block;
+    position: relative;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+}
+
+.identicon {
+    width: 1em;
+    height: 1em;
+}
+
 /**
  * Progress bars with centered text
  */

gui/default/assets/css/theme.css

@@ -19,3 +19,7 @@
     background-color: rgb(236, 240, 241);
     border-radius: 3px;
 }
+
+.panel-heading:hover, .panel-heading:focus {
+    text-decoration: none;
+}

gui/default/index.html

@@ -227,14 +227,14 @@
         <h3 translate>Folders</h3>
         <div class="panel-group" id="folders">
           <div class="panel panel-default" ng-repeat="folder in folderList()">
-            <a class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#folder-{{$index}}" style="cursor: pointer; display: block;">
+            <a class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#folder-{{$index}}">
               <div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.id)}}%"></div>
               <div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
               <h4 class="panel-title">
+                <div class="panel-icon">
                   <span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span>
-                <span ng-show="folder.label.length == 0">{{folder.id}}</span>
+                </div>
-                <span tooltip data-original-title="{{folder.id}}" ng-show="folder.label.length != 0">{{folder.label}}</span>
+                <div class="panel-status pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
-                <span class="pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
                   <span ng-switch-when="unknown"><span class="hidden-xs" translate>Unknown</span><span class="visible-xs">&#9724;</span></span>
                   <span ng-switch-when="unshared"><span class="hidden-xs" translate>Unshared</span><span class="visible-xs">&#9724;</span></span>
                   <span ng-switch-when="stopped"><span class="hidden-xs" translate>Stopped</span><span class="visible-xs">&#9724;</span></span>
@@ -251,7 +251,10 @@
                     ({{syncPercentage(folder.id)}}%)
                   </span>
                   <span ng-switch-when="outofsync"><span class="hidden-xs" translate>Out of Sync</span><span class="visible-xs">&#9724;</span></span>
-                </span>
+                </div>
+                <div class="panel-title-text">
+                  <span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span>
+                </div>
               </h4>
             </a>
             <div id="folder-{{$index}}" class="panel-collapse collapse">
@@ -399,9 +402,10 @@
       <div class="col-md-6">
         <h3 translate>This Device</h3>
         <div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]">
-          <a class="panel-heading" data-toggle="collapse" href="#device-this" style="cursor: pointer; display: block;">
+          <a class="panel-heading" data-toggle="collapse" href="#device-this">
             <h4 class="panel-title">
-              <identicon data-value="deviceCfg.deviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
+              <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
+              <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
             </h4>
           </a>
           <div id="device-this" class="panel-collapse collapse in">
@@ -474,10 +478,10 @@
         <h3 translate>Remote Devices</h3>
         <div class="panel-group" id="devices">
           <div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()">
-            <a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}" style="cursor: pointer; display: block;">
+            <a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}">
               <div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
               <h4 class="panel-title">
-                <identicon data-value="deviceCfg.deviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
+                <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>{{deviceName(deviceCfg)}}
                 <span ng-switch="deviceStatus(deviceCfg)" class="pull-right text-{{deviceClass(deviceCfg)}}">
                   <span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs">&#9724;</span></span>
                   <span ng-switch-when="syncing">