mirror of
https://github.com/Microsoft/vscode
synced 2024-09-13 21:55:38 +00:00
Address drop UX feedback (#180343)
- Reduce margin on button - Change icon to insert - Try to align styling to match other editor widgets - Use capital casing on entries
This commit is contained in:
parent
86528d8df2
commit
3273501a5a
|
@ -135,15 +135,15 @@ export function createUriListSnippet(document: vscode.TextDocument, uris: readon
|
||||||
|
|
||||||
let label: string;
|
let label: string;
|
||||||
if (insertedImageCount > 0 && insertedLinkCount > 0) {
|
if (insertedImageCount > 0 && insertedLinkCount > 0) {
|
||||||
label = vscode.l10n.t('Insert Markdown images and links');
|
label = vscode.l10n.t('Insert Markdown Images and Links');
|
||||||
} else if (insertedImageCount > 0) {
|
} else if (insertedImageCount > 0) {
|
||||||
label = insertedImageCount > 1
|
label = insertedImageCount > 1
|
||||||
? vscode.l10n.t('Insert Markdown images')
|
? vscode.l10n.t('Insert Markdown Images')
|
||||||
: vscode.l10n.t('Insert Markdown image');
|
: vscode.l10n.t('Insert Markdown Image');
|
||||||
} else {
|
} else {
|
||||||
label = insertedLinkCount > 1
|
label = insertedLinkCount > 1
|
||||||
? vscode.l10n.t('Insert Markdown links')
|
? vscode.l10n.t('Insert Markdown Links')
|
||||||
: vscode.l10n.t('Insert Markdown link');
|
: vscode.l10n.t('Insert Markdown Link');
|
||||||
}
|
}
|
||||||
|
|
||||||
return { snippet, label };
|
return { snippet, label };
|
||||||
|
|
|
@ -30,7 +30,7 @@ class DefaultTextDropProvider implements DocumentOnDropEditProvider {
|
||||||
|
|
||||||
const text = await textEntry.asString();
|
const text = await textEntry.asString();
|
||||||
return {
|
return {
|
||||||
label: localize('defaultDropProvider.text.label', "Insert plain text"),
|
label: localize('defaultDropProvider.text.label', "Insert Plain Text"),
|
||||||
insertText: text
|
insertText: text
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -63,13 +63,13 @@ class UriListDropProvider implements DocumentOnDropEditProvider {
|
||||||
if (uriCount > 0) {
|
if (uriCount > 0) {
|
||||||
// Dropping at least one generic uri (such as https) so use most generic label
|
// Dropping at least one generic uri (such as https) so use most generic label
|
||||||
label = entries.length > 1
|
label = entries.length > 1
|
||||||
? localize('defaultDropProvider.uriList.uris', "Insert uris")
|
? localize('defaultDropProvider.uriList.uris', "Insert Uris")
|
||||||
: localize('defaultDropProvider.uriList.uri', "Insert uri");
|
: localize('defaultDropProvider.uriList.uri', "Insert Uri");
|
||||||
} else {
|
} else {
|
||||||
// All the paths are file paths
|
// All the paths are file paths
|
||||||
label = entries.length > 1
|
label = entries.length > 1
|
||||||
? localize('defaultDropProvider.uriList.paths', "Insert paths")
|
? localize('defaultDropProvider.uriList.paths', "Insert Paths")
|
||||||
: localize('defaultDropProvider.uriList.path', "Insert path");
|
: localize('defaultDropProvider.uriList.path', "Insert Path");
|
||||||
}
|
}
|
||||||
|
|
||||||
return { insertText, label };
|
return { insertText, label };
|
||||||
|
@ -103,8 +103,8 @@ class RelativePathDropProvider implements DocumentOnDropEditProvider {
|
||||||
return {
|
return {
|
||||||
insertText: relativeUris.join(' '),
|
insertText: relativeUris.join(' '),
|
||||||
label: entries.length > 1
|
label: entries.length > 1
|
||||||
? localize('defaultDropProvider.uriList.relativePaths', "Insert relative paths")
|
? localize('defaultDropProvider.uriList.relativePaths', "Insert Relative Paths")
|
||||||
: localize('defaultDropProvider.uriList.relativePath', "Insert relative path")
|
: localize('defaultDropProvider.uriList.relativePath', "Insert Relative Path")
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,18 @@
|
||||||
*--------------------------------------------------------------------------------------------*/
|
*--------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
.post-drop-widget .monaco-button {
|
.post-drop-widget .monaco-button {
|
||||||
padding: 0;
|
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
|
||||||
|
border: 1px solid var(--vscode-widget-border, transparent);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
color: var(--vscode-input-foreground);
|
||||||
|
background-color: var(--vscode-editorWidget-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-drop-widget .monaco-button:hover {
|
||||||
|
background-color: var(--vscode-inputOption-hoverBackground) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-drop-widget .monaco-button .codicon {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,9 +4,9 @@
|
||||||
*--------------------------------------------------------------------------------------------*/
|
*--------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
import * as dom from 'vs/base/browser/dom';
|
import * as dom from 'vs/base/browser/dom';
|
||||||
import { Event } from 'vs/base/common/event';
|
|
||||||
import { Button } from 'vs/base/browser/ui/button/button';
|
import { Button } from 'vs/base/browser/ui/button/button';
|
||||||
import { toAction } from 'vs/base/common/actions';
|
import { toAction } from 'vs/base/common/actions';
|
||||||
|
import { Event } from 'vs/base/common/event';
|
||||||
import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
|
import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
|
||||||
import 'vs/css!./postDropWidget';
|
import 'vs/css!./postDropWidget';
|
||||||
import { ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser';
|
import { ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser';
|
||||||
|
@ -15,7 +15,6 @@ import { DocumentOnDropEdit } from 'vs/editor/common/languages';
|
||||||
import { localize } from 'vs/nls';
|
import { localize } from 'vs/nls';
|
||||||
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
|
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
|
||||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||||
import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
|
|
||||||
|
|
||||||
|
|
||||||
interface DropEditSet {
|
interface DropEditSet {
|
||||||
|
@ -30,6 +29,7 @@ class PostDropWidget extends Disposable implements IContentWidget {
|
||||||
readonly suppressMouseDown = true;
|
readonly suppressMouseDown = true;
|
||||||
|
|
||||||
private domNode!: HTMLElement;
|
private domNode!: HTMLElement;
|
||||||
|
private button!: Button;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly editor: ICodeEditor,
|
private readonly editor: ICodeEditor,
|
||||||
|
@ -57,17 +57,16 @@ class PostDropWidget extends Disposable implements IContentWidget {
|
||||||
private create(): void {
|
private create(): void {
|
||||||
this.domNode = dom.$('.post-drop-widget');
|
this.domNode = dom.$('.post-drop-widget');
|
||||||
|
|
||||||
const button = this._register(new Button(this.domNode, {
|
this.button = this._register(new Button(this.domNode, {
|
||||||
title: localize('postDropWidgetTile', "Drop options..."),
|
title: localize('postDropWidgetTile', "Drop options..."),
|
||||||
supportIcons: true,
|
supportIcons: true,
|
||||||
...defaultButtonStyles,
|
|
||||||
}));
|
}));
|
||||||
button.label = '$(clippy)';
|
this.button.label = '$(insert)';
|
||||||
|
|
||||||
this._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {
|
this._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {
|
||||||
this._contextMenuService.showContextMenu({
|
this._contextMenuService.showContextMenu({
|
||||||
getAnchor: () => {
|
getAnchor: () => {
|
||||||
const pos = dom.getDomNodePagePosition(button.element);
|
const pos = dom.getDomNodePagePosition(this.button.element);
|
||||||
return { x: pos.left + pos.width, y: pos.top + pos.height };
|
return { x: pos.left + pos.width, y: pos.top + pos.height };
|
||||||
},
|
},
|
||||||
getActions: () => {
|
getActions: () => {
|
||||||
|
|
Loading…
Reference in a new issue