From 13070ca81030fbcc7f6678eeb6c66d8f49b5b62c Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Wed, 4 Mar 2020 15:04:11 +0200 Subject: [PATCH] Update About dialog according to the upstream changes Signed-off-by: Artem Zatsarynnyi --- .../src/browser/about-che-theia-dialog.ts | 146 ------------------ .../src/browser/about-che-theia-dialog.tsx | 123 +++++++++++++++ .../src/browser/style/che-theia-about.css | 2 +- 3 files changed, 124 insertions(+), 147 deletions(-) delete mode 100644 extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts create mode 100644 extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx diff --git a/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts b/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts deleted file mode 100644 index 5490b3d64..000000000 --- a/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts +++ /dev/null @@ -1,146 +0,0 @@ -/********************************************************************* - * Copyright (c) 2019 Red Hat, Inc. - * - * This program and the accompanying materials are made - * available under the terms of the Eclipse Public License 2.0 - * which is available at https://www.eclipse.org/legal/epl-2.0/ - * - * SPDX-License-Identifier: EPL-2.0 - **********************************************************************/ - -import { AboutDialog, AboutDialogProps, ABOUT_EXTENSIONS_CLASS, ABOUT_CONTENT_CLASS } from '@theia/core/lib/browser/about-dialog'; -import { injectable, inject, postConstruct } from 'inversify'; -import { CheProductService, Product } from '@eclipse-che/theia-plugin-ext/lib/common/che-protocol'; -import { ThemeService, Theme } from '@theia/core/lib/browser/theming'; -import { Logo } from '@eclipse-che/plugin'; - -import '../../src/browser/style/che-theia-about.css'; - -const jsonDetails = require('../../conf/about-details.json'); - -@injectable() -export class AboutCheTheiaDialog extends AboutDialog { - - @inject(CheProductService) - private productService: CheProductService; - - @inject(ThemeService) - protected readonly themeService: ThemeService; - - constructor( - @inject(AboutDialogProps) protected readonly props: AboutDialogProps - ) { - // use empty header by default - super({ - title: '' - }); - } - - /** - * Check if theme is dark or not - */ - private isDark(theme: Theme): boolean { - const currentThemeId: string = theme.id; - return !currentThemeId.includes('light'); - } - - /** - * Returns product header element - */ - protected async getProductHeader(product: Product): Promise { - const header = document.createElement('div'); - header.setAttribute('class', 'che-theia-about-product-header'); - - const logo = document.createElement('div'); - logo.setAttribute('class', 'che-theia-about-product-logo'); - const image = document.createElement('img'); - - if (typeof product.logo === 'object') { - const productLogo: Logo = product.logo as Logo; - if (this.isDark(this.themeService.getCurrentTheme())) { - image.setAttribute('src', productLogo.dark); - } else { - image.setAttribute('src', productLogo.light); - } - - // listen on events when the theme is changing to update the logo - this.themeService.onThemeChange(e => { - if (this.isDark(e.newTheme)) { - image.setAttribute('src', productLogo.dark); - } else { - image.setAttribute('src', productLogo.light); - } - }); - - } else { - image.setAttribute('src', product.logo); - } - - logo.appendChild(image); - header.appendChild(logo); - - return header; - } - - @postConstruct() - protected async init(): Promise { - // Get product info - const product = await this.productService.getProduct(); - - // Set dialog title - this.titleNode.textContent = product.name; - - const messageNode = document.createElement('div'); - messageNode.classList.add(ABOUT_CONTENT_CLASS); - messageNode.appendChild(await this.getProductHeader(product)); - - // Che-Theia - const cheTheiaTitle = document.createElement('h4'); - - const cheTheiaLink = document.createElement('a'); - cheTheiaLink.setAttribute('href', `https://github.com/eclipse/che-theia/commit/${jsonDetails.cheTheiaSha1}`); - cheTheiaLink.setAttribute('target', '_blank'); - cheTheiaLink.setAttribute('style', 'color: var(--theia-ui-dialog-font-color);'); - cheTheiaLink.innerHTML = `${jsonDetails.cheTheiaSha1}`; - - const theiaLink = document.createElement('a'); - theiaLink.setAttribute('href', `https://github.com/eclipse-theia/theia/commit/${jsonDetails.theiaSha1}`); - theiaLink.setAttribute('target', '_blank'); - theiaLink.setAttribute('style', 'color: var(--theia-ui-dialog-font-color);'); - theiaLink.innerHTML = `${jsonDetails.theiaSha1}`; - - cheTheiaTitle.appendChild(document.createTextNode('Che-Theia@')); - cheTheiaTitle.appendChild(cheTheiaLink); - cheTheiaTitle.appendChild(document.createTextNode(' using Theia@')); - cheTheiaTitle.appendChild(theiaLink); - cheTheiaTitle.setAttribute('style', 'margin: 4px; text-align: center; font-family: Roboto, sans-serif; font-weight: 400'); - messageNode.appendChild(cheTheiaTitle); - - const extensionInfoTitle = document.createElement('h3'); - extensionInfoTitle.textContent = 'List of extensions:'; - extensionInfoTitle.setAttribute('style', 'margin-bottom: 4px'); - messageNode.appendChild(extensionInfoTitle); - - const extensionInfoContent = document.createElement('ul'); - extensionInfoContent.setAttribute('style', 'height: 120px; margin-left: 10px; margin-top: 0px;'); - extensionInfoContent.classList.add(ABOUT_EXTENSIONS_CLASS); - messageNode.appendChild(extensionInfoContent); - - const extensionsInfos = await this.appServer.getExtensionsInfos(); - - extensionsInfos.forEach(extension => { - const extensionInfo = document.createElement('li'); - extensionInfo.textContent = extension.name + ' ' + extension.version; - extensionInfoContent.appendChild(extensionInfo); - }); - messageNode.setAttribute('style', 'flex: 1 100%; padding-bottom: calc(var(--theia-ui-padding)*3);'); - this.contentNode.appendChild(messageNode); - - const date = document.createElement('h4'); - date.setAttribute('style', 'margin-block-start: 4px; text-align: right; font-weight: 200; font-size: 10px;'); - date.textContent = `Built ${jsonDetails.date}`; - messageNode.appendChild(date); - this.appendAcceptButton('Ok'); - } - -} diff --git a/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx b/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx new file mode 100644 index 000000000..36fd589fc --- /dev/null +++ b/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx @@ -0,0 +1,123 @@ +/********************************************************************* + * Copyright (c) 2020 Red Hat, Inc. + * + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + **********************************************************************/ + +import * as React from 'react'; +import { AboutDialog, AboutDialogProps, ABOUT_CONTENT_CLASS } from '@theia/core/lib/browser/about-dialog'; +import { injectable, inject, postConstruct } from 'inversify'; +import { CheProductService, Product } from '@eclipse-che/theia-plugin-ext/lib/common/che-protocol'; +import { ThemeService, Theme } from '@theia/core/lib/browser/theming'; +import { Logo } from '@eclipse-che/plugin'; + +import '../../src/browser/style/che-theia-about.css'; + +const jsonDetails = require('../../conf/about-details.json'); + +@injectable() +export class AboutCheTheiaDialog extends AboutDialog { + + protected productInfo: Product; + + @inject(CheProductService) + protected productService: CheProductService; + + @inject(ThemeService) + protected readonly themeService: ThemeService; + + constructor( + @inject(AboutDialogProps) protected readonly props: AboutDialogProps + ) { + super(props); + } + + @postConstruct() + protected async init(): Promise { + this.productInfo = await this.productService.getProduct(); + this.extensionsInfos = await this.appServer.getExtensionsInfos(); + this.update(); + this.titleNode.textContent = this.productInfo.name; + } + + protected render(): React.ReactNode { + return
+ {this.renderHeader()} + {this.renderExtensions()} + {this.renderTimestamp()} +
; + } + + protected renderHeader(): React.ReactNode { + return
+ {this.getLogo()} + {this.getVersion()} +
; + } + + protected getLogo(): React.ReactNode { + const productInfo = this.productInfo; + let src = ''; + + if (typeof productInfo.logo === 'object') { + const productLogo: Logo = productInfo.logo as Logo; + src = this.isDark(this.themeService.getCurrentTheme()) ? productLogo.dark : productLogo.light; + + this.themeService.onThemeChange(e => { + src = this.isDark(e.newTheme) ? productLogo.dark : productLogo.light; + }); + } else { + src = productInfo.logo; + } + + return
+ +
; + } + + private isDark(theme: Theme): boolean { + return !theme.id.includes('light'); + } + + protected getVersion(): React.ReactNode { + const style: React.CSSProperties = { + margin: '4px', + textAlign: 'center', + fontFamily: 'Roboto, sans-serif', + fontWeight: 400 + }; + const linkStyle: React.CSSProperties = { + color: 'var(--theia-ui-dialog-font-color)' + }; + return

+ Che-Theia@ + + {jsonDetails.cheTheiaSha1} + + {' '}using Theia@ + + {jsonDetails.theiaSha1} + +

; + } + + protected renderTimestamp(): React.ReactNode { + const style: React.CSSProperties = { + marginBlockStart: '4px', + textAlign: 'right', + fontWeight: 200, + fontSize: '10px' + }; + return

Built {jsonDetails.date}

; + } +} diff --git a/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css b/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css index 531fe2e31..a96c6573d 100644 --- a/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css +++ b/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css @@ -15,7 +15,7 @@ ********************************************************************************/ .che-theia-about-product-header { - display: flex; + display: block; white-space: nowrap; margin-block-end: 15px; margin-block-start: 5px;