tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

Improve UX of adding fields

Browse Source
This commit is contained in:
scott1702 2015-08-20 12:37:00 +12:00
parent 5abf9f5212
commit 389ab6ce04
3 changed files with 136 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/UserForm_cms.css
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
*/
@ -20,6 +42,13 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle {
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 {
height: 50px;
}
@ -78,3 +107,18 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label {
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;
}

51
javascript/FieldEditor.js
View File

@ -4,9 +4,18 @@
(function($) {
$.entwine('ss', function($) {
var stickyHeaderInterval;
$(".uf-field-editor tbody").entwine({
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();
// Loop through all rows and set necessary styles
@ -34,9 +43,22 @@
$(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 () {
this._super();
clearInterval(stickyHeaderInterval);
}
});
@ -53,18 +75,39 @@
onmatch: function () {
var self = this;
this._super();
// When the 'Add field' button is clicked set a one time listener.
// When the GridField is reloaded focus on the newly added field.
this.on('addnewinline', function () {
self.one('reload', function () {
//If fieldgroup, focus on the start marker
if ($('.uf-field-editor .ss-gridfield-item').last().attr('data-class') === 'EditableFieldGroupEnd') {
$('.uf-field-editor .ss-gridfield-item').last().prev().find('.col-Title input').focus();
var $newField = self.find('.ss-gridfield-item').last()
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 {
$('.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();
}
});
});

48
scss/UserForm_cms.scss
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
*/
@ -28,10 +43,19 @@
.handle {
min-height: 46px;
}
}
.ss-gridfield-item.ui-sortable-placeholder {
height: 50px;
&.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
&.flashBackground {
animation: flashBackground 2s linear;
}
&.ui-sortable-placeholder {
height: 50px;
}
}
.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;
}
}
}
}