jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-25 20:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling of library items

Browse Source
This commit is contained in:
Sven Efftinge 2019-05-08 22:09:20 -07:00 committed by Christian Weichel
parent ad3c7c6e50
commit a974b90536
4 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -6,4 +6,5 @@ build/
!electron/build/ !electron/build/
src-gen/ src-gen/
arduino-ide-*/webpack.config.js arduino-ide-*/webpack.config.js
.DS_Store .DS_Store
/workspace/static

7
arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx
View File

@ -22,13 +22,12 @@ export class ComponentListItem extends React.Component<ComponentListItem.Props>
const style = ComponentListItem.Styles; const style = ComponentListItem.Styles;
const name = <span className={style.NAME_CLASS}>{item.name}</span>; const name = <span className={style.NAME_CLASS}>{item.name}</span>;
const author = <span className={style.AUTHOR_CLASS}>{item.author}</span>; const author = <span className={style.AUTHOR_CLASS}>{item.author}</span>;
const installedVersion = !!item.installedVersion && <React.Fragment> const installedVersion = !!item.installedVersion && <div className={style.VERSION_INFO_CLASS}>
<span className={style.VERSION_CLASS}>Version {item.installedVersion}</span> <span className={style.VERSION_CLASS}>Version {item.installedVersion}</span>
<span className={style.INSTALLED_CLASS}>INSTALLED</span> <span className={style.INSTALLED_CLASS}>INSTALLED</span>
</React.Fragment>; </div>;
const summary = <div className={style.SUMMARY_CLASS}>{item.summary}</div>; const summary = <div className={style.SUMMARY_CLASS}>{item.summary}</div>;
const description = !!item.description && <div className={style.DESCRIPTION_CLASS}>{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 install = this.props.install && item.installable && !item.installedVersion && const install = this.props.install && item.installable && !item.installedVersion &&
@ -41,7 +40,6 @@ export class ComponentListItem extends React.Component<ComponentListItem.Props>
</div> </div>
<div className={style.CONTENT_CLASS}> <div className={style.CONTENT_CLASS}>
{summary} {summary}
{description}
</div> </div>
<div className={style.FOOTER_CLASS}> <div className={style.FOOTER_CLASS}>
{moreInfo} {moreInfo}
@ -63,6 +61,7 @@ export namespace ComponentListItem {
export namespace Styles { export namespace Styles {
export const LIST_ITEM_CLASS = 'component-list-item'; export const LIST_ITEM_CLASS = 'component-list-item';
export const HEADER_CLASS = 'header'; export const HEADER_CLASS = 'header';
export const VERSION_INFO_CLASS = 'version-info';
export const CONTENT_CLASS = 'content'; export const CONTENT_CLASS = 'content';
export const FOOTER_CLASS = 'footer'; export const FOOTER_CLASS = 'footer';
export const INSTALLED_CLASS = 'installed'; export const INSTALLED_CLASS = 'installed';

7
arduino-ide-extension/src/browser/components/component-list/search-bar.tsx
View File

@ -8,15 +8,14 @@ export class SearchBar extends React.Component<SearchBar.Props> {
} }
render(): React.ReactNode { render(): React.ReactNode {
return <form className={SearchBar.Styles.SEARCH_BAR_CLASS}> return <input
<input className={SearchBar.Styles.SEARCH_BAR_CLASS}
type='text' type='text'
placeholder='Search' placeholder='Search'
size={1} size={1}
value={this.props.filterText} value={this.props.filterText}
onChange={this.handleFilterTextChange} onChange={this.handleFilterTextChange}
/> />;
</form>;
} }
private handleFilterTextChange(event: React.ChangeEvent<HTMLInputElement>): void { private handleFilterTextChange(event: React.ChangeEvent<HTMLInputElement>): void {

25
arduino-ide-extension/src/browser/style/list-widget.css
View File

@ -9,11 +9,18 @@
.arduino-list-widget .search-bar > input { .arduino-list-widget .search-bar > input {
margin: 0px 5px 0px 5px; margin: 0px 5px 0px 5px;
width: 100%; width: 95%;
}
.filterable-list-container {
padding: 0 10px 0 15px;
display: flex;
flex-direction: column;
align-items: stretch;
} }
.component-list-item { .component-list-item {
padding: 10px; padding: 10px 0 10px 0;
font-size: var(--theia-ui-font-size1); font-size: var(--theia-ui-font-size1);
} }
@ -33,6 +40,13 @@
.component-list-item .header { .component-list-item .header {
padding-bottom: 2px; padding-bottom: 2px;
display: flex; display: flex;
flex-direction: column;
}
.component-list-item .header .version-info {
display: flex;
justify-content: space-between;
align-items: center;
} }
.component-list-item .header .name { .component-list-item .header .name {
@ -45,8 +59,6 @@
} }
.component-list-item .header .version { .component-list-item .header .version {
margin-left: auto;
justify-self: end;
color: var(--theia-ui-font-color2); color: var(--theia-ui-font-color2);
} }
@ -54,14 +66,15 @@
margin-left: 4px; margin-left: 4px;
justify-self: end; justify-self: end;
background-color: var(--theia-accent-color2); background-color: var(--theia-accent-color2);
padding: 4px; padding: 2px 4px 2px 4px;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
max-height: calc(1em + 4px); max-height: calc(1em + 4px);
color: var(--theia-layout-color0); color: var(--theia-inverse-ui-font-color0);
} }
.component-list-item .footer { .component-list-item .footer {
padding-top: 5px;
display: flex; display: flex;
} }