Skip to content
This repository
Browse code

BUG Visual cue that URLSegment is updating

Added a loading class on .field.urlsegment to indicate that the URLSegment is updating its value, set before and after self.suggest().
  • Loading branch information...
commit 5f9362e7424ce71cde850d5ba87b03cb0c795458 1 parent 2923e55
Ryan Wachtl authored August 17, 2012
4  css/screen.css
@@ -21,7 +21,7 @@
21 21
 .cms-content-tools #cms-content-treeview .cms-tree a:hover > .text > .badge, .cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked > .text > .badge { display: inline-block; }
22 22
 
23 23
 /** ------------------------------------------------------------------ URLSegment field ----------------------------------------------------------------- */
24  
-.field.urlsegment.disabled { color: #444; padding-left: 0px; margin-left: 0px; background: none; border-color: transparent; }
  24
+.field.urlsegment.loading { background: url(../images/loading.gif) no-repeat 162px 8px; }
25 25
 .field.urlsegment .prefix, .field.urlsegment .preview { padding-top: 8px; display: inline-block; }
26 26
 .field.urlsegment .prefix { color: #777; }
27 27
 .field.urlsegment .cancel, .field.urlsegment .update, .field.urlsegment .edit { margin-left: 7px; }
@@ -41,7 +41,7 @@
41 41
 .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-treeview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-treeview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-treeview a { background-position: 1px -40px; }
42 42
 .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-galleryview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-galleryview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-galleryview a { background-position: -161px -40px; }
43 43
 .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-listview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-listview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-listview a { background-position: -38px -40px; }
44  
-.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -o-linear-gradient(#f3f3f3, #d9d9d9); background-image: -ms-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
  44
+.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -o-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
45 45
 .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.btn-icon-add { height: 17px; }
46 46
 .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; }
47 47
 .cms .AssetAdmin #Root_TreeView .cms-tree ul .class-Folder a span.text span.jstree-foldericon { background: url(../images/blue-folder-horizontal.png) no-repeat; width: 16px; height: 16px; float: left; display: block; margin-right: 4px; }
BIN  images/loading.gif
2  javascript/SiteTreeURLSegmentField.js
@@ -94,10 +94,12 @@
94 94
 				}
95 95
 				
96 96
 				if (currentVal != updateVal) {
  97
+					self.addClass('loading');
97 98
 					self.suggest(updateVal, function(data) {
98 99
 						var newVal = decodeURIComponent(data.value);
99 100
 						field.val(newVal);
100 101
 						self.edit(title);
  102
+						self.removeClass('loading');
101 103
 					});
102 104
 				} else {
103 105
 					self.edit();
8  scss/_CMSMain.scss
@@ -93,12 +93,8 @@
93 93
  * ----------------------------------------------------------------- */
94 94
 .field.urlsegment {
95 95
 
96  
-	&.disabled {
97  
-		color: #444;
98  
-		padding-left: 0px;
99  
-		margin-left: 0px;
100  
-		background: none;
101  
-		border-color: transparent;
  96
+	&.loading {
  97
+		background: url(../images/loading.gif) no-repeat 162px 8px;
102 98
 	}
103 99
 
104 100
 	.prefix,

0 notes on commit 5f9362e

Please sign in to comment.
Something went wrong with that request. Please try again.