Pretty up the Yammer import status display a bit

4 files changed, 66 insertions, 14 deletions

diff --git a/plugins/YammerImport/actions/yammeradminpanel.php b/plugins/YammerImport/actions/yammeradminpanel.php
index 2c9f412a2..12df3c202 100644
--- a/plugins/YammerImport/actions/yammeradminpanel.php
+++ b/plugins/YammerImport/actions/yammeradminpanel.php
@@ -175,32 +175,37 @@ class YammerAdminPanelForm extends AdminForm
         $steps = array_keys($labels);
         $currentStep = array_search($runner->state(), $steps);
 
+        $this->out->elementStart('div', array('class' => 'yammer-import'));
         foreach ($steps as $step => $state) {
             if ($step < $currentStep) {
                 // This step is done
-                $this->progressBar($labels[$state]['label'],
-                                   $labels[$state]['complete'],
-                                   'complete');
+                $this->progressBar($state,
+                                   'complete',
+                                   $labels[$state]['label'],
+                                   $labels[$state]['complete']);
             } else if ($step == $currentStep) {
                 // This step is in progress
-                $this->progressBar($labels[$state]['label'],
-                                   $labels[$state]['progress'],
-                                   'progress');
+                $this->progressBar($state,
+                                   'progress',
+                                   $labels[$state]['label'],
+                                   $labels[$state]['progress']);
             } else {
                 // This step has not yet been done.
-                $this->progressBar($labels[$state]['label'],
-                                   _m("Waiting..."),
-                                   'waiting');
+                $this->progressBar($state,
+                                   'waiting',
+                                   $labels[$state]['label'],
+                                   _m("Waiting..."));
             }
         }
+        $this->out->elementEnd('div');
     }
 
-    private function progressBar($label, $status, $class)
+    private function progressBar($state, $class, $label, $status)
     {
         // @fixme prettify ;)
-        $this->out->elementStart('div', array('class' => $class));
-        $this->out->element('p', array(), $label);
-        $this->out->element('p', array(), $status);
+        $this->out->elementStart('div', array('class' => "import-step import-step-$state $class"));
+        $this->out->element('div', array('class' => 'import-label'), $label);
+        $this->out->element('div', array('class' => 'import-status'), $status);
         $this->out->elementEnd('div');
     }
 
diff --git a/plugins/YammerImport/css/admin.css b/plugins/YammerImport/css/admin.css
index c1462237a..28d52d07c 100644
--- a/plugins/YammerImport/css/admin.css
+++ b/plugins/YammerImport/css/admin.css
@@ -1,11 +1,58 @@
+.yammer-import {
+    background-color: #eee;
+
+    border: solid 1px;
+    border-radius: 8px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -opera-border-radius: 8px;
+
+    padding: 16px;
+}
+
+.import-step {
+    padding: 8px;
+}
+.import-label {
+    font-weight: bold;
+}
+.import-status {
+    margin-left: 20px;
+    padding-left: 20px;
+}
+
+
 .waiting {
     color: #888;
 }
 
 .progress {
+    background-color: #fff;
+    border-radius: 8px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -opera-border-radius: 8px;
+}
+
+.progress .import-label {
     color: blue;
 }
 
-.done {
+.progress .import-status {
+    background-image: url(icon_processing.gif);
+    background-repeat: no-repeat;
+}
+
+.complete {
     color: black;
 }
+
+.complete .import-status {
+    background-image: url(done.png);
+    background-repeat: no-repeat;
+}
+
+.import-step-done .import-status {
+    /* override */
+    background: none !important;
+}
diff --git a/plugins/YammerImport/css/done.png b/plugins/YammerImport/css/done.png
new file mode 100644
index 000000000..1f3f41150
--- /dev/null
+++ b/plugins/YammerImport/css/done.png
diff --git a/plugins/YammerImport/css/icon_processing.gif b/plugins/YammerImport/css/icon_processing.gif
new file mode 100644
index 000000000..d0bce1542
--- /dev/null
+++ b/plugins/YammerImport/css/icon_processing.gif