Improve superset list view content layout (#3031)

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* improve superset list view page layout

- less header spaces and stacks
- move pagination down to bottom
- apply material design style to 'add' action button
- will apply to all superset list view, like slices list, security tab lists etc.

* remove tabs from indentation

* fix merge conflicts

* adjust css after code merge

superset/assets/stylesheets/superset.less

@@ -243,13 +243,88 @@ div.widget .slice_container {
 
 /** table on both sides of the gap **/
 .panel .table-responsive{
-    margin: 0 1%;
+    padding: 0 1%;
 }
 @media screen and (max-width: 767px) {
     .panel .table-responsive{
         width: 98%;
     }
 }
+
+.list-container {
+    position: relative;
+}
+
+.list-search-container {
+    position: relative;
+}
+
+.list-search-container .dropdown-toggle {
+    position: absolute;
+    top: -43px;
+    right: 25px;
+    border: 0;
+    padding: 0 18px;
+}
+
+.list-search-container .fa-filter {
+    position: relative;
+    left: -8px;
+}
+
+.list-search-container .dropdown-menu {
+    top: -19px;
+    right: 0;
+    left: auto;
+    float: none;
+}
+
+.list-container .pagination-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+}
+.list-container .pagination-container .pagination {
+    margin: 0 15px;
+}
+.list-container .pagination-container strong {
+    margin-right: 5px;
+}
+
+.list-container .list-add-action {
+    position: absolute;
+    top: -30px;
+    right: 15px;
+}
+
+.list-container .form-actions-container {
+    padding: 0  0 20px 10px;
+    display: inline;
+}
+
+.list-container .filter-action {
+    margin: 10px 10px 0 10px;
+    padding-bottom: 15px;
+}
+
+.list-container .filters-container table tr:first-child td {
+    border-top: none;
+}
+.list-container .filters-container table tr:last-child td {
+    border-bottom: 1px solid #b3b3b3;
+}
+
+.list-add-action .btn.btn-sm {
+  padding: 5px 6px;
+  font-size: 10px;
+  line-height: 2px;
+  border-radius: 50%;
+  box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 1);
+}
+
 iframe {
     border: none;
     width: 100%;

superset/templates/appbuilder/general/model/list.html

@@ -0,0 +1,18 @@
+{% extends "appbuilder/base.html" %}
+{% import 'appbuilder/general/lib.html' as lib %}
+
+{% block content %}
+ {{ lib.panel_begin(title) }}
+
+    <div class="panel-body list-container">
+    {% block list_search scoped %}
+        {{ widgets.get('search')()|safe }}
+    {% endblock %}
+
+    {% block list_list scoped %}
+        {{ widgets.get('list')()|safe }}
+    {% endblock %}
+    </div>
+
+ {{ lib.panel_end() }}
+{% endblock %}

superset/templates/appbuilder/general/widgets/base_list.html

@@ -0,0 +1,47 @@
+{% import 'appbuilder/general/lib.html' as lib %}
+
+{% set can_add = "can_add" | is_item_visible(modelview_name) %}
+{% set can_show = "can_show" | is_item_visible(modelview_name) %}
+{% set can_edit = "can_edit" | is_item_visible(modelview_name) %}
+{% set can_delete = "can_delete" | is_item_visible(modelview_name) %}
+{% set actions = actions | get_actions_on_list(modelview_name) %}
+
+{% if can_add %}
+    <span class="list-add-action">
+    {% set path = url_for(modelview_name + '.add') %}
+    {% set path = path | set_link_filters(filters) %}
+    &nbsp;{{ lib.lnk_add(path) }}
+    </span>
+{% endif %}
+
+{% if count > 0 %}
+
+    {% block begin_content scoped %}
+    {% endblock %}
+
+    {% block begin_loop_header scoped %}
+    {% endblock %}
+
+    {% block begin_loop_values %}
+    {% endblock %}
+
+    {% block end_content scoped %}
+    {% endblock %}
+
+<div class="form-actions-container">
+    {{ lib.render_actions(actions, modelview_name) }}
+</div>
+    {{ lib.action_form(actions,modelview_name) }}
+
+<div class="pagination-container pull-right">
+    <strong>{{ _('Record Count') }}:</strong> {{ count }}
+    {{ lib.render_pagination(page, page_size, count, modelview_name) }}
+    {{ lib.render_set_page_size(page, page_size, count, modelview_name) }}
+</div>
+    <script language="javascript">
+        var modelActions = new AdminActions();
+    </script>
+
+{% else %}
+    <b>{{_("No records found")}}</b>
+{% endif %}

superset/templates/appbuilder/general/widgets/search.html

@@ -0,0 +1,56 @@
+{% import 'appbuilder/general/lib.html' as lib %}
+
+<div class="list-search-container">
+    <form id="filter_form" class="form-search" method="get">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-filter text-primary" aria-hidden="true"></i> {{_("Add Filter")}}
+        </button>
+
+        <ul class="dropdown-menu">
+            {% for col in include_cols %}
+            <li><a href="javascript:void(0)" name={{col}} class="filter btn" onclick="return false;">
+                {{ label_columns[col] }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="filters-container">
+            <table class="table table-responsive table-hover filters">
+
+            </table>
+            <div class="filter-action" style="display:none">
+            <button type="submit" class="btn btn-sm btn-primary" id="search-action">
+                Search&nbsp;&nbsp;<i class="fa fa-search"></i>
+            </button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<script>
+(function($) {
+    function checkSearchButton() {
+        var hasFilter = $('.filters tr').length;
+        if (hasFilter) {
+            $('.filters a.remove-filter').off('click', checkSearchButton);
+            $('.filters a.remove-filter').on('click', checkSearchButton);
+            $('.filter-action').toggle(true);
+        } else {
+            $('.filter-action').toggle(false);
+        }
+    }
+
+    $('.list-search-container').on('hidden.bs.dropdown', checkSearchButton);
+    $(document).ready(function() {
+        checkSearchButton();
+    });
+
+    var filter = new AdminFilters(
+        '#filter_form',
+        {{ label_columns | tojson | safe }},
+        {{ form_fields | tojson | safe }},
+        {{ search_filters | tojson | safe }},
+        {{ active_filters | tojson | safe }}
+    );
+})(jQuery);
+
+</script>