Skip to content
This repository has been archived by the owner on May 5, 2023. It is now read-only.

Commit

Permalink
Design about dialog #10
Browse files Browse the repository at this point in the history 
* reuse code from welcome page by moving it to a util

Signed-off-by: Johannes Faltermeier <jfaltermeier@eclipsesource.com>
Contributed on behalf of STMicroelectronics
  • Loading branch information
@jfaltermeier
jfaltermeier committed Jan 18, 2021
1 parent e1f5295 commit 5365fd2
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 106 deletions.
110 changes: 110 additions & 0 deletions theia-example-updater/src/electron-browser/customization/branding-util.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/********************************************************************************
* Copyright (C) 2020 EclipseSource and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* This Source Code may also be made available under the following Secondary
* Licenses when the conditions for such availability set forth in the Eclipse
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
* with the GNU Classpath Exception which is available at
* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import * as React from 'react';

export function renderWhatIs(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
What is this?
</h3>
{/* Once available we should link the customization documention in below text */}
<div >
Eclipse Theia Blueprint product is a <span className='gs-text-bold'>template</span> to showcase
the capabilities of Theia as well as how to build desktop-based products based on the platform.
Theia Blueprint assembles a selected subset of existing Theia features and extensions. We
provide installers for Theia Blueprint to be downloaded (see below) as well
as <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>documentation</a> on
how to customize this template to build a product and installers for your own Theia-based
product.
</div>
</div>;
}

export function renderWhatIsNot(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
What is it not?
</h3>
<div >
Eclipse Theia Blueprint product
is <span className='gs-text-bold'><span className='gs-text-underline'>not</span> a production-ready
product</span>. Therefore, it is also not a replacement for Visual Studio Code or any other IDE.
</div>
</div>;
}

export function renderTickets(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Reporting feature requests and bugs
</h3>
<div >
The features in the Eclipse Theia Blueprint product are based on Theia and the included
extensions/plugins. For bugs in Theia please consider opening an issue in
the <a href='https://github.com/eclipse-theia/theia/issues/new/choose' target='_blank'>Theia
project on Github</a>.
</div>
<div>
Eclipse Theia Blueprint product only packages existing functionality into a product and installers
for the product. If you believe there is a mistake in packaging, something needs to be added to the
packaging or the installers do not work properly,
please <a href='https://github.com/eclipse-theia/theia-example/issues/new/choose' target='_blank'>open
an issue on Github</a> to let us know.
</div>
</div>;
}

export function renderSourceCode(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Source Code
</h3>
<div >
The source code of the Eclipse Theia Blueprint product is available
on <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>Github</a>.
</div>
</div>;
}

export function renderDocumentation(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Documentation
</h3>
{/* Once available we should link the customization documention in below text */}
<div >
Please see <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>here</a> for
documentation how to customize the Eclipse Theia Blueprint product
</div>
</div>;
}

export function renderDownloads(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Updates and Downloads
</h3>
<div className='gs-action-container'>
You can update the Eclipse Theia Blueprint product directly in this application by navigating to
File {'>'} Settings {'>'} Check for Updates… Moreover the application will check for Updates
after each launch automatically.
</div>
<div className='gs-action-container'>
Alternatively you can download the most recent version from the download page.
</div>
</div>;
}
66 changes: 62 additions & 4 deletions theia-example-updater/src/electron-browser/customization/theia-installer-about-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@
********************************************************************************/
import * as React from 'react';

import { AboutDialog, AboutDialogProps } from "@theia/core/lib/browser/about-dialog";
import { AboutDialog, AboutDialogProps, ABOUT_CONTENT_CLASS } from "@theia/core/lib/browser/about-dialog";
import { injectable, inject } from 'inversify';
import { renderDocumentation, renderDownloads, renderSourceCode, renderTickets, renderWhatIs, renderWhatIsNot } from './branding-util';

@injectable()
export class TheiaInstallerAboutDialog extends AboutDialog {
Expand All @@ -27,8 +28,65 @@ export class TheiaInstallerAboutDialog extends AboutDialog {
super(props);
}

protected renderHeader(): React.ReactNode {
const applicationInfo = this.applicationInfo;
return applicationInfo && <h3>{applicationInfo.name} {applicationInfo.version} (Alpha)</h3>;
protected render(): React.ReactNode {
return <div className={ABOUT_CONTENT_CLASS}>
{this.renderContent()}
</div>;
}

protected renderContent(): React.ReactNode {
return <div className='ad-container'>
<div className='ad-float'>
<div className='ad-logo'>
</div>
{this.renderExtensions()}
</div>
{this.renderTitle()}
<hr className='gs-hr' />
<div className='flex-grid'>
<div className='col'>
{renderWhatIs()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{renderWhatIsNot()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{renderTickets()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{renderSourceCode()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{renderDocumentation()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{renderDownloads()}
</div>
</div>
</div>;

}

protected renderTitle(): React.ReactNode {
return <div className='gs-header'>
<h1>Eclipse Theia <span className='gs-blue-header'>Blueprint</span> Product</h1>
{this.renderVersion()}
</div>;
}

protected renderVersion(): React.ReactNode {
return <p className='gs-sub-header' >
{this.applicationInfo ? 'Version ' + this.applicationInfo.version + ' (Alpha)' : '(Alpha)'}
</p>;
}
}
107 changes: 8 additions & 99 deletions ...ple-updater/src/electron-browser/customization/theia-installer-getting-started-widget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
********************************************************************************/
import * as React from 'react';

import { renderDocumentation, renderDownloads, renderSourceCode, renderTickets, renderWhatIs, renderWhatIsNot } from './branding-util';

import { GettingStartedWidget } from '@theia/getting-started/lib/browser/getting-started-widget';
import { injectable } from 'inversify';

Expand All @@ -29,32 +31,32 @@ export class TheiaInstallerGettingStartedWidget extends GettingStartedWidget {
<hr className='gs-hr' />
<div className='flex-grid'>
<div className='col'>
{this.renderWhatIs()}
{renderWhatIs()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{this.renderWhatIsNot()}
{renderWhatIsNot()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{this.renderTickets()}
{renderTickets()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{this.renderSourceCode()}
{renderSourceCode()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{this.renderDocumentation()}
{renderDocumentation()}
</div>
</div>
<div className='flex-grid'>
<div className='col'>
{this.renderDownloads()}
{renderDownloads()}
</div>
</div>
</div>;
Expand All @@ -72,97 +74,4 @@ export class TheiaInstallerGettingStartedWidget extends GettingStartedWidget {
{this.applicationInfo ? 'Version ' + this.applicationInfo.version + ' (Alpha)' : '(Alpha)'}
</p>;
}

protected renderWhatIs(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
What is this?
</h3>
{/* Once available we should link the customization documention in below text */}
<div >
Eclipse Theia Blueprint product is a <span className='gs-text-bold'>template</span> to showcase
the capabilities of Theia as well as how to build desktop-based products based on the platform.
Theia Blueprint assembles a selected subset of existing Theia features and extensions. We
provide installers for Theia Blueprint to be downloaded (see below) as well
as <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>documentation</a> on
how to customize this template to build a product and installers for your own Theia-based
product.
</div>
</div>;
}

protected renderWhatIsNot(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
What is it not?
</h3>
<div >
Eclipse Theia Blueprint product
is <span className='gs-text-bold'><span className='gs-text-underline'>not</span> a production-ready
product</span>. Therefore, it is also not a replacement for Visual Studio Code or any other IDE.
</div>
</div>;
}

protected renderTickets(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Reporting feature requests and bugs
</h3>
<div >
The features in the Eclipse Theia Blueprint product are based on Theia and the included
extensions/plugins. For bugs in Theia please consider opening an issue in
the <a href='https://github.com/eclipse-theia/theia/issues/new/choose' target='_blank'>Theia
project on Github</a>.
</div>
<div>
Eclipse Theia Blueprint product only packages existing functionality into a product and installers
for the product. If you believe there is a mistake in packaging, something needs to be added to the
packaging or the installers do not work properly,
please <a href='https://github.com/eclipse-theia/theia-example/issues/new/choose' target='_blank'>open
an issue on Github</a> to let us know.
</div>
</div>;
}

protected renderSourceCode(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Source Code
</h3>
<div >
The source code of the Eclipse Theia Blueprint product is available
on <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>Github</a>.
</div>
</div>;
}

protected renderDocumentation(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Source Code
</h3>
{/* Once available we should link the customization documention in below text */}
<div >
Please see <a href='https://github.com/eclipse-theia/theia-example' target='_blank'>here</a> for
documentation how to customize the Eclipse Theia Blueprint product
</div>
</div>;
}

protected renderDownloads(): React.ReactNode {
return <div className='gs-section'>
<h3 className='gs-section-header'>
Updates and Downloads
</h3>
<div className='gs-action-container'>
You can update the Eclipse Theia Blueprint product directly in this application by navigating to
File {'>'} Settings {'>'} Check for Updates… Moreover the application will check for Updates
after each launch automatically.
</div>
<div className='gs-action-container'>
Alternatively you can download the most recent version from the download page.
</div>
</div>;
}
}
35 changes: 32 additions & 3 deletions theia-example-updater/src/electron-browser/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

:root {
--theia-branding-logo: url(../icons/theia-logo-blueprint.svg);
}
Expand All @@ -33,12 +33,41 @@
}

.gs-logo {
float: right;
float: right;
background-image: var(--theia-branding-logo);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 250px;
height: 118px;
padding: 20px;
}
}

.ad-logo {
background-image: var(--theia-branding-logo);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 250px;
height: 118px;
padding: 20px;
}

.ad-float {
float: right;
}

.ad-container {
padding: 20px;
width: 1150px;
height: 700;
}

ul.theia-aboutExtensions {
height: 340px;
overflow: hidden;
overflow-y: scroll;
list-style-type: none;
padding: 0;
margin-left: 10px;
}

0 comments on commit 5365fd2

Please sign in to comment.