aligned list view styles.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2019-07-30 17:40:10 +02:00 committed by jbicker
parent 3fcf5a6ac9
commit 0dc45daf01
4 changed files with 21 additions and 4 deletions

View File

@ -15,11 +15,23 @@ export class BoardItemRenderer extends ListItemRenderer<BoardPackage> {
</div>; </div>;
const summary = <div className='summary'>{item.summary}</div>; const summary = <div className='summary'>{item.summary}</div>;
const description = <div className='summary'>{item.description}</div>;
const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>; const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
const installButton = item.installable && !item.installedVersion && const installButton = item.installable && !item.installedVersion &&
<button className='install' onClick={install.bind(this, item)}>INSTALL</button>; <button className='install' onClick={install.bind(this, item)}>INSTALL</button>;
const versions = (() => {
const { availableVersions } = item;
if (!!item.installedVersion || availableVersions.length === 0) {
return undefined;
} else if (availableVersions.length === 1) {
return <label>{availableVersions[0]}</label>
} else {
return <select>{item.availableVersions.map(version => <option value={version} key={version}>{version}</option>)}</select>;
}
})();
return <div className='component-list-item noselect'> return <div className='component-list-item noselect'>
<div className='header'> <div className='header'>
<span>{name} by {author}</span> <span>{name} by {author}</span>
@ -27,10 +39,14 @@ export class BoardItemRenderer extends ListItemRenderer<BoardPackage> {
</div> </div>
<div className='content'> <div className='content'>
{summary} {summary}
{description}
</div>
<div className='info'>
{moreInfo}
</div> </div>
<div className='footer'> <div className='footer'>
{moreInfo}
{installButton} {installButton}
{versions}
</div> </div>
</div>; </div>;
} }

View File

@ -22,7 +22,7 @@ export class LibraryItemRenderer extends ListItemRenderer<Library> {
const versions = (() => { const versions = (() => {
const { availableVersions } = item; const { availableVersions } = item;
if (availableVersions.length === 0) { if (!!item.installedVersion || availableVersions.length === 0) {
return undefined; return undefined;
} else if (availableVersions.length === 1) { } else if (availableVersions.length === 1) {
return <label>{availableVersions[0]}</label> return <label>{availableVersions[0]}</label>

View File

@ -172,12 +172,13 @@ export class BoardsServiceImpl implements BoardsService {
id: item.getId(), id: item.getId(),
name: item.getName(), name: item.getName(),
author: item.getMaintainer(), author: item.getMaintainer(),
availableVersions: [item.getInstalled()], availableVersions: [item.getLatest()],
description: item.getBoardsList().map(b => b.getName()).join(", "), description: item.getBoardsList().map(b => b.getName()).join(", "),
installable: true, installable: true,
summary: "Boards included in this package:", summary: "Boards included in this package:",
installedVersion, installedVersion,
boards: item.getBoardsList().map(b => <Board>{ name: b.getName(), fqbn: b.getFqbn() }), boards: item.getBoardsList().map(b => <Board>{ name: b.getName(), fqbn: b.getFqbn() }),
moreInfoLink: item.getWebsite()
} }
return result; return result;
}); });

View File

@ -41,7 +41,7 @@ export class LibraryServiceImpl implements LibraryService {
const resp = await new Promise<LibrarySearchResp>((resolve, reject) => client.librarySearch(req, (err, resp) => !!err ? reject(err) : resolve(resp))); const resp = await new Promise<LibrarySearchResp>((resolve, reject) => client.librarySearch(req, (err, resp) => !!err ? reject(err) : resolve(resp)));
const items = resp.getLibrariesList() const items = resp.getLibrariesList()
.filter(item => !!item.getLatest()) .filter(item => !!item.getLatest())
.slice(0, 50) // .slice(0, 50)
.map(item => { .map(item => {
let installedVersion: string | undefined; let installedVersion: string | undefined;
const installed = installedLibsIdx.get(item.getName()); const installed = installedLibsIdx.get(item.getName());