Merge "Table filters and actions styling"

tuskar_ui/infrastructure/flavors/tables.py

@@ -73,6 +73,7 @@ class FlavorsTable(tables.DataTable):
                          DeleteFlavor,
                          flavor_tables.FlavorFilterAction)
         row_actions = (DeleteFlavor,)
+        template = "horizon/common/_enhanced_data_table.html"
 
 
 class FlavorRolesTable(tables.DataTable):
@@ -97,6 +98,7 @@ class FlavorRolesTable(tables.DataTable):
         verbose_name = _("Overcloud Roles")
         table_actions = ()
         row_actions = ()
+        template = "horizon/common/_enhanced_data_table.html"
 
 
 class FlavorSuggestionsTable(tables.DataTable):
@@ -112,3 +114,4 @@ class FlavorSuggestionsTable(tables.DataTable):
         verbose_name = _("Flavor Suggestions")
         table_actions = ()
         row_actions = (CreateSuggestedFlavor,)
+        template = "horizon/common/_enhanced_data_table.html"

tuskar_ui/infrastructure/history/tables.py

@@ -34,3 +34,4 @@ class HistoryTable(tables.DataTable):
         multi_select = False
         table_actions = ()
         row_actions = ()
+        template = "horizon/common/_enhanced_data_table.html"

tuskar_ui/infrastructure/images/tables.py

@@ -68,3 +68,4 @@ class ImagesTable(tables.DataTable):
         table_actions = (DeleteImage,
                          ImageFilterAction)
         row_actions = (EditImage, DeleteImage)
+        template = "horizon/common/_enhanced_data_table.html"

tuskar_ui/infrastructure/nodes/tables.py

@@ -150,6 +150,7 @@ class RegisteredNodesTable(tables.DataTable):
         table_actions = (NodeFilterAction, SetPowerStateOn, SetPowerStateOff,
                          DeleteNode)
         row_actions = (SetPowerStateOn, SetPowerStateOff, DeleteNode)
+        template = "horizon/common/_enhanced_data_table.html"
 
     def get_object_id(self, datum):
         return datum.uuid
@@ -180,6 +181,7 @@ class MaintenanceNodesTable(tables.DataTable):
         verbose_name = _("Nodes (Maintenance)")
         table_actions = (NodeFilterAction, ActivateNode, DeleteNode)
         row_actions = (ActivateNode, DeleteNode,)
+        template = "horizon/common/_enhanced_data_table.html"
 
     def get_object_id(self, datum):
         return datum.uuid

tuskar_ui/infrastructure/parameters/tables.py

@@ -32,3 +32,4 @@ class ParametersTable(tables.DataTable):
         verbose_name = _("Service Configuration")
         table_actions = ()
         row_actions = ()
+        template = "horizon/common/_enhanced_data_table.html"

tuskar_ui/infrastructure/roles/tables.py

@@ -52,6 +52,7 @@ class RolesTable(tables.DataTable):
         verbose_name = _("Deployment Roles")
         table_actions = ()
         row_actions = (UpdateRole,)
+        template = "horizon/common/_enhanced_data_table.html"
 
 
 class NodeTable(nodes_tables.RegisteredNodesTable):
@@ -61,3 +62,4 @@ class NodeTable(nodes_tables.RegisteredNodesTable):
         verbose_name = _("Nodes")
         table_actions = ()
         row_actions = ()
+        template = "horizon/common/_enhanced_data_table.html"

tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss

@@ -1,31 +1,9 @@
 // buttons
-.btn,
+.btn-default:not(.btn-danger) {
-input {
-  border-radius: 2px;
-}
-
-.btn-group .btn:first-child {
-  border-radius: 2px 0 0 2px;
-}
-
-.btn-group .btn:last-child {
-  border-radius: 0 2px 2px 0;
-}
-
-.btn:not(.btn-danger) {
   background: rgb(243, 243, 243);
-
   &:hover {
     background: rgb( 235, 235, 235);
   }
-
-  &.btn-primary {
-    background: #0088cc;
-
-    &:hover {
-      background: #006Dcc;
-    }
-  }
 }
 
 .btn-toolbar.pull-right {

tuskar_ui/infrastructure/static/infrastructure/scss/_tables.scss

@@ -0,0 +1,75 @@
+// Some tables should not have a title because it just repeats the page title.
+.no-table-title tr.table_caption {
+    display: none;
+}
+
+tr.table_actions_row {
+  th.table_header {
+    background: #f9f9f9;
+    border-top-width: 2px !important;
+    .table_actions {
+      float: none;
+      .table_search, .table_filter {
+        .filter_select {
+          display: inline-block;
+          position: relative;
+          background: rgb(243, 243, 243);
+          margin-right: -4px;
+          &:after, &:before {
+            left: 100%;
+            top: 50%;
+            border: solid transparent;
+            content: " ";
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            z-index: 3;
+          }
+
+          &:after {
+            border-color: rgba(243, 243, 243, 0);
+            border-left-color: #f3f3f3;
+            border-width: 14px;
+            margin-top: -14px;
+          }
+          &:before {
+            border-color: rgba(204, 204, 204, 0);
+            border-left-color: #cccccc;
+            border-width: 16px;
+            margin-top: -16px;
+          }
+          select {
+            overflow:hidden;
+            width: 120%;
+            border-right: none;
+            box-shadow: none;
+            background: transparent;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+          .caret {
+            position: absolute;
+            right: 0;
+            top: 47%;
+          }
+        }
+        input[type="text"] {
+          padding-right: 5px;
+        }
+        input.filter_select_input {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          border-left: none;
+          padding-left: 20px;
+          &:focus {
+            box-shadow: none;
+          }
+        }
+      }
+      .table_actions_buttons {
+        display: inline-block;
+      }
+    }
+  }
+}

tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss

@@ -1,6 +1,6 @@
 /* Additional CSS for infrastructure. */
-@import "/bootstrap/scss/bootstrap/variables";
 @import "/dashboard/scss/variables";
+@import "/bootstrap/scss/bootstrap/variables";
 
 @import "_numberpicker";
 @import "_breadcrumbs";
@@ -10,8 +10,4 @@
 @import "_formsets";
 @import "_index_pages";
 @import "_individual_pages";
-
+@import "_tables";
-// Some tables should not have a title because it just repeats the page title.
-.no-table-title h3.table_title {
-    display: none;
-}

tuskar_ui/infrastructure/templates/horizon/common/_data_table_table_actions.html

@@ -0,0 +1,68 @@
+{% load i18n %}
+<div class="table_actions">
+{% block table_filter %}
+    {% if filter.filter_type == 'fixed' %}
+    <div class="table_filter btn-group" data-toggle="buttons-radio">
+        {% for button in filter.fixed_buttons %}
+        <button name="{{ filter.get_param_name }}" type="submit" value="{{ button.value }}" class="btn btn-default btn-sm{% ifequal button.value filter.filter_string %} active{% endifequal %}">{% if button.icon %}<i class="{{ button.icon }}"></i> {% endif %}{{ button.text }}{% if button.count >= 0 %} ({{ button.count }}){% endif %}</button>
+        {% endfor %}
+    </div>
+    {% elif filter.filter_type == 'query' %}
+    <div class="table_search client">
+        <div class="form-group input-group">
+          <input class="form-control" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />
+          <span class="input-group-btn">
+            <button class="btn btn-default" type="submit" {{ filter.attr_string|safe }}>
+              <span class="glyphicon glyphicon-search"></span>
+            </button>
+          </span>
+        </div>
+    </div>
+    {% elif filter.filter_type == 'server' %}
+    <div class="table_search">
+      <div class="filter_select">
+        <select name="{{ filter.get_param_name }}_field" class="form-control">
+          {% for choice in filter.filter_choices %}
+          <option value="{{ choice.0 }}" {% if choice.0 == filter.filter_field %} selected{% endif %}>{{ choice.1 }}</option>
+          {% endfor %}
+        </select>
+        <span class="caret"></span>
+      </div>
+      <div class="form-group input-group">
+        <input class="form-control filter_select_input" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />
+        <span class="input-group-btn">
+          <button class="btn btn-default" type="submit" {{ filter.attr_string|safe }}>
+            <span class="glyphicon glyphicon-search"></span>
+          </button>
+        </span>
+      </div>
+    </div>
+    {% endif %}
+{% endblock table_filter %}
+{% block table_actions %}
+  <div class="table_actions_buttons pull-right">
+    {% for action in table_actions_buttons %}
+      {%  include "horizon/common/_data_table_table_action.html" %}
+    {% endfor %}
+    {% if table_actions_menu|length > 0 %}
+      <div class="btn-group table_actions_menu">
+        <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
+          {% if table_actions_buttons|length > 0 %}
+            {% trans "More Actions" %}
+          {% else %}
+            {% trans "Actions" %}
+          {% endif %}
+          <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu clearfix">
+        {% for action in table_actions_menu %}
+          <li class="clearfix">
+            {% include "horizon/common/_data_table_table_action.html" %}
+          </li>
+        {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  </div>
+{% endblock table_actions %}
+</div>

tuskar_ui/infrastructure/templates/horizon/common/_enhanced_data_table.html

@@ -0,0 +1,16 @@
+{% extends "horizon/common/_data_table.html" %}
+
+{% block table_caption %}
+  <tr class='table_caption'>
+    <th class='table_header' colspan='{{ columns|length }}'>
+      <h3 class='table_title'>{{ table }}</h3>
+    </th>
+  </tr>
+  {% if table.get_table_actions %}
+  <tr class='table_actions_row'>
+    <th class='table_header' colspan='{{ columns|length }}'>
+      {{ table.render_table_actions }}
+    </th>
+  </tr>
+  {% endif %}
+{% endblock table_caption %}