This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push: new c9c6bca Improve superset list view content layout (#3031) c9c6bca is described below commit c9c6bcaabeab4127a601dfda69a1411d2893c1d5 Author: Grace Guo <grace....@airbnb.com> AuthorDate: Fri Aug 11 15:34:29 2017 -0700 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 | 77 +++++++++++++++++++++- .../templates/appbuilder/general/model/list.html | 18 +++++ .../appbuilder/general/widgets/base_list.html | 47 +++++++++++++ .../appbuilder/general/widgets/search.html | 56 ++++++++++++++++ 4 files changed, 197 insertions(+), 1 deletion(-) diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index bacc18a..fcdece9 100644 --- a/superset/assets/stylesheets/superset.less +++ b/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%; diff --git a/superset/templates/appbuilder/general/model/list.html b/superset/templates/appbuilder/general/model/list.html new file mode 100644 index 0000000..73710fd --- /dev/null +++ b/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 %} \ No newline at end of file diff --git a/superset/templates/appbuilder/general/widgets/base_list.html b/superset/templates/appbuilder/general/widgets/base_list.html new file mode 100644 index 0000000..69ebf14 --- /dev/null +++ b/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) %} + {{ 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 %} diff --git a/superset/templates/appbuilder/general/widgets/search.html b/superset/templates/appbuilder/general/widgets/search.html new file mode 100644 index 0000000..688936f --- /dev/null +++ b/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 <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> -- To stop receiving notification emails like this one, please contact ['"comm...@superset.apache.org" <comm...@superset.apache.org>'].