Loading indicator for "more options" buttons

admin/css/screen.css

@@ -200,6 +200,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .cms .button-no-style button.ss-ui-action-destructive, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; }
 .cms .button-no-style button span, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; }
 .cms .button-no-style button:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; background: none; border: none; }
+.cms .button-no-style button.loading, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.loading { background: transparent url(../../images/network-save.gif) no-repeat 8px center; }
+.cms .button-no-style button.loading .ui-button-text, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.loading .ui-button-text { padding-left: 20px; }
 .cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
 .cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
 .cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; }
@@ -948,20 +950,20 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
 * styling should not apply 
 *
 **********************************************/
-.cms .ss-ui-action-tabset { float: left; position: relative; /* 
+.cms .ss-ui-action-tabset { float: left; position: relative; /*
 	Styles for the tab-nav of the site tree implementation 
 	of ss-ui-action-tabset 
 */ /* position a checkbox & icon within a tab */ /* Styles for the cms-actions in tree view, to use more limited space.
 Title hidden in tree view, until hover/active state added. Active is applied 
 to the first tab within the template, so there should always be one title 
-visible. Added and removed with js in TabSet.js  */ /****************************************************************	
+visible. Added and removed with js in TabSet.js  */ /****************************************************************
 	Styles for the actions-menu implementation 
 	of ss-ui-action-tabset
 ****************************************************************/ }
 .cms .ss-ui-action-tabset.multi { /* Style the tab panels */ }
-.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow: hidden; *zoom: 1; border: 1px solid #b3b3b3; float: left; height: 28px; overflow: visible; padding: 0; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow: hidden; *zoom: 1; border: 1px solid #b3b3b3; float: left; overflow: visible; padding: 0; }
 .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
-.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eaeaea; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; overflow: visible; width: 110px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eaeaea; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; overflow: visible; min-width: 110px; }
 .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
 .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; background: #f8f8f8; border-bottom: none !important; }
 .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active a { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }

admin/javascript/LeftAndMain.ActionTabSet.js

@@ -24,6 +24,19 @@
 				this.tabs({'collapsible': true, 'active': false});
 			},
 
+			onremove: function() {
+				// Remove all bound events.
+				// This guards against an edge case where the click handlers are not unbound
+				// because the panel is still open when the ajax edit form reloads.
+				var frame = $('.cms').find('iframe');
+				frame.each(function(index, iframe){
+					$(iframe).contents().off('click.ss-ui-action-tabset');
+				});
+				$(document).off('click.ss-ui-action-tabset');
+
+				this._super();
+			},
+
 			/**
 			 * Deal with available vertical space
 			 */
@@ -53,27 +66,29 @@
 					var panel, frame;
 					panel = $(event.target).closest('.ss-ui-action-tabset .ui-tabs-panel');
 
-					// If anything except the ui-nav button is clicked,
+					// If anything except the ui-nav button or panel is clicked,
-					// close panel and remove handler
+					// close panel and remove handler. We can't close if click was
-					if (!$(event.target).closest(that).length || $(panel).length) {
+					// within panel, as it might've caused a button action,
+					// and we need to show its loading indicator.
+					if (!$(event.target).closest(that).length && !panel.length) {
 						that.tabs('option', 'active', false); // close tabs
 
 						// remove click event from objects it is bound to (iframe's and document)
 						frame = $('.cms').find('iframe');
 						frame.each(function(index, iframe){
-							$(iframe).contents().off('click', closeHandler);
+							$(iframe).contents().off('click.ss-ui-action-tabset', closeHandler);
 						});
-						$(document).off('click', closeHandler);
+						$(document).off('click.ss-ui-action-tabset', closeHandler);
 					}
 				};
 
 				// Bind click event to document, and use closeHandler to handle the event
-				$(document).on('click', closeHandler);
+				$(document).on('click.ss-ui-action-tabset', closeHandler);
 				// Make sure iframe click also closes tab
 				// iframe needs a special case, else the click event will not register here
 				if(frame.length > 0){
 					frame.each(function(index, iframe) {
-						$(iframe).contents().on('click', closeHandler);
+						$(iframe).contents().on('click.ss-ui-action-tabset', closeHandler);
 					});
 				}
 			},
@@ -131,7 +146,7 @@
 			 */
 			'ontabsbeforeactivate': function(event, ui) {
 				this._super(event, ui);
-			 	//Set the position of the opening tab (if it exists)
+				//Set the position of the opening tab (if it exists)
 				if($(ui.newPanel).length > 0){
 					$(ui.newPanel).css('left', ui.newTab.position().left+"px");
 				}
@@ -211,7 +226,7 @@
 				this._super(event, ui);
 				// Reset position of tabs, else anyone going between the large
 				// and the small sitetree will see broken tabs
-		 		// Apply styles with .css, to avoid overriding currently applied styles
+				// Apply styles with .css, to avoid overriding currently applied styles
 				$(ui.newPanel).css({'left': 'auto', 'right': 'auto'});
 
 				if($(ui.newPanel).length > 0){

admin/scss/_actionTabs.scss

@@ -302,7 +302,7 @@ $border: 1px solid darken(#D9D9D9, 15%);
 					}
 				}
 				button.ss-ui-button{
-					width:100%;
+					width: 100%;
 					&:hover, &:focus, &:active{
 						@include box-shadow(none);
 						background-color: darken($tab-panel-texture-color,4%);

admin/scss/_forms.scss

@@ -313,6 +313,14 @@ form.small .field, .field.small {
 				background:none;				
 				border:none;
 			}
+			&.loading {
+				background: transparent url(../../images/network-save.gif) no-repeat $grid-x center;
+				.ui-button-text {
+					padding-left: 16px /* icon */ + ($grid-x/2);
+				}
+				
+				
+			}
 		}
 	}