mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +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;
|
||||
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) {
|
||||
label = insertedImageCount > 1
|
||||
? vscode.l10n.t('Insert Markdown images')
|
||||
: vscode.l10n.t('Insert Markdown image');
|
||||
? vscode.l10n.t('Insert Markdown Images')
|
||||
: vscode.l10n.t('Insert Markdown Image');
|
||||
} else {
|
||||
label = insertedLinkCount > 1
|
||||
? vscode.l10n.t('Insert Markdown links')
|
||||
: vscode.l10n.t('Insert Markdown link');
|
||||
? vscode.l10n.t('Insert Markdown Links')
|
||||
: vscode.l10n.t('Insert Markdown Link');
|
||||
}
|
||||
|
||||
return { snippet, label };
|
||||
|
|
|
@ -30,7 +30,7 @@ class DefaultTextDropProvider implements DocumentOnDropEditProvider {
|
|||
|
||||
const text = await textEntry.asString();
|
||||
return {
|
||||
label: localize('defaultDropProvider.text.label', "Insert plain text"),
|
||||
label: localize('defaultDropProvider.text.label', "Insert Plain Text"),
|
||||
insertText: text
|
||||
};
|
||||
}
|
||||
|
@ -63,13 +63,13 @@ class UriListDropProvider implements DocumentOnDropEditProvider {
|
|||
if (uriCount > 0) {
|
||||
// Dropping at least one generic uri (such as https) so use most generic label
|
||||
label = entries.length > 1
|
||||
? localize('defaultDropProvider.uriList.uris', "Insert uris")
|
||||
: localize('defaultDropProvider.uriList.uri', "Insert uri");
|
||||
? localize('defaultDropProvider.uriList.uris', "Insert Uris")
|
||||
: localize('defaultDropProvider.uriList.uri', "Insert Uri");
|
||||
} else {
|
||||
// All the paths are file paths
|
||||
label = entries.length > 1
|
||||
? localize('defaultDropProvider.uriList.paths', "Insert paths")
|
||||
: localize('defaultDropProvider.uriList.path', "Insert path");
|
||||
? localize('defaultDropProvider.uriList.paths', "Insert Paths")
|
||||
: localize('defaultDropProvider.uriList.path', "Insert Path");
|
||||
}
|
||||
|
||||
return { insertText, label };
|
||||
|
@ -103,8 +103,8 @@ class RelativePathDropProvider implements DocumentOnDropEditProvider {
|
|||
return {
|
||||
insertText: relativeUris.join(' '),
|
||||
label: entries.length > 1
|
||||
? localize('defaultDropProvider.uriList.relativePaths', "Insert relative paths")
|
||||
: localize('defaultDropProvider.uriList.relativePath', "Insert relative path")
|
||||
? localize('defaultDropProvider.uriList.relativePaths', "Insert Relative Paths")
|
||||
: localize('defaultDropProvider.uriList.relativePath', "Insert Relative Path")
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,5 +4,18 @@
|
|||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.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 { Event } from 'vs/base/common/event';
|
||||
import { Button } from 'vs/base/browser/ui/button/button';
|
||||
import { toAction } from 'vs/base/common/actions';
|
||||
import { Event } from 'vs/base/common/event';
|
||||
import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
|
||||
import 'vs/css!./postDropWidget';
|
||||
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 { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
|
||||
|
||||
|
||||
interface DropEditSet {
|
||||
|
@ -30,6 +29,7 @@ class PostDropWidget extends Disposable implements IContentWidget {
|
|||
readonly suppressMouseDown = true;
|
||||
|
||||
private domNode!: HTMLElement;
|
||||
private button!: Button;
|
||||
|
||||
constructor(
|
||||
private readonly editor: ICodeEditor,
|
||||
|
@ -57,17 +57,16 @@ class PostDropWidget extends Disposable implements IContentWidget {
|
|||
private create(): void {
|
||||
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..."),
|
||||
supportIcons: true,
|
||||
...defaultButtonStyles,
|
||||
}));
|
||||
button.label = '$(clippy)';
|
||||
this.button.label = '$(insert)';
|
||||
|
||||
this._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {
|
||||
this._contextMenuService.showContextMenu({
|
||||
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 };
|
||||
},
|
||||
getActions: () => {
|
||||
|
|
Loading…
Reference in a new issue