Skip to content

Commit

Permalink
extensions styling improvements
Browse files Browse the repository at this point in the history 
Signed-off-by: Kenneth Marut <kenneth.marut@ericsson.com>
Signed-off-by: Colin Grant <colin.grant@ericsson.com>
  • Loading branch information
@kenneth-marut-work @colin-grant-work
kenneth-marut-work authored and colin-grant-work committed Jul 9, 2020
1 parent 64244a5 commit 22f2d78
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 23 deletions.
37 changes: 34 additions & 3 deletions packages/vsx-registry/src/browser/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,18 +137,49 @@
overflow: hidden;
display: flex;
flex-direction: column;
padding: var(--theia-ui-padding);
padding-top: 0;
position: relative;
}

.theia-vsx-extension-editor .header {
display: flex;
padding: calc(var(--theia-ui-padding)*3) calc(var(--theia-ui-padding)*3) calc(var(--theia-ui-padding)*2);
overflow: hidden;
padding: calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3);
flex-shrink: 0;
border-bottom: 1px solid hsla(0, 0% ,50% ,.5);
position: sticky;
top: 0;
width: 100%;
background: var(--theia-editor-background);
}

.theia-vsx-extension-editor .scroll-container {
position: absolute;
bottom: 0;
padding-top: 0;
max-width: 100%;
width: 100%;
}

.theia-vsx-extension-editor .body {
flex: 1;
padding: calc(var(--theia-ui-padding)*2);
padding-top: 0;
max-width: 1000px;
margin: 0 auto;
}

.theia-vsx-extension-editor .body h2:first-of-type {
padding-bottom: var(--theia-ui-padding);
border-bottom: 1px solid hsla(0, 0%, 50%, .5);
margin-top: calc(var(--theia-ui-padding) * 5);
}

.theia-vsx-extension-editor .scroll-container .body pre {
white-space: normal;
}

.theia-vsx-extension-editor .body img {
max-width: 100%;
}

.theia-vsx-extension-editor .header .icon-container {
Expand Down
34 changes: 29 additions & 5 deletions packages/vsx-registry/src/browser/vsx-extension-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@

import * as React from 'react';
import { inject, injectable, postConstruct } from 'inversify';
import { ReactWidget, Message } from '@theia/core/lib/browser';
import { VSXExtension } from './vsx-extension';
import { ReactWidget, Message, Widget } from '@theia/core/lib/browser';
import { VSXExtension, VSXExtensionEditorComponent } from './vsx-extension';
import { VSXExtensionsModel } from './vsx-extensions-model';
import { Deferred } from '@theia/core/lib/common/promise-util';

@injectable()
export class VSXExtensionEditor extends ReactWidget {
Expand All @@ -31,6 +32,8 @@ export class VSXExtensionEditor extends ReactWidget {
@inject(VSXExtensionsModel)
protected readonly model: VSXExtensionsModel;

protected deferredScrollContainer = new Deferred<HTMLElement>();

@postConstruct()
protected init(): void {
this.addClass('theia-vsx-extension-editor');
Expand All @@ -39,11 +42,14 @@ export class VSXExtensionEditor extends ReactWidget {
this.updateTitle();
this.title.iconClass = 'fa fa-puzzle-piece';
this.node.tabIndex = -1;

this.update();
this.toDispose.push(this.model.onDidChange(() => this.update()));
}

getScrollContainer(): Promise<HTMLElement> {
return this.deferredScrollContainer.promise;
}

protected onActivateRequest(msg: Message): void {
super.onActivateRequest(msg);
this.node.focus();
Expand All @@ -54,14 +60,32 @@ export class VSXExtensionEditor extends ReactWidget {
this.updateTitle();
}

protected onAfterShow(msg: Message): void {
super.onAfterShow(msg);
this.update();
}

protected updateTitle(): void {
const label = 'Extension: ' + (this.extension.displayName || this.extension.name);
this.title.label = label;
this.title.caption = label;
}

protected onResize(msg: Widget.ResizeMessage): void {
super.onResize(msg);
if (this.extension) {
this.update();
}
};

protected resolveScrollContainer = (element: VSXExtensionEditorComponent | null) => {
this.deferredScrollContainer.resolve(element?.scrollContainer);
};

protected render(): React.ReactNode {
return this.extension.renderEditor();
return <VSXExtensionEditorComponent
ref={this.resolveScrollContainer}
extension={this.extension}
/>;
}

}
52 changes: 37 additions & 15 deletions packages/vsx-registry/src/browser/vsx-extension.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,11 +264,6 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
render(): React.ReactNode {
return <VSXExtensionComponent extension={this} />;
}

renderEditor(): React.ReactNode {
return <VSXExtensionEditorComponent extension={this} />;
}

}

export abstract class AbstractVSXExtensionComponent extends React.Component<AbstractVSXExtensionComponent.Props> {
Expand Down Expand Up @@ -315,7 +310,7 @@ export abstract class AbstractVSXExtensionComponent extends React.Component<Abst
}
export namespace AbstractVSXExtensionComponent {
export interface Props {
extension: VSXExtension
extension: VSXExtension;
}
}

Expand Down Expand Up @@ -351,13 +346,24 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
}

export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
protected header: HTMLElement | undefined;
protected body: HTMLElement | undefined;
protected _scrollContainer: HTMLElement | undefined;

get scrollContainer(): HTMLElement | undefined {
return this._scrollContainer;
}

render(): React.ReactNode {
const {
builtin, preview, id, iconUrl, publisher, displayName, description,
averageRating, downloadCount, repository, license, readme, version
builtin, preview, id, iconUrl, publisher, displayName, description, version,
averageRating, downloadCount, repository, license, readme
} = this.props.extension;

const { baseStyle, scrollStyle } = this.getSubcomponentStyles();

return <React.Fragment>
<div className='header'>
<div className='header' style={baseStyle} ref={ref => this.header = (ref || undefined)}>
{iconUrl ?
<img className='icon-container' src={iconUrl} /> :
<div className='icon-container placeholder' />}
Expand All @@ -384,11 +390,20 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
{this.renderAction()}
</div>
</div>
{readme && <div className='body'
ref={body => this.body = (body || undefined)}
onClick={this.openLink}
dangerouslySetInnerHTML={{ __html: readme }} />}
</React.Fragment>;
{
readme &&
< div className='scroll-container'
style={scrollStyle}
ref={ref => this._scrollContainer = (ref || undefined)}>
<div className='body'
ref={ref => this.body = (ref || undefined)}
onClick={this.openLink}
style={baseStyle}
dangerouslySetInnerHTML={{ __html: readme }}
/>
</div>
}
</React.Fragment >;
}

protected renderNamespaceAccess(): React.ReactNode {
Expand Down Expand Up @@ -421,7 +436,14 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
</React.Fragment>;
}

protected body: HTMLElement | undefined;
protected getSubcomponentStyles(): { baseStyle: React.CSSProperties, scrollStyle: React.CSSProperties; } {
const width = this.header?.parentElement?.clientWidth ?? 0;
const visibility: 'unset' | 'hidden' = width > 0 ? 'unset' : 'hidden';
const baseStyle = { visibility };
const scrollStyle = this.header?.clientHeight ? { visibility, height: `calc(100% - (${this.header.clientHeight}px + 1px))` } : baseStyle;

return { baseStyle, scrollStyle };
}

// TODO replace with webview
readonly openLink = (event: React.MouseEvent) => {
Expand Down

0 comments on commit 22f2d78

Please sign in to comment.