mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-25 01:25:36 -05:00
fixes the contrast ratio for hoverable list items in the welcome page new button dropdown (#11106)
* fixes button alignment and missing icons issues with ads welcome page * removes dead code, registers new Button * creates one button component and adds proper attributes depending on platform * Add CodeQL Analysis workflow (#10195) * Add CodeQL Analysis workflow * Fix path * adds return types to functions * fixes show all extensions command * updates dropdown color themes * adjusts colors from color registry Co-authored-by: Justin Hutchings <jhutchings1@users.noreply.github.com>
This commit is contained in:
v-bbrady
@@ -165,6 +165,7 @@ export default () => `
|
||||
<div class="flex flex-j-between">
|
||||
<h2>Extend your data studio</h2>
|
||||
<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
|
||||
<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
|
||||
</div>
|
||||
<div class="row ads-grid grip-gap-50">
|
||||
<div
|
||||
|
||||
@@ -162,8 +162,8 @@
|
||||
line-height: 1.6em
|
||||
}
|
||||
|
||||
.ads-homepage .btn-primary {
|
||||
border: 1px solid
|
||||
.btn-primary .monaco-button, .btn-secondary .monaco-button {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.ads-homepage .btn-primary:hover {
|
||||
@@ -402,28 +402,13 @@
|
||||
mask-size: 12px 12px
|
||||
}
|
||||
|
||||
.ads-homepage .icon-arrow-down {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 18px;
|
||||
display: inline-block
|
||||
.ads_homepage .codicon-chevron-right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.ads-homepage .icon-arrow-down:before {
|
||||
position: absolute;
|
||||
font: normal normal normal 16px/1 codicon;
|
||||
text-decoration: none;
|
||||
text-rendering: auto;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
width: 11px;
|
||||
height: 6px;
|
||||
content: "";
|
||||
transform: rotate(90deg);
|
||||
top: -1px;
|
||||
bottom: 5px;
|
||||
margin: auto
|
||||
.ads_homepage .monaco-text-button {
|
||||
min-width: 77px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.ads-homepage .codicon-chevron-right {
|
||||
|
||||
@@ -29,8 +29,8 @@ import { ILifecycleService, StartupKind } from 'vs/platform/lifecycle/common/lif
|
||||
import { Disposable } from 'vs/base/common/lifecycle';
|
||||
import { splitName } from 'vs/base/common/labels';
|
||||
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
|
||||
import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, buttonDropdownBackgroundHover, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
|
||||
import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonBackground, buttonForeground, menuBorder, menuForeground, menuSelectionForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
|
||||
import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions';
|
||||
import { IEditorInputFactory, EditorInput } from 'vs/workbench/common/editor';
|
||||
import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
|
||||
@@ -67,8 +67,7 @@ export class WelcomePageContribution implements IWorkbenchContribution {
|
||||
@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
|
||||
@ILifecycleService private readonly lifecycleService: ILifecycleService,
|
||||
@ICommandService private readonly commandService: ICommandService,
|
||||
@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
|
||||
) {
|
||||
@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService) {
|
||||
this.enableWelcomePage().catch(onUnexpectedError);
|
||||
}
|
||||
private async enableWelcomePage(): Promise<void> {
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user