mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-23 09:35:39 -05:00
Add level to dialog titles and form component titles (#8233)
* Add level to dialog titles and form component titles * Switch to h1 * h2 instead of role and aria-level
This commit is contained in:
@@ -44,12 +44,11 @@ class FormItem {
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(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>
|
||||
<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="form-cell">
|
||||
<div class="form-component-container">
|
||||
<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
|
||||
@@ -66,10 +65,10 @@ class FormItem {
|
||||
</div>
|
||||
</ng-container>
|
||||
<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>
|
||||
<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)">
|
||||
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
|
||||
</model-component-wrapper>
|
||||
|
||||
@@ -28,7 +28,7 @@ export interface DialogComponentParams extends IBootstrapParams {
|
||||
template: `
|
||||
<div class="dialogContainer" *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>
|
||||
<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
|
||||
</div>
|
||||
|
||||
@@ -71,6 +71,13 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dialogContainer .dialogModal-wizardHeader h1.wizardPageNumber {
|
||||
margin-block-start: 0px;
|
||||
margin-block-end: 0px;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dialogContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user