Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add version of baseframe-mui without select2. #242

Closed
wants to merge 10 commits into from
Closed

Add version of baseframe-mui without select2. #242

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
44dd97d
Add version of baseframe-mui without select2.
vidya-ram Nov 4, 2019
e572849
Add a class for select2 fields
vidya-ram Nov 4, 2019
d40ac98
When an item is selected from dropdown remove scroll class from body
vidya-ram Nov 4, 2019
b403edb
Fix the check for select2 in the template
vidya-ram Nov 6, 2019
cb9d96d
Enable select2 for SelectMultipleField
vidya-ram Nov 6, 2019
41d20f4
Fix the elif
vidya-ram Nov 6, 2019
30aa08b
Add select2 bundle
vidya-ram Nov 8, 2019
1b9350c
Merge branch 'master' into select2
vidya-ram Nov 13, 2019
7f31d82
Fix validator flags
jace Nov 13, 2019
b5c1b22
Add support for widget scripts hosted in widget itself
jace Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions baseframe/assets.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@
assets['select2-material.css'][Version('4.0.3')] = ('select2.css', 'baseframe/css/select2-baseframe-material.css')
assets['select2-material.js'][Version('4.0.3')] = {'requires': ['select2.js==4.0.3']}


assets['bootstrap-multiselect.css'][Version('0.9.13')] = 'baseframe/css/bootstrap-multiselect.css'
assets['bootstrap-multiselect.js'][Version('0.9.13')] = 'baseframe/js/bootstrap-multiselect.js'

Expand Down Expand Up @@ -334,12 +333,18 @@
'select2-baseframe.js',
'getdevicepixelratio.js'
]}
assets['extra-material.js'][Version('0.0.0')] = {'requires': [
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': [
'jquery.js<1.9.0',
Expand Down Expand Up @@ -376,16 +381,26 @@

assets['mui.js'][Version('0.9.21')] = 'baseframe/js/mui.js'
assets['baseframe-material.js'][Version('0.9.21')] = 'baseframe/js/baseframe-material.js'
assets['baseframe-mui.js'][Version(__version__)] = {'requires': [
'extra-material.js',
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==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__)] = {'requires': [
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'
]}
15 changes: 9 additions & 6 deletions baseframe/static/css/mui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3559,7 +3559,6 @@ h4, h5, h6 {

.content-wrapper {
position: relative;
z-index: 1;
padding-top: 50px;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed z-index of content wrapper div so that the select2 dropdown, which inside the this div can have an higher z-index than the fixed header

}

Expand Down Expand Up @@ -3830,12 +3829,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;
}
Copy link
Member Author

@vidya-ram vidya-ram Nov 4, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For select2 enabled select fields, hide the default mui select dropdown.


.listwidget ul, .listwidget ol {
list-style: none;
Expand Down Expand Up @@ -4031,8 +4034,8 @@ li p + ol {

@media (min-width: 768px) {
.alert {
margin-top: 1em;
margin-bottom: 1em;
margin-top: 15px;
margin-bottom: 15px;
}
}
.thumbnail {
Expand Down
6 changes: 1 addition & 5 deletions baseframe/static/css/select2-baseframe-material.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.mui-select__menu {
display: none!important;
}

.select2-container .select2-selection {
border: none;
border-radius: 0;
Expand All @@ -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;
Expand Down
21 changes: 10 additions & 11 deletions baseframe/static/js/baseframe-material.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
// 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) {
vidya-ram marked this conversation as resolved.
Show resolved Hide resolved
$('body').removeClass('mui-scroll-lock');
});

var cm_markdown_config = { mode: 'gfm',
lineNumbers: false,
Expand Down Expand Up @@ -186,13 +182,16 @@ window.Baseframe.Config = {
window.Baseframe.Forms = {
preventSubmitOnEnter: function(id){
$('#' + id).on("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
return false;
}
});
},
enableSelect2: function() {
$('.mui-select2 select').select2();
},
lastuserAutocomplete: function(options) {
var assembleUsers = function(users) {
return users.map(function(user){
Expand Down Expand Up @@ -463,5 +462,5 @@ $(function() {
$('body').on('click', '.alert__close', function () {
$(this).parents('.alert').fadeOut();
});

});
14 changes: 10 additions & 4 deletions baseframe/static/sass/baseframe-material/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
.mui-textfield,
.mui-radio,
.mui-checkbox {
margin-bottom: 5px;
margin-bottom: 5px;
}

.mui-textfield--float-label {
Expand Down Expand Up @@ -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, .listwidget ol {
Expand Down
1 change: 0 additions & 1 deletion baseframe/static/sass/baseframe-material/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,6 @@ and (orientation: landscape) {

.content-wrapper {
position: relative;
z-index: 1;
padding-top: 50px;
}

Expand Down
14 changes: 13 additions & 1 deletion baseframe/templates/baseframe/mui/forms.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ['SelectMultipleField', 'UserSelectField', 'UserSelectMultiField', 'AutocompleteField', 'AutocompleteMultipleField', 'GeonameSelectField', 'GeonameSelectMultiField'] and field.widget.html_tag not in ['ul', 'ol'] %}
<div class="mui-select select2">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To distinguish between select and select2 fields.
Incase of select2 enabled select, hide the default mui select dropdown.

{{ 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 %}
Expand Down Expand Up @@ -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({
Expand Down