jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-24 11:46:32 +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/
src-gen/
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 name = <span className={style.NAME_CLASS}>{item.name}</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.INSTALLED_CLASS}>INSTALLED</span>
</React.Fragment>;
</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 install = this.props.install && item.installable && !item.installedVersion &&
@ -41,7 +40,6 @@ export class ComponentListItem extends React.Component<ComponentListItem.Props>
</div>
<div className={style.CONTENT_CLASS}>
{summary}
{description}
</div>
<div className={style.FOOTER_CLASS}>
{moreInfo}
@ -63,6 +61,7 @@ export namespace ComponentListItem {
export namespace Styles {
export const LIST_ITEM_CLASS = 'component-list-item';
export const HEADER_CLASS = 'header';
export const VERSION_INFO_CLASS = 'version-info';
export const CONTENT_CLASS = 'content';
export const FOOTER_CLASS = 'footer';
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 {
return <form className={SearchBar.Styles.SEARCH_BAR_CLASS}>
<input
return <input
className={SearchBar.Styles.SEARCH_BAR_CLASS}
type='text'
placeholder='Search'
size={1}
value={this.props.filterText}
onChange={this.handleFilterTextChange}
/>
</form>;
/>;
}
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 {
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 {
padding: 10px;
padding: 10px 0 10px 0;
font-size: var(--theia-ui-font-size1);
}
@ -33,6 +40,13 @@
.component-list-item .header {
padding-bottom: 2px;
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 {
@ -45,8 +59,6 @@
}
.component-list-item .header .version {
margin-left: auto;
justify-self: end;
color: var(--theia-ui-font-color2);
}
@ -54,14 +66,15 @@
margin-left: 4px;
justify-self: end;
background-color: var(--theia-accent-color2);
padding: 4px;
padding: 2px 4px 2px 4px;
font-size: 10px;
font-weight: bold;
max-height: calc(1em + 4px);
color: var(--theia-layout-color0);
color: var(--theia-inverse-ui-font-color0);
}
.component-list-item .footer {
padding-top: 5px;
display: flex;
}