diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css index 646ce808b445417cd4eb956eb986e890fd5e0346..a7d4d5954d63b3af1d51675d9cd531b9d7db380b 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.css +++ b/src/vs/base/browser/ui/inputbox/inputBox.css @@ -84,7 +84,7 @@ text-align: right; } -.monaco-inputbox-container .monaco-inputbox-message { +.monaco-inputbox-container .monaco-inputbox-message, .monaco-inputbox-ellipsis-right, .monaco-inputbox-ellipsis-left { display: inline-block; overflow: hidden; text-align: left; @@ -101,6 +101,16 @@ margin-top: -1px; } +.monaco-inputbox-ellipsis-right, .monaco-inputbox-ellipsis-left { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.monaco-inputbox-ellipsis-left { + direction: rtl; +} + /* Action bar support */ .monaco-inputbox .monaco-action-bar { position: absolute; diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts index 47f33833fe286c9755c11c7fd33e5b3ffc4f1e29..811db4c4b94038c34167790679ef21bdfe3ebd92 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.ts +++ b/src/vs/base/browser/ui/inputbox/inputBox.ts @@ -67,6 +67,20 @@ export interface IRange { end: number; } +export interface IShowMessageOptions { + force?: boolean; + ellipsis?: EllipsisType; +} + +/** + * Determines whether the ellipsis appears at the left or right side of the string +*/ +export enum EllipsisType { + NONE = 1, + LEFT = 2, + RIGHT = 3 +} + const defaultOpts = { inputBackground: Color.fromHex('#3C3C3C'), inputForeground: Color.fromHex('#CCCCCC'), @@ -283,7 +297,7 @@ export class InputBox extends Widget { this.input.style.width = width + 'px'; } - public showMessage(message: IMessage, force?: boolean): void { + public showMessage(message: IMessage, opts?: IShowMessageOptions): void { this.message = message; dom.removeClass(this.element, 'idle'); @@ -307,8 +321,9 @@ export class InputBox extends Widget { aria.alert(alertText); - if (this.hasFocus() || force) { - this._showMessage(); + if (this.hasFocus() || opts && opts.force) { + const ellipsis = opts && opts.ellipsis; + this._showMessage(ellipsis); } } @@ -362,7 +377,7 @@ export class InputBox extends Widget { } } - private _showMessage(): void { + private _showMessage(useEllipsis?: EllipsisType): void { if (!this.contextViewProvider || !this.message) { return; } @@ -379,9 +394,14 @@ export class InputBox extends Widget { div = dom.append(container, $('.monaco-inputbox-container')); layout(); + let className: string = 'monaco-inputbox-message'; + if (useEllipsis && useEllipsis !== EllipsisType.NONE) { + className = useEllipsis === EllipsisType.LEFT ? 'monaco-inputbox-ellipsis-left' : 'monaco-inputbox-ellipsis-right'; + } + const renderOptions: RenderOptions = { inline: true, - className: 'monaco-inputbox-message' + className }; const spanElement = (this.message.formatContent diff --git a/src/vs/workbench/parts/files/electron-browser/views/explorerViewer.ts b/src/vs/workbench/parts/files/electron-browser/views/explorerViewer.ts index 551744065074fcec7bb0096637f03e0ba688e008..681ca6d43d4f7362de80f6cfca48f2d97726338a 100644 --- a/src/vs/workbench/parts/files/electron-browser/views/explorerViewer.ts +++ b/src/vs/workbench/parts/files/electron-browser/views/explorerViewer.ts @@ -16,7 +16,7 @@ import resources = require('vs/base/common/resources'); import errors = require('vs/base/common/errors'); import { IAction, ActionRunner as BaseActionRunner, IActionRunner } from 'vs/base/common/actions'; import comparers = require('vs/base/common/comparers'); -import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; +import { InputBox, MessageType, EllipsisType } from 'vs/base/browser/ui/inputbox/inputBox'; import { isMacintosh, isLinux } from 'vs/base/common/platform'; import glob = require('vs/base/common/glob'); import { FileLabel, IFileLabelOptions } from 'vs/workbench/browser/labels'; @@ -296,6 +296,7 @@ export class FileRenderer implements IRenderer { }, 0); }); + const initialRelPath: string = relative(stat.root.resource.fsPath, stat.parent.resource.fsPath); const toDispose = [ inputBox, DOM.addStandardDisposableListener(inputBox.inputElement, DOM.EventType.KEY_DOWN, (e: IKeyboardEvent) => { @@ -307,6 +308,18 @@ export class FileRenderer implements IRenderer { done(false, false); } }), + DOM.addStandardDisposableListener(inputBox.inputElement, DOM.EventType.KEY_UP, (e: IKeyboardEvent) => { + if (inputBox.validate()) { + if (inputBox.value && inputBox.value.search(/[\\/]/) !== -1) { // only show if there's a slash + const newPath = replaceWithNativeSep(paths.join(initialRelPath, inputBox.value)); + inputBox.showMessage({ + type: MessageType.INFO, + content: newPath, + formatContent: true + }, { force: false, ellipsis: EllipsisType.LEFT }); + } + } + }), DOM.addDisposableListener(inputBox.inputElement, DOM.EventType.BLUR, () => { done(inputBox.isInputValid(), true); }), @@ -316,6 +329,11 @@ export class FileRenderer implements IRenderer { } } +function replaceWithNativeSep(str: string) { + if (!str) { return str; } + return str.replace(/[\\/]/g, paths.nativeSep); +} + // Explorer Accessibility Provider export class FileAccessibilityProvider implements IAccessibilityProvider {