ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add level to dialog titles and form component titles (#8233)

Browse Source 
* Add level to dialog titles and form component titles

* Switch to h1

* h2 instead of role and aria-level
This commit is contained in:
Charles Gagnon
2019-11-07 09:32:02 -08:00
committed by GitHub
parent d635390b33
commit efebd681b6
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/sql/workbench/browser/modelComponents/formContainer.component.ts
View File

@@ -44,12 +44,11 @@ class FormItem {
</div> </div>
</div> </div>
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)"> <div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
<ng-container *ngIf="isHorizontal(item)"> <ng-container *ngIf="isHorizontal(item)">
<div *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}"> <h2 *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span> {{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span> <span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div> </h2>
<div class="form-cell"> <div class="form-cell">
<div class="form-component-container"> <div class="form-component-container">
<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}"> <div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
@@ -66,10 +65,10 @@ class FormItem {
</div> </div>
</ng-container> </ng-container>
<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)" [ngClass]="{'form-group-item': isInGroup(item)}"> <div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
<div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)"> <h2 class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span> {{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span> <span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div> </h2>
<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)"> <div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)"> <model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
</model-component-wrapper> </model-component-wrapper>

2
src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
View File

@@ -28,7 +28,7 @@ export interface DialogComponentParams extends IBootstrapParams {
template: ` template: `
<div class="dialogContainer" *ngIf="_dialogPane && _dialogPane.displayPageTitle"> <div class="dialogContainer" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
<div class="dialogModal-wizardHeader" *ngIf="_dialogPane && _dialogPane.displayPageTitle"> <div class="dialogModal-wizardHeader" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
<div *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</div> <h1 *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</h1>
<h1 class="wizardPageTitle" role="alert">{{_dialogPane.title}}</h1> <h1 class="wizardPageTitle" role="alert">{{_dialogPane.title}}</h1>
<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div> <div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
</div> </div>

7
src/sql/workbench/services/dialog/browser/media/dialogModal.css
View File

@@ -71,6 +71,13 @@
font-weight: bold; font-weight: bold;
} }
.dialogContainer .dialogModal-wizardHeader h1.wizardPageNumber {
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
font-size: 11px;
}
.dialogContainer { .dialogContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;