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

FIX Remove css fields animation on add 🔧

Browse Source
This commit is contained in:
Sacha Judd 2017-06-30 17:11:36 +12:00
parent 9edc5c3230
commit c1afb3a5bf
3 changed files with 17 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/UserForm_cms.css
View File

@ -1,14 +1,6 @@
/**
* Animations
*/
@keyframes rowSlide {
0% {
top: 20%;
}
100% {
top: 80%;
}
}
@keyframes flashBackground {
0% {
background-color: white;
@ -42,10 +34,6 @@
.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;
}

26
javascript/FieldEditor.js
View File

@ -8,8 +8,8 @@
$(".uf-field-editor tbody").entwine({
onmatch: function() {
var i,
thisLevel,
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),
@ -17,7 +17,7 @@
self = this;
this._super();
// Loop through all rows and set necessary styles
this.find('.ss-gridfield-item').each(function() {
switch($(this).data('class')) {
@ -37,7 +37,7 @@
thisLevel = depth;
}
}
$(this).toggleClass('inFieldGroup', thisLevel > 0);
for(i = 1; i <= 5; i++) {
$(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i);
@ -76,7 +76,7 @@
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 () {
@ -92,19 +92,11 @@
$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');
$newField.addClass('flashBackground');
$(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
if($groupEnd) {
$groupEnd.css('visibility', 'visible');
}
// Once the animation has completed
setTimeout(function () {
$newField.removeClass('newField').addClass('flashBackground');
$(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
if($groupEnd) {
$groupEnd.css('visibility', 'visible');
}
}, 500);
});
});
},

26
scss/UserForm_cms.scss
View File

@ -2,11 +2,6 @@
* Animations
*/
@keyframes rowSlide {
0% {top: 20%;}
100% {top: 80%;}
}
@keyframes flashBackground {
0% {background-color: white;}
10% {background-color: #dcfedd;}
@ -30,11 +25,11 @@
&, &:hover {
background: white;
}
td {
border-right-width: 0;
border-top: 1px solid #EEE;
&:last-child {
border-right-width: 1px;
}
@ -44,11 +39,6 @@
min-height: 46px;
}
&.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
&.flashBackground {
animation: flashBackground 2s linear;
}
@ -62,24 +52,24 @@
&, &:hover {
background: #f2f9fd;
}
td {
border-bottom: 0;
border-top: 1px solid #eee;
}
.col-reorder, .handle {
background: #BEE0F8;
border-top: 0;
}
&.inFieldGroup-level-2 {
.col-reorder, .handle {
background: #99CEF4;
border-top: 0;
}
}
&.inFieldGroup-level-3 {
.col-reorder, .handle {
background: #89BEF4;
@ -116,7 +106,7 @@
td {
border-top: 1px solid #a8d7f5;
}
label {
font-weight: bold;
color: #444;
@ -135,7 +125,7 @@
.col-buttons .action{
display: none;
}
label {
color: #777;
}