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

Scroll-y menus #62819

Merged
merged 4 commits into from Nov 26, 2018
Merged

Scroll-y menus #62819

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
1a2cd21
snapshot
sbatten Nov 7, 2018
da07dd3
checked items, disposal, restrict heights
sbatten Nov 8, 2018
347bba1
merge conflicts
sbatten Nov 20, 2018
0a8da5f
Addressing feedback
sbatten Nov 26, 2018
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
11 changes: 11 additions & 0 deletions src/vs/base/browser/ui/menu/menu.css
View file
Open in desktop
Expand Up @@ -30,6 +30,7 @@
display: flex;
height: 2em;
align-items: center;
position: relative;
}

.monaco-menu .monaco-action-bar.vertical .action-label {
Expand Down Expand Up @@ -74,6 +75,16 @@
margin: 0;
}

.monaco-menu .monaco-action-bar.vertical .action-item {
position: static;
overflow: visible;
}


.monaco-menu .monaco-action-bar.vertical .action-item .monaco-submenu {
position: absolute;
}

.monaco-menu .monaco-action-bar.vertical .action-label.separator {
padding: 0.5em 0 0 0;
margin-bottom: 0.5em;
Expand Down
75 changes: 69 additions & 6 deletions src/vs/base/browser/ui/menu/menu.ts
View file
Open in desktop
Expand Up @@ -14,6 +14,9 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { RunOnceScheduler } from 'vs/base/common/async';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { Event, Emitter } from 'vs/base/common/event';
import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';

export const MENU_MNEMONIC_REGEX: RegExp = /\(&{1,2}(.)\)|&{1,2}(.)/;
Expand Down Expand Up @@ -54,17 +57,20 @@ interface ISubMenuData {
export class Menu extends ActionBar {
private mnemonics: Map<KeyCode, Array<MenuActionItem>>;
private menuDisposables: IDisposable[];
private scrollableElement: DomScrollableElement;
private menuElement: HTMLElement;

private readonly _onScroll: Emitter<void>;

constructor(container: HTMLElement, actions: IAction[], options: IMenuOptions = {}) {

addClass(container, 'monaco-menu-container');
container.setAttribute('role', 'presentation');
let menuContainer = document.createElement('div');
addClass(menuContainer, 'monaco-menu');
menuContainer.setAttribute('role', 'presentation');
container.appendChild(menuContainer);
const menuElement = document.createElement('div');
addClass(menuElement, 'monaco-menu');
menuElement.setAttribute('role', 'presentation');

super(menuContainer, {
super(menuElement, {
orientation: ActionsOrientation.VERTICAL,
actionItemProvider: action => this.doGetActionItem(action, options, parentData),
context: options.context,
Expand All @@ -73,14 +79,18 @@ export class Menu extends ActionBar {
triggerKeys: { keys: [KeyCode.Enter], keyDown: true }
});

this.menuElement = menuElement;

this._onScroll = this._register(new Emitter<void>());

this.actionsList.setAttribute('role', 'menu');

this.actionsList.tabIndex = 0;

this.menuDisposables = [];

if (options.enableMnemonics) {
this.menuDisposables.push(addDisposableListener(menuContainer, EventType.KEY_DOWN, (e) => {
this.menuDisposables.push(addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
const key = KeyCodeUtils.fromString(e.key);
if (this.mnemonics.has(key)) {
EventHelper.stop(e, true);
Expand Down Expand Up @@ -142,6 +152,32 @@ export class Menu extends ActionBar {

this.push(actions, { icon: true, label: true, isMenu: true });

// Scroll Logic
this.scrollableElement = this._register(new DomScrollableElement(menuElement, {
alwaysConsumeMouseWheel: true,
horizontal: ScrollbarVisibility.Hidden,
vertical: ScrollbarVisibility.Visible,
verticalScrollbarSize: 7,
handleMouseWheel: true,
useShadows: true
}));

const scrollElement = this.scrollableElement.getDomNode();
scrollElement.style.position = null;

menuElement.style.maxHeight = `${Math.max(10, window.innerHeight - container.getBoundingClientRect().top - 30)}px`;

this.scrollableElement.onScroll(() => {
this._onScroll.fire();
}, this, this.menuDisposables);

this._register(addDisposableListener(this.menuElement, EventType.SCROLL, (e) => {
this.scrollableElement.scanDomNode();
}));

container.appendChild(this.scrollableElement.getDomNode());
this.scrollableElement.scanDomNode();

this.items.filter(item => !(item instanceof MenuSeparatorActionItem)).forEach((item: MenuActionItem, index: number, array: any[]) => {
item.updatePositionInSet(index + 1, array.length);
});
Expand Down Expand Up @@ -169,6 +205,18 @@ export class Menu extends ActionBar {
}
}

getContainer(): HTMLElement {
return this.scrollableElement.getDomNode();
}

public get onScroll(): Event<void> {
return this._onScroll.event;
}

get scrollOffset(): number {
return this.menuElement.scrollTop;
}

private focusItemByElement(element: HTMLElement) {
const lastFocusedItem = this.focusedItem;
this.setFocusedItem(element);
Expand Down Expand Up @@ -421,6 +469,10 @@ class MenuActionItem extends BaseActionItem {
}

protected applyStyle(): void {
if (!this.menuStyle) {
return;
}

const isSelected = hasClass(this.element, 'focused');
const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : this.menuStyle.backgroundColor;
Expand Down Expand Up @@ -512,6 +564,11 @@ class SubmenuActionItem extends MenuActionItem {
this.hideScheduler.schedule();
}
}));

this._register(this.parentData.parent.onScroll(() => {
this.parentData.parent.focus(false);
this.cleanupExistingSubmenu(false);
}));
}

onClick(e: EventLike): void {
Expand Down Expand Up @@ -539,6 +596,7 @@ class SubmenuActionItem extends MenuActionItem {
this.submenuContainer = append(this.element, $('div.monaco-submenu'));
addClasses(this.submenuContainer, 'menubar-menu-items-holder', 'context-view');
this.submenuContainer.style.left = `${getClientArea(this.element).width}px`;
this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset}px`;

this.submenuDisposables.push(addDisposableListener(this.submenuContainer, EventType.KEY_UP, e => {
let event = new StandardKeyboardEvent(e as KeyboardEvent);
Expand Down Expand Up @@ -585,6 +643,11 @@ class SubmenuActionItem extends MenuActionItem {

protected applyStyle(): void {
super.applyStyle();

if (!this.menuStyle) {
return;
}

const isSelected = hasClass(this.element, 'focused');
const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;

Expand Down