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 Jun 29, 2020
1 parent 68a3453 commit 6f92fff
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 13 deletions.
33 changes: 30 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,45 @@
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
49 changes: 46 additions & 3 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,14 +16,20 @@

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';
import { Deferred } from '@theia/core/lib/common/promise-util';

const BODY_CONTENT_MAX_WIDTH = 1000;

@injectable()
export class VSXExtensionEditor extends ReactWidget {

static ID = 'vsx-extension-editor';
protected deferredScrollContainerRender = new Deferred<HTMLDivElement>();
protected deferredHeaderElementRender = new Deferred<HTMLDivElement>();
protected deferredBodyElementRender = new Deferred<HTMLDivElement>();

@inject(VSXExtension)
protected readonly extension: VSXExtension;
Expand All @@ -32,20 +38,35 @@ export class VSXExtensionEditor extends ReactWidget {
protected readonly model: VSXExtensionsModel;

@postConstruct()
protected init(): void {
protected async init(): Promise<void> {
this.addClass('theia-vsx-extension-editor');
this.id = VSXExtensionEditor.ID + ':' + this.extension.id;
this.title.closable = true;
this.extension.deferredScrollContainerRender = this.deferredScrollContainerRender;
this.extension.deferredHeaderElementRender = this.deferredHeaderElementRender;
this.extension.deferredBodyElementRender = this.deferredBodyElementRender;
this.updateTitle();
this.title.iconClass = 'fa fa-puzzle-piece';
this.node.tabIndex = -1;

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

async setContainerHeights(): Promise<void> {
const headerElement = await this.deferredHeaderElementRender.promise;
const scrollContainer = await this.deferredScrollContainerRender.promise;
const headerHeight = headerElement?.clientHeight;
scrollContainer.style.height = `calc(100% - (${headerHeight}px + 1px))`;
}

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

protected onActivateRequest(msg: Message): void {
super.onActivateRequest(msg);
this.setContainerHeights();
this.node.focus();
}

Expand All @@ -54,12 +75,34 @@ export class VSXExtensionEditor extends ReactWidget {
this.updateTitle();
}

protected onAfterAttach(msg: Message): void {
super.onAfterAttach(msg);
this.setContainerHeights();
}

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

protected async onResize(msg: Widget.ResizeMessage): Promise<void> {
super.onResize(msg);
const bodyElement = await this.deferredBodyElementRender.promise;
const scrollContainer = await this.deferredScrollContainerRender.promise;
if (bodyElement && scrollContainer) {
scrollContainer.style.width = `${msg.width}px`;
if (msg.width > BODY_CONTENT_MAX_WIDTH) {
const sideMargin = (msg.width - BODY_CONTENT_MAX_WIDTH) / 2;
bodyElement.style.marginLeft = `${sideMargin}px`;
bodyElement.style.marginRight = `${sideMargin}px`;
} else if (msg.width <= BODY_CONTENT_MAX_WIDTH) {
bodyElement.style.marginLeft = '0px';
bodyElement.style.marginRight = '0px';
}
}
}

protected render(): React.ReactNode {
return this.extension.renderEditor();
}
Expand Down
35 changes: 28 additions & 7 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,7 @@ 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';

@injectable()
export class VSXExtensionData {
Expand Down Expand Up @@ -99,6 +100,9 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
readonly search: VSXExtensionsSearchModel;

protected readonly data: Partial<VSXExtensionData> = {};
deferredScrollContainerRender: Deferred<HTMLDivElement> | undefined;
deferredHeaderElementRender: Deferred<HTMLDivElement> | undefined;
deferredBodyElementRender: Deferred<HTMLDivElement> | undefined;

get uri(): URI {
return VSXExtensionUri.toUri(this.id);
Expand Down Expand Up @@ -351,13 +355,25 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
}

export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
protected resolveDeferredOnRender(
element: HTMLDivElement | null,
deferred: Deferred<HTMLDivElement> | undefined): void {
if (deferred && element) {
deferred.resolve(element);
if (element.className === 'body') {
this.body = (element || undefined);
}
}
}

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, deferredHeaderElementRender,
deferredScrollContainerRender, deferredBodyElementRender
} = this.props.extension;
return <React.Fragment>
<div className='header'>
<div className='header' ref={element => this.resolveDeferredOnRender(element, deferredHeaderElementRender)}>
{iconUrl ?
<img className='icon-container' src={iconUrl} /> :
<div className='icon-container placeholder' />}
Expand All @@ -384,10 +400,15 @@ 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 }} />}
{readme &&
<div className='scroll-container' ref={element => this.resolveDeferredOnRender(element, deferredScrollContainerRender)}>
<div className='body'
ref={element => this.resolveDeferredOnRender(element, deferredBodyElementRender)}
onClick={this.openLink}
dangerouslySetInnerHTML={{ __html: readme }}
/>
</div>
}
</React.Fragment>;
}

Expand Down

0 comments on commit 6f92fff

Please sign in to comment.