diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarPart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarPart.css index 8c283ded3ece18643d32e7080c992d6e0fc77269..23b9eabb2d83c5f7e2a115d0bf13b2ea38f3c327 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarPart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarPart.css @@ -35,17 +35,19 @@ margin-left: 5px; } -.monaco-workbench > .part.statusbar > .statusbar-item a { +.monaco-workbench > .part.statusbar > .statusbar-item a:not([disabled]) { cursor: pointer; display: inline-block; + height: 100%; } .monaco-workbench > .part.statusbar > .statusbar-entry > span { cursor: default; + height: 100%; } .monaco-workbench > .part.statusbar > .statusbar-entry > span, -.monaco-workbench > .part.statusbar > .statusbar-entry > a { +.monaco-workbench > .part.statusbar > .statusbar-entry > a:not([disabled]) { padding: 0 5px 0 5px; white-space: pre; /* gives some degree of styling */ } @@ -55,13 +57,13 @@ font-size: 14px; } -.monaco-workbench > .part.statusbar > .statusbar-item a:hover { +.monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]) { background-color: rgba(255, 255, 255, 0.12); text-decoration: none; color: inherit; } -.monaco-workbench > .part.statusbar > .statusbar-item a:active { +.monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]) { background-color: rgba(255, 255, 255, 0.18); } diff --git a/src/vs/workbench/parts/git/browser/gitWidgets.ts b/src/vs/workbench/parts/git/browser/gitWidgets.ts index bc9fe67cbd726f58258f74f4b16dc7a60e7c82d8..b9c02013d98393f501cabcbb39c568f58e4265d0 100644 --- a/src/vs/workbench/parts/git/browser/gitWidgets.ts +++ b/src/vs/workbench/parts/git/browser/gitWidgets.ts @@ -2,137 +2,117 @@ * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -'use strict'; import nls = require('vs/nls'); -import react = require('lib/react'); -import objects = require('vs/base/common/objects'); import strings = require('vs/base/common/strings'); -import lifecycle = require('vs/base/common/lifecycle'); -import git = require('vs/workbench/parts/git/common/git'); -import statusbar = require('vs/workbench/browser/parts/statusbar/statusbar'); -import {IQuickOpenService} from 'vs/workbench/services/quickopen/browser/quickOpenService'; -import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation'; - -import IGitService = git.IGitService; - -interface GitStatusbarWidgetProps { - instantiationService: IInstantiationService; - gitService: IGitService; - quickOpenService: IQuickOpenService; -} - -interface GitStatusbarWidgetState { - serviceState: git.ServiceState; +import { assign } from 'vs/base/common/objects'; +import { emmet as $, append } from 'vs/base/browser/dom'; +import { IDisposable, combinedDispose } from 'vs/base/common/lifecycle'; +import { IGitService, ServiceState, IBranch, ServiceOperations } from 'vs/workbench/parts/git/common/git'; +import { IStatusbarItem } from 'vs/workbench/browser/parts/statusbar/statusbar'; +import { IQuickOpenService } from 'vs/workbench/services/quickopen/browser/quickOpenService'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; + +interface IState { + serviceState: ServiceState; isBusy: boolean; - HEAD: git.IBranch; + HEAD: IBranch; ps1: string; } -class GitStatusbarWidgetSpec extends react.BaseComponent { +export class GitStatusbarItem implements IStatusbarItem { - private serviceListeners: lifecycle.IDisposable[]; + private instantiationService: IInstantiationService; + private gitService: IGitService; + private quickOpenService: IQuickOpenService; + private state: IState; + private element: HTMLElement; + private toDispose: IDisposable[]; - public componentDidMount(): void { - this.serviceListeners = [ - this.props.gitService.addBulkListener2(() => this.onGitServiceChange()) - ]; - } + constructor( + @IInstantiationService instantiationService: IInstantiationService, + @IGitService gitService: IGitService, + @IQuickOpenService quickOpenService: IQuickOpenService + ) { + this.instantiationService = instantiationService; + this.gitService = gitService; + this.quickOpenService = quickOpenService; + this.toDispose = []; - public getInitialState(): GitStatusbarWidgetState { - return { - serviceState: git.ServiceState.NotInitialized, + this.state = { + serviceState: ServiceState.NotInitialized, isBusy: false, HEAD: null, ps1: '' }; } - public render(): react.ReactHTMLElement { - if (this.state.serviceState !== git.ServiceState.OK) { - return react.createElement('span', { - className: 'git-statusbar-item disabled', - title: nls.localize('gitNotEnabled', "Git is not enabled in this workspace."), - }, '\u00a0'); - } - - var HEAD = this.state.HEAD; - var className = 'git-statusbar-item'; - var label: string; - var onClick: (e: react.SyntheticEvent)=>void = null; - - if (this.state.isBusy) { - className += ' busy'; - } else { - onClick = this.onClick; - } - - if (!HEAD) { - label = this.state.ps1; - } else if (!HEAD.name) { - label = this.state.ps1; - className += ' headless'; - } else if (!HEAD.commit || !HEAD.upstream || (!HEAD.ahead && !HEAD.behind)) { - label = this.state.ps1; - } else { - label = strings.format('{0} {1}↓ {2}↑', this.state.ps1, HEAD.behind, HEAD.ahead); - } - - return react.createElement('a', { - className: className, - onClick: onClick - }, label); + public render(container: HTMLElement): IDisposable { + this.element = append(container, $('a')); + this.setState(this.state); + this.toDispose.push(this.gitService.addBulkListener2(() => this.onGitServiceChange())); + return combinedDispose(...this.toDispose); } private onGitServiceChange(): void { - var service = this.props.gitService; - var model = service.getModel(); + const model = this.gitService.getModel(); - this.updateState({ - serviceState: service.getState(), - isBusy: service.getRunningOperations().some(op => op.id === git.ServiceOperations.CHECKOUT || op.id === git.ServiceOperations.BRANCH), + this.setState({ + serviceState: this.gitService.getState(), + isBusy: this.gitService.getRunningOperations().some(op => op.id === ServiceOperations.CHECKOUT || op.id === ServiceOperations.BRANCH), HEAD: model.getHEAD(), ps1: model.getPS1() }); } - private updateState(update: any, callback?: ()=>void): void { - this.setState(objects.mixin(update, this.state, false), callback); - } - - private onClick(e: react.SyntheticEvent): void { - this.props.quickOpenService.show('git checkout '); - } -} + private setState(state: IState): void { + this.state = state; -var GitStatusbarWidget = react.createFactoryForTS(GitStatusbarWidgetSpec.prototype); + let disabled = false; + let className = 'git-statusbar-item'; + let textContent: string; + let title = ''; + let onclick: () => void = null; -export class GitStatusbarItem implements statusbar.IStatusbarItem { + if (state.serviceState !== ServiceState.OK) { + disabled = true; + className += ' disabled'; + title = nls.localize('gitNotEnabled', "Git is not enabled in this workspace."); + textContent = '\u00a0'; + } else { + const HEAD = state.HEAD; + + if (state.isBusy) { + className += ' busy'; + } else { + onclick = () => this.onClick(); + } + + if (!HEAD) { + textContent = state.ps1; + } else if (!HEAD.name) { + textContent = state.ps1; + className += ' headless'; + } else if (!HEAD.commit || !HEAD.upstream || (!HEAD.ahead && !HEAD.behind)) { + textContent = state.ps1; + } else { + textContent = strings.format('{0} {1}↓ {2}↑', state.ps1, HEAD.behind, HEAD.ahead); + } + } - private instantiationService: IInstantiationService; - private gitService: IGitService; - private quickOpenService: IQuickOpenService; + this.element.className = className; + this.element.title = title; + this.element.textContent = textContent; + this.element.onclick = onclick; - constructor( - @IInstantiationService instantiationService: IInstantiationService, - @IGitService gitService: IGitService, - @IQuickOpenService quickOpenService: IQuickOpenService - ) { - this.instantiationService = instantiationService; - this.gitService = gitService; - this.quickOpenService = quickOpenService; + if (disabled) { + this.element.setAttribute('disabled', 'disabled'); + } else { + this.element.removeAttribute('disabled'); + } } - public render(container: HTMLElement): lifecycle.IDisposable { - react.render( - GitStatusbarWidget({ - instantiationService: this.instantiationService, - gitService: this.gitService, - quickOpenService: this.quickOpenService - }), - container - ); - - return lifecycle.toDisposable(() => react.unmountComponentAtNode(container)); + private onClick(): void { + this.quickOpenService.show('git checkout '); } } \ No newline at end of file