Skip to content
This repository
Browse code

BUGFIX Stability improvements on CMS layout logic

- Changed application order
- Fixed layout trigger after preview toggle
- Replaced button row dimension approximation with double application of jQuery.layout() - once before sizing the action panel height to set correct width on container, then again for the height
  • Loading branch information...
commit d4baf2d19d738f7cedb1269357632a6c058ffc94 1 parent 803aa6b
Ingo Schommer authored June 06, 2012
5  admin/css/screen.css
@@ -181,8 +181,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
181 181
 /** ---------------------------------------------------- Buttons ---------------------------------------------------- */
182 182
 .cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
183 183
 .cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
184  
-.cms .Actions { min-height: 30px; }
185  
-.cms .Actions > div { overflow: auto; }
  184
+.cms .Actions { min-height: 30px; overflow: auto; }
186 185
 .cms input.loading, .cms button.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { color: #525252; border-color: #d5d3d3; cursor: default; }
187 186
 .cms input.loading .ui-icon, .cms button.loading .ui-icon, .cms input.ui-state-default.loading .ui-icon, .cms .ui-widget-content input.ui-state-default.loading .ui-icon, .cms .ui-widget-header input.ui-state-default.loading .ui-icon { background: transparent url(../../images/network-save.gif) no-repeat 0 0; }
188 187
 .cms input.loading.ss-ui-action-constructive .ui-icon, .cms button.loading.ss-ui-action-constructive .ui-icon { background: transparent url(../../images/network-save-constructive.gif) no-repeat 0 0; }
@@ -407,7 +406,7 @@ body.cms { overflow: hidden; }
407 406
 /** -------------------------------------------- Preview -------------------------------------------- */
408 407
 .cms-switch-view a { padding-right: 1em; }
409 408
 
410  
-.cms-preview { width: 1px; z-index: 100; }
  409
+.cms-preview { display: none; width: 1px; z-index: 100; }
411 410
 .cms-preview .cms-preview-toggle { width: 10px; cursor: pointer; }
412 411
 .cms-preview .cms-preview-toggle a { display: block; padding: 2px 12px 2px 6px; height: 16px; position: relative; top: 48%; background-color: #b0bec7; color: white; font-weight: bold; text-decoration: none; z-index: 2000; line-height: 16px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); -moz-box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); }
413 412
 .cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; }
14  admin/javascript/LeftAndMain.Content.js
@@ -16,7 +16,6 @@
16 16
 				// Force initialization of certain UI elements to avoid layout glitches
17 17
 				this.find('.cms-tabset').redrawTabs();
18 18
 				this.find('.ss-ui-tabs-nav').redraw();
19  
-				this.find('.Actions').redraw();
20 19
 				
21 20
 				this._super();
22 21
 			},
@@ -27,10 +26,12 @@
27 26
 			redraw: function() {
28 27
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
29 28
 				
30  
-				// Force initialization of tabsets to avoid layout glitches
  29
+				// Force initialization of certain UI elements to avoid layout glitches
  30
+				this.layout();
31 31
 				this.add(this.find('.cms-tabset')).redrawTabs();
32 32
 				this.find('.cms-content-header').redraw();
33  
-				this.layout({resize: false});
  33
+				this.find('.cms-content-actions').redraw();
  34
+				this.layout();
34 35
 			}
35 36
 		});
36 37
 
@@ -85,11 +86,14 @@
85 86
 			}
86 87
 		});
87 88
 
88  
-		$('.cms-content .cms-content-header').entwine({
  89
+		$('.cms-content .cms-content-fields').entwine({
89 90
 			redraw: function() {
90 91
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
91 92
 
92  
-				// Fix height to actual extents, in preparation for a relayout via jslayout.
  93
+				this.layout();
  94
+			}
  95
+		});
  96
+
93 97
 		$('.cms-content .cms-content-header, .cms-content .cms-content-actions').entwine({
94 98
 			redraw: function() {
95 99
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
5  admin/javascript/LeftAndMain.EditForm.js
@@ -111,12 +111,11 @@
111 111
 			},
112 112
 						
113 113
 			redraw: function() {
  114
+				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
  115
+				
114 116
 				// Force initialization of tabsets to avoid layout glitches
115 117
 				this.add(this.find('.cms-tabset')).redrawTabs();
116 118
 				this.find('.cms-content-header').redraw();
117  
-
118  
-				var approxWidth = $('.cms-container').width() - $('.cms-menu').width();
119  
-				this.find('.cms-content-actions').width(approxWidth).height('auto');
120 119
 				
121 120
 				this.layout();
122 121
 			},
9  admin/javascript/LeftAndMain.Preview.js
@@ -147,6 +147,7 @@
147 147
 			
148 148
 			expand: function(inclMenu) {
149 149
 				var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
  150
+				this.show();
150 151
 				this.removeClass('east').addClass('center').removeClass('is-collapsed');
151 152
 				// this.css('overflow', 'auto');
152 153
 				contentEl.removeClass('center').hide();
@@ -158,8 +159,7 @@
158 159
 					containerEl.find('.cms-menu').collapsePanel();
159 160
 				}
160 161
 				
161  
-				// Already triggered through panel toggle above
162  
-				// containerEl.redraw();
  162
+				containerEl.redraw();
163 163
 			},
164 164
 			
165 165
 			collapse: function() {
@@ -175,8 +175,7 @@
175 175
 					containerEl.find('.cms-menu').expandPanel();
176 176
 				}
177 177
 				
178  
-				// Already triggered through panel toggle above
179  
-				// containerEl.redraw();
  178
+				containerEl.redraw();
180 179
 			},
181 180
 			
182 181
 			block: function() {
@@ -197,7 +196,7 @@
197 196
 			redraw: function() {
198 197
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
199 198
 				
200  
-				this.layout();
  199
+				this.layout({resize: false});
201 200
 			}
202 201
 		});
203 202
 		
27  admin/javascript/LeftAndMain.js
@@ -126,19 +126,14 @@ jQuery.noConflict();
126 126
 
127 127
 				// Move from inner to outer layouts. Some of the elements might not exist.
128 128
 				// Not all edit forms are layouted, so qualify by their data value.
  129
+
  130
+				this.layout({resize: false});
  131
+				this.find('.cms-panel-layout').redraw(); 
129 132
 				this.find('.cms-content-fields[data-layout-type]').redraw(); 
130 133
 				this.find('.cms-edit-form[data-layout-type]').redraw(); 
131  
-				
132  
-				// Only redraw preview if its visible
133 134
 				this.find('.cms-preview').redraw();
134  
-
135  
-				// Only redraw the content area if its not the same as the edit form
136  
-				var contentEl = this.find('.cms-content');
137  
-				if(!contentEl.is('.cms-edit-form')) contentEl.redraw();
138  
-				
  135
+				this.find('.cms-content').redraw();
139 136
 				this.layout({resize: false});
140  
-		
141  
-				this.find('.cms-panel-layout').redraw(); // sidebar panels.
142 137
 			},
143 138
 
144 139
 			/**
@@ -432,14 +427,6 @@ jQuery.noConflict();
432 427
 			}
433 428
 		});
434 429
 		
435  
-		$('.cms-content-fields').entwine({
436  
-			redraw: function() {
437  
-				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
438  
-
439  
-				this.layout();
440  
-			}
441  
-		});
442  
-
443 430
 		/**
444 431
 		 * Add loading overlay to selected regions in the CMS automatically.
445 432
 		 * Not applied to all "*.loading" elements to avoid secondary regions
@@ -579,7 +566,7 @@ jQuery.noConflict();
579 566
 		/**
580 567
 		 * Add styling to all contained buttons, and create buttonsets if required.
581 568
 		 */
582  
-		$('.cms .Actions').entwine({
  569
+		$('.cms-content .Actions').entwine({
583 570
 			onmatch: function() {
584 571
 				this.find('.ss-ui-button').click(function() {
585 572
 						var form = this.form;
@@ -682,9 +669,7 @@ jQuery.noConflict();
682 669
 			redraw: function() {
683 670
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
684 671
 
685  
-				this.layout({
686  
-					resize: false
687  
-				});
  672
+				this.layout({resize: false});
688 673
 			}
689 674
 		});
690 675
 	
5  admin/scss/_forms.scss
@@ -263,10 +263,7 @@ form.small .field, .field.small {
263 263
 
264 264
 	.Actions {
265 265
 		min-height: 30px;
266  
-
267  
-		& > div {
268  
-			overflow: auto;
269  
-		}
  266
+		overflow: auto;
270 267
 	}
271 268
 
272 269
 	input.loading, button.loading,
2  admin/scss/_style.scss
@@ -374,7 +374,6 @@ body.cms {
374 374
 .cms-content-actions {
375 375
 	margin: 0;
376 376
 	padding: $grid-y*1.5 $grid-y*2;
377  
-	height: $grid-y*4;
378 377
 	z-index: 0;
379 378
 	border-top: 1px solid $color-light-separator;
380 379
 	border-top: 1px solid #FAFAFA;
@@ -810,6 +809,7 @@ body.cms {
810 809
 	}
811 810
 }
812 811
 .cms-preview {
  812
+	display: none;
813 813
 	width: 1px; // collapsed by default
814 814
 	z-index: 100;
815 815
 		

0 notes on commit d4baf2d

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