From 8d838fcce470e54ae332bf035df96389412f0f09 Mon Sep 17 00:00:00 2001 From: Akos Kitta Date: Wed, 17 Jul 2019 10:32:28 +0200 Subject: [PATCH] PROEDITOR-7: Cloned the Library Manager layout. To match with the official Arduino editor's UI. Signed-off-by: Akos Kitta --- arduino-ide-extension/package.json | 1 + .../src/browser/arduino-frontend-module.ts | 4 + .../src/browser/boards/list-widget.tsx | 3 +- .../component-list/component-list-item.tsx | 4 +- .../component-list/component-list.tsx | 19 ++- .../filterable-list-container.tsx | 63 +++++----- .../components/component-list/search-bar.tsx | 10 +- .../library/library-component-list-item.tsx | 50 ++++++++ .../library/library-component-list.tsx | 17 +++ .../library-filterable-list-container.tsx | 110 ++++++++++++++++++ .../browser/library/library-list-widget.tsx | 88 ++++++++++++-- .../list-widget-frontend-contribution.ts | 18 +-- .../src/browser/library/list-widget.tsx | 72 ------------ .../src/browser/style/arduino.useable.css | 6 +- .../src/browser/style/list-widget.css | 78 +++++++++++-- .../src/browser/style/main.css | 4 + .../src/common/protocol/library-service.ts | 10 +- .../src/node/library-service-impl.ts | 2 +- yarn.lock | 5 + 19 files changed, 426 insertions(+), 138 deletions(-) create mode 100644 arduino-ide-extension/src/browser/library/library-component-list-item.tsx create mode 100644 arduino-ide-extension/src/browser/library/library-component-list.tsx create mode 100644 arduino-ide-extension/src/browser/library/library-filterable-list-container.tsx delete mode 100644 arduino-ide-extension/src/browser/library/list-widget.tsx diff --git a/arduino-ide-extension/package.json b/arduino-ide-extension/package.json index 05dec411..32922ccb 100644 --- a/arduino-ide-extension/package.json +++ b/arduino-ide-extension/package.json @@ -18,6 +18,7 @@ "@theia/workspace": "next", "@theia/navigator": "next", "@theia/terminal": "next", + "css-element-queries": "^1.2.0", "p-queue": "^5.0.0" }, "scripts": { diff --git a/arduino-ide-extension/src/browser/arduino-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-frontend-module.ts index 40bd8887..ec621585 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-module.ts +++ b/arduino-ide-extension/src/browser/arduino-frontend-module.ts @@ -50,8 +50,12 @@ import { EditorWidgetFactory } from '@theia/editor/lib/browser/editor-widget-fac import { CustomEditorWidgetFactory } from './customization/custom-editor-widget-factory'; import { SelectBoardDialog, SelectBoardDialogProps } from './boards/select-board-dialog'; import { SelectBoardDialogWidget } from './boards/select-board-dialog-widget'; +const ElementQueries = require('css-element-queries/src/ElementQueries'); export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => { + ElementQueries.listen(); + ElementQueries.init(); + // Commands and toolbar items bind(ArduinoFrontendContribution).toSelf().inSingletonScope(); bind(CommandContribution).toService(ArduinoFrontendContribution); diff --git a/arduino-ide-extension/src/browser/boards/list-widget.tsx b/arduino-ide-extension/src/browser/boards/list-widget.tsx index a4be44fc..ae40dc6d 100644 --- a/arduino-ide-extension/src/browser/boards/list-widget.tsx +++ b/arduino-ide-extension/src/browser/boards/list-widget.tsx @@ -6,6 +6,7 @@ import { WindowService } from '@theia/core/lib/browser/window/window-service'; import { FilterableListContainer } from '../components/component-list/filterable-list-container'; import { BoardsService, Board, BoardPackage } from '../../common/protocol/boards-service'; import { BoardsNotificationService } from '../boards-notification-service'; +import { LibraryService } from '../../common/protocol/library-service'; @injectable() export abstract class ListWidget extends ReactWidget { @@ -55,7 +56,7 @@ export abstract class ListWidget extends ReactWidget { getAttachedBoards: () => boardsServiceDelegate.getAttachedBoards(), selectBoard: (board: Board) => boardsServiceDelegate.selectBoard(board), getSelectBoard: () => boardsServiceDelegate.getSelectBoard(), - search: (options: { query?: string }) => boardsServiceDelegate.search(options), + search: (options: { query?: string, props?: LibraryService.Search.Props }) => boardsServiceDelegate.search(options), install: async (item: BoardPackage) => { await boardsServiceDelegate.install(item); this.boardsNotificationService.notifyBoardsInstalled(); diff --git a/arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx b/arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx index 96d49736..6ac4b723 100644 --- a/arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx +++ b/arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx @@ -4,7 +4,7 @@ import { ArduinoComponent } from '../../../common/protocol/arduino-component'; export class ComponentListItem extends React.Component { - private onClick = (event: React.SyntheticEvent) => { + protected onClick = (event: React.SyntheticEvent) => { const { target } = event.nativeEvent; if (target instanceof HTMLAnchorElement) { this.props.windowService.openNewWindow(target.href); @@ -12,7 +12,7 @@ export class ComponentListItem extends React.Component } } - private async install(item: ArduinoComponent) { + protected async install(item: ArduinoComponent): Promise { await this.props.install(item); } diff --git a/arduino-ide-extension/src/browser/components/component-list/component-list.tsx b/arduino-ide-extension/src/browser/components/component-list/component-list.tsx index 699b5bd0..8a8c7574 100644 --- a/arduino-ide-extension/src/browser/components/component-list/component-list.tsx +++ b/arduino-ide-extension/src/browser/components/component-list/component-list.tsx @@ -5,12 +5,26 @@ import { ArduinoComponent } from '../../../common/protocol/arduino-component'; export class ComponentList extends React.Component { + protected container?: HTMLElement; + render(): React.ReactNode { - return
- {this.props.items.map(item => )} + return
this.container = element || undefined}> + {this.props.items.map(item => this.createItem(item))}
; } + componentDidMount(): void { + if (this.container && this.props.resolveContainer) { + this.props.resolveContainer(this.container); + } + } + + protected createItem(item: ArduinoComponent): React.ReactNode { + return + } + } export namespace ComponentList { @@ -19,6 +33,7 @@ export namespace ComponentList { readonly items: ArduinoComponent[]; readonly windowService: WindowService; readonly install: (comp: ArduinoComponent) => Promise; + readonly resolveContainer?: (element: HTMLElement) => void; } } diff --git a/arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx b/arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx index f3dfccd6..af1cbf78 100644 --- a/arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx +++ b/arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { WindowService } from '@theia/core/lib/browser/window/window-service'; -import { ComponentList } from './component-list'; import { SearchBar } from './search-bar'; +import { ComponentList } from './component-list'; +import { LibraryService } from '../../../common/protocol/library-service'; import { ArduinoComponent } from '../../../common/protocol/arduino-component'; import { InstallationProgressDialog } from '../installation-progress-dialog'; @@ -21,21 +22,37 @@ export class FilterableListContainer extends React.Component - - + return
+ {this.renderSearchFilter()} + {this.renderSearchBar()} + {this.renderComponentList()}
} + protected renderSearchFilter(): React.ReactNode { + return undefined; + } + + protected renderSearchBar(): React.ReactNode { + return + } + + protected renderComponentList(): React.ReactNode { + return + } + private handleFilterTextChange(filterText: string): void { - this.props.service.search({ query: filterText }).then(result => { + const { props } = this.state; + this.props.service.search({ query: filterText, props }).then(result => { const { items } = result; this.setState({ filterText, @@ -45,15 +62,7 @@ export class FilterableListContainer extends React.Component { - if (a.name < b.name) { - return -1; - } else if (a.name === b.name) { - return 0; - } else { - return 1; - } - }); + return items.sort((left, right) => left.name.localeCompare(right.name)); } protected async install(comp: ArduinoComponent): Promise { @@ -61,7 +70,8 @@ export class FilterableListContainer extends React.Component void; + readonly resolveFocus?: (element: HTMLElement | undefined) => void; } export interface State { filterText: string; items: ArduinoComponent[]; - } - - export namespace Styles { - export const FILTERABLE_LIST_CONTAINER_CLASS = 'filterable-list-container'; + props?: LibraryService.Search.Props; } export interface ComponentSource { - search(req: { query: string }): Promise<{ items: ArduinoComponent[] }> + search(req: { query: string, props?: LibraryService.Search.Props }): Promise<{ items: ArduinoComponent[] }> install(board: ArduinoComponent): Promise; } diff --git a/arduino-ide-extension/src/browser/components/component-list/search-bar.tsx b/arduino-ide-extension/src/browser/components/component-list/search-bar.tsx index 4ef6fad8..783ac369 100644 --- a/arduino-ide-extension/src/browser/components/component-list/search-bar.tsx +++ b/arduino-ide-extension/src/browser/components/component-list/search-bar.tsx @@ -9,15 +9,22 @@ export class SearchBar extends React.Component { render(): React.ReactNode { return ; } + private setRef = (element: HTMLElement | null) => { + if (this.props.resolveFocus) { + this.props.resolveFocus(element || undefined); + } + } + private handleFilterTextChange(event: React.ChangeEvent): void { this.props.onFilterTextChanged(event.target.value); } @@ -29,6 +36,7 @@ export namespace SearchBar { export interface Props { filterText: string; onFilterTextChanged(filterText: string): void; + readonly resolveFocus?: (element: HTMLElement | undefined) => void; } export namespace Styles { diff --git a/arduino-ide-extension/src/browser/library/library-component-list-item.tsx b/arduino-ide-extension/src/browser/library/library-component-list-item.tsx new file mode 100644 index 00000000..988ddf72 --- /dev/null +++ b/arduino-ide-extension/src/browser/library/library-component-list-item.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { ComponentListItem } from '../components/component-list/component-list-item'; + +export class LibraryComponentListItem extends ComponentListItem { + + render(): React.ReactNode { + const { item } = this.props; + + const name = {item.name}; + const author = by {item.author}; + const installedVersion = !!item.installedVersion &&
+ Version {item.installedVersion} + INSTALLED +
; + + const summary =
{item.summary}
; + + const moreInfo = !!item.moreInfoLink && More info; + const install = this.props.install && item.installable && !item.installedVersion && + ; + const versions = (() => { + const { availableVersions } = item; + if (availableVersions.length === 0) { + return undefined; + } else if (availableVersions.length === 1) { + return + } else { + return ; + } + })(); + + return
+
+ {name} {author} + {installedVersion} +
+
+ {summary} +
+
+ {moreInfo} +
+
+ {install} + {versions} +
+
; + } + +} diff --git a/arduino-ide-extension/src/browser/library/library-component-list.tsx b/arduino-ide-extension/src/browser/library/library-component-list.tsx new file mode 100644 index 00000000..4cc67968 --- /dev/null +++ b/arduino-ide-extension/src/browser/library/library-component-list.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { ArduinoComponent } from '../../common/protocol/arduino-component'; +import { ComponentList } from '../components/component-list/component-list'; +import { LibraryComponentListItem } from './library-component-list-item'; + +export class LibraryComponentList extends ComponentList { + + createItem(item: ArduinoComponent): React.ReactNode { + return + } + +} diff --git a/arduino-ide-extension/src/browser/library/library-filterable-list-container.tsx b/arduino-ide-extension/src/browser/library/library-filterable-list-container.tsx new file mode 100644 index 00000000..a532b45b --- /dev/null +++ b/arduino-ide-extension/src/browser/library/library-filterable-list-container.tsx @@ -0,0 +1,110 @@ +import * as React from 'react'; +import { FilterableListContainer } from '../components/component-list/filterable-list-container'; +import { LibraryComponentList } from './library-component-list'; + +export class LibraryFilterableListContainer extends FilterableListContainer { + + constructor(props: Readonly) { + super(props); + this.state = { + filterText: '', + items: [], + props: { + topic: this.topics[0], + type: this.types[0] + } + }; + } + + protected renderSearchFilter(): React.ReactNode { + const types = this.types.map(type => ); + let type = this.types[0]; + if (this.state.props) { + const currentType = this.types.find(t => t === this.state.props!.type) || this.types[0]; + if (currentType) { + type = currentType; + } + } + const topics = this.topics.map(topic => ); + let topic = this.topics[0]; + if (this.state.props) { + const currentTopic = this.topics.find(t => t === this.state.props!.topic) || this.topics[0]; + if (currentTopic) { + topic = currentTopic; + } + } + return
+
+
Type
{/** TODO: do `minWidth` better! */} + +
+
+
Topic
+ +
+
+ } + + protected onTypeChange = (event: React.ChangeEvent) => { + const type = event.target.value; + const props = { ...(this.state.props || {}), ...{ type } }; + this.setState({ + props + }); + } + + protected onTopicChange = (event: React.ChangeEvent) => { + const topic = event.target.value; + const props = { ...(this.state.props || {}), ...{ topic } }; + this.setState({ + props + }); + } + + protected renderComponentList(): React.ReactNode { + return + } + + private get topics(): string[] { + return [ + 'All', + 'Communication', + 'Data Processing', + 'Data Storage', + 'Device Control', + 'Display', + 'Other', + 'Sensor', + 'Signal Input/Output', + 'Timing', + 'Uncategorized' + ]; + } + + private get types(): string[] { + return [ + 'All', + 'Updatable', + 'Installed', + 'Arduino', + 'Partner', + 'Recommended', + 'Contributed', + 'Retired' + ]; + } + +} diff --git a/arduino-ide-extension/src/browser/library/library-list-widget.tsx b/arduino-ide-extension/src/browser/library/library-list-widget.tsx index 4c7d07eb..00b74e8e 100644 --- a/arduino-ide-extension/src/browser/library/library-list-widget.tsx +++ b/arduino-ide-extension/src/browser/library/library-list-widget.tsx @@ -1,16 +1,88 @@ -import { ListWidget } from './list-widget'; +import * as React from 'react'; +import { inject, injectable, postConstruct } from 'inversify'; +import { Message } from '@phosphor/messaging'; +import { Deferred } from '@theia/core/lib/common/promise-util'; +import { MaybePromise } from '@theia/core/lib/common/types'; +import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget'; +import { WindowService } from '@theia/core/lib/browser/window/window-service'; +import { LibraryFilterableListContainer } from './library-filterable-list-container'; +import { LibraryService } from '../../common/protocol/library-service'; -export class LibraryListWidget extends ListWidget { +@injectable() +export class LibraryListWidget extends ReactWidget { static WIDGET_ID = 'library-list-widget'; static WIDGET_LABEL = 'Library Manager'; - protected widgetProps(): ListWidget.Props { - return { - id: LibraryListWidget.WIDGET_ID, - title: LibraryListWidget.WIDGET_LABEL, - iconClass: 'library-tab-icon' + @inject(LibraryService) + protected readonly libraryService: LibraryService; + + @inject(WindowService) + protected readonly windowService: WindowService; + + /** + * Do not touch or use it. It is for setting the focus on the `input` after the widget activation. + */ + protected focusNode: HTMLElement | undefined; + protected readonly deferredContainer = new Deferred(); + + constructor() { + super(); + this.id = LibraryListWidget.WIDGET_ID + this.title.label = LibraryListWidget.WIDGET_LABEL; + this.title.caption = LibraryListWidget.WIDGET_LABEL + this.title.iconClass = 'library-tab-icon'; + this.title.closable = true; + this.addClass('arduino-list-widget'); + this.node.tabIndex = 0; // To be able to set the focus on the widget. + this.scrollOptions = { + suppressScrollX: true } } -} \ No newline at end of file + @postConstruct() + protected init(): void { + this.update(); + } + + protected getScrollContainer(): MaybePromise { + return this.deferredContainer.promise; + } + + protected onActivateRequest(msg: Message): void { + super.onActivateRequest(msg); + (this.focusNode || this.node).focus(); + } + + protected onUpdateRequest(msg: Message): void { + super.onUpdateRequest(msg); + this.render(); + } + + protected onFocusResolved = (element: HTMLElement | undefined) => { + this.focusNode = element; + } + + render(): React.ReactNode { + return ; + } + +} + +export namespace ListWidget { + + /** + * Props for customizing the abstract list widget. + */ + export interface Props { + readonly id: string; + readonly title: string; + readonly iconClass: string; + } + +} diff --git a/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts b/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts index fe6f5b68..349f0185 100644 --- a/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts +++ b/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts @@ -1,22 +1,12 @@ import { injectable } from 'inversify'; import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application'; import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-contribution'; -import { ListWidget } from './list-widget'; -import { LibraryListWidget } from './library-list-widget'; import { MenuModelRegistry } from '@theia/core'; +import { LibraryListWidget } from './library-list-widget'; import { ArduinoMenus } from '../arduino-frontend-contribution'; @injectable() -export abstract class ListWidgetFrontendContribution extends AbstractViewContribution implements FrontendApplicationContribution { - - async initializeLayout(): Promise { - // await this.openView(); - } - -} - -@injectable() -export class LibraryListWidgetFrontendContribution extends ListWidgetFrontendContribution { +export class LibraryListWidgetFrontendContribution extends AbstractViewContribution implements FrontendApplicationContribution { constructor() { super({ @@ -31,6 +21,10 @@ export class LibraryListWidgetFrontendContribution extends ListWidgetFrontendCon }); } + initializeLayout(): void { + // NOOP + } + registerMenus(menus: MenuModelRegistry): void { if (this.toggleCommand) { menus.registerMenuAction(ArduinoMenus.SKETCH, { diff --git a/arduino-ide-extension/src/browser/library/list-widget.tsx b/arduino-ide-extension/src/browser/library/list-widget.tsx deleted file mode 100644 index 673a081e..00000000 --- a/arduino-ide-extension/src/browser/library/list-widget.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { inject, injectable, postConstruct } from 'inversify'; -import { Message } from '@phosphor/messaging'; -import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget'; -import { WindowService } from '@theia/core/lib/browser/window/window-service'; -import { FilterableListContainer } from '../components/component-list/filterable-list-container'; -import { LibraryService } from '../../common/protocol/library-service'; - -@injectable() -export abstract class ListWidget extends ReactWidget { - - @inject(LibraryService) - protected readonly libraryService: LibraryService; - - @inject(WindowService) - protected readonly windowService: WindowService; - - constructor() { - super(); - const { id, title, iconClass } = this.widgetProps(); - this.id = id; - this.title.label = title; - this.title.caption = title; - this.title.iconClass = iconClass; - this.title.closable = true; - this.addClass(ListWidget.Styles.LIST_WIDGET_CLASS); - this.node.tabIndex = 0; // To be able to set the focus on the widget. - } - - protected abstract widgetProps(): ListWidget.Props; - - @postConstruct() - protected init(): void { - this.update(); - } - - protected onActivateRequest(msg: Message): void { - super.onActivateRequest(msg); - this.node.focus(); - this.render(); - } - - protected onUpdateRequest(msg: Message): void { - super.onUpdateRequest(msg); - this.render(); - } - - render(): React.ReactNode { - return ; - } - -} - -export namespace ListWidget { - - /** - * Props for customizing the abstract list widget. - */ - export interface Props { - readonly id: string; - readonly title: string; - readonly iconClass: string; - } - - export namespace Styles { - export const LIST_WIDGET_CLASS = 'arduino-list-widget' - } - -} \ No newline at end of file diff --git a/arduino-ide-extension/src/browser/style/arduino.useable.css b/arduino-ide-extension/src/browser/style/arduino.useable.css index de9e8e52..04013ffa 100644 --- a/arduino-ide-extension/src/browser/style/arduino.useable.css +++ b/arduino-ide-extension/src/browser/style/arduino.useable.css @@ -18,8 +18,10 @@ is not optimized for dense, information rich UIs. :root { /* Custom Theme Colors */ - --theia-arduino-light: #005C5F; - --theia-arduino-light1: #00979D; + --theia-arduino-light: rgb(0, 102, 102); + --theia-arduino-light1: rgb(0, 153, 153); + --theia-arduino-light2: rgb(218, 226, 228); + --theia-arduino-light3: rgb(237, 241, 242); --theia-arduino-terminal: rgb(0, 0, 0); /* Borders: Width and color (bright to dark) */ --theia-border-width: 1px; diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css index 0f82bed8..9864c1a8 100644 --- a/arduino-ide-extension/src/browser/style/list-widget.css +++ b/arduino-ide-extension/src/browser/style/list-widget.css @@ -8,7 +8,12 @@ } .arduino-list-widget .search-bar { - margin: 0 10px 0 15px; + margin: 0px 10px 10px 15px; + border-color: var(--theia-border-color3); +} + +.arduino-list-widget .search-filters { + margin: 0px 10px 0px 15px; border-color: var(--theia-border-color3); } @@ -16,10 +21,44 @@ border-color: var(--theia-accent-color3); } +.arduino-list-widget .filterable-list-container .search-filters .filter { + margin: 0px 0px 10px 0px; + display: flex; +} + +.arduino-list-widget .filterable-list-container .search-filters .filter .title { + margin: 0px 10px 0px 0px; + align-self: center; + text-transform: uppercase; + font-size: var(--theia-ui-font-size0); +} + +.arduino-list-widget .filterable-list-container .search-filters .filter > select { + width: 100%; +} + .filterable-list-container { display: flex; flex-direction: column; align-items: stretch; + height: 100%; /* This has top be 100% down to the `scrollContainer`. */ +} + +.filterable-list-container .items-container { + height: 100%; /* This has to be propagated down from the widget. */ + position: relative; /* To fix the `top` of the vertical toolbar. */ +} + +.filterable-list-container .items-container > div:nth-child(odd) { + background-color: var(--theia-layout-color2); +} + +.filterable-list-container .items-container > div:nth-child(even) { + background-color: var(--theia-layout-color0); +} + +.filterable-list-container .items-container > div:hover { + background-color: var(--theia-layout-color1); } .component-list-item { @@ -61,6 +100,10 @@ color: var(--theia-ui-font-color2); } +.component-list-item:hover .header .author { + color: var(--theia-ui-font-color1); +} + .component-list-item .header .version { color: var(--theia-ui-font-color2); } @@ -76,18 +119,35 @@ color: var(--theia-inverse-ui-font-color0); } -.component-list-item .footer { - padding-top: 5px; +.component-list-item[min-width~="170px"] .footer { + padding: 5px 5px 0px 0px; + min-height: 26px; /* 21 + 5 from the footer margin top */ display: flex; + flex-direction: row-reverse; } -.component-list-item .footer a { +.component-list-item .footer { + flex-direction: column-reverse; +} + +.component-list-item .footer > * { + display: none +} + +.component-list-item:hover .footer > * { + display: block; + margin: 5px 0px 0px 10px; +} + +.component-list-item:hover .footer > label { + display: block; + align-self: center; + margin: 5px 0px 0px 10px; +} + +.component-list-item .info a { color: var(--theia-brand-color1); text-decoration: none; - font-weight: 600; -} -.component-list-item .footer .install { - margin-left: auto; } .component-list-item a:hover { @@ -96,4 +156,4 @@ .component-list-item strong.installed { color: rgb(0, 151, 157) -} \ No newline at end of file +} diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 64806c1b..c222ab27 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -95,4 +95,8 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} + +.theia-sidepanel-toolbar .theia-sidepanel-title { + margin-left: 10px; } \ No newline at end of file diff --git a/arduino-ide-extension/src/common/protocol/library-service.ts b/arduino-ide-extension/src/common/protocol/library-service.ts index 91295be0..f8689d5a 100644 --- a/arduino-ide-extension/src/common/protocol/library-service.ts +++ b/arduino-ide-extension/src/common/protocol/library-service.ts @@ -3,10 +3,18 @@ import { ArduinoComponent } from "./arduino-component"; export const LibraryServicePath = '/services/library-service'; export const LibraryService = Symbol('LibraryService'); export interface LibraryService { - search(options: { query?: string }): Promise<{ items: Library[] }>; + search(options: { query?: string, props?: LibraryService.Search.Props }): Promise<{ items: Library[] }>; install(library: Library): Promise; } +export namespace LibraryService { + export namespace Search { + export interface Props { + [key: string]: string | undefined; + } + } +} + export interface Library extends ArduinoComponent { readonly builtIn?: boolean; } diff --git a/arduino-ide-extension/src/node/library-service-impl.ts b/arduino-ide-extension/src/node/library-service-impl.ts index d8b01393..742eced2 100644 --- a/arduino-ide-extension/src/node/library-service-impl.ts +++ b/arduino-ide-extension/src/node/library-service-impl.ts @@ -14,7 +14,7 @@ export class LibraryServiceImpl implements LibraryService { @inject(ToolOutputServiceServer) protected readonly toolOutputService: ToolOutputServiceServer; - async search(options: { query?: string; }): Promise<{ items: Library[] }> { + async search(options: { query?: string, props: LibraryService.Search.Props }): Promise<{ items: Library[] }> { const coreClient = await this.coreClientProvider.getClient(); if (!coreClient) { return { items: [] }; diff --git a/yarn.lock b/yarn.lock index 71ae5093..7e2ef1a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3611,6 +3611,11 @@ css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" +css-element-queries@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.0.tgz#081373d7f30302adad46b7c29b83b85f8ef8f62c" + integrity sha512-4gaxpioSFueMcp9yj1TJFCLjfooGv38y6ZdwFUS3GuS+9NIVijdeiExXKwSIHoQDADfpgnaYSTzmJs+bV+Hehg== + css-loader@^0.28.1: version "0.28.11" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"