Skip to content

F
flask-admin
Unverified Commit 7ab5de3e authored by Serge S. Koval's avatar Serge S. Koval Committed by GitHub
Browse files
Options

Merge pull request #2014 from TitaniumHocker/bootstrap4 

Bootstrap4 ui fixes
parents 348c1c6f 2795581c
Show whitespace changes
Inline Side-by-side
Showing with 254 additions and 51 deletions
flask_admin/static/admin/js/bs4_filters.js 0 → 100644
View file @ 7ab5de3e
var AdminFilters = function(element, filtersElement, filterGroups, activeFilters) {
var $root = $(element);
var $container = $('.filters', $root);
var lastCount = 0;
function getCount(name) {
var idx = name.indexOf('_');
if (idx === -1) {
return 0;
}
return parseInt(name.substr(3, idx - 3), 10);
}
function makeName(name) {
var result = 'flt' + lastCount + '_' + name;
lastCount += 1;
return result;
}
function removeFilter() {
$(this).closest('tr').remove();
if($('.filters tr').length == 0) {
$('button', $root).hide();
$('a[class=btn]', $root).hide();
$('.filters tbody').remove();
} else {
$('button', $root).show();
}
return false;
}
// triggered when the filter operation (equals, not equals, etc) is changed
function changeOperation(subfilters, $el, filter, $select) {
// get the filter_group subfilter based on the index of the selected option
var selectedFilter = subfilters[$select.select2('data').element[0].index];
var $inputContainer = $el.find('td').last();
// recreate and style the input field (turn into date range or select2 if necessary)
var $field = createFilterInput($inputContainer, null, selectedFilter);
styleFilterInput(selectedFilter, $field);
$('button', $root).show();
}
// generate HTML for filter input - allows changing filter input type to one with options or tags
function createFilterInput(inputContainer, filterValue, filter) {
if (filter.type == "select2-tags") {
var $field = $('<input type="hidden" class="filter-val form-control" />').attr('name', makeName(filter.arg));
$field.val(filterValue);
} else if (filter.options) {
var $field = $('<select class="filter-val" />').attr('name', makeName(filter.arg));
$(filter.options).each(function() {
// for active filter inputs with options, add "selected" if there is a matching active filter
if (filterValue && (filterValue == this[0])) {
$field.append($('<option/>')
.val(this[0]).text(this[1]).attr('selected', true));
} else {
$field.append($('<option/>')
.val(this[0]).text(this[1]));
}
});
} else {
var $field = $('<input type="text" class="filter-val form-control" />').attr('name', makeName(filter.arg));
$field.val(filterValue);
}
inputContainer.replaceWith($('<td/>').append($field));
return $field;
}
// add styling to input field, accommodates filters that change the input field's HTML
function styleFilterInput(filter, field) {
if (filter.type) {
if ((filter.type == "datepicker") || (filter.type == "daterangepicker")) {
field.attr('data-date-format', "YYYY-MM-DD");
} else if ((filter.type == "datetimepicker") || (filter.type == "datetimerangepicker")) {
field.attr('data-date-format', "YYYY-MM-DD HH:mm:ss");
} else if ((filter.type == "timepicker") || (filter.type == "timerangepicker")) {
field.attr('data-date-format', "HH:mm:ss");
} else if (filter.type == "select2-tags") {
var options = [];
if (filter.options) {
filter.options.forEach(function(option) {
options.push({id:option[0], text:option[1]});
});
// save tag options as json on data attribute
field.attr('data-tags', JSON.stringify(options));
}
}
faForm.applyStyle(field, filter.type);
} else if (filter.options) {
filter.type = "select2";
faForm.applyStyle(field, filter.type);
}
return field;
}
function addFilter(name, subfilters, selectedIndex, filterValue) {
var $el = $('<tr class="form-horizontal" />').appendTo($container);
// Filter list
$el.append(
$('<td/>').append(
$('<a href="#" class="btn btn-secondary remove-filter" />')
.append($('<span class="close-icon">&times;</span>'))
.append('&nbsp;')
.append(name)
.click(removeFilter)
)
);
// Filter operation <select> (equal, not equal, etc)
var $select = $('<select class="filter-op" />');
// if one of the subfilters are selected, use that subfilter to create the input field
var filterSelection = 0;
$.each(subfilters, function( subfilterIndex, subfilter ) {
if (this.index == selectedIndex) {
$select.append($('<option/>').attr('value', subfilter.arg).attr('selected', true).text(subfilter.operation));
filterSelection = subfilterIndex;
} else {
$select.append($('<option/>').attr('value', subfilter.arg).text(subfilter.operation));
}
});
$el.append(
$('<td/>').append($select)
);
// select2 for filter-op (equal, not equal, etc)
$select.select2({width: 'resolve'}).on("change", function(e) {
changeOperation(subfilters, $el, filter, $select);
});
// get filter option from filter_group, only for new filter creation
var filter = subfilters[filterSelection];
var $inputContainer = $('<td/>').appendTo($el);
var $newFilterField = createFilterInput($inputContainer, filterValue, filter).focus();
var $styledFilterField = styleFilterInput(filter, $newFilterField);
return $styledFilterField;
}
// Add Filter Button, new filter
$('a.filter', filtersElement).click(function() {
var name = ($(this).text().trim !== undefined ? $(this).text().trim() : $(this).text().replace(/^\s+|\s+$/g,''));
addFilter(name, filterGroups[name], false, null);
$('button', $root).show();
});
// on page load - add active filters
$.each(activeFilters, function( activeIndex, activeFilter ) {
var idx = activeFilter[0],
name = activeFilter[1],
filterValue = activeFilter[2];
var $activeField = addFilter(name, filterGroups[name], idx, filterValue);
});
// show "Apply Filter" button when filter input is changed
$('.filter-val', $root).on('input change', function() {
$('button', $root).show();
});
$('.remove-filter', $root).click(removeFilter);
$('.filter-val', $root).not('.select2-container').each(function() {
var count = getCount($(this).attr('name'));
if (count > lastCount)
lastCount = count;
});
lastCount += 1;
};
(function($) {
$('[data-role=tooltip]').tooltip({
html: true,
placement: 'bottom'
});
if ($('#filter-groups-data').length == 1) {
var filter = new AdminFilters(
'#filter_form', '.field-filters',
JSON.parse($('#filter-groups-data').text()),
JSON.parse($('#active-filters-data').text())
);
}
})(jQuery);
flask_admin/static/vendor/x-editable/js/bootstrap4-editable.min.js
View file @ 7ab5de3e
This source diff could not be displayed because it is too large. You can view the blob instead.
flask_admin/templates/bootstrap4/admin/file/list.html
View file @ 7ab5de3e
...@@ -4,21 +4,23 @@ ...@@ -4,21 +4,23 @@
{% block body %} {% block body %}
{% block breadcrums %} {% block breadcrums %}
<ul class="breadcrumb"> <nav area-label="breadcrumb">
<li> <ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{{ get_dir_url('.index_view', path=None) }}">{{ _gettext('Root') }}</a> <a href="{{ get_dir_url('.index_view', path=None) }}">{{ _gettext('Root') }}</a>
</li> </li>
{% for name, path in breadcrumbs[:-1] %} {% for name, path in breadcrumbs[:-1] %}
<li> <li class="breadcrumb-item">
<a href="{{ get_dir_url('.index_view', path=path) }}">{{ name }}</a> <a href="{{ get_dir_url('.index_view', path=path) }}">{{ name }}</a>
</li> </li>
{% endfor %} {% endfor %}
{% if breadcrumbs %} {% if breadcrumbs %}
<li> <li class="breadcrumb-item">
<a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">{{ breadcrumbs[-1][0] }}</a> <a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">{{ breadcrumbs[-1][0] }}</a>
</li> </li>
{% endif %} {% endif %}
</ul> </ol>
</nav>
{% endblock %} {% endblock %}
{% block file_list_table %} {% block file_list_table %}
...@@ -144,27 +146,27 @@ ...@@ -144,27 +146,27 @@
<div class="btn-group"> <div class="btn-group">
{%- if admin_view.upload_modal -%} {%- if admin_view.upload_modal -%}
{{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True), {{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True),
btn_class="btn btn-default btn-large", btn_class="btn btn-secondary",
content=_gettext('Upload File')) }} content=_gettext('Upload File')) }}
{% else %} {% else %}
<a class="btn btn-default btn-large" href="{{ get_dir_url('.upload', path=dir_path) }}">{{ _gettext('Upload File') }}</a> <a class="btn btn-secondary" href="{{ get_dir_url('.upload', path=dir_path) }}">{{ _gettext('Upload File') }}</a>
{%- endif -%} {%- endif -%}
</div> </div>
{% endif %} {% endif %}
{% if admin_view.can_mkdir %} {% if admin_view.can_mkdir %}
<div class="btn-group"> <div class="mx-1">
{%- if admin_view.mkdir_modal -%} {%- if admin_view.mkdir_modal -%}
{{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True), {{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True),
btn_class="btn btn-default btn-large", btn_class="btn btn-secondary",
content=_gettext('Create Directory')) }} content=_gettext('Create Directory')) }}
{% else %} {% else %}
<a class="btn btn-default btn-large" href="{{ get_dir_url('.mkdir', path=dir_path) }}">{{ _gettext('Create Directory') }}</a> <a class="btn btn-secondary" href="{{ get_dir_url('.mkdir', path=dir_path) }}">{{ _gettext('Create Directory') }}</a>
{%- endif -%} {%- endif -%}
</div> </div>
{% endif %} {% endif %}
{% if actions %} {% if actions %}
<div class="btn-group"> <div class="mx-1">
{{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-default btn-large') }} {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-secondary') }}
</div> </div>
{% endif %} {% endif %}
</div> </div>
...@@ -185,4 +187,5 @@ ...@@ -185,4 +187,5 @@
{{ actionslib.script(_gettext('Please select at least one file.'), {{ actionslib.script(_gettext('Please select at least one file.'),
actions, actions,
actions_confirmation) }} actions_confirmation) }}
<script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
{% endblock %} {% endblock %}
flask_admin/templates/bootstrap4/admin/file/modals/form.html
View file @ 7ab5de3e
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
{% block body %} {% block body %}
{# content added to modal-content #} {# content added to modal-content #}
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
{% block header %}<h3>{{ header_text }}</h3>{% endblock %} {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
{% block fa_form %} {% block fa_form %}
...@@ -15,5 +15,5 @@ ...@@ -15,5 +15,5 @@
{% endblock %} {% endblock %}
{% block tail %} {% block tail %}
<script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script> <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
{% endblock %} {% endblock %}
flask_admin/templates/bootstrap4/admin/model/details.html
View file @ 7ab5de3e
...@@ -4,29 +4,29 @@ ...@@ -4,29 +4,29 @@
{% block body %} {% block body %}
{% block navlinks %} {% block navlinks %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li> <li class="nav-item">
<a href="{{ return_url }}">{{ _gettext('List') }}</a> <a class="nav-link" href="{{ return_url }}">{{ _gettext('List') }}</a>
</li> </li>
{%- if admin_view.can_create -%} {%- if admin_view.can_create -%}
<li> <li class="nav-item">
<a href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a> <a class="nav-link" href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a>
</li> </li>
{%- endif -%} {%- endif -%}
{%- if admin_view.can_edit -%} {%- if admin_view.can_edit -%}
<li> <li class="nav-item">
<a href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Edit') }}</a> <a class="nav-link" href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Edit') }}</a>
</li> </li>
{%- endif -%} {%- endif -%}
<li class="active"> <li class="nav-item">
<a href="javascript:void(0)">{{ _gettext('Details') }}</a> <a class="nav-link active disabled" href="javascript:void(0)">{{ _gettext('Details') }}</a>
</li> </li>
</ul> </ul>
{% endblock %} {% endblock %}
{% block details_search %} {% block details_search %}
<div class="input-group fa_filter_container col-lg-6"> <div class="form-inline fa_filter_container col-lg-6">
<span class="input-group-addon">{{ _gettext('Filter') }}</span> <label for="fa_filter">{{ _gettext('Filter') }}</label>
<input id="fa_filter" type="text" class="form-control"> <input id="fa_filter" type="text" class="ml-3 form-control">
</div> </div>
{% endblock %} {% endblock %}
......
flask_admin/templates/bootstrap4/admin/model/layout.html
View file @ 7ab5de3e
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
{% endmacro %} {% endmacro %}
{% macro search_form(input_class="col-md-4") %} {% macro search_form(input_class="col-auto") %}
<form method="GET" action="{{ return_url }}" class="form-inline my-2 my-lg-0" role="search"> <form method="GET" action="{{ return_url }}" class="form-inline my-2 my-lg-0" role="search">
{% for flt_name, flt_value in filter_args.items() %} {% for flt_name, flt_value in filter_args.items() %}
<input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}"> <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
...@@ -69,30 +69,35 @@ ...@@ -69,30 +69,35 @@
<input type="hidden" name="desc" value="{{ sort_desc }}"> <input type="hidden" name="desc" value="{{ sort_desc }}">
{% endif %} {% endif %}
{% if search %} {% if search %}
<div class="input-group"> <div class="form-inline input-group">
<input class="form-control mr-sm-2 {{ input_class }}" size="30" type="text" name="search" value="{{ search }}" <input class="form-control {{ input_class }}" size="30" type="text" name="search" value="{{ search }}"
placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}"> placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
<a href="{{ clear_search_url }}" class="input-group-addon clear"><span <div class="input-group-append">
class="fa fa-times glyphicon glyphicon-remove"></span></a> <span class="input-group-text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> <a href="{{ clear_search_url }}" class="align-middle">
<span class="fa fa-times glyphicon glyphicon-remove"></span>
</a>
</span>
</div>
<button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
</div> </div>
{% else %} {% else %}
<div class="form-group"> <div class="form-inline">
<input class="form-control mr-sm-2 {{ input_class }}" size="30" type="text" name="search" value="" <input class="form-control {{ input_class }}" size="30" type="text" name="search" value=""
placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}"> placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
</div> </div>
{% endif %} {% endif %}
</form> </form>
{% endmacro %} {% endmacro %}
{% macro page_size_form(generator, btn_class='dropdown-toggle') %} {% macro page_size_form(generator, btn_class='nav-link dropdown-toggle') %}
<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)"> <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
{{ page_size }} {{ _gettext('items') }}<b class="caret"></b> {{ page_size }} {{ _gettext('items') }}<b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="{{ generator(20) }}">20 {{ _gettext('items') }}</a></li> <a class="dropdown-item{% if page_size == 20 %} active{% endif %}" href="{{ generator(20) }}">20 {{ _gettext('items') }}</a>
<li><a href="{{ generator(50) }}">50 {{ _gettext('items') }}</a></li> <a class="dropdown-item{% if page_size == 50 %} active{% endif %}" href="{{ generator(50) }}">50 {{ _gettext('items') }}</a>
<li><a href="{{ generator(100) }}">100 {{ _gettext('items') }}</a></li> <a class="dropdown-item{% if page_size == 100 %} active{% endif %}" href="{{ generator(100) }}">100 {{ _gettext('items') }}</a>
</ul> </div>
{% endmacro %} {% endmacro %}
flask_admin/templates/bootstrap4/admin/model/list.html
View file @ 7ab5de3e
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
{% endif %} {% endif %}
{% if search_supported %} {% if search_supported %}
<li class="nav-item"> <li class="nav-item col-auto">
{{ model_layout.search_form() }} {{ model_layout.search_form() }}
</li> </li>
{% endif %} {% endif %}
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
{% endif %} {% endif %}
<script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script> <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
<script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script> <script src="{{ admin_static.url(filename='admin/js/bs4_filters.js', v='1.0.0') }}"></script>
{{ lib.form_js() }} {{ lib.form_js() }}
{{ actionlib.script(_gettext('Please select at least one record.'), {{ actionlib.script(_gettext('Please select at least one record.'),
......
flask_admin/templates/bootstrap4/admin/rediscli/console.html
View file @ 7ab5de3e
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="console"> <div class="console">
<div class="console-container"> <div class="console-container">
</div> </div>
<div class="console-line"> <div class="console-line mb-4">
<form action="#"> <form action="#">
<input type="text"></input> <input type="text"></input>
</form> </form>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment