development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-07-17 11:07:22 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Address drop UX feedback (#180343)

Browse source 
- 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:
Matt Bierner 2023-04-19 10:05:56 -07:00 committed by GitHub
parent 86528d8df2
commit 3273501a5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
extensions/markdown-language-features/src/languageFeatures/copyFiles/dropIntoEditor.ts
View file

@ -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 };

14
src/vs/editor/contrib/dropIntoEditor/browser/defaultOnDropProviders.ts
View file

@ -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")
};
}
}

15
src/vs/editor/contrib/dropIntoEditor/browser/postDropWidget.css
View file

@ -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;
}

11
src/vs/editor/contrib/dropIntoEditor/browser/postDropWidget.ts
View file

@ -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: () => {