Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

support workspace trust keyboard shortcut #171131

Merged
merged 4 commits into from Jan 13, 2023
Merged

support workspace trust keyboard shortcut #171131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cefd2c
support workspace trust keyboard shortcut
sbatten Jan 12, 2023
ef8a1e4
macos test/fix
sbatten Jan 12, 2023
086072d
Add support for short labels to the Button
lszomoru Jan 13, 2023
6ff043b
Remove code that is not needed
lszomoru Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions extensions/git/src/actionButton.ts
View file
Open in desktop
Expand Up @@ -169,13 +169,13 @@ export class ActionButtonCommand {
return {
command: {
command: 'git.sync',
title: `${icon}${behind}${ahead}`,
title: l10n.t('{0} Sync Changes{1}{2}', icon, behind, ahead),
tooltip: this.state.isSyncInProgress ?
l10n.t('Synchronizing Changes...')
: this.repository.syncTooltip,
arguments: [this.repository.sourceControl],
},
description: l10n.t('{0} Sync Changes{1}{2}', icon, behind, ahead),
description: `${icon}${behind}${ahead}`,
enabled: !this.state.isSyncInProgress
};
}
Expand Down
45 changes: 36 additions & 9 deletions src/vs/base/browser/ui/button/button.css
View file
Open in desktop
Expand Up @@ -31,11 +31,39 @@
cursor: default;
}

.monaco-text-button > .codicon {
.monaco-text-button .codicon {
margin: 0 0.2em;
color: inherit !important;
}

.monaco-text-button.monaco-text-button-with-short-label {
flex-direction: row;
flex-wrap: wrap;
padding: 0 4px;
overflow: hidden;
height: 28px;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
flex-basis: 100%;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
flex-grow: 1;
width: 0;
overflow: hidden;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
font-style: inherit;
padding: 4px 0;
}

.monaco-button-dropdown {
display: flex;
cursor: pointer;
Expand Down Expand Up @@ -79,28 +107,27 @@
}

.monaco-description-button {
display: flex;
flex-direction: column;
}

.monaco-description-button .monaco-button-label {
font-weight: 500;
align-items: center;
margin: 4px 5px; /* allows button focus outline to be visible */
}

.monaco-description-button .monaco-button-description {
font-style: italic;
font-size: 11px;
padding: 0px 20px;
}

.monaco-description-button .monaco-button-label,
.monaco-description-button .monaco-button-description
{
.monaco-description-button .monaco-button-description {
display: flex;
justify-content: center;
align-items: center;
}

.monaco-description-button .monaco-button-label > .codicon,
.monaco-description-button .monaco-button-description > .codicon
{
.monaco-description-button .monaco-button-description > .codicon {
margin: 0 0.2em;
color: inherit !important;
}
140 changes: 95 additions & 45 deletions src/vs/base/browser/ui/button/button.ts
View file
Open in desktop
Expand Up @@ -20,10 +20,10 @@ import 'vs/css!./button';
export interface IButtonOptions extends IButtonStyles {
readonly title?: boolean | string;
readonly supportIcons?: boolean;
readonly supportShortLabel?: boolean;
readonly secondary?: boolean;
}


export interface IButtonStyles {
readonly buttonBackground: string | undefined;
readonly buttonHoverBackground: string | undefined;
Expand Down Expand Up @@ -62,8 +62,10 @@ export interface IButtonWithDescription extends IButton {

export class Button extends Disposable implements IButton {

protected _element: HTMLElement;
protected options: IButtonOptions;
protected _element: HTMLElement;
protected _labelElement: HTMLElement | undefined;
protected _labelShortElement: HTMLElement | undefined;

private _onDidClick = this._register(new Emitter<Event>());
get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
Expand All @@ -86,6 +88,17 @@ export class Button extends Disposable implements IButton {
this._element.style.color = foreground || '';
this._element.style.backgroundColor = background || '';

if (options.supportShortLabel) {
this._labelShortElement = document.createElement('div');
this._labelShortElement.classList.add('monaco-button-label-short');
this._element.appendChild(this._labelShortElement);

this._labelElement = document.createElement('div');
this._labelElement.classList.add('monaco-button-label');
this._element.appendChild(this._labelElement);

this._element.classList.add('monaco-text-button-with-short-label');
}

container.appendChild(this._element);

Expand Down Expand Up @@ -134,6 +147,29 @@ export class Button extends Disposable implements IButton {
this._register(this.focusTracker.onDidBlur(() => { if (this.enabled) { this.updateBackground(false); } }));
}

private getContentElements(content: string): HTMLElement[] {
const elements: HTMLSpanElement[] = [];
for (let segment of renderLabelWithIcons(content)) {
if (typeof (segment) === 'string') {
segment = segment.trim();

// Ignore empty segment
if (segment === '') {
continue;
}

// Convert string segments to <span> nodes
const node = document.createElement('span');
node.textContent = segment;
elements.push(node);
} else {
elements.push(segment);
}
}

return elements;
}

private updateBackground(hover: boolean): void {
let background;
if (this.options.secondary) {
Expand All @@ -152,37 +188,33 @@ export class Button extends Disposable implements IButton {

set label(value: string) {
this._element.classList.add('monaco-text-button');
if (this.options.supportIcons) {
const content: HTMLSpanElement[] = [];
for (let segment of renderLabelWithIcons(value)) {
if (typeof (segment) === 'string') {
segment = segment.trim();

// Ignore empty segment
if (segment === '') {
continue;
}

// Convert string segments to <span> nodes
const node = document.createElement('span');
node.textContent = segment;
content.push(node);
} else {
content.push(segment);
}
}
const labelElement = this.options.supportShortLabel ? this._labelElement! : this._element;

reset(this._element, ...content);
if (this.options.supportIcons) {
reset(labelElement, ...this.getContentElements(value));
} else {
this._element.textContent = value;
labelElement.textContent = value;
}

if (typeof this.options.title === 'string') {
this._element.title = this.options.title;
} else if (this.options.title) {
this._element.title = value;
}
}

set labelShort(value: string) {
if (!this.options.supportShortLabel || !this._labelShortElement) {
return;
}

if (this.options.supportIcons) {
reset(this._labelShortElement, ...this.getContentElements(value));
} else {
this._labelShortElement.textContent = value;
}
}

set icon(icon: CSSIcon) {
this._element.classList.add(...CSSIcon.asClassNameArray(icon));
}
Expand Down Expand Up @@ -305,37 +337,55 @@ export class ButtonWithDropdown extends Disposable implements IButton {
}
}

export class ButtonWithDescription extends Button implements IButtonWithDescription {

private _labelElement: HTMLElement;
export class ButtonWithDescription implements IButtonWithDescription {
private _button: Button;
private _element: HTMLElement;
private _descriptionElement: HTMLElement;

constructor(container: HTMLElement, options: IButtonOptions) {
super(container, options);

constructor(container: HTMLElement, private readonly options: IButtonOptions) {
this._element = document.createElement('div');
this._element.classList.add('monaco-description-button');

this._labelElement = document.createElement('div');
this._labelElement.classList.add('monaco-button-label');
this._element.appendChild(this._labelElement);
this._button = new Button(this._element, options);

this._descriptionElement = document.createElement('div');
this._descriptionElement.classList.add('monaco-button-description');
this._element.appendChild(this._descriptionElement);

container.appendChild(this._element);
}

override set label(value: string) {
this._element.classList.add('monaco-text-button');
if (this.options.supportIcons) {
reset(this._labelElement, ...renderLabelWithIcons(value));
} else {
this._labelElement.textContent = value;
}
if (typeof this.options.title === 'string') {
this._element.title = this.options.title;
} else if (this.options.title) {
this._element.title = value;
}
get onDidClick(): BaseEvent<Event | undefined> {
return this._button.onDidClick;
}

get element(): HTMLElement {
return this._element;
}

set label(value: string) {
this._button.label = value;
}

set icon(icon: CSSIcon) {
this._button.icon = icon;
}

get enabled(): boolean {
return this._button.enabled;
}

set enabled(enabled: boolean) {
this._button.enabled = enabled;
}

focus(): void {
this._button.focus();
}
hasFocus(): boolean {
return this._button.hasFocus();
}
dispose(): void {
this._button.dispose();
}

set description(value: string) {
Expand Down
29 changes: 0 additions & 29 deletions src/vs/workbench/contrib/scm/browser/media/scm.css
View file
Open in desktop
Expand Up @@ -224,35 +224,6 @@
align-items: center;
}

.scm-view .button-container .monaco-description-button {
flex-direction: row;
flex-wrap: wrap;
padding: 0 4px;
overflow: hidden;
height: 28px;
}

.scm-view .button-container .monaco-description-button:hover {
border-color: var(--vscode-button-hoverBackground);
}

.scm-view .button-container .monaco-description-button > .monaco-button-label {
flex-grow: 1;
width: 0;
overflow: hidden;
}

.scm-view .button-container .monaco-description-button > .monaco-button-description {
flex-basis: 100%;
}

.scm-view .button-container .monaco-description-button > .monaco-button-label,
.scm-view .button-container .monaco-description-button > .monaco-button-description {
font-weight: normal;
font-style: inherit;
padding: 4px 0;
}

.scm-view .button-container .codicon.codicon-cloud-upload,
.scm-view .button-container .codicon.codicon-sync {
margin: 0 4px 0 0;
Expand Down
9 changes: 4 additions & 5 deletions src/vs/workbench/contrib/scm/browser/scmViewPane.ts
View file
Open in desktop
Expand Up @@ -2550,17 +2550,16 @@ export class SCMActionButton implements IDisposable {
supportIcons: true,
...defaultButtonStyles
});
} else if (button.description) {
// ButtonWithDescription
this.button = new ButtonWithDescription(this.container, { supportIcons: true, title: button.command.tooltip, ...defaultButtonStyles });
(this.button as ButtonWithDescription).description = button.description;
} else {
// Button
this.button = new Button(this.container, { supportIcons: true, title: button.command.tooltip, ...defaultButtonStyles });
this.button = new Button(this.container, { supportIcons: true, supportShortLabel: !!button.description, title: button.command.tooltip, ...defaultButtonStyles });
}

this.button.enabled = button.enabled;
this.button.label = button.command.title;
if (this.button instanceof Button && button.description) {
this.button.labelShort = button.description;
}
this.button.onDidClick(async () => await this.executeCommand(button.command.id, ...(button.command.arguments || [])), null, this.disposables.value);

this.disposables.value!.add(this.button);
Expand Down
1 change: 0 additions & 1 deletion src/vs/workbench/contrib/workspace/browser/media/workspaceTrustEditor.css
View file
Open in desktop
Expand Up @@ -181,7 +181,6 @@
margin-top: 5px;
}

.workspace-trust-editor .workspace-trust-features .workspace-trust-buttons-row .workspace-trust-buttons .monaco-button,
.workspace-trust-editor .workspace-trust-settings .trusted-uris-button-bar .monaco-button {
width: fit-content;
padding: 5px 10px;
Expand Down