From 4ff211662a31c5b7503b73dfae0fa6297100a5cf Mon Sep 17 00:00:00 2001
From: Ben Schulz <uok@users.noreply.github.com>
Date: Fri, 5 Dec 2014 18:44:38 +0100
Subject: [PATCH] Folder/device panel header with progress indicator

---
 AUTHORS                      |  1 +
 gui/assets/css/overrides.css | 20 ++++++++++++++++----
 gui/index.html               |  3 +++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/AUTHORS b/AUTHORS
index 5f19d0480..e46900345 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -5,6 +5,7 @@ Alexander Graf <register-github@alex-graf.de>
 Andrew Dunham <andrew@du.nham.ca>
 Audrius Butkevicius <audrius.butkevicius@gmail.com>
 Arthur Axel fREW Schmidt <frew@afoolishmanifesto.com> <frioux@gmail.com>
+Ben Schulz <ueomkail@gmail.com>
 Ben Sidhom <bsidhom@gmail.com>
 Brandon Philips <brandon@ifup.org>
 Caleb Callaway <enlightened.despot@gmail.com>
diff --git a/gui/assets/css/overrides.css b/gui/assets/css/overrides.css
index 5220cc2f8..a84175eaa 100644
--- a/gui/assets/css/overrides.css
+++ b/gui/assets/css/overrides.css
@@ -28,6 +28,19 @@ ul+h5 {
     margin-top: 1.5em;
 }
 
+.panel-progress {
+    background: #3498db;
+    height: 3px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    display: block;
+}
+
+.panel-title {
+    position: relative;
+}
+
 identicon {
     display: inline-block;
     position: relative;
@@ -46,15 +59,14 @@ identicon {
 }
 
 .identicon {
-    width: 30px;
-    height: 30px;
+    width: 20px;
+    height: 20px;
 }
 
 .panel-heading .identicon {
     display: block;
     position: absolute;
-    top: -4px;
-    left: -9px;
+    top: 1px;
 }
 
 .panel-heading {
diff --git a/gui/index.html b/gui/index.html
index 60d12087e..2b0335e51 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -91,6 +91,7 @@
         <div class="panel-group" id="folders">
           <div class="panel panel-default" ng-repeat="folder in folderList()">
             <div class="panel-heading" data-toggle="collapse" data-parent="#folders" href="#folder-{{$index}}" style="cursor: pointer">
+              <div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.ID)}}%"></div>
               <h3 class="panel-title">
                 <span class="glyphicon glyphicon-hdd"></span>&emsp;{{folder.ID}}
                 <span class="pull-right hidden-xs text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
@@ -232,6 +233,7 @@
         <div class="panel-group" id="devices">
           <div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()">
             <div class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}" style="cursor: pointer">
+              <div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.DeviceID]._total | number:0}}%"></div>
               <h3 class="panel-title">
                 <identicon data-value="deviceCfg.DeviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
                 <span ng-switch="deviceStatus(deviceCfg)" class="pull-right hidden-xs text-{{deviceClass(deviceCfg)}}">
@@ -807,6 +809,7 @@
           <li>Alexander Graf</li>
           <li>Arthur Axel fREW Schmidt</li>
           <li>Audrius Butkevicius</li>
+          <li>Ben Schulz</li>
           <li>Ben Sidhom</li>
           <li>Brandon Philips</li>
           <li>Caleb Callaway</li>