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 * Animations
*/ */
@keyframes rowSlide {
0% {
top: 20%;
}
100% {
top: 80%;
}
}
@keyframes flashBackground { @keyframes flashBackground {
0% { 0% {
background-color: white; background-color: white;
@ -42,10 +34,6 @@
.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 { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.flashBackground {
animation: flashBackground 2s linear; animation: flashBackground 2s linear;
} }

26
javascript/FieldEditor.js
View File

@ -8,8 +8,8 @@
$(".uf-field-editor tbody").entwine({ $(".uf-field-editor tbody").entwine({
onmatch: function() { onmatch: function() {
var i, var i,
thisLevel, thisLevel,
depth = 0, depth = 0,
$buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('stickyButtons'), $buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('stickyButtons'),
navHeight = $('.cms-content-header.north').height() + parseInt($('.stickyButtons').css('padding-top'), 10), navHeight = $('.cms-content-header.north').height() + parseInt($('.stickyButtons').css('padding-top'), 10),
@ -17,7 +17,7 @@
self = this; self = this;
this._super(); this._super();
// Loop through all rows and set necessary styles // Loop through all rows and set necessary styles
this.find('.ss-gridfield-item').each(function() { this.find('.ss-gridfield-item').each(function() {
switch($(this).data('class')) { switch($(this).data('class')) {
@ -37,7 +37,7 @@
thisLevel = depth; thisLevel = depth;
} }
} }
$(this).toggleClass('inFieldGroup', thisLevel > 0); $(this).toggleClass('inFieldGroup', thisLevel > 0);
for(i = 1; i <= 5; i++) { for(i = 1; i <= 5; i++) {
$(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i); $(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i);
@ -76,7 +76,7 @@
var self = this; var self = this;
this._super(); 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 () {
@ -92,19 +92,11 @@
$newField.find('.col-Title input').focus(); $newField.find('.col-Title input').focus();
} }
// animate the row positioning (add the first class) $newField.addClass('flashBackground');
if (document.createElement('div').style.animationName !== void 0) { $(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
$newField.addClass('newField'); 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 * Animations
*/ */
@keyframes rowSlide {
0% {top: 20%;}
100% {top: 80%;}
}
@keyframes flashBackground { @keyframes flashBackground {
0% {background-color: white;} 0% {background-color: white;}
10% {background-color: #dcfedd;} 10% {background-color: #dcfedd;}
@ -30,11 +25,11 @@
&, &:hover { &, &:hover {
background: white; background: white;
} }
td { td {
border-right-width: 0; border-right-width: 0;
border-top: 1px solid #EEE; border-top: 1px solid #EEE;
&:last-child { &:last-child {
border-right-width: 1px; border-right-width: 1px;
} }
@ -44,11 +39,6 @@
min-height: 46px; min-height: 46px;
} }
&.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
&.flashBackground { &.flashBackground {
animation: flashBackground 2s linear; animation: flashBackground 2s linear;
} }
@ -62,24 +52,24 @@
&, &:hover { &, &:hover {
background: #f2f9fd; background: #f2f9fd;
} }
td { td {
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.col-reorder, .handle { .col-reorder, .handle {
background: #BEE0F8; background: #BEE0F8;
border-top: 0; border-top: 0;
} }
&.inFieldGroup-level-2 { &.inFieldGroup-level-2 {
.col-reorder, .handle { .col-reorder, .handle {
background: #99CEF4; background: #99CEF4;
border-top: 0; border-top: 0;
} }
} }
&.inFieldGroup-level-3 { &.inFieldGroup-level-3 {
.col-reorder, .handle { .col-reorder, .handle {
background: #89BEF4; background: #89BEF4;
@ -116,7 +106,7 @@
td { td {
border-top: 1px solid #a8d7f5; border-top: 1px solid #a8d7f5;
} }
label { label {
font-weight: bold; font-weight: bold;
color: #444; color: #444;
@ -135,7 +125,7 @@
.col-buttons .action{ .col-buttons .action{
display: none; display: none;
} }
label { label {
color: #777; color: #777;
} }