Attachment #7353 for bug #39662




	"dojo/query",
	"dojo/dom",
	"dojo/dom-class",
	"dojo/dom-style",
	"dojo/dom-geometry",
	"dojo/store/Memory",
	"dojo/store/Observable",

	"umc/modules/appcenter/AppCenterGallery",
	"umc/widgets/ContainerWidget",
	"umc/i18n!"
], function(declare, lang, array, win, on, has, domQuery, dom, domClass, domStyle, domGeom, Memory, Observable, tools, Text, Button, AppCenterGallery, Container, _) {
	return declare("umc.modules.appcenter.AppCenterMetaCategory", [Container], {
		// summary:
		//		Offers a container which contains a label, More/Less button and a grid to

			this.own(this.grid);

			this.own(on(win.global, 'resize', lang.hitch(this, function() {
				this._handleResize();
			})));
		},


				data: filteredApps
			})));
			this._set('store', applications);
			this._centerApps();
		},

		_setFilterQueryAttr: function(query) {
			this.grid.set('query', query);
			this._set('filterQuery', query);
			this._handleButtonVisibility();
		},

		_handleResize: function() {
			if (!this._visibilityDeferred || this._visibilityDeferred.isFulfilled()) {
				this._visibilityDeferred = tools.defer(lang.hitch(this, '_centerApps'), 100);
			}
		},


				var appWidth = appMarginBox.w;
				var neededWidthToDisplayApps = appsDisplayed.length * appWidth;


				var hideButton = neededWidthToDisplayApps < gridWidth;
				domClass.toggle(this.button.domNode, 'hiddenButton', hideButton);
			}
			domClass.toggle(this.domNode, 'dijitHidden', !appsDisplayed.length);
		},

		_centerApps: function() {
			//make sure the domNode is not hidden
			domClass.remove(this.domNode, 'dijitHidden');
			var appsDisplayed = domQuery('div[class*="dgrid-row"]', this.id);
			var gridContentNodes = domQuery('div[class="dgrid-content ui-widget-content"]', this.id);
			if (appsDisplayed.length && gridContentNodes.length) {
				var gridContentNode = gridContentNodes[0];
				var gridContentWidth = domGeom.getMarginBox(gridContentNode).w;
				var appDomNode = appsDisplayed[0];
				var appWidth = domGeom.getMarginBox(appDomNode).w;
				var leftMargin = (gridContentWidth % appWidth) / 2;
				domStyle.set(gridContentNode, "margin-left", leftMargin + "px");
			}
			domClass.toggle(this.domNode, 'dijitHidden', !appsDisplayed.length);
		},

		onShowApp: function(app) {
		}
	});

Lines 35-41 Link Here

(-)umc/js/appcenter.styl (-2 / +1 lines)
35	.umcAppCenterGallery	35	.umcAppCenterGallery
36	.umcGalleryWrapperItem	36	.umcGalleryWrapperItem
37	float: left	37	float: left
38	padding: 14px	38	padding: 12px
39	position: relative	39	position: relative
40		40
41	.appStatusIcon	41	.appStatusIcon
Lines 425-431 Link Here
425	.umcAppCenterGallery	425	.umcAppCenterGallery
426	/height: 175px;/	426	/height: 175px;/
427	height: auto	427	height: auto
428	margin: 0 -14px
429		428
430	.umcAppCenter .umcLiveSearchSidebar	429	.umcAppCenter .umcLiveSearchSidebar
431	.searchField, .dropDownMenu	430	.searchField, .dropDownMenu

Return to bug 39662

Lines 38-43 Link Here

(-)umc/js/appcenter/AppCenterMetaCategory.js (-6 / +23 lines)
38	"dojo/query",	38	"dojo/query",
39	"dojo/dom",	39	"dojo/dom",
40	"dojo/dom-class",	40	"dojo/dom-class",
		41	"dojo/dom-style",
41	"dojo/dom-geometry",	42	"dojo/dom-geometry",
42	"dojo/store/Memory",	43	"dojo/store/Memory",
43	"dojo/store/Observable",	44	"dojo/store/Observable",
Lines 47-53 Link Here
47	"umc/modules/appcenter/AppCenterGallery",	48	"umc/modules/appcenter/AppCenterGallery",
48	"umc/widgets/ContainerWidget",	49	"umc/widgets/ContainerWidget",
49	"umc/i18n!"	50	"umc/i18n!"
50	], function(declare, lang, array, win, on, has, domQuery, dom, domClass, domGeom, Memory, Observable, tools, Text, Button, AppCenterGallery, Container, _) {	51	], function(declare, lang, array, win, on, has, domQuery, dom, domClass, domStyle, domGeom, Memory, Observable, tools, Text, Button, AppCenterGallery, Container, _) {
51	return declare("umc.modules.appcenter.AppCenterMetaCategory", [Container], {	52	return declare("umc.modules.appcenter.AppCenterMetaCategory", [Container], {
52	// summary:	53	// summary:
53	// Offers a container which contains a label, More/Less button and a grid to	54	// Offers a container which contains a label, More/Less button and a grid to
Lines 131-137 Link Here
131	this.own(this.grid);	132	this.own(this.grid);
132		133
133	this.own(on(win.global, 'resize', lang.hitch(this, function() {	134	this.own(on(win.global, 'resize', lang.hitch(this, function() {
134	this._handleButtonVisibility();	135	this._handleResize();
135	})));	136	})));
136	},	137	},
137		138
Lines 153-170 Link Here
153	data: filteredApps	154	data: filteredApps
154	})));	155	})));
155	this._set('store', applications);	156	this._set('store', applications);
156	this._handleButtonVisibility();	157	this._centerApps();
157	},	158	},
158		159
159	_setFilterQueryAttr: function(query) {	160	_setFilterQueryAttr: function(query) {
160	this.grid.set('query', query);	161	this.grid.set('query', query);
161	this._set('filterQuery', query);	162	this._set('filterQuery', query);
162	this._handleButtonVisibility();
163	},	163	},
164		164
165	_handleButtonVisibility: function() {	165	_handleResize: function() {
166	if (!this._visibilityDeferred \|\| this._visibilityDeferred.isFulfilled()) {	166	if (!this._visibilityDeferred \|\| this._visibilityDeferred.isFulfilled()) {
167	this._visibilityDeferred = tools.defer(lang.hitch(this, '_updateButtonVisibility'), 200);	167	this._visibilityDeferred = tools.defer(lang.hitch(this, '_centerApps'), 100);
168	}	168	}
169	},	169	},
170		170
Lines 180-191 Link Here
180	var appWidth = appMarginBox.w;	180	var appWidth = appMarginBox.w;
181	var neededWidthToDisplayApps = appsDisplayed.length * appWidth;	181	var neededWidthToDisplayApps = appsDisplayed.length * appWidth;
182		182
		183
183	var hideButton = neededWidthToDisplayApps < gridWidth;	184	var hideButton = neededWidthToDisplayApps < gridWidth;
184	domClass.toggle(this.button.domNode, 'hiddenButton', hideButton);	185	domClass.toggle(this.button.domNode, 'hiddenButton', hideButton);
185	}	186	}
186	domClass.toggle(this.domNode, 'dijitHidden', !appsDisplayed.length);	187	domClass.toggle(this.domNode, 'dijitHidden', !appsDisplayed.length);
187	},	188	},
188		189
		190	_centerApps: function() {
		191	//make sure the domNode is not hidden
		192	domClass.remove(this.domNode, 'dijitHidden');
		193	var appsDisplayed = domQuery('div[class*="dgrid-row"]', this.id);
		194	var gridContentNodes = domQuery('div[class="dgrid-content ui-widget-content"]', this.id);
		195	if (appsDisplayed.length && gridContentNodes.length) {
		196	var gridContentNode = gridContentNodes[0];
		197	var gridContentWidth = domGeom.getMarginBox(gridContentNode).w;
		198	var appDomNode = appsDisplayed[0];
		199	var appWidth = domGeom.getMarginBox(appDomNode).w;
		200	var leftMargin = (gridContentWidth % appWidth) / 2;
		201	domStyle.set(gridContentNode, "margin-left", leftMargin + "px");
		202	}
		203	domClass.toggle(this.domNode, 'dijitHidden', !appsDisplayed.length);
		204	},
		205
189	onShowApp: function(app) {	206	onShowApp: function(app) {
190	}	207	}
191	});	208	});