Improve UX of adding fields

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;
+}

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') {
+						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 {
-							$('.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();
 			}
 		});
 	});

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,11 +43,20 @@
 				.handle {
 					min-height: 46px;
 				}
+
+				&.newField {
+					position: fixed;
+					animation: rowSlide .5s ease forwards;
 				}
 
-			.ss-gridfield-item.ui-sortable-placeholder {
+				&.flashBackground {
+					animation: flashBackground 2s linear;
+				}
+
+				&.ui-sortable-placeholder {
 					height: 50px;
 				}
+			}
 
 			.ss-gridfield-item.inFieldGroup {
 				&, &:hover {
@@ -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;
+			}
+		}
 	}
 }