From 4ec5991a1309a2a6774f0164dd492d6b1ffa725a Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Fri, 25 Sep 2020 19:53:14 -0700 Subject: [PATCH] update welcome page to use context menu service and some code clean up (#12643) * use existing menu service and cleanup code * fix mac issue * button width --- .../page/browser/az_data_welcome_page.ts | 6 +- .../welcome/page/browser/welcomePage.css | 2 +- .../welcome/page/browser/welcomePage.ts | 212 +++++++----------- 3 files changed, 82 insertions(+), 138 deletions(-) diff --git a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts index dc46c696a4..abacacefe9 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts +++ b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts @@ -27,11 +27,7 @@ export default () => `

-
- -
-
+
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css index ae5329a60f..420abeacdb 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css +++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css @@ -154,7 +154,7 @@ .ads-homepage.XS .btn { margin: 0 8px 0 0; - width: 77px; + min-width: 77px; line-height: 18px } diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts index f71d7f198f..e43d5fbc48 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts +++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts @@ -43,13 +43,15 @@ import { IRecentlyOpened, isRecentWorkspace, IRecentWorkspace, IRecentFolder, is import { CancellationToken } from 'vs/base/common/cancellation'; import { IHostService } from 'vs/workbench/services/host/browser/host'; import { IProductService } from 'vs/platform/product/common/productService'; -import { KeyCode } from 'vs/base/common/keyCodes'; import { joinPath } from 'vs/base/common/resources'; -import { addStandardDisposableListener, EventHelper, clearNode } from 'vs/base/browser/dom'; +import { clearNode } from 'vs/base/browser/dom'; import { GuidedTour } from 'sql/workbench/contrib/welcome/page/browser/gettingStartedTour'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { Button } from 'sql/base/browser/ui/button/button'; +import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; +import { ICommandAction, MenuItemAction } from 'vs/platform/actions/common/actions'; +import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; const configurationKey = 'workbench.startupEditor'; const oldConfigurationKey = 'workbench.welcome.enabled'; const telemetryFrom = 'welcomePage'; @@ -204,6 +206,22 @@ const extensionPackStrings = { extensionNotFound: (extensionName: string, extensionId: string) => { return localize('welcomePage.extensionPackNotFound', "Support for {0} with id {1} could not be found.", extensionName, extensionId); }, }; +const NewActionItems: ICommandAction[] = [ + { + title: localize('welcomePage.newConnection', "New connection"), + id: 'registeredServers.addConnection' + }, { + title: localize('welcomePage.newQuery', "New query"), + id: 'workbench.action.files.newUntitledFile' + }, { + title: localize('welcomePage.newNotebook', "New notebook"), + id: 'notebook.command.new' + }, { + title: localize('welcomePage.deployServer', "Deploy a server"), + id: 'azdata.resource.deploy' + } +]; + const welcomeInputTypeId = 'workbench.editors.welcomePageInput'; class WelcomePage extends Disposable { @@ -227,7 +245,9 @@ class WelcomePage extends Disposable { @IFileService fileService: IFileService, @IProductService private readonly productService: IProductService, @IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService, - @ICommandService private readonly commandService: ICommandService) { + @ICommandService private readonly commandService: ICommandService, + @IContextMenuService private readonly contextMenuService: IContextMenuService, + @IContextKeyService private readonly contextKeyService: IContextKeyService) { super(); this._register(lifecycleService.onShutdown(() => this.dispose())); const recentlyOpened = this.workspacesService.getRecentlyOpened(); @@ -245,9 +265,11 @@ class WelcomePage extends Disposable { onReady: (container: HTMLElement) => this.onReady(container, recentlyOpened, installedExtensions, fileService, layoutService) }); } + public openEditor() { return this.editorService.openEditor(this.editorInput, { pinned: false }); } + private onReady(container: HTMLElement, recentlyOpened: Promise, installedExtensions: Promise, fileService: IFileService, layoutService: ILayoutService): void { const enabled = isWelcomePageEnabled(this.configurationService, this.contextService); const showOnStartup = container.querySelector('#showOnStartup'); @@ -327,74 +349,67 @@ class WelcomePage extends Disposable { } } })); - this.createButtons(); - this.createDropDown(); + this.createButtons(container); } - private createButtons(): void { - const container = document.querySelector('.ads-homepage .hero'); - const dropdownButtonContainer = document.querySelector('#dropdown-btn-container') as HTMLElement; - const dropdownUl = document.createElement('ul'); - const i = document.createElement('div'); - const nav = document.createElement('nav'); - const newText = localize('welcomePage.new', "New"); - let dropdownBtn = this._register(new Button(dropdownButtonContainer)); - dropdownBtn.label = newText; + private createButtons(welcomePageContainer: HTMLElement): void { + const container = welcomePageContainer.querySelector('#welcome-page-button-container'); - const iconClassList = ['twisties', 'codicon', 'codicon-chevron-right']; + // New button, contains a down arrow, invoking the button will open a context menu. + const newButtonContainer = document.createElement('div'); + newButtonContainer.classList.add('btn', 'btn-primary'); + container.appendChild(newButtonContainer); + const newButton = this._register(new Button(newButtonContainer)); + newButton.label = localize('welcomePage.new', "New"); + const newButtonHtmlElement = newButton.element; + newButtonHtmlElement.setAttribute('aria-haspopup', 'true'); + newButtonHtmlElement.setAttribute('aria-controls', 'dropdown'); + newButtonHtmlElement.setAttribute('aria-expanded', 'false'); + const newButtonIcon = document.createElement('div'); + newButtonIcon.classList.add('codicon', 'codicon-chevron-down'); + newButtonHtmlElement.appendChild(newButtonIcon); - i.classList.add(...iconClassList); - const openFileCopy = localize('welcomePage.openFile', "Open file"); - dropdownUl.classList.add('dropdown-content'); - dropdownUl.setAttribute('aria-hidden', 'true'); - dropdownUl.setAttribute('aria-label', 'submenu'); - dropdownUl.setAttribute('role', 'menu'); - dropdownUl.setAttribute('aria-labelledby', 'dropdown-btn'); - dropdownUl.id = 'dropdown'; - dropdownUl.innerHTML = - `
  • ${(localize('welcomePage.newConnection', "New connection"))}
    • -
  • ${(localize('welcomePage.newQuery', "New query"))}
    • -
  • ${(localize('welcomePage.newNotebook', "New notebook"))}
    • -
  • ${(localize('welcomePage.deployServer', "Deploy a Server"))}
    • - -