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>
  • Loading branch information
@kenneth-marut-work
kenneth-marut-work committed Jul 7, 2020
1 parent 64244a5 commit 680deac
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 17 deletions.
34 changes: 31 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,46 @@
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%;
}

.theia-vsx-extension-editor .body {
flex: 1;
padding: calc(var(--theia-ui-padding)*2);
padding-top: 0;
}

.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
19 changes: 15 additions & 4 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,7 +16,7 @@

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

Expand All @@ -39,9 +39,12 @@ 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()));
this.update();
}

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

protected onActivateRequest(msg: Message): void {
Expand All @@ -50,8 +53,8 @@ export class VSXExtensionEditor extends ReactWidget {
}

protected onUpdateRequest(msg: Message): void {
super.onUpdateRequest(msg);
this.updateTitle();
super.onUpdateRequest(msg);
}

protected updateTitle(): void {
Expand All @@ -60,6 +63,14 @@ export class VSXExtensionEditor extends ReactWidget {
this.title.caption = label;
}

protected onResize = async (msg: Widget.ResizeMessage): Promise<void> => {
super.onResize(msg);
if (this.extension) {
this.extension.width = msg.width;
this.update();
}
};

protected render(): React.ReactNode {
return this.extension.renderEditor();
}
Expand Down
93 changes: 83 additions & 10 deletions packages/vsx-registry/src/browser/vsx-extension.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import { Endpoint } from '@theia/core/lib/browser/endpoint';
import { VSXEnvironment } from '../common/vsx-environment';
import { VSXExtensionsSearchModel } from './vsx-extensions-search-model';
import { VSXExtensionNamespaceAccess, VSXUser } from '../common/vsx-registry-types';
import { Deferred } from '@theia/core/lib/common/promise-util';

const BODY_CONTENT_MAX_WIDTH = 1000;

@injectable()
export class VSXExtensionData {
Expand Down Expand Up @@ -100,6 +103,25 @@ export class VSXExtension implements VSXExtensionData, TreeElement {

protected readonly data: Partial<VSXExtensionData> = {};

protected _width: number;
get width(): number {
return this._width;
}
set width(width: number) {
this._width = width;
}

protected _deferredScrollContainer = new Deferred<HTMLElement>();
get deferredScrollContainer(): Deferred<HTMLElement> {
return this._deferredScrollContainer;
}
resetDeferredScrollContainer(): void {
this._deferredScrollContainer = new Deferred<HTMLElement>();
}
resolveDeferredScrollContainer(element: HTMLElement): void {
this._deferredScrollContainer.resolve(element);
}

get uri(): URI {
return VSXExtensionUri.toUri(this.id);
}
Expand Down Expand Up @@ -268,7 +290,6 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
renderEditor(): React.ReactNode {
return <VSXExtensionEditorComponent extension={this} />;
}

}

export abstract class AbstractVSXExtensionComponent extends React.Component<AbstractVSXExtensionComponent.Props> {
Expand Down Expand Up @@ -351,13 +372,37 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
}

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

// hide elements from view until proper sizes are calculated
protected bodyStyle: React.CSSProperties = { visibility: 'hidden' };
protected scrollStyle: React.CSSProperties = { visibility: 'hidden' };
protected headerStyle: React.CSSProperties = { visibility: 'hidden' };

componentDidMount(): void {
if (this.scrollContainer) {
this.props.extension.resolveDeferredScrollContainer(this.scrollContainer);
}
}

componentWillUnmount(): void {
this.props.extension.resetDeferredScrollContainer();
}

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, width
} = this.props.extension;

if (width !== undefined) {
this.initScrollContainerHeight();
this.calculateWidthsOnResize(width);
}
return <React.Fragment>
<div className='header'>
<div className='header' style={this.headerStyle} ref={ref => this.header = (ref || undefined)}>
{iconUrl ?
<img className='icon-container' src={iconUrl} /> :
<div className='icon-container placeholder' />}
Expand All @@ -384,11 +429,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={this.scrollStyle}
ref={ref => this.scrollContainer = (ref || undefined)}>
<div className='body'
ref={ref => this.body = (ref || undefined)}
onClick={this.openLink}
style={this.bodyStyle}
dangerouslySetInnerHTML={{ __html: readme }}
/>
</div>
}
</React.Fragment >;
}

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

protected body: HTMLElement | undefined;
protected initScrollContainerHeight(): void {
if (this.scrollContainer && this.header && this.headerStyle.visibility === 'hidden') {
const headerHeight = this.header.clientHeight;
this.bodyStyle = { ...this.bodyStyle, visibility: 'unset' };
this.scrollStyle = { ...this.scrollStyle, visibility: 'unset', height: `calc(100% - (${headerHeight}px + 1px))` };
this.headerStyle = { ...this.headerStyle, visibility: 'unset' };
}
}

protected calculateWidthsOnResize(messageWidth: number): void {
if (this.body && this.scrollContainer) {
this.scrollStyle = { ...this.scrollStyle, width: `${messageWidth}px` };
if (messageWidth > BODY_CONTENT_MAX_WIDTH) {
const sideMargin = `${(messageWidth - BODY_CONTENT_MAX_WIDTH) / 2}px`;
this.bodyStyle = { ...this.bodyStyle, marginLeft: sideMargin, marginRight: sideMargin };
} else if (messageWidth <= BODY_CONTENT_MAX_WIDTH) {
this.bodyStyle = { ...this.bodyStyle, marginLeft: '0px', marginRight: '0px' };
}
}
}

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

0 comments on commit 680deac

Please sign in to comment.