Commit c8e447c

author

Akos Kitta

committed

feat: new icons + dispatch based on the theme

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

1 parent 2e7f2d9 commit c8e447cCopy full SHA for c8e447c

File tree

9 files changed

+81

-28

lines changed

arduino-ide-extension/src
- browser
  - contributions
    - open-recent-sketch.ts
  - native-image-cache.ts
- node/static/icons

9 files changed

+81

-28

lines changed

`‎arduino-ide-extension/src/browser/contributions/open-recent-sketch.ts‎`

Lines changed: 41 additions & 13 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { NativeImage } from '@theia/core/electron-shared/electron';`
	`2`	`+import { ThemeService } from '@theia/core/lib/browser/theming';`
`2`	`3`	`import {`
`3`	`4`	`Disposable,`
`4`	`5`	`DisposableCollection,`
`@@ -9,7 +10,11 @@ import { inject, injectable } from '@theia/core/shared/inversify';`
`9`	`10`	`import { SketchesError } from '../../common/protocol';`
`10`	`11`	`import { ConfigServiceClient } from '../config/config-service-client';`
`11`	`12`	`import { ArduinoMenus } from '../menu/arduino-menus';`
`12`		`-import { NativeImageCache } from '../native-image-cache';`
	`13`	`+import {`
	`14`	`+ isThemeNativeImage,`
	`15`	`+ NativeImageCache,`
	`16`	`+ ThemeNativeImage,`
	`17`	`+} from '../native-image-cache';`
`13`	`18`	`import { NotificationCenter } from '../notification-center';`
`14`	`19`	`import { CloudSketchContribution } from './cloud-contribution';`
`15`	`20`	`import { CommandRegistry, MenuModelRegistry, Sketch } from './contribution';`
`@@ -27,21 +32,34 @@ export class OpenRecentSketch extends CloudSketchContribution {`
`27`	`32`	`private readonly imageCache: NativeImageCache;`
`28`	`33`	`@inject(ConfigServiceClient)`
`29`	`34`	`private readonly configServiceClient: ConfigServiceClient;`
	`35`	`+ @inject(ThemeService)`
	`36`	`+ private readonly themeService: ThemeService;`
`30`	`37`
`31`		`- private readonly toDispose = new DisposableCollection();`
`32`		`- private cloudImage: NativeImage \| undefined;`
	`38`	`+ private readonly toDisposeBeforeRegister = new DisposableCollection();`
	`39`	`+ private readonly toDispose = new DisposableCollection(`
	`40`	`+ this.toDisposeBeforeRegister`
	`41`	`+ );`
	`42`	`+ private cloudImage: NativeImage \| ThemeNativeImage;`
`33`	`43`
`34`	`44`	`override onStart(): void {`
`35`		`- this.notificationCenter.onRecentSketchesDidChange(({ sketches }) =>`
`36`		`- this.refreshMenu(sketches)`
`37`		`- );`
`38`		`- this.imageCache`
`39`		`- .getImage('cloud')`
`40`		`- .then((image) => (this.cloudImage = image));`
	`45`	`+ this.toDispose.pushAll([`
	`46`	`+ this.notificationCenter.onRecentSketchesDidChange(({ sketches }) =>`
	`47`	`+ this.refreshMenu(sketches)`
	`48`	`+ ),`
	`49`	`+ this.themeService.onDidColorThemeChange(() => this.update()),`
	`50`	`+ ]);`
	`51`	`+ }`
	`52`	`+`
	`53`	`+ onStop(): void {`
	`54`	`+ this.toDispose.dispose();`
`41`	`55`	`}`
`42`	`56`
`43`	`57`	`override async onReady(): Promise<void> {`
`44`	`58`	`this.update();`
	`59`	`+ this.imageCache.getImage('cloud').then((image) => {`
	`60`	`+ this.cloudImage = image;`
	`61`	`+ this.update();`
	`62`	`+ });`
`45`	`63`	`}`
`46`	`64`
`47`	`65`	`override registerMenus(registry: MenuModelRegistry): void {`
`@@ -65,7 +83,7 @@ export class OpenRecentSketch extends CloudSketchContribution {`
`65`	`83`
`66`	`84`	`private register(sketches: Sketch[]): void {`
`67`	`85`	`const order = 0;`
`68`		`- this.toDispose.dispose();`
	`86`	`+ this.toDisposeBeforeRegister.dispose();`
`69`	`87`	`for (const sketch of sketches) {`
`70`	`88`	`const { uri } = sketch;`
`71`	`89`	const command = { id: `arduino-open-recent--${uri}` };
`@@ -95,7 +113,7 @@ export class OpenRecentSketch extends CloudSketchContribution {`
`95`	`113`	`ArduinoMenus.FILE__OPEN_RECENT_SUBMENU,`
`96`	`114`	`menuAction`
`97`	`115`	`);`
`98`		`- this.toDispose.pushAll([`
	`116`	`+ this.toDisposeBeforeRegister.pushAll([`
`99`	`117`	`new DisposableCollection(`
`100`	`118`	`Disposable.create(() =>`
`101`	`119`	`this.commandRegistry.unregisterCommand(command)`
`@@ -109,13 +127,23 @@ export class OpenRecentSketch extends CloudSketchContribution {`
`109`	`127`	`}`
`110`	`128`
`111`	`129`	`private assignImage(sketch: Sketch, menuAction: MenuAction): MenuAction {`
`112`		`- if (this.cloudImage) {`
	`130`	`+ const image = this.nativeImageForTheme();`
	`131`	`+ if (image) {`
`113`	`132`	`const dataDirUri = this.configServiceClient.tryGetDataDirUri();`
`114`	`133`	`const isCloud = this.createFeatures.isCloud(sketch, dataDirUri);`
`115`	`134`	`if (isCloud) {`
`116`		`- Object.assign(menuAction, { nativeImage: this.cloudImage });`
	`135`	`+ Object.assign(menuAction, { nativeImage: image });`
`117`	`136`	`}`
`118`	`137`	`}`
`119`	`138`	`return menuAction;`
`120`	`139`	`}`
	`140`	`+`
	`141`	`+ private nativeImageForTheme(): NativeImage \| undefined {`
	`142`	`+ const image = this.cloudImage;`
	`143`	`+ if (isThemeNativeImage(image)) {`
	`144`	`+ const themeType = this.themeService.getCurrentTheme().type;`
	`145`	`+ return themeType === 'light' ? image.light : image.dark;`
	`146`	`+ }`
	`147`	`+ return image;`
	`148`	`+ }`
`121`	`149`	`}`

`‎arduino-ide-extension/src/browser/native-image-cache.ts‎`

Lines changed: 40 additions & 15 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,39 +12,54 @@ import fetch from 'cross-fetch';`
`12`	`12`	`const nativeImageIdentifierLiterals = ['cloud'] as const;`
`13`	`13`	`export type NativeImageIdentifier =`
`14`	`14`	`typeof nativeImageIdentifierLiterals[number];`
`15`		`-export const nativeImages: Record<NativeImageIdentifier, string> = {`
`16`		`- cloud: 'cloud.png',`
	`15`	`+export const nativeImages: Record<`
	`16`	`+ NativeImageIdentifier,`
	`17`	`+ string \| { light: string; dark: string }`
	`18`	`+> = {`
	`19`	`+ cloud: { light: 'cloud-light.png', dark: 'cloud-dark.png' },`
`17`	`20`	`};`
`18`	`21`
	`22`	`+export interface ThemeNativeImage {`
	`23`	`+ readonly light: NativeImage;`
	`24`	`+ readonly dark: NativeImage;`
	`25`	`+}`
	`26`	`+`
	`27`	`+export function isThemeNativeImage(arg: unknown): arg is ThemeNativeImage {`
	`28`	`+ return (`
	`29`	`+ typeof arg === 'object' &&`
	`30`	`+ (<ThemeNativeImage>arg).light !== undefined &&`
	`31`	`+ (<ThemeNativeImage>arg).dark !== undefined`
	`32`	`+ );`
	`33`	`+}`
	`34`	`+`
	`35`	`+type Image = NativeImage \| ThemeNativeImage;`
	`36`	`+`
`19`	`37`	`@injectable()`
`20`	`38`	`export class NativeImageCache implements FrontendApplicationContribution {`
`21`		`- private readonly cache = new Map<NativeImageIdentifier, NativeImage>();`
`22`		`- private readonly loading = new Map<`
`23`		`- NativeImageIdentifier,`
`24`		`- Promise<NativeImage>`
`25`		`- >();`
	`39`	`+ private readonly cache = new Map<NativeImageIdentifier, Image>();`
	`40`	`+ private readonly loading = new Map<NativeImageIdentifier, Promise<Image>>();`
`26`	`41`
`27`	`42`	`onStart(): void {`
`28`	`43`	`Object.keys(nativeImages).forEach((identifier: NativeImageIdentifier) =>`
`29`	`44`	`this.getImage(identifier)`
`30`	`45`	`);`
`31`	`46`	`}`
`32`	`47`
`33`		`- tryGetImage(identifier: NativeImageIdentifier): NativeImage \| undefined {`
	`48`	`+ tryGetImage(identifier: NativeImageIdentifier): Image \| undefined {`
`34`	`49`	`return this.cache.get(identifier);`
`35`	`50`	`}`
`36`	`51`
`37`		`- async getImage(identifier: NativeImageIdentifier): Promise<NativeImage> {`
	`52`	`+ async getImage(identifier: NativeImageIdentifier): Promise<Image> {`
`38`	`53`	`const image = this.cache.get(identifier);`
`39`	`54`	`if (image) {`
`40`	`55`	`return image;`
`41`	`56`	`}`
`42`	`57`	`let loading = this.loading.get(identifier);`
`43`	`58`	`if (!loading) {`
`44`		`- const deferred = new Deferred<NativeImage>();`
	`59`	`+ const deferred = new Deferred<Image>();`
`45`	`60`	`loading = deferred.promise;`
`46`	`61`	`this.loading.set(identifier, loading);`
`47`		`- this.fetchIconData(identifier).then(`
	`62`	`+ this.fetchImage(identifier).then(`
`48`	`63`	`(image) => {`
`49`	`64`	`if (!this.cache.has(identifier)) {`
`50`	`65`	`this.cache.set(identifier, image);`
`@@ -61,10 +76,20 @@ export class NativeImageCache implements FrontendApplicationContribution {`
`61`	`76`	`return loading;`
`62`	`77`	`}`
`63`	`78`
`64`		`- private async fetchIconData(`
`65`		`- identifier: NativeImageIdentifier`
`66`		`- ): Promise<NativeImage> {`
`67`		- const path = `nativeImage/${nativeImages[identifier]}`;
	`79`	`+ private async fetchImage(identifier: NativeImageIdentifier): Promise<Image> {`
	`80`	`+ const value = nativeImages[identifier];`
	`81`	`+ if (typeof value === 'string') {`
	`82`	`+ return this.fetchIconData(value);`
	`83`	`+ }`
	`84`	`+ const [light, dark] = await Promise.all([`
	`85`	`+ this.fetchIconData(value.light),`
	`86`	`+ this.fetchIconData(value.dark),`
	`87`	`+ ]);`
	`88`	`+ return { light, dark };`
	`89`	`+ }`
	`90`	`+`
	`91`	`+ private async fetchIconData(filename: string): Promise<NativeImage> {`
	`92`	+ const path = `nativeImage/${filename}`;
`68`	`93`	`const endpoint = new Endpoint({ path }).getRestUrl().toString();`
`69`	`94`	`const response = await fetch(endpoint);`
`70`	`95`	`const arrayBuffer = await response.arrayBuffer();`