Add visual cues to configuration panels

Make it easier to recognize which plugins are enabled and which are
disabled. Also make it easier to recognize when a plugin has just changed
state, by flashing its row (help also realize it may have moved up/down)

Based on concept work by Petr Vobornik

Signed-off-by: Simo Sorce <simo@redhat.com>
Reviewed-by: Patrick Uiterwijk <puiterwijk@redhat.com>

2 files changed, 49 insertions, 46 deletions

diff --git a/templates/admin/plugins.html b/templates/admin/plugins.html
index 7ef50a0..54462b7 100644
--- a/templates/admin/plugins.html
+++ b/templates/admin/plugins.html
@@ -15,21 +15,27 @@
         </div>
     </div>
 
-    <table class="table">
     {% for p in enabled %}
-    <tr><td>
-      <div class="row">
+      {% set highlight = "hl-enabled" %}
+      {% if p in changed %}
+        {% if changed[p] == 'enabled' %}
+        {% set highlight = "hl-enabled-new" %}
+        {% elif changed[p] == 'reordered' %}
+        {% set highlight = "hl-enabled-flash" %}
+        {% endif %}
+      {% endif %}
+      <div class="row ipsilon-row {{ highlight }}">
         <div class="col-md-3 col-sm-3 col-xs-5">
-          <strong>{{ p }}</strong>
+          <p><strong>{{ p }}</strong></p>
         </div>
         <div class="col-md-7 col-sm-7 col-xs-5">
           <div class="row">
           <div class="col-md-6 col-sm-6 col-xs-12">
-              <a class="text-info" href="{{ baseurl }}/disable/{{ p }}">Disable</a>
+              <p class="text-info"><a href="{{ baseurl }}/disable/{{ p }}">Disable</a></p>
           </div>
           <div class="col-md-6 col-sm-6 col-xs-12">
             {%- if available[p].get_config_obj() %}
-              <a class="text-primary" href="{{ baseurl }}/{{ p }}">Configure</a>
+              <p class="text-primary"><a href="{{ baseurl }}/{{ p }}">Configure</a></p>
             {% endif %}
           </div>
           </div>
@@ -73,12 +79,16 @@
           {%- endif %}
         </div>
       </div>
-    </td></tr>
     {% endfor %}
 
     {% for p in available if not p in enabled %}
-    <tr><td>
-      <div class="row">
+      {% set highlight = "hl-disabled" %}
+      {% if p in changed %}
+        {% if changed[p] == 'disabled' %}
+        {% set highlight = "hl-disabled-new" %}
+        {% endif %}
+      {% endif %}
+      <div class="row ipsilon-row {{ highlight }}">
         <div class="col-md-3 col-sm-3 col-xs-5">
             <strong>{{ p }}</strong>
         </div>
@@ -97,12 +107,7 @@
         <div class="col-md-2 col-sm-2 col-xs-1">
         </div>
       </div>
-    </td></tr>
     {% endfor %}
 
-    <tr><td>
-    </td></tr>
-    </table>
-
 {% endif %}
 {% endblock %}
diff --git a/templates/admin/providers.html b/templates/admin/providers.html
index 333b10d..a0ca765 100644
--- a/templates/admin/providers.html
+++ b/templates/admin/providers.html
@@ -15,58 +15,56 @@
         </div>
     </div>
 
-    <hr>
-
-    {% for p in enabled %}
-      <div class="row">
+    {% for p in available %}
+      {%- if p in enabled %}
+        {%- set highlight = "hl-enabled" %}
+        {%- set actpath = "disable" %}
+        {%- set actlabel = "Disable" %}
+        {%- if p in changed %}
+          {%- if changed[p] == 'enabled' %}
+          {%- set highlight = "hl-enabled-new" %}
+          {%- endif %}
+        {%- endif %}
+      {%- else %}
+        {%- set highlight = "hl-disabled" %}
+        {%- set actpath = "enable" %}
+        {%- set actlabel = "Enable" %}
+        {%- if p in changed %}
+          {%- if changed[p] == 'disabled' %}
+          {%- set highlight = "hl-disabled-new" %}
+          {%- endif %}
+        {%- endif %}
+      {%- endif %}
+      <div class="row ipsilon-row {{ highlight }}">
         <div class="col-md-3 col-sm-3 col-xs-6">
           <p><strong>{{ p }}</strong></p>
         </div>
         <div class="col-md-9 col-sm-9 col-xs-6">
           <div class="row">
           <div class="col-md-4 col-sm-4 col-xs-12">
-              <p class="text-info"><a href="{{ baseurl }}/disable/{{ p }}">Disable</a></p>
+              <p class="text-info"><a href="{{ baseurl }}/{{ actpath }}/{{ p }}">{{ actlabel }}</a></p>
           </div>
           <div class="col-md-4 col-sm-4 col-xs-12">
             {%- if available[p].get_config_obj() %}
+              {%- if p in enabled %}
               <p class="text-primary"><a href="{{ baseurl }}/{{ p }}">Configure</a></p>
-            {% endif %}
-          </div>
-          <div class="col-md-4 col-sm-4 col-xs-12">
-            {%- if available[p].admin %}
-              <p class="text-primary"><a href="{{ baseurl }}/{{ p }}/admin">Manage</a></p>
-            {% endif %}
-          </div>
-          </div>
-        </div>
-      </div>
-      <hr>
-    {% endfor %}
-
-    {% for p in available if not p in enabled %}
-      <div class="row">
-        <div class="col-md-3 col-sm-3 col-xs-6">
-            <p><strong>{{ p }}</strong></p>
-        </div>
-        <div class="col-md-9 col-sm-9 col-xs-6">
-          <div class="row">
-          <div class="col-md-4 col-sm-4 col-xs-12">
-              <p class="text-info"><a href="{{ baseurl }}/enable/{{ p }}">Enable</a></p>
-          </div>
-          <div class="col-md-4 col-sm-4 col-xs-12">
-            {%- if available[p].get_config_obj() %}
+              {%- else %}
               <p class="text-muted">Configure</p>
-            {% endif %}
+              {%- endif %}
+            {%- endif %}
           </div>
           <div class="col-md-4 col-sm-4 col-xs-12">
             {%- if available[p].admin %}
+              {%- if p in enabled %}
+              <p class="text-primary"><a href="{{ baseurl }}/{{ p }}/admin">Manage</a></p>
+              {%- else %}
               <p class="text-muted">Manage</p>
+              {%- endif %}
             {% endif %}
           </div>
           </div>
         </div>
       </div>
-      <hr>
     {% endfor %}
 
 {% endif %}