Merge b5c1b22 into ceace1d

baseframe/__init__.py

@@ -234,6 +234,16 @@ def init_app(
             filters=['cssrewrite', 'cssmin'],
             output='css/baseframe-packed.css',
         )
+        js_select2 = Bundle(
+            assets.require('!jquery.js', 'select2-material.js'),
+            filters='uglipyjs',
+            output='js/select2-material-packed.js',
+        )
+        css_select2 = Bundle(
+            assets.require('select2-material.css'),
+            filters=['cssrewrite', 'cssmin'],
+            output='css/select2-material-packed.css',
+        )
         if bundle_js:
             js_all = Bundle(js_all, bundle_js)
         if bundle_css:
@@ -246,6 +256,8 @@ def init_app(
         app.assets.register('js_jquery', assets.require('jquery.js'))
         app.assets.register('js_all', js_all)
         app.assets.register('css_all', css_all)
+        app.assets.register('js_select2', js_select2)
+        app.assets.register('css_select2', css_select2)
         app.register_blueprint(self, static_subdomain=subdomain)
 
         # Optional config for a client app to use a manifest file

baseframe/assets.py

@@ -611,14 +611,17 @@
         'getdevicepixelratio.js',
     ]
 }
-assets['extra-material.js'][Version('0.0.0')] = {
+assets['extra-material.js'][Version('0.1.0')] = {
     'requires': [
         'jquery-modal.js',
         'jquery.form.js',
         'select2-material.js',
         'getdevicepixelratio.js',
     ]
 }
+assets['extra-material.js'][Version('0.2.0')] = {
+    'requires': ['jquery-modal.js', 'jquery.form.js', 'getdevicepixelratio.js']
+}
 
 assets['baseframe.js'][Version(__version__)] = {
     'requires': [
@@ -665,16 +668,27 @@
 assets['baseframe-material.js'][
     Version('0.9.21')
 ] = 'baseframe/js/baseframe-material.js'
-assets['baseframe-mui.js'][Version(__version__)] = {
+assets['baseframe-mui.js'][Version('0.1.0')] = {
+    'requires': [
+        'extra-material.js==0.1.0',
+        'mui.js',
+        'jquery.tinymce.js>=4.0.0',
+        'baseframe-material.js',
+    ]
+}
+assets['baseframe-mui.js'][Version('0.2.0')] = {
     'requires': [
-        'extra-material.js',
+        'extra-material.js==0.2.0',
         'mui.js',
         'jquery.tinymce.js>=4.0.0',
         'baseframe-material.js',
     ]
 }
 
 assets['mui.css'][Version('0.9.21')] = 'baseframe/css/mui.css'
-assets['baseframe-mui.css'][Version(__version__)] = {
+assets['baseframe-mui.css'][Version('0.1.0')] = {
     'requires': ['jquery-modal.css', 'select2-material.css', 'mui.css']
 }
+assets['baseframe-mui.css'][Version('0.2.0')] = {
+    'requires': ['jquery-modal.css', 'mui.css']
+}

baseframe/forms/patch_wtforms.py

@@ -12,11 +12,15 @@
 
 
 def _patch_wtforms_add_flags():
+    """Patch WTForms validators as required (currently just one type of patch)"""
+
     def add_flags(validator, flags):
+        """Add more flags to existing WTForms validators"""
         validator.field_flags = tuple(flags) + tuple(
             getattr(validator, 'field_flags', ())
         )
 
+    # Patch the `EqualTo` validator to add a 'not_solo' flag on any field it is used on
     add_flags(wtforms.validators.EqualTo, ('not_solo',))
 
 
@@ -70,3 +74,36 @@ def field_init(
 
 _patch_wtforms_field_init()
 del _patch_wtforms_field_init
+
+
+def render_script(self, tag=True):
+    """
+    Render the JavaScript necessary (including script tag) for this field.
+
+    This delegates rendering to
+    :meth:`meta.render_field_script`
+    whose default behavior is to call the field's widget, passing any
+    keyword arguments from this call along to the widget.
+
+    :param bool tag: If False, don't include a ``<script>`` tag
+    """
+    return self.meta.render_field_script(self, tag)
+
+
+def meta_render_script(self, field, tag):
+    """
+    render_script allows customization of how widget rendering is done.
+
+    The default implementation calls ``field.widget.render_js(field, **render_kw)``
+    """
+    if hasattr(field.widget, 'render_script'):
+        return field.widget.render_script(field, tag)
+
+
+def _patch_wtforms_field_render():
+    wtforms.Field.render_script = render_script
+    wtforms.meta.DefaultMeta.render_field_script = meta_render_script
+
+
+_patch_wtforms_field_render()
+del _patch_wtforms_field_render

baseframe/forms/validators.py

@@ -124,6 +124,8 @@ class AllowedIf(object):
     :param str message: Validation error message. Will be formatted with an optional ``{field}}`` label
     """
 
+    field_flags = ('not_solo',)
+
     def __init__(self, fieldname, message=None):
         self.fieldname = fieldname
         self.message = message or __(u"This requires ‘{field}’ to be specified")
@@ -149,6 +151,8 @@ class OptionalIf(Optional):
     :param str message: Validation error message
     """
 
+    field_flags = ('not_solo',)
+
     def __init__(self, fieldname, message=None):
         super(OptionalIf, self).__init__()
         self.fieldname = fieldname
@@ -172,7 +176,7 @@ class RequiredIf(DataRequired):
     :param str message: Validation error message
     """
 
-    field_flags = set()
+    field_flags = ('not_solo',)
 
     def __init__(self, fieldname, message=None):
         message = message or __("This is required")
@@ -189,6 +193,7 @@ class _Comparison(object):
     Base class for validators that compare this field's value with another field
     """
 
+    field_flags = ('not_solo',)
     default_message = __("Comparison failed")
 
     def __init__(self, fieldname, message=None):

baseframe/static/css/mui.css

@@ -3761,7 +3761,6 @@ h6 {
 
 .content-wrapper {
   position: relative;
-  z-index: 1;
   padding-top: 50px;
 }
 
@@ -4037,12 +4036,16 @@ li p + ol {
   margin-top: 20px;
   margin-bottom: 0;
 }
-.mui-select > label {
-  top: -5px;
-}
 .mui-select .select2 {
   width: 100% !important;
 }
+.mui-select .mui-select__menu {
+  z-index: 1001;
+}
+
+.mui-select.select2 .mui-select__menu {
+  display: none !important;
+}
 
 .listwidget ul,
 .listwidget ol {

baseframe/static/css/select2-baseframe-material.css

@@ -1,7 +1,3 @@
-.mui-select__menu {
-	display: none!important;
-}
-
 .select2-container .select2-selection {
 	border: none;
 	border-radius: 0;
@@ -18,7 +14,7 @@
     box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
 }
 
-.select2-container.select2-container--focus .select2-selection, 
+.select2-container.select2-container--focus .select2-selection,
 .select2-container.select2-container--open .select2-selection {
 	box-shadow: none;
     border: none;

baseframe/static/js/baseframe-material.js

@@ -1,15 +1,10 @@
 // This is a global function. Isn't there a better way to do this?
 
 function activate_widgets() {
-  // Activate select2.js for non-mobile browsers
-  if (!Modernizr.touch) {
-    $('select:not(.notselect)').select2();
-
-    //Remove the scroll lock class added by mui.js on opening select menu
-    $('select:not(.notselect)').on('select2:select', function(e) {
-      $('body').removeClass('mui-scroll-lock');
-    });
-  }
+  //Remove the scroll lock class added by mui.js on opening select dropdown
+  $('select').on('select2:select', function(e) {
+    $('body').removeClass('mui-scroll-lock');
+  });
 
   var cm_markdown_config = {
     mode: 'gfm',
@@ -218,6 +213,9 @@ window.Baseframe.Forms = {
       }
     });
   },
+  enableSelect2: function() {
+    $('.mui-select2 select').select2();
+  },
   lastuserAutocomplete: function(options) {
     var assembleUsers = function(users) {
       return users.map(function(user) {

baseframe/static/sass/baseframe-material/_form.scss

@@ -97,12 +97,18 @@
 .mui-select {
   margin-top: $mui-form-group-margin-bottom;
   margin-bottom: 0;
-  > label {
-    top: -$mui-form-group-margin-bottom/4;
-  }
   .select2 {
     width: 100% !important;
   }
+  .mui-select__menu {
+    z-index: 1001; //Higher than the fixed header
+  }
+}
+
+.mui-select.select2 {
+  .mui-select__menu {
+    display: none !important;
+  }
 }
 
 .listwidget ul,

baseframe/static/sass/baseframe-material/_menu.scss

@@ -203,7 +203,6 @@
 
 .content-wrapper {
   position: relative;
-  z-index: 1;
   padding-top: 50px;
 }
 

baseframe/templates/baseframe/mui/formlayout.html.jinja2

@@ -1 +1,18 @@
 {% extends "layout.html.jinja2" -%}
+
+{%- block layoutheaders %}
+  {% assets "css_select2" -%}
+    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
+  {%- endassets -%}
+  {% block pageheaders %}{% endblock %}
+{% endblock %}
+
+{% block basecontent -%}
+  {% block content %}{% endblock %}
+{%- endblock %}
+
+{% block pagescripts %}
+  {% assets "js_select2" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+  {%- endassets -%}
+{% endblock %}

baseframe/templates/baseframe/mui/forms.html.jinja2

@@ -77,11 +77,21 @@
                 <label>{{ field.label.text }}</label>
               {%- endif %}
             </div>
-          {%- elif field.type in ['SelectField', 'QuerySelectField', 'SelectMultipleField', 'QuerySelectMultipleField', 'UserSelectField', 'UserSelectMultiField', 'AutocompleteField', 'AutocompleteMultipleField', 'GeonameSelectField', 'GeonameSelectMultiField'] and field.widget.html_tag not in ['ul', 'ol'] %}
+          {%- elif field.type in ['SelectField', 'QuerySelectField', 'QuerySelectMultipleField'] and field.widget.html_tag not in ['ul', 'ol'] %}
             <div class="mui-select">
               {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
               <label>{{ field.label.text }}</label>
             </div>
+          {%- elif field.type in ['SelectMultipleField'] and field.widget.html_tag not in ['ul', 'ol'] %}
+            <div class="mui-select mui-select2 select2">
+              {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
+              <label>{{ field.label.text }}</label>
+            </div>
+          {%- elif field.type in ['UserSelectField', 'UserSelectMultiField', 'AutocompleteField', 'AutocompleteMultipleField', 'GeonameSelectField', 'GeonameSelectMultiField'] and field.widget.html_tag not in ['ul', 'ol'] %}
+            <div class="mui-select select2">
+              {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
+              <label>{{ field.label.text }}</label>
+            </div>
           {%- else %}
             <div class="mui-textfield">
               {%- if not nolabel %}<label class="mui-form__label">{{ field.label.text }}</label>{%- endif %}
@@ -354,6 +364,8 @@
           document.getElementById("{{ ref_id }}").submit();
         }
       })
+    {%- elif field.type in ['SelectMultipleField'] %}
+      Baseframe.Forms.enableSelect2();
     {%- elif field.type in ['UserSelectField', 'UserSelectMultiField'] %}
       {%- if config['LASTUSER_CLIENT_ID'] and current_auth.cookie and 'sessionid' in current_auth.cookie %}
         Baseframe.Forms.lastuserAutocomplete({