This repository has been archived by the owner on Apr 4, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rework About dialog with React according to the upstream changes (#649)
* Rework About dialog with React according to the upstream changes Signed-off-by: Artem Zatsarynnyi <azatsary@redhat.com>
- Loading branch information
1 parent
cf2cec6
commit c7c05ac
Showing
3 changed files
with
124 additions
and
147 deletions.
There are no files selected for viewing
146 changes: 0 additions & 146 deletions
146
extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts
This file was deleted.
Oops, something went wrong.
123 changes: 123 additions & 0 deletions
123
extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<void> { | ||
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 <div className={ABOUT_CONTENT_CLASS}> | ||
{this.renderHeader()} | ||
{this.renderExtensions()} | ||
{this.renderTimestamp()} | ||
</div>; | ||
} | ||
|
||
protected renderHeader(): React.ReactNode { | ||
return <div className='che-theia-about-product-header'> | ||
{this.getLogo()} | ||
{this.getVersion()} | ||
</div>; | ||
} | ||
|
||
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 <div className='che-theia-about-product-logo'> | ||
<img src={src}></img> | ||
</div>; | ||
} | ||
|
||
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 <h4 style={style}> | ||
Che-Theia@ | ||
<a | ||
href={`https://github.com/eclipse/che-theia/commit/${jsonDetails.cheTheiaSha1}`} | ||
target='_blank' | ||
style={linkStyle}> | ||
{jsonDetails.cheTheiaSha1} | ||
</a> | ||
{' '}using Theia@ | ||
<a | ||
href={`https://github.com/eclipse-theia/theia/commit/${jsonDetails.theiaSha1}`} | ||
target='_blank' | ||
style={linkStyle}> | ||
{jsonDetails.theiaSha1} | ||
</a> | ||
</h4>; | ||
} | ||
|
||
protected renderTimestamp(): React.ReactNode { | ||
const style: React.CSSProperties = { | ||
marginBlockStart: '4px', | ||
textAlign: 'right', | ||
fontWeight: 200, | ||
fontSize: '10px' | ||
}; | ||
return <h4 style={style}>Built {jsonDetails.date}</h4>; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters