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

Styling of select board and port dialog

Browse Source 
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-07-08 13:55:31 +02:00
parent 769689ff6d
commit 4429094139
3 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx
View File

@ -21,7 +21,7 @@ export namespace SelectableBoardsItem {
export class SelectableBoardsItem extends React.Component<SelectableBoardsItem.Props> { export class SelectableBoardsItem extends React.Component<SelectableBoardsItem.Props> {
render(): React.ReactNode { render(): React.ReactNode {
return <div onClick={this.select} className={`item ${this.props.selected ? 'selected': ''}`}>{this.props.board.name}</div> return <div onClick={this.select} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.board.name}</div>
} }
protected readonly select = (() => { protected readonly select = (() => {
@ -40,7 +40,7 @@ export namespace SelectablePortsItem {
export class SelectablePortsItem extends React.Component<SelectablePortsItem.Props> { export class SelectablePortsItem extends React.Component<SelectablePortsItem.Props> {
render(): React.ReactNode { render(): React.ReactNode {
return <div onClick={() => this.props.onClick({ port: this.props.port })} className={`item ${this.props.selected ? 'selected': ''}`}>{this.props.port}</div> return <div onClick={() => this.props.onClick({ port: this.props.port })} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.port}</div>
} }
protected readonly select = (() => { protected readonly select = (() => {
@ -83,23 +83,27 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
render(): React.ReactNode { render(): React.ReactNode {
return <React.Fragment> return <React.Fragment>
<div className='body'> <div className='body'>
<div className='left'> <div className='left container'>
<div className='title'> <div className='content'>
BOARDS <div className='title'>
BOARDS
</div> </div>
<div className='search'> <div className='search'>
<input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} /> <input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} />
</div> </div>
<div className='boards list'> <div className='boards list'>
{this.state.boards.map(board => <SelectableBoardsItem key={board.name} onClick={this.doSelect} board={board} selected={this.isSelectedBoard(board)}/>)} {this.state.boards.map(board => <SelectableBoardsItem key={board.name} onClick={this.doSelect} board={board} selected={this.isSelectedBoard(board)} />)}
</div>
</div> </div>
</div> </div>
<div className='right'> <div className='right container'>
<div className='title'> <div className='content'>
PORTS <div className='title'>
PORTS
</div> </div>
<div className='ports list'> <div className='ports list'>
{this.state.ports.map(port => <SelectablePortsItem key={port} onClick={this.doSelect} port={port} selected={this.isSelectedPort(port)}/>)} {this.state.ports.map(port => <SelectablePortsItem key={port} onClick={this.doSelect} port={port} selected={this.isSelectedPort(port)} />)}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -107,11 +111,11 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
} }
protected readonly isSelectedBoard = ((board: Board) => { protected readonly isSelectedBoard = ((board: Board) => {
return (this.state.selection.board && this.state.selection.board === board) || false; return (this.state.selection.board && this.state.selection.board === board) || false;
}); });
protected readonly isSelectedPort = ((port: string) => { protected readonly isSelectedPort = ((port: string) => {
return (this.state.selection.port && this.state.selection.port === port) || false; return (this.state.selection.port && this.state.selection.port === port) || false;
}); });
protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => { protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {

2
arduino-ide-extension/src/browser/style/arduino.useable.css
View File

@ -169,7 +169,7 @@ is not optimized for dense, information rich UIs.
/* Dialogs */ /* Dialogs */
--theia-ui-dialog-header-color: var(--theia-arduino-light); --theia-ui-dialog-header-color: var(--theia-arduino-light);
--theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0); --theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
--theia-ui-dialog-color: var(--theia-layout-color0); --theia-ui-dialog-color: rgb(236, 241, 241);
--theia-ui-dialog-font-color: var(--theia-ui-font-color1); --theia-ui-dialog-font-color: var(--theia-ui-font-color1);
/* Variables */ /* Variables */
--theia-variable-name-color: #9B46B0; --theia-variable-name-color: #9B46B0;

32
arduino-ide-extension/src/browser/style/main.css
View File

@ -108,4 +108,36 @@ div#select-board-dialog .selectBoardContainer .head {
div#select-board-dialog .selectBoardContainer .body .list .item.selected { div#select-board-dialog .selectBoardContainer .body .list .item.selected {
background: #aaaaaa; background: #aaaaaa;
}
#select-board-dialog .selectBoardContainer .body .search input,
#select-board-dialog .selectBoardContainer .body .boards.list,
#select-board-dialog .selectBoardContainer .body .search,
#select-board-dialog .selectBoardContainer .body .ports.list {
background: white;
}
#select-board-dialog .selectBoardContainer .body .search input {
border: none;
width: 100%;
}
#select-board-dialog .selectBoardContainer .body .container {
flex: 1;
}
#select-board-dialog .selectBoardContainer .body .container .content {
margin: 0 5px;
}
#select-board-dialog .selectBoardContainer .body .list .item {
padding: 10px 5px 10px 20px;
}
#select-board-dialog .selectBoardContainer .body .list {
max-height: 265px;
}
#select-board-dialog .selectBoardContainer .body .search {
margin-bottom: 10px;
} }