Attachment #7360 for bug #40116

View | Details | Raw Unified | Return to bug 40116
Collapse All | Expand All

Lines 78-84 Link Here

(-)umc/js/appcenter.styl (-15 / +25 lines)
78		78
79	.umcAppDetailsPage	79	.umcAppDetailsPage
80	.umcAppButton	80	.umcAppButton
81	float: left	81	float: right
82		82
83	.umcAppButton.umcAppButtonFirstRow	83	.umcAppButton.umcAppButtonFirstRow
84	margin-bottom: 15px	84	margin-bottom: 15px
Lines 86-99 Link Here
86	.umcAppButton.umcAppButtonFirstRow + .umcAppButton:not(.umcAppButtonFirstRow)	86	.umcAppButton.umcAppButtonFirstRow + .umcAppButton:not(.umcAppButtonFirstRow)
87	clear: left	87	clear: left
88		88
89	.categoryButton	89	.umcAppButton.umcActionButton
		90	float: none
		91
		92	.categoryButton, .categorySpan
90	background-color: transparent	93	background-color: transparent
91	border: 0	94	border: 0
92	border-right: 1px solid lightgrey	95	border-right: 1px solid lightgrey
93	padding: 0 0.4em 0 0	96	padding: 0 0.4em 0 0
94	margin-right: 0.4em	97	margin-right: 0.4em
95	text-decoration: underline
96	opacity: 0.66
97		98
98	&:first-child	99	&:first-child
99	padding-left: 0	100	padding-left: 0
Lines 101-106 Link Here
101	&:last-child	102	&:last-child
102	border-right: 0	103	border-right: 0
103		104
		105	.categoryButton
		106	text-decoration: underline
		107	opacity: 0.66
		108
104	&:hover	109	&:hover
105	opacity: 1	110	opacity: 1
106		111
Lines 238-247 Link Here
238	.dijitButton	243	.dijitButton
239	float: right	244	float: right
240		245
241	.appDetailsPageGrid	246	.appDetailsPageActions
242	margin-bottom: 3em	247	margin-bottom: 3em
243		248
244	.appDetailsPageGridContent	249	.appDetailsPageActionsContent
245	height: 105px !important	250	height: 105px !important
246		251
247	.umc .umcAppDialog	252	.umc .umcAppDialog
Lines 293-315 Link Here
293	.icon	298	.icon
294	margin-bottom: 1em	299	margin-bottom: 1em
295	width: 100%	300	width: 100%
		301	max-width: 550px
296	height: 120px	302	height: 120px
297	display: inline-block	303	display: inline-block
298	background-position: center center	304	background-position: left center
299	background-size: contain	305	background-size: contain
300	/* border instead of padding works with background-size:contain */	306	/* border instead of padding works with background-size:contain */
301	border-right: solid transparent 20px	307	border-right: solid transparent 20px
302		308
303	.navHeaderButton	309	.navContainer
304	display: inline-block	310	display: inline-block
305	vertical-align: top	311	width: 100%
306	padding-left: 0.5em	312	border-top: 1px solid #c8c8c8
		313	padding: 0.8em 0
307		314
308	.umcText	315	.umcText
309	margin-bottom: 0.3em	316	margin-bottom: 0.3em
310	color: #787878	317	color: #787878
		318	.umcAppStatusText, .umcContainerWidget
		319	display: block
		320	width: 100%
		321	@media screen and (min-width: 550px)
		322	display: inline-block
		323	width: 50%
311	.umcAppStatusText	324	.umcAppStatusText
312	display: inline-block	325	vertical-align: top
		326
313	.umcEndOfLifeHelp	327	.umcEndOfLifeHelp
314	display: inline-block	328	display: inline-block
315	position: relative	329	position: relative
Lines 363-372 Link Here
363	margin-bottom: 3em	377	margin-bottom: 3em
364		378
365		379
366	@media (min-width: 550px)
367	.umcPageNav .icon
368	width: 50%
369
370	/* NOTE: _All_ CSS classes textLongerThanXXXChars from _getCSSClass4TextLength() need to be addressed here! */	380	/* NOTE: _All_ CSS classes textLongerThanXXXChars from _getCSSClass4TextLength() need to be addressed here! */
371	.descriptionContainer div,	381	.descriptionContainer div,
372	.usage	382	.usage

Lines 113-118 Link Here

(-)umc/js/appcenter.js (+8 lines)
113	this.showApp({id: state[1]});	113	this.showApp({id: state[1]});
114	} else {	114	} else {
115	if (this._appCenterPage && state[0] === 'category') {	115	if (this._appCenterPage && state[0] === 'category') {
		116	this.set('title', 'App Center');
116	this.selectChild(this._appCenterPage);	117	this.selectChild(this._appCenterPage);
117	when(this._appCenterPage._searchSidebar.selectFormDeferred, lang.hitch(this, function() {	118	when(this._appCenterPage._searchSidebar.selectFormDeferred, lang.hitch(this, function() {
118	this._appCenterPage._searchSidebar.set('category', state[1]);	119	this._appCenterPage._searchSidebar.set('category', state[1]);
Lines 216-222 Link Here
216	this._appDetailsPage.own(appChooseHostDialog);	217	this._appDetailsPage.own(appChooseHostDialog);
217	this._appDetailsPage.own(appDetailsDialog);	218	this._appDetailsPage.own(appDetailsDialog);
218	this._appDetailsPage.own(appConfigDialog);	219	this._appDetailsPage.own(appConfigDialog);
		220	this._appDetailsPage.watch('moduleTitle', lang.hitch(this, function(attr, oldVal, newVal){
		221	if (newVal) {
		222	this.set('title', newVal);
		223	}
		224	}));
		225	this.set('title', app.name);
219	this._appDetailsPage.on('back', lang.hitch(this, function(category) {	226	this._appDetailsPage.on('back', lang.hitch(this, function(category) {
		227	this.set('title', 'App Center');
220	if (category && category.length) {	228	if (category && category.length) {
221	this._appCenterPage._searchSidebar.set('category', category);	229	this._appCenterPage._searchSidebar.set('category', category);
222	}	230	}




	"umc/widgets/ProgressBar",
	"umc/widgets/Page",
	"umc/widgets/Text",
	"umc/widgets/Button",
	"umc/widgets/CheckBox",
	"umc/widgets/Grid",
	"umc/modules/appcenter/AppCenterGallery",
	"umc/modules/appcenter/App",
	"umc/modules/appcenter/Carousel",
	"umc/i18n!umc/modules/appcenter"
], function(declare, lang, kernel, array, dojoEvent, all, when, query, ioQuery, topic, Deferred, domConstruct, domClass, on, domStyle, Memory, Observable, Tooltip, Lightbox, UMCApplication, tools, dialog, TitlePane, ContainerWidget, ProgressBar, Page, Text, Button, CheckBox, Grid, AppCenterGallery, App, Carousel, _) {

	var adaptedGrid = declare([Grid], {
		_updateContextActions: function() {

		standby: null,

		title: _("App management"),
		moduleTitle: null,
		noFooter: true,
		getAppCommand: 'appcenter/get',


				this.hostDialog.set('app', app);
				this.detailsDialog.set('app', app);
				this.configDialog.set('app', app);
				this.renderPage();
				this.set('moduleTitle', app.name);
				this.buildInnerPage();
				this.appLoadingDeferred.resolve();
			}));
		},

		_setModuleTitleAttr: function(name) {
			this._set('moduleTitle', name);
			this.moduleTitle = name;
		},

		_appIsInstalledInDomain: function() {
			return this._appCountInstallations() > 0;
		},


		getButtons: function() {
			var buttons = [];
			if (this.app.canOpenInDomain() && this.app.isInstalled) {
				buttons.push({
					name: 'open',
					label: this.app.getOpenLabel(),
					defaultButton: true,
					'class': 'umcAppButton',
					callback: lang.hitch(this.app, 'open')
						this.app.open();
					})
				});
			} else if (this.app.canInstall && !this.app.isInstalled) {
				buttons.push({
					name: 'install',
					label: _('Install'),
					'class': 'umcAppButton',
					isStandardAction: true,
					isContextAction: false,
					iconClass: 'umcIconAdd',
					callback: lang.hitch(this.app, 'install')
				});

					name: 'shop',
					label: _('Buy'),
					iconClass: 'umcShopIcon',
					'class': 'umcAppButton',
					callback: lang.hitch(this, 'openShop')
				});
			}
			return buttons;
		},

		getActionButtons: function(isSingleServerInstallation) {
			var buttons = [];
			if (this.app.canInstall && this.app.getHosts().length > 1) {
				buttons.push({
					name: 'install',
					label: _('Install'),
					'class': 'umcAppButton umcActionButton',
					isStandardAction: true,
					isContextAction: false,
					iconClass: 'umcIconAdd',
					callback: lang.hitch(this.app, 'install')
				});
			}
			if (this.app.canOpenInDomain() && !this.app.isInstalled) {
				buttons.push({
					name: 'open',
					label: this.app.getOpenLabel(),

				buttons.push({
					name: 'disable',
					label: _('Continue using'),
					'class': 'umcAppButton umcActionButton',
					isContextAction: true,
					isStandardAction: true,
					canExecute: lang.hitch(this, function(app) {

				buttons.push({
					name: 'configure',
					label: _('App settings'),
					'class': 'umcAppButton umcActionButton',
					isContextAction: true,
					isStandardAction: true,
					canExecute: lang.hitch(this, function(app) {

				});
			}
			if (this.app.canUninstallInDomain()) {
				var callback;
				if (isSingleServerInstallation) {
					callback = lang.hitch(this.app, 'uninstall');
				} else {
					callback = lang.hitch(this, function(host, app) {
						app[0].data.uninstall();
					});
				}
				buttons.push({
					name: 'uninstall',
					label: _('Uninstall'),
					isContextAction: true,
					isStandardAction: true,
					'class': 'umcAppButton umcActionButton',
					canExecute: lang.hitch(this, function(app) {
						return app.data.canUninstall();
					}),
					callback: callback
						app[0].data.uninstall();
					})
				});
			}
			if (this.app.canUpgradeInDomain()) {
				var callback;
				if (isSingleServerInstallation) {
					callback = lang.hitch(this.app, 'upgrade');
				} else {
					callback = lang.hitch(this, function(host, app) {
						app[0].data.upgrade();
					});
				}
				buttons.push({
					name: 'update',
					label: _('Upgrade'),

					canExecute: lang.hitch(this, function(app) {
						return app.data.canUpgrade();
					}),
					callback: callback
						app[0].data.upgrade();
					})
				});
			}
			return buttons;
		},

		renderPage: function() {
			this._renderIcon();
			this._renderNavContainer();
			this._renderMainContainer();
			this._renderFooter();
		},
					}
				});
				return cssClass;
			};

		_renderIcon: function() {
			if (this._icon) {
				this.removeChild(this._icon);
				this._icon.destroyRecursive();

				});
				this.addChild(this._icon, 0);
			}
		},

		_renderNavContainer: function() {
			if (this._navContainer) {
				this.removeChild(this._navContainer);
				this._navContainer = null;
				this._navHeaderButtonContainer = null;
			}
			this._navContainer = new ContainerWidget({
				region: 'nav',
				'class': 'navContainer'
			});

			// build Text Widget for HeaderDetails
			var _navHeaderDetails = new Text({
				'class': 'umcAppStatusText'
			});

			// vendor
			var vendor = this._detailFieldCustomVendor();
			if (vendor) {
				_navHeaderDetails.set('content', vendor);
					content: vendor
				});
				this._navHeaderButtonContainer.addChild(_vendorTextPane);
			}

			//Status of the App
			if (this.app.isInstalled || this.app.getHosts().length) {
				var informationText = new Text({
					'class': 'umcAppStatus'
				});
				var text = _('Installed');
				if (this.app.endOfLife) {
					text = _('End of life');
					var tooltipText = this._detailFieldCustomEndOfLife();

					domConstruct.create('div', {
							'class': 'umcEndOfLifeHelp umcHelpIconSmall',
							onclick: function(evt) {
								// stolen from system-setup
								var node = evt.target;
								Tooltip.show(tooltipText, node);
								if (evt) {

									dojoEvent.stop(evt);
								});
							}
						}, _navHeaderDetails.domNode
					);
				} else if (this.app.canUpgradeInDomain()) {
					text = _('Update available');

				domConstruct.create('div', {
					textContent: text,
					'class': 'umcAppStatusText'
				}, _navHeaderDetails.domNode);
				this._navHeaderButtonContainer.addChild(informationText);
			} else {
			//Categories of the App
				var categoryButtons = this._detailFieldCustomCategories();
				if (categoryButtons) {
					_navHeaderDetails.domNode.appendChild(categoryButtons);
				}
			}

			this._navContainer.addChild(_navHeaderDetails);
			this.set('navButtons', this.getButtons());
			this._navContainer.addChild(this._navButtons);
			this._navHeaderButtonContainer.addChild(this._navButtons);

			this.addChild(this._navContainer);
			this.own(this._navContainer);
		},

		_renderMainContainer: function() {
			if (this._mainRegionContainer) {
				this.removeChild(this._mainRegionContainer);
				this._mainRegionContainer.destroyRecursive();

			this.addChild(this._mainRegionContainer);
			this.own(this._mainRegionContainer);

			var isAppInstalled = this.app.isInstalled || this.app.getHosts().length > 0;
			if (isAppInstalled) {
				this._renderUsage();
				this._renderInstallationManagement();
			}
			this._renderDetailsPane(isAppInstalled);
				}
				if (usage) {
					usageHeader = new Text({
						content: _('First steps'),
						'class': 'mainHeader'
					});
					this._mainRegionContainer.addChild(usageHeader);

			domStyle.set(this._main.domNode, 'margin-bottom', '2em');
		},
						content: usage,
						'class': usageClass
					});
					this._mainRegionContainer.addChild(usagePane);
				}

		_renderUsage: function() {
			var usage = this.app.readme;
			if (usage) {
				usage = lang.replace(usage, this.app);
			} else {
				usage = this._detailFieldCustomUsage();
			}
			if (usage) {
				usageHeader = new Text({
					content: _('First steps'),
					'class': 'mainHeader'
				});
				this._mainRegionContainer.addChild(usageHeader);

				var usageClass = 'usage ' + this._getCSSClass4TextLength(usage);
				var usagePane = new Text({
					content: usage,
					'class': usageClass
					label: _('Server')
				}, {
					name: 'appStatus',
					label: _('Status')
				}];

				var myStore = new Observable(new Memory({
					data: this.app.getHosts()
				}));
				this._installedAppsGrid = new adaptedGrid({
					'class': 'appDetailsPageGrid',
					actions: actions,
					columns: columns,
					moduleStore: myStore,
					gridOptions: {
						'class': 'appDetailsPageGridContent'
					}
				});
				this._mainRegionContainer.addChild(usagePane);
			}
		},

		_renderInstallationManagement: function() {
			var isSingleServerInstallation = this.app.isInstalled && this.app.installationData.length === 1;
			var actions = this.getActionButtons(isSingleServerInstallation);
			if (isSingleServerInstallation || this.app.isDocker) {
				this._renderSingleManagement(actions);
			} else {
				this._renderDomainwideManagement(actions);
			}
		},

		_renderSingleManagement: function(actions) {
			var header = new Text({
				content: _('Manage local installation'),
				'class': 'mainHeader'
			});
			this._mainRegionContainer.addChild(header);
			this._mainRegionContainer.own(header);

			var actionButtonContainer = new ContainerWidget({
				'class': 'appDetailsPageActions'
			});
			array.forEach(actions, function(action) {
				var button = new Button(action);
				actionButtonContainer.addChild(button);
				actionButtonContainer.own(button);
			});
			this._mainRegionContainer.addChild(actionButtonContainer);
			this._mainRegionContainer.own(actionButtonContainer);
		},

		_renderDomainwideManagement: function(actions) {
			var header = new Text({
				content: _('Manage domain wide installations'),
				'class': 'mainHeader'
			});
			this._mainRegionContainer.addChild(header);
			this._mainRegionContainer.own(header);

			var columns = [{
				name: 'server',
				label: _('Server')
			}, {
				name: 'appStatus',
				label: _('Status')
			}];

			var myStore = new Observable(new Memory({
				data: this.app.getHosts()
			}));
			this._installedAppsGrid = new adaptedGrid({
				'class': 'appDetailsPageActions',
				actions: actions,
				columns: columns,
				moduleStore: myStore,
				gridOptions: {
					'class': 'appDetailsPageActionsContent'
				}
			});
			this._mainRegionContainer.addChild(this._installedAppsGrid);
			this._mainRegionContainer.own(this._installedAppsGrid);
		},

		_renderDetailsPane: function(isAppInstalled) {
			this._detailsContainer = new ContainerWidget({
				'class': 'detailsContainer'
			});

			var descriptionContainer = new ContainerWidget({
				'class': 'descriptionContainer'
			});
			var longDescCSSClass = this._getCSSClass4TextLength(this.app.longDescription);
			domClass.add(domConstruct.create('div', {
				innerHTML: this.app.longDescription
			}, descriptionContainer.domNode), longDescCSSClass);

				var styleContainer = new ContainerWidget({
					'class': 'carouselWrapper'
				});

				var urls = array.map(this.app.thumbnails, function(ithumb) {
					return {
						src: ithumb

				this._detailsContainer.addChild(styleContainer);
			}

			// for an uninstalled app show details (open TitlePane) at the top of main
			// otherwise close the Titlepane and move it under the grid
			var isOpen = true;
			if (this.app.isInstalled || this.app.getHosts().length) {
				isOpen = false;
			}
			var detailsPane = new TitlePane({
				open: !isAppInstalled,
				//class: 'installedAppDetailsPane',
				title: _('Details'),
				content: this._detailsContainer,
				'class': 'appDetailsPane'
			});
			this._mainRegionContainer.addChild(detailsPane, isAppInstalled ? null : 0);
		},

		_getCSSClass4TextLength: function(text) {
			var cssClass = '';
			array.forEach([400, 500, 600, 800], function(ilength) {
				if (text.length > ilength) {
					cssClass = 'textLongerThan' + ilength + 'Chars';
				}
			});
			return cssClass;
		},

		_renderFooter: function() {
			//TODO just for testing
			domConstruct.empty(this._footer.domNode);


					});
					for (var i = 0; i < rating.value; i++) {
						domConstruct.create('div', {
								'class': 'umcAppRatingIcon'
							}, ratingText.domNode
						);
					}
					domConstruct.create('div', {
							'class': 'umcAppRatingText',
							textContent: rating.label
						}, ratingText.domNode
					);
					domConstruct.create('div', {

					footerRight.addChild(ratingText);
				});
			}
			domStyle.set(this._main.domNode, 'margin-bottom', '2em');
		},

		openShop: function() {

		},

		_detailFieldCustomVendor: function() {
			var vendor = this.app.vendor || this.app.maintainer;
			var website = this.app.websiteVendor;
			if (vendor && website) {
				return '<div><a href="' + website + '" target="_blank">' + vendor + '</a></div>';
			} else if (vendor) {
				return '<div>' + vendor + '</div>';
			}
		},


				var categoriesContainerNode = domConstruct.create('div', {
					'class': 'categoryContainer'
				});
				if (this.moduleID === 'appcenter') {
					this.app.categories.forEach(lang.hitch(this, function(category) {
						var categoryButton = domConstruct.create('button', {
							textContent: _(category),
							onclick: lang.hitch(this, function() { this.onBack(category); }),
							'class': 'categoryButton'
						});
						domConstruct.place(categoryButton, categoriesContainerNode);
					}));
				} else {
					this.app.categories.forEach(lang.hitch(this, function(category) {
						var categoryButton = domConstruct.create('span', {
							textContent: _(category),
							'class': 'categorySpan'
						});
						domConstruct.place(categoryButton, categoriesContainerNode);
					}));
				}
				return categoriesContainerNode;
			}
		},

Return to bug 40116