diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index 15ea876d9e..db9310b059 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/src/sql/platform/theme/common/colorRegistry.ts @@ -26,6 +26,7 @@ export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { l export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { light: null, dark: null, hc: null }, nls.localize('button.secondaryBackground', "The background color for the secondary button")); export const buttonSecondary = registerColor('button.secondaryForeground', { light: '#323130', dark: '#fff', hc: '#fff' }, nls.localize('button.secondaryForeground', "The font color for secondary button")); export const buttonSecondaryHoverColor = registerColor('button.secondaryHoverForeground', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.secondaryHoverForeground', "The hover color for secondary buttons")); +export const buttonSecondaryHoverBorder = registerColor('button.buttonSecondaryHoverBorder', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.buttonSecondaryHoverBorder', "The hover border color for secondary buttons")); export const buttonDropdownBackgroundHover = registerColor('buttonDropdownBackgroundHover', { light: '#3062d6', dark: '#3062d6', hc: '#3062d6' }, nls.localize('buttonDropdownBackgroundHover', "The button dropdown background hover color")); export const disabledButton = registerColor('button.disabledForeground', { light: '#A19F9D', dark: '#797775', hc: '#797775' }, nls.localize('button.disabledForeground', "The color for a secondary disabled button")); export const disabledButtonBackground = registerColor('button.disabledBackground', { light: '#F3F2F1', dark: '#252423', hc: '#252423' }, nls.localize('button.disabledBackground', "The background color for secondary disabled button")); 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 bcfa8ea9c0..c4a78bbb13 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 @@ -165,6 +165,7 @@ export default () => `

Extend your data studio

${escape(localize('welcomePage.showAll', "Show All"))} + ${escape(localize('welcomePage.showAll', "Show All"))}
{ @@ -229,8 +228,7 @@ 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) { super(); this._register(lifecycleService.onShutdown(() => this.dispose())); const recentlyOpened = this.workspacesService.getRecentlyOpened(); @@ -382,7 +380,7 @@ class WelcomePage extends Disposable { nav.appendChild(dropdownUl); dropdownButtonContainer.appendChild(nav); const fileBtnWindowsClasses = ['windows-only', 'linux-only', 'btn-secondary']; - const fileBtnMacClasses = ['mac-only', 'btn-secondary']; + const fileBtnMacClasses = ['mac-only']; const fileBtnContainer = container.querySelector('#open-file-btn-container') as HTMLElement; const openFileText = openFileCopy; @@ -430,9 +428,12 @@ class WelcomePage extends Disposable { p.appendChild(b); p.innerText = localize('WelcomePage.TakeATour', "Would you like to take a quick tour of Azure Data Studio?"); b.innerText = localize('WelcomePage.welcome', "Welcome!"); + + containerLeft.appendChild(icon); containerLeft.appendChild(p); containerRight.appendChild(removeTourBtn); + guidedTourNotificationContainer.appendChild(containerLeft); guidedTourNotificationContainer.appendChild(containerRight); @@ -651,7 +652,6 @@ class WelcomePage extends Disposable { const icon = document.createElement('i'); const a = document.createElement('a'); const span = document.createElement('span'); - const ul = container.querySelector('.list'); icon.title = relativePath; a.innerText = name; a.title = relativePath; @@ -668,6 +668,7 @@ class WelcomePage extends Disposable { e.stopPropagation(); }); icon.classList.add('themed-icon'); + li.appendChild(icon); li.appendChild(a); span.classList.add('path'); @@ -675,6 +676,7 @@ class WelcomePage extends Disposable { span.innerText = lastOpened; span.title = relativePath; li.appendChild(span); + const ul = container.querySelector('.list'); ul.appendChild(li); result.push(li); return result; @@ -743,7 +745,7 @@ class WelcomePage extends Disposable { const installText = localize('welcomePage.install', "Install"); let dropdownBtn = this._register(new Button(btnContainer)); dropdownBtn.label = installText; - const classes = ['btn', 'btn-secondary']; + const classes = ['btn']; const getDropdownBtn = container.querySelector('.extensionPack .monaco-button:first-of-type') as HTMLAnchorElement; getDropdownBtn.id = 'dropdown-btn'; getDropdownBtn.classList.add(...classes); @@ -1020,16 +1022,12 @@ registerThemingParticipant((theme, collector) => { collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text:after { border-color: transparent transparent ${tileBorderColor}; transparent }`); collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text { border: 1px solid ${tileBorderColor}; }`); collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal-content { border: 1px solid ${tileBorderColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .dropdown-content{ border: 1px solid ${tileBorderColor}; }`); } const tileBoxShadowColor = theme.getColor(tileBoxShadow); if (tileBoxShadowColor) { collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .tile:not(.extension):not(.extension-pack) { box-shadow: 0px 1px 4px ${tileBoxShadowColor}; }`); } - const buttonPrimaryBackgroundColor = theme.getColor(buttonBackground); - if (buttonPrimaryBackgroundColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { background-color: ${buttonPrimaryBackgroundColor};}`); - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${buttonPrimaryBackgroundColor};}`); - } const buttonForegroundColor = theme.getColor(buttonForeground); if (buttonForegroundColor) { @@ -1038,25 +1036,33 @@ registerThemingParticipant((theme, collector) => { collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-body { color: ${buttonForegroundColor};}`); collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-header { color: ${buttonForegroundColor};}`); } + const listFocusForegroundColor = theme.getColor(listFocusForeground); + if (listFocusForegroundColor) { + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover { color: ${buttonForegroundColor};}`); + } + const listFocusBackgroundColor = theme.getColor(listFocusBackground); + if (listFocusBackgroundColor) { + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { background: ${listFocusBackgroundColor};}`); + } const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground); if (buttonHoverBackgroundColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor};}`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor}}`); } const buttonSecondaryBackgroundColor = theme.getColor(buttonSecondaryBackground); if (buttonSecondaryBackgroundColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { background-color: ${buttonSecondaryBackgroundColor} !important;}`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { background-color: ${buttonSecondaryBackgroundColor}}`); } const buttonSecondaryBorderColor = theme.getColor(buttonSecondaryBorder); if (buttonSecondaryBorderColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { border: 1px solid ${buttonSecondaryBorderColor};}`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary .monaco-button{ border: 1px solid ${buttonSecondaryBorderColor}}`); } const buttonSecondaryColor = theme.getColor(buttonSecondary); if (buttonSecondaryColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important;}`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important}`); } const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor); if (buttonSecondaryColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover { color: ${buttonSecondaryHover}; border: 1px solid ${buttonSecondaryHover};}`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { color: ${buttonSecondaryHover};}`); } const selectBackgroundColor = theme.getColor(selectBackground); if (selectBackgroundColor) { @@ -1077,15 +1083,6 @@ registerThemingParticipant((theme, collector) => { if (menuBorderColor) { collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a { border-color: ${menuBorderColor};}`); collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage .dropdown-content { border-color: ${menuBorderColor};}`); - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${menuBorderColor};}`); - } - const buttonDropdownBackgroundHoverColor = theme.getColor(buttonDropdownBackgroundHover); - if (buttonDropdownBackgroundHoverColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { background: ${buttonDropdownBackgroundHoverColor};}`); - } - const buttonDropdownHoverColor = theme.getColor(menuSelectionForeground); - if (buttonDropdownHoverColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { color: ${buttonDropdownHoverColor};}`); } const editorWidgetBorderColor = theme.getColor(editorWidgetBorder); if (editorWidgetBorderColor) { @@ -1126,7 +1123,6 @@ registerThemingParticipant((theme, collector) => { const link = theme.getColor(textLinkForeground); if (link) { collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a.ads-welcome-page-link { color: ${link}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn-primary .monaco-button { border: 1px solid ${link}; }`); } const activeLink = theme.getColor(textLinkActiveForeground); if (activeLink) {