Skip to content

Commit

Permalink
updated material version (#80)
Browse files Browse the repository at this point in the history 
* updated material version

* updated fields except select

* updated select fields

* removed most css, because bmd takes care of this

* removed blue borders/backgrounds

* fix datetimepicker

* Fix bold labels

* Fix line through input field

* Fix radio and checkbox padding

* Halfway solution to proper long labels

* removed blue from radio and checkbox

* fixed (error) coloring, made labels float again

* Updated tests

* Styling and script fixes

 * don't execute onLegalFormChange if nothing has changed
 * increase setTimeout delays

* Fixed money input margin

* Fix long label wrapping

* Fix selectize label (little hacky)

* Remove floating label and move event function

* Fix tests
  • Loading branch information
@MitchelKerckhaert @Sarfaraaz
MitchelKerckhaert authored and Sarfaraaz committed Dec 18, 2017
1 parent deec766 commit 1833ef4
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 106 deletions.
177 changes: 123 additions & 54 deletions css/material.css
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,104 @@
/** Fix input font family **/
.material .form-group input,
.material .form-group textarea,
.material .form-group select,
.material .selectize-input {
font-family: "Proxima Nova", Montserrat, sans-serif;
font-weight: 300;
font-family: "Proxima Nova", Montserrat, sans-serif;
font-weight: 300;
}

.material .form-control {
font-size: 14px;
}

/** Fix inputs labels **/
.material .form-group {
margin: 0;
}

.material .form-group.label-floating label.control-label,
.material .form-group.label-placeholder label.control-label {
height: auto;
position: static;
overflow: hidden;
font-size: 14px;
margin-bottom: -36px;
padding-top: 26px;
width: 100%;
line-height: 1.42857143;
transform: scale(0.75);
transform-origin: 0 -80px;
.material .form-group .form-control:focus,
.material .form-group .selectize-control {
box-shadow: none;
}
.material .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.material .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
transform: scale(1);
font-size: 14px;


.material .form-group:not(.has-error) .form-control:not(.selectize-dropdown):not(.selectize-control) {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 2px,
rgba(0, 150, 136, 0) 2px),
linear-gradient(to top,
rgba(0, 0, 0, 0.26) 1px, transparent 1px);
}

.material .form-group .input-group-addon {
font-size: 14px;
line-height: inherit;
padding: 7px 12px 14px 12px;
background: none;
border: none;

.material .has-error .check {
border-color: rgb(244, 67, 54) !important;
}

.material .form-group .input-group-addon:last-child ,
.material .form-group .input-group-btn {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%);
transition: background .3s ease;
.material .has-error .checkbox label {
color: rgb(244, 67, 54) !important;
}

.material .form-group.is-empty:not(.is-focused) .input-group-addon:last-child ,
.material .form-group.is-empty:not(.is-focused) .input-group-btn {
background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 30%);
.material .has-error input,
.material .has-danger input {
color: rgb(244, 67, 54) !important;
background-image: linear-gradient(to top, rgba(244, 67, 54, 0.6) 2px,
rgba(0, 150, 136, 0) 2px),
linear-gradient(to top,
rgb(244, 67, 54) 1px, transparent 1px) !important;
}

.material .has-error .input-group-addon,
.material .has-danger .input-group-addon {
border: none;
background: transparent;
}

.material .form-group.is-empty:not(.is-focused) .input-group .input-group-addon:first-child {
visibility: hidden;
.material .has-error label,
.material .has-danger label {
color: rgb(244, 67, 54);
}

.material .form-group.is-focused label,
.material .form-group.is-focused label.control-label {
color: rgba(0, 0, 0, 0.7) !important;
.material .form-group.is-focused:not(.has-error) label.form-control-label {
color: rgba(0, 0, 0, 0.8);
}

.material .form-group.label-floating.is-focused .form-control:not(.selectize-dropdown) {
background-image: -webkit-linear-gradient(#333, #333), webkit-linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#333, #333), linear-gradient(#D2D2D2, #D2D2D2);
.material .form-group:hover:not(.is-focused) label.form-control-label {
color: rgba(0, 0, 0, 0.6);
}

.form-control, .form-group .form-control.selectize-dropdown {
background-image: none;
.material .form-group .selectize-control .selectize-input {
padding: 6px 0px;
border: none;
border-radius: 0px;
box-shadow: none;
background: transparent;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 1px,
rgba(0, 150, 136, 0) 1px),
linear-gradient(to top,
rgba(0, 0, 0, 0.26) 1px, transparent 1px);
}

.form-group .form-control.selectize-control .selectize-input {
.material .form-group .bmd-label-floating {
z-index: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 16px;
}

input, .form-control {
color: rgba(0, 0, 0, 1);
.material .form-group.is-focused .bmd-label-floating {
max-height: 12px;
}

.material .form-group.label-floating .input-group-btn {
padding-right: 0;
.material .form-group .selectize-control .selectize-dropdown {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
border: none;
color: rgba(0, 0, 0, 0.87);
}

.material .form-group.label-floating .input-group-btn .btn {
text-transform: none;
border-bottom: 1px solid #ccc;
.material .dropdown-item.active,
.material .dropdown-item.active:focus,
.material .dropdown-item.active:hover {
background-color: rgb(238, 238, 238);
color: rgb(33, 33, 33);
}

/* Change form to material design */
Expand Down Expand Up @@ -228,6 +244,7 @@ input, .form-control {
color: rgba(0,0,0, 0.95) !important;
background: rgba(0, 0, 0, 0.1) !important;
}

.material .btn-primary.btn-outline:active,
.material .btn-primary.btn-outline.active {
border-color: #b87430;
Expand All @@ -243,7 +260,59 @@ input, .form-control {
content: "";
}

.checkbox .checkbox-material,
label.checkbox-inline .checkbox-material {
margin-right: 10px;
.material .bootstrap-datetimepicker-widget.dropdown-menu {
opacity: initial;
transform: none;
transform-origin: none;
transition: none;
}

.material label {
font-weight: 300;
}

.material .form-group.has-danger .form-control,
.material .form-group.has-error .form-control {
box-shadow: none;
}

.material .radio label,
.material .checkbox label {
padding-left: 2.5rem;
}

.material .radio label input[type="radio"] ~ .bmd-radio-inner-circle,
.material .radio label input[type="radio"]:checked ~ .bmd-radio-inner-circle {
background-color: #757575;
border-color: #757575;
}

.material .radio label input[type="radio"]:checked ~ .bmd-radio-outer-circle{
border-color: #757575;
}

.material .checkbox label input[type="checkbox"]:checked + .checkbox-decorator .check,
.material .checkbox label input[type="checkbox"]:checked + .checkbox-decorator .check:before {
color: #757575;
border-color: #757575;
}

.material .selectize-dropdown {
padding: 0px;
}

.material .selectize-dropdown [data-selectable] {
padding: 16px;
}

.material .selectize-input {
min-height: 46px;
}

.material .selectize-input .item {
padding: 7px 0px;
}

.material .label-addon {
margin-left: calc(0.75rem + 1%);
}
8 changes: 4 additions & 4 deletions js/legalform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ function LegalForm($) {
if (input === null) return null;

if (data.label) {
label = (mode === 'build' ? '<label>' : '<label for="' + data.id + '">') + data.label + '' + (data.required ? ' <span class="required">*</span>' : '') + '</label>';
label = (mode === 'build' ? '<label>' : '<label for="' + data.id + '"') + (data.type === 'money' ? ' class="label-addon">' : '>') + data.label + '' + (data.required ? ' <span class="required">*</span>' : '') + '</label>';
}

// Build HTML
Expand Down Expand Up @@ -271,7 +271,7 @@ function LegalForm($) {
if (data.optionValue.length === 1) {
input_unit = strbind('<span class="input-group-addon">%s</span>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}');
} else {
input_unit = '\n' + strbind('<div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">%s <span class="caret"></span></button>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}') + '\n';
input_unit = '\n' + strbind('<div class="input-group-btn"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">%s </button>', mode === 'build' ? data.optionValue[0] : '{{ ' + data.name + '.unit }}') + '\n';
if (mode === 'use') {
input_unit += strbind('<ul class="dropdown-menu pull-right dropdown-select" data-name="%s" role="menu">', data.name + '.unit') + '\n'
input_unit += '{{# %s.amount == 1 ? meta.%s.singular : meta.%s.plural }}<li><a>{{ . }}</a></li>{{/ meta }}'.replace(/%s/g, data.name) + '\n';
Expand Down Expand Up @@ -380,7 +380,7 @@ function LegalForm($) {
if (data.optionsText && mode === 'use') data.name = data.value;

if (type === 'option') {
lines.push('<option value="" ' + (data.required ? 'disabled' : '') + '>&nbsp;</option>');
lines.push('<option class="dropdown-item" value="" ' + (data.required ? 'disabled' : '') + '>&nbsp;</option>');
}

for (var i = 0; i < keys.length; i++) {
Expand All @@ -390,7 +390,7 @@ function LegalForm($) {
if (!key) continue;

if (type === 'option') {
lines.push(strbind('<option value="%s">%s</option>', value, key));
lines.push(strbind('<option class="dropdown-item" value="%s">%s</option>', value, key));
} else {
var attr = $.extend({type: type}, mode === 'use' ? (value === null ? {checked: data.value} : {name: data.value, value: value}) : {name: data.name});
lines.push(strbind('<div class="option"><label><input data-id="%s" %s %s %s/> %s</label></div>', data.name, attrString(data, 'id;name;value;type'), attrString(attr, false), attrString(extra, false), key));
Expand Down
42 changes: 20 additions & 22 deletions js/ractive-legalform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,10 @@
* @param {string} keypath
*/
onChangeLegalForm: function (newValue, oldValue, keypath) {
if (newValue === oldValue) {
return;
}

if (this.isCondition(keypath)) {
this.onChangeCondition(newValue, oldValue, keypath);
}
Expand All @@ -100,7 +104,7 @@
this.updateExpressions(newValue, oldValue, keypath);

setTimeout($.proxy(this.rebuildWizard, this), 200);
setTimeout($.proxy(this.refreshLikerts, this), 0);
setTimeout($.proxy(this.refreshLikerts, this), 10);
},

/**
Expand Down Expand Up @@ -154,7 +158,7 @@
//Use timeout because of some ractive bug: expressions, that depend on setting key, may be not updated, or can even cause an error
setTimeout(function() {
ractive.set(name, newValue);
}, 0);
}, 10);
},

/**
Expand All @@ -173,6 +177,12 @@
});
},

refreshSelectizes: function () {
$('select').each(function() {
ractive.validation.handleValidation(this);
});
},

/**
* Rebuild the wizard
*/
Expand Down Expand Up @@ -210,6 +220,8 @@

metaRecursive(this.meta, $.proxy(this.initField, this));

setTimeout($.proxy(this.refreshSelectizes, this), 1);

this.on('complete', function() {
$('#doc').trigger('shown.preview');
})
Expand All @@ -226,15 +238,6 @@

$(this).datetimepicker({ locale: ractive.getLocale('short'), format: 'DD-MM-YYYY' });
$(e.target).closest('.input-group-addon').trigger('click');

//Fix material label
$(this).find(':input').on('focusout', function(e) {
if (e.target.value !== '') {
$(e.target).parent().parent().removeClass('is-empty');
} else {
$(e.target).parent().parent().addClass('is-empty');
}
});
});
},

Expand Down Expand Up @@ -330,9 +333,6 @@
var name = $(input).attr('name');

ractive.updateModel(name);

//Fix material design
$(e.target).parent().removeClass('is-empty');
});
},

Expand All @@ -352,20 +352,17 @@
render: {
option: function(item, escape) {
if (item.value === '' && $select.attr('required')) {
return '<div style="pointer-events: none; color: #aaa;">' + escape(item.text) + '</div>';
return '<div class="dropdown-item" style="pointer-events: none; color: #aaa;">' + escape(item.text) + '</div>';
}

return '<div>' + escape(item.text) + '</div>';
return '<div class="dropdown-item">' + escape(item.text) + '</div>';
}
},
onDropdownClose: function($dropdown) {
var value = ractive.get(name);

onChange: function(value) {
if (value !== '' && value !== null) {
$dropdown.parent().parent().removeClass('is-empty');
$($select).parent().parent().addClass('is-filled');
}
},
onChange: function(value) {

ractive.set(name, value);
ractive.validation.validateField($select);
$($select).change();
Expand Down Expand Up @@ -520,6 +517,7 @@
if (field.conditions && !ractive.get(conditionsField)) return;

var $element = $(ractive.elWizard).find('input[name="' + field.name + '"]');

if (!$element.hasClass('selectized')) return ractive.initExternalSourceSelectize($element, field); //Handle condition change

//Handle url change. Auto launch search with current shown field text
Expand Down
Loading

0 comments on commit 1833ef4

Please sign in to comment.