Merge pull request #2015 from michaelbukachi/bootstrap4

fix: Correct styling issues

examples/sqla/run_server.py

@@ -9,5 +9,6 @@ database_path = op.join(app_dir, app.config['DATABASE_FILE'])
 if not os.path.exists(database_path):
     build_sample_db()
 
-# Start app
-app.run(debug=True)
+if __name__ == '__main__':
+    # Start app
+    app.run(debug=True)

flask_admin/contrib/sqla/tools.py

@@ -203,7 +203,7 @@ def is_hybrid_property(model, attr_name):
             last_model = attr.property.argument
             if isinstance(last_model, _class_resolver):
                 last_model = model._decl_class_registry[last_model.arg]
-            elif isinstance(last_model, types.FunctionType):
+            elif isinstance(last_model, (types.FunctionType, types.MethodType)):
                 last_model = last_model()
         last_name = names[-1]
         return last_name in get_hybrid_properties(last_model)

flask_admin/menu.py

@@ -146,4 +146,4 @@ class MenuLink(BaseMenu):
 class SubMenuCategory(MenuCategory):
     def __init__(self, *args, **kwargs):
         super(SubMenuCategory, self).__init__(*args, **kwargs)
-        self.class_name += ' dropdown-submenu'
+        self.class_name += ' dropdown-submenu dropright'

flask_admin/static/vendor/multi-level-dropdowns-bootstrap/README.md

+# Bootstrap 4 Multiple Level Dropdown
+
+Using official HTML without adding extra CSS styles and classes, it's just like native support. 
+
+All things listed in https://getbootstrap.com/docs/4.4/components/dropdowns/ are not effected. You can use css classes and js methods/events/options freely.
+
+Dropdown of bootstrap can be easily changed to infinite level. It's a pity that they didn't do it.
+
+## Usage
+
+### Base
+Just add js after jquery and bootstrap js files 
+
+```html
+<script src="https://raw.githubusercontent.com/dallaslu/bootstrap-4-multi-level-dropdown/master/bootstrap4-dropdown-ml-hack.js"></script>
+```
+### Hover
+If your want a hover tigger, just add class and some custom styles to reduce spacing to avoid triggering mouseleave.
+```css
+.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu { margin:0 }
+```
+Then, add event handler (suggest 'toggle' for best experience):
+```javascript
+$('.dropdown-hover').on('mouseenter',function() {
+  if(!$(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover').on('mouseleave',function() {
+  if($(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover-all').on('mouseenter', '.dropdown', function() {
+  if(!$(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover-all').on('mouseleave', '.dropdown', function() {
+  if($(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+```
+Or just using:
+```html
+<link rel="stylesheet" href="https://raw.githubusercontent.com/dallaslu/bootstrap-4-multi-level-dropdown/master/bootstrap4-dropdown-ml-hack-hover.css" />
+...
+<div class="dropdown-hover-all">
+  <!-- .dropdown elements -->
+</div>
+<div class="dropdown dropdown-hover">
+  <!-- toggle and menu elements -->
+</div>
+...
+<script src="https://raw.githubusercontent.com/dallaslu/bootstrap-4-multi-level-dropdown/master/bootstrap4-dropdown-ml-hack-hover.js"></script>
+```
+
+## Demo
+
+Here is a perfect demo: https://jsfiddle.net/dallaslu/adky6jvs/ (works well with Bootstrap v4.4.1)

flask_admin/static/vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack-hover.css

+.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu { margin:0 }

flask_admin/static/vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack-hover.js

+$.fn.dropdown = (function() {
+    var $bsDropdown = $.fn.dropdown;
+    return function(config) {
+        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
+            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
+            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
+        }
+        var ret = $bsDropdown.call($(this), config);
+        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
+        return ret;
+    }
+})();
+
+$(function() {
+    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
+        $(this).dropdown('toggle');
+        e.stopPropagation(); // do not fire dropdown.js click event, it will call 'this.toggle()' internal
+    });
+    $('.dropdown').on('hide.bs.dropdown', function(e) {
+        if ($(this).is('.has-child-dropdown-show')) {
+        	$(this).removeClass('has-child-dropdown-show');
+            e.preventDefault();
+        }
+        e.stopPropagation();    // do not need pop in multi level mode
+    });
+});
+
+// for hover
+$('.dropdown-hover').on('mouseenter',function() {
+  if(!$(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover').on('mouseleave',function() {
+  if($(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover-all').on('mouseenter', '.dropdown', function() {
+  if(!$(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});
+$('.dropdown-hover-all').on('mouseleave', '.dropdown', function() {
+  if($(this).hasClass('show')){
+    $('>[data-toggle="dropdown"]', this).dropdown('toggle');
+  }
+});

flask_admin/static/vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack.js

+$.fn.dropdown = (function() {
+    var $bsDropdown = $.fn.dropdown;
+    return function(config) {
+        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
+            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
+            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
+        }
+        var ret = $bsDropdown.call($(this), config);
+        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
+        return ret;
+    }
+})();
+
+$(function() {
+    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
+        $(this).dropdown('toggle');
+        e.stopPropagation(); // do not fire dropdown.js click event, it will call 'this.toggle()' internal
+    });
+    $('.dropdown').on('hide.bs.dropdown', function(e) {
+        if ($(this).is('.has-child-dropdown-show')) {
+        	$(this).removeClass('has-child-dropdown-show');
+            e.preventDefault();
+        }
+        e.stopPropagation();    // do not need pop in multi level mode
+    });
+});

flask_admin/templates/bootstrap4/admin/base.html

@@ -19,7 +19,6 @@
         {% endif %}
         <link href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css', v='1.1.1') }}" rel="stylesheet">
         <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/font-awesome.min.css', v='4.7.0') }}" rel="stylesheet">
-        <link href="{{ admin_static.url(filename='admin/css/bootstrap4/submenu.css') }}" rel="stylesheet">
         {% if admin_view.extra_css %}
           {% for css_url in admin_view.extra_css %}
             <link href="{{ css_url }}" rel="stylesheet">
@@ -87,6 +86,7 @@
     <script src="{{ admin_static.url(filename='vendor/bootstrap4/dropdown.js', v='4.3.1') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='4.2.1') }}"
             type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack.js') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>
     {% if admin_view.extra_js %}
         {% for js_url in admin_view.extra_js %}

flask_admin/templates/bootstrap4/admin/layout.html

@@ -13,7 +13,9 @@
     {% endif %}
   {% endif %}
 {%- endmacro %}
+
 {% macro menu(menu_root=None) %}
+  {% set is_main_nav = menu_root == None %}
   {% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
   {%- for item in menu_root %}
     {%- if item.is_category() -%}
@@ -25,7 +27,7 @@
             {% else -%}
           <li class="dropdown{% if class_name %} {{ class_name }}{% endif %}">
         {%- endif %}
-      <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="javascript:void(0)">
+      <a class="dropdown-toggle {% if is_main_nav %}nav-link{% else %}dropdown-item{% endif %}" data-toggle="dropdown" href="javascript:void(0)">
         {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
         {{ menu_icon(item) }}{{ item.name }}
         {%- if 'dropdown-submenu' in class_name -%}

flask_admin/templates/bootstrap4/admin/model/list.html

@@ -52,7 +52,7 @@
         {% endif %}
 
         {% if search_supported %}
-        <li class="nav-item col-auto">
+        <li class="nav-item ml-2">
             {{ model_layout.search_form() }}
         </li>
         {% endif %}