From f7a72a95726fa0c116b7a9fc1a2b2652b50a7f40 Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Tue, 3 Mar 2020 12:43:48 +0200 Subject: [PATCH 1/5] Update About dialog according to the upstream changes: disable React rendering as we're doing the manipulations directly contentNode Signed-off-by: Artem Zatsarynnyi --- ...out-che-theia-dialog.ts => about-che-theia-dialog.tsx} | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) rename extensions/eclipse-che-theia-about/src/browser/{about-che-theia-dialog.ts => about-che-theia-dialog.tsx} (96%) 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.tsx similarity index 96% rename from extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts rename to extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx index 5490b3d64..31a45526b 100644 --- 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.tsx @@ -8,6 +8,7 @@ * SPDX-License-Identifier: EPL-2.0 **********************************************************************/ +import * as React from 'react'; 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'; @@ -140,7 +141,12 @@ export class AboutCheTheiaDialog extends AboutDialog { 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'); + } + + // Disable rendering the dialog by React + // as we're doing the manipulations directly contentNode. + protected render(): React.ReactNode { + return
; } } From b4485d4070fa7f16bc47319110a79e7c2a0971ac Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Tue, 3 Mar 2020 12:46:50 +0200 Subject: [PATCH 2/5] Update About dialog according to the upstream changes: disable React rendering as we're doing the manipulations directly contentNode Signed-off-by: Artem Zatsarynnyi --- .../src/browser/about-che-theia-dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 31a45526b..1b06b8de2 100644 --- 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 @@ -144,7 +144,7 @@ export class AboutCheTheiaDialog extends AboutDialog { } // Disable rendering the dialog by React - // as we're doing the manipulations directly contentNode. + // as we're doing the manipulations directly in contentNode. protected render(): React.ReactNode { return
; } From 85beca2408e4e12c85f092a6713748223b153eca Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Tue, 3 Mar 2020 19:18:05 +0200 Subject: [PATCH 3/5] Update About dialog according to the upstream changes: disable React rendering as we're doing the manipulations directly contentNode Signed-off-by: Artem Zatsarynnyi --- .../src/browser/about-che-theia-dialog.tsx | 175 ++++++++---------- .../src/browser/style/che-theia-about.css | 2 +- 2 files changed, 75 insertions(+), 102 deletions(-) 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 index 1b06b8de2..74586033d 100644 --- 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 @@ -9,7 +9,7 @@ **********************************************************************/ import * as React from 'react'; -import { AboutDialog, AboutDialogProps, ABOUT_EXTENSIONS_CLASS, ABOUT_CONTENT_CLASS } from '@theia/core/lib/browser/about-dialog'; +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'; @@ -22,6 +22,8 @@ const jsonDetails = require('../../conf/about-details.json'); @injectable() export class AboutCheTheiaDialog extends AboutDialog { + protected productInfo: Product; + @inject(CheProductService) private productService: CheProductService; @@ -31,122 +33,93 @@ export class AboutCheTheiaDialog extends AboutDialog { 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'); + @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()} +
; } - /** - * 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 + 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 => { - if (this.isDark(e.newTheme)) { - image.setAttribute('src', productLogo.dark); - } else { - image.setAttribute('src', productLogo.light); - } + src = this.isDark(e.newTheme) ? productLogo.dark : productLogo.light; }); - } else { - image.setAttribute('src', product.logo); + src = productInfo.logo; } - logo.appendChild(image); - header.appendChild(logo); - - return header; + return
+ +
; } - @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); + private isDark(theme: Theme): boolean { + return !theme.id.includes('light'); } - // Disable rendering the dialog by React - // as we're doing the manipulations directly in contentNode. - protected render(): React.ReactNode { - return
; + 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; From 7256625876beee3a297a8488807a5b3f54636765 Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Tue, 3 Mar 2020 19:32:44 +0200 Subject: [PATCH 4/5] Update About dialog according to the upstream changes: disable React rendering as we're doing the manipulations directly contentNode Signed-off-by: Artem Zatsarynnyi --- .../src/browser/about-che-theia-dialog.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 index 74586033d..5049e8139 100644 --- 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 @@ -1,5 +1,5 @@ /********************************************************************* - * Copyright (c) 2019 Red Hat, Inc. + * 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 @@ -33,9 +33,7 @@ export class AboutCheTheiaDialog extends AboutDialog { constructor( @inject(AboutDialogProps) protected readonly props: AboutDialogProps ) { - super({ - title: '' - }); + super(props); } @postConstruct() From e7a76f866b1476b66aabd197064d793311c30d06 Mon Sep 17 00:00:00 2001 From: Artem Zatsarynnyi Date: Tue, 3 Mar 2020 19:33:53 +0200 Subject: [PATCH 5/5] Update About dialog according to the upstream changes: disable React rendering as we're doing the manipulations directly contentNode Signed-off-by: Artem Zatsarynnyi --- .../src/browser/about-che-theia-dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 5049e8139..36fd589fc 100644 --- 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 @@ -25,7 +25,7 @@ export class AboutCheTheiaDialog extends AboutDialog { protected productInfo: Product; @inject(CheProductService) - private productService: CheProductService; + protected productService: CheProductService; @inject(ThemeService) protected readonly themeService: ThemeService;