-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed #1278: implemented tabbar decorator & supported error marker in…
… editor tabs - Implemented `TabBarDecorator` that provides tabs with decorations, similar to what we already had for tree nodes. - Supported diagnostic problem markers (error, warning, ...) in editor tabs in the main area. Tabs in side bars can be decorated as well in the future using the same code. Signed-off-by: fangnx <[email protected]>
- Loading branch information
fangnx
committed
Aug 8, 2019
1 parent
f9ff237
commit 9633236
Showing
5 changed files
with
395 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| /******************************************************************************** | ||
| * Copyright (C) 2019 Ericsson and others. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License v. 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0. | ||
| * | ||
| * This Source Code may also be made available under the following Secondary | ||
| * Licenses when the conditions for such availability set forth in the Eclipse | ||
| * Public License v. 2.0 are satisfied: GNU General Public License, version 2 | ||
| * with the GNU Classpath Exception which is available at | ||
| * https://www.gnu.org/software/classpath/license.html. | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 | ||
| ********************************************************************************/ | ||
|
|
||
| import { inject, injectable, named, postConstruct } from 'inversify'; | ||
| import { Event, Emitter, Disposable, DisposableCollection, ContributionProvider } from '../../common'; | ||
| import { Title, Widget } from '@phosphor/widgets'; | ||
|
|
||
| export const TabBarDecorator = Symbol('TabBarDecorator'); | ||
|
|
||
| export interface TabBarDecorator { | ||
|
|
||
| /** | ||
| * The unique identifier of the tab bar decorator. | ||
| */ | ||
| readonly id: string; | ||
|
|
||
| readonly onDidChangeDecorations: Event<(titles: Title<Widget>[]) => void>; | ||
|
|
||
| /** | ||
| * Decorate tabs by the associated editor URI. | ||
| * @returns A map from URI of the tab to its decoration data. | ||
| */ | ||
| decorate(titles: Title<Widget>[]): Map<string, TabBarDecoration.Data>; | ||
| } | ||
|
|
||
| @injectable() | ||
| export class TabBarDecoratorService implements Disposable { | ||
|
|
||
| protected readonly onDidChangeDecorationsEmitter = new Emitter<void>(); | ||
|
|
||
| readonly onDidChangeDecorations = this.onDidChangeDecorationsEmitter.event; | ||
|
|
||
| protected readonly toDispose = new DisposableCollection(); | ||
|
|
||
| @inject(ContributionProvider) @named(TabBarDecorator) | ||
| protected readonly contributions: ContributionProvider<TabBarDecorator>; | ||
|
|
||
| protected decorators: ReadonlyArray<TabBarDecorator>; | ||
|
|
||
| @postConstruct() | ||
| protected init(): void { | ||
| this.decorators = this.contributions.getContributions(); | ||
| this.toDispose.pushAll(this.decorators.map(decorator => | ||
| decorator.onDidChangeDecorations(data => | ||
| this.onDidChangeDecorationsEmitter.fire(undefined) | ||
| )) | ||
| ); | ||
|
|
||
| } | ||
|
|
||
| dispose(): void { | ||
| this.toDispose.dispose(); | ||
| } | ||
|
|
||
| getDecorations(titles: Title<Widget>[]): Map<string, TabBarDecoration.Data[]> { | ||
| const changes: Map<string, TabBarDecoration.Data[]> = new Map(); | ||
| for (const decorator of this.decorators) { | ||
| console.log(decorator); | ||
| for (const [id, data] of (decorator.decorate(titles)).entries()) { | ||
| if (changes.has(id)) { | ||
| changes.get(id)!.push(data); | ||
| } else { | ||
| changes.set(id, [data]); | ||
| } | ||
| } | ||
| } | ||
| return changes; | ||
| } | ||
| } | ||
|
|
||
| export namespace TabBarDecoration { | ||
|
|
||
| export namespace Styles { | ||
| export const CAPTION_HIGHLIGHT_CLASS = 'theia-caption-highlight'; | ||
| export const CAPTION_PREFIX_CLASS = 'theia-caption-prefix'; | ||
| export const CAPTION_SUFFIX_CLASS = 'theia-caption-suffix'; | ||
| export const ICON_WRAPPER_CLASS = 'theia-icon-wrapper'; | ||
| export const DECORATOR_SIZE_CLASS = 'theia-decorator-size'; | ||
| export const TOP_RIGHT_CLASS = 'theia-top-right'; | ||
| export const BOTTOM_RIGHT_CLASS = 'theia-bottom-right'; | ||
| export const BOTTOM_LEFT_CLASS = 'theia-bottom-left'; | ||
| export const TOP_LEFT_CLASS = 'theia-top-left'; | ||
| } | ||
|
|
||
| /** | ||
| * Enumeration for the quadrant to overlay the icon on. | ||
| */ | ||
| export enum IconOverlayPosition { | ||
| TOP_RIGHT, | ||
| BOTTOM_RIGHT, | ||
| BOTTOM_LEFT, | ||
| TOP_LEFT | ||
| } | ||
|
|
||
| export type Color = string; | ||
|
|
||
| export namespace IconOverlayPosition { | ||
|
|
||
| export function getStyle(position: IconOverlayPosition): string { | ||
| switch (position) { | ||
| case IconOverlayPosition.TOP_RIGHT: return TabBarDecoration.Styles.TOP_RIGHT_CLASS; | ||
| case IconOverlayPosition.BOTTOM_RIGHT: return TabBarDecoration.Styles.BOTTOM_RIGHT_CLASS; | ||
| case IconOverlayPosition.BOTTOM_LEFT: return TabBarDecoration.Styles.BOTTOM_LEFT_CLASS; | ||
| case IconOverlayPosition.TOP_LEFT: return TabBarDecoration.Styles.TOP_LEFT_CLASS; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * A shape that can be optionally rendered behind the overlay icon. Can be used to further refine colors. | ||
| */ | ||
| export interface IconOverlayBackground { | ||
|
|
||
| readonly shape: 'circle' | 'square'; | ||
| readonly color?: Color; | ||
| } | ||
|
|
||
| /** | ||
| * Has no effect if the tree node being decorated has no associated icon. | ||
| */ | ||
| export interface BaseOverlay { | ||
|
|
||
| /** | ||
| * The position where the decoration will be placed on the top of the original icon. | ||
| */ | ||
| readonly position: IconOverlayPosition; | ||
|
|
||
| /** | ||
| * The color of the overlaying icon. If not specified, then the default icon color will be used. | ||
| */ | ||
| readonly color?: Color; | ||
|
|
||
| /** | ||
| * The optional background color of the overlay icon. | ||
| */ | ||
| readonly background?: IconOverlayBackground; | ||
|
|
||
| } | ||
|
|
||
| export interface IconOverlay extends BaseOverlay { | ||
|
|
||
| /** | ||
| * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`. | ||
| * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. | ||
| */ | ||
| readonly icon: string; | ||
| } | ||
|
|
||
| export interface IconClassOverlay extends BaseOverlay { | ||
|
|
||
| /** | ||
| * This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw'] | ||
| * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. | ||
| */ | ||
| readonly iconClass: string[]; | ||
| } | ||
|
|
||
| export interface Data { | ||
|
|
||
| readonly iconOverlay?: IconOverlay | IconClassOverlay | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.