Merge pull request #302 from scott1702/feature/multi-page-forms-v2

Improve UX of adding fields
This commit is contained in:
David Craig 2015-08-20 17:27:03 +12:00
commit e4b1ddbd86
3 changed files with 136 additions and 7 deletions

View File

@ -1,3 +1,25 @@
/**
* Animations
*/
@keyframes rowSlide {
0% {
top: 20%;
}
100% {
top: 80%;
}
}
@keyframes flashBackground {
0% {
background-color: white;
}
10% {
background-color: #dcfedd;
}
70% {
background-color: #dcfedd;
}
}
/** /**
* Styles for cms * Styles for cms
*/ */
@ -20,6 +42,13 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle {
min-height: 46px; min-height: 46px;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.flashBackground {
animation: flashBackground 2s linear;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.ui-sortable-placeholder { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.ui-sortable-placeholder {
height: 50px; height: 50px;
} }
@ -78,3 +107,18 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label {
color: #777; color: #777;
} }
.cms .uf-field-editor .stickyButtons {
position: fixed;
top: 40px;
z-index: 2;
background: #E6EAED;
box-shadow: 0 12px 4px -8px #999;
padding: 12px;
margin-left: -12px;
}
.cms .uf-field-editor .stickyButtons button.action {
margin-bottom: 0;
}
.cms .uf-field-editor .stickyButtons ~ .ss-gridfield-table {
margin-top: 40px;
}

View File

@ -4,9 +4,18 @@
(function($) { (function($) {
$.entwine('ss', function($) { $.entwine('ss', function($) {
var stickyHeaderInterval;
$(".uf-field-editor tbody").entwine({ $(".uf-field-editor tbody").entwine({
onmatch: function() { onmatch: function() {
var i, thisLevel, depth = 0; var i,
thisLevel,
depth = 0,
$buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('stickyButtons'),
navHeight = $('.cms-content-header.north').height() + parseInt($('.stickyButtons').css('padding-top'), 10),
fieldEditor = $('.uf-field-editor'),
self = this;
this._super(); this._super();
// Loop through all rows and set necessary styles // Loop through all rows and set necessary styles
@ -34,9 +43,22 @@
$(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i); $(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i);
} }
}); });
// Make sure gridfield buttons stick to top of page when user scrolls down
stickyHeaderInterval = setInterval(function () {
var offsetTop = fieldEditor.offset().top;
$buttonrow.width(self.width());
if (offsetTop > navHeight || offsetTop === 0) {
$buttonrow.removeClass('stickyButtons');
} else {
$buttonrow.addClass('stickyButtons');
};
}, 300);
}, },
onunmatch: function () { onunmatch: function () {
this._super(); this._super();
clearInterval(stickyHeaderInterval);
} }
}); });
@ -53,18 +75,39 @@
onmatch: function () { onmatch: function () {
var self = this; var self = this;
this._super();
// When the 'Add field' button is clicked set a one time listener. // When the 'Add field' button is clicked set a one time listener.
// When the GridField is reloaded focus on the newly added field. // When the GridField is reloaded focus on the newly added field.
this.on('addnewinline', function () { this.on('addnewinline', function () {
self.one('reload', function () { self.one('reload', function () {
//If fieldgroup, focus on the start marker //If fieldgroup, focus on the start marker
if ($('.uf-field-editor .ss-gridfield-item').last().attr('data-class') === 'EditableFieldGroupEnd') { var $newField = self.find('.ss-gridfield-item').last()
$('.uf-field-editor .ss-gridfield-item').last().prev().find('.col-Title input').focus(); if ($newField.attr('data-class') === 'EditableFieldGroupEnd') {
var $groupEnd = $newField;
$groupEnd.prev().find('.col-Title input').focus();
$newField = $groupEnd.add($groupEnd.prev());
$groupEnd.css('visibility', 'hidden');
} else { } else {
$('.uf-field-editor .ss-gridfield-item:last-child .col-Title input').focus(); $newField.find('.col-Title input').focus();
} }
// animate the row positioning (add the first class)
if (document.createElement('div').style.animationName !== void 0) {
$newField.addClass('newField');
}
// Once the animation has completed
setTimeout(function () {
$newField.removeClass('newField').addClass('flashBackground');
$(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
$groupEnd.css('visibility', 'visible');
}, 500);
}); });
}); });
},
onummatch: function () {
this._super();
} }
}); });
}); });

View File

@ -1,3 +1,18 @@
/**
* Animations
*/
@keyframes rowSlide {
0% {top: 20%;}
100% {top: 80%;}
}
@keyframes flashBackground {
0% {background-color: white;}
10% {background-color: #dcfedd;}
70% {background-color: #dcfedd;}
}
/** /**
* Styles for cms * Styles for cms
*/ */
@ -28,10 +43,19 @@
.handle { .handle {
min-height: 46px; min-height: 46px;
} }
}
.ss-gridfield-item.ui-sortable-placeholder { &.newField {
height: 50px; position: fixed;
animation: rowSlide .5s ease forwards;
}
&.flashBackground {
animation: flashBackground 2s linear;
}
&.ui-sortable-placeholder {
height: 50px;
}
} }
.ss-gridfield-item.inFieldGroup { .ss-gridfield-item.inFieldGroup {
@ -117,6 +141,24 @@
} }
} }
} }
.stickyButtons {
position: fixed;
top: 40px;
z-index: 2;
background: #E6EAED;
box-shadow: 0 12px 4px -8px #999;
padding: 12px;
margin-left: -12px;
& button.action {
margin-bottom: 0;
}
~ .ss-gridfield-table {
margin-top: 40px;
}
}
} }
} }