Attachment #7360 for bug #40116

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

(-)umc/js/appcenter.styl (-15 / +25 lines)

Lines 78-84	Link Here

.umcAppDetailsPage

.umcAppDetailsPage

	.umcAppButton

	.umcAppButton

		float: left

		float: right

	.umcAppButton.umcAppButtonFirstRow

	.umcAppButton.umcAppButtonFirstRow

		margin-bottom: 15px

		margin-bottom: 15px

Lines 86-99	Link Here

	.umcAppButton.umcAppButtonFirstRow + .umcAppButton:not(.umcAppButtonFirstRow)

	.umcAppButton.umcAppButtonFirstRow + .umcAppButton:not(.umcAppButtonFirstRow)

		clear: left

		clear: left

.categoryButton

	.umcAppButton.umcActionButton

		float: none

.categoryButton, .categorySpan

	background-color: transparent

	background-color: transparent

	border: 0

	border: 0

	border-right: 1px solid lightgrey

	border-right: 1px solid lightgrey

	padding: 0 0.4em 0 0

	padding: 0 0.4em 0 0

	margin-right: 0.4em

	margin-right: 0.4em

	text-decoration: underline

	opacity: 0.66

	&:first-child

	&:first-child

		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

(-)umc/js/appcenter.js (+8 lines)

Lines 113-118	Link Here

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