diff --git a/css/UserForm_cms.css b/css/UserForm_cms.css index 0e71c13..f533cb8 100644 --- a/css/UserForm_cms.css +++ b/css/UserForm_cms.css @@ -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; +} diff --git a/javascript/FieldEditor.js b/javascript/FieldEditor.js index a336461..b2e6cf1 100644 --- a/javascript/FieldEditor.js +++ b/javascript/FieldEditor.js @@ -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(); } }); }); diff --git a/scss/UserForm_cms.scss b/scss/UserForm_cms.scss index 67277c6..43bd20d 100644 --- a/scss/UserForm_cms.scss +++ b/scss/UserForm_cms.scss @@ -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; + } + } } }