[PM-9629] Custom Fields V2 View Section Defects (#10103)
* Updates to Custom Fields V2 View
This commit is contained in:
parent
c27657eb82
commit
150b9ef29c
|
@ -4,25 +4,25 @@
|
||||||
</bit-section-header>
|
</bit-section-header>
|
||||||
<bit-card>
|
<bit-card>
|
||||||
<div
|
<div
|
||||||
class="tw-mb-4 tw-border-secondary-300 tw-bg-background"
|
class="tw-border-secondary-300"
|
||||||
*ngFor="let field of fields; let last = last"
|
*ngFor="let field of fields; let last = last"
|
||||||
[ngClass]="{ 'tw-border-0 tw-border-b tw-border-solid tw-pb-2 tw-mb-4': !last }"
|
[ngClass]="{ 'tw-mb-4': !last }"
|
||||||
>
|
>
|
||||||
<ng-container *ngIf="field.type === fieldType.Text">
|
<ng-container *ngIf="field.type === fieldType.Text">
|
||||||
<label class="tw-text-xs tw-text-muted tw-select-none">
|
<label class="tw-text-xs tw-text-muted tw-select-none">
|
||||||
{{ field.name }}
|
{{ field.name }}
|
||||||
</label>
|
</label>
|
||||||
<div class="tw-flex tw-justify-between">
|
<bit-form-field>
|
||||||
<input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
|
<input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
|
||||||
<button
|
<button
|
||||||
bitIconButton="bwi-clone"
|
bitIconButton="bwi-clone"
|
||||||
size="small"
|
bitSuffix
|
||||||
type="button"
|
type="button"
|
||||||
[appCopyClick]="field.value"
|
[appCopyClick]="field.value"
|
||||||
showToast
|
showToast
|
||||||
[appA11yTitle]="'copyValue' | i18n"
|
[appA11yTitle]="'copyValue' | i18n"
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</bit-form-field>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="field.type === fieldType.Hidden">
|
<ng-container *ngIf="field.type === fieldType.Hidden">
|
||||||
<label class="tw-text-xs tw-text-muted tw-select-none">
|
<label class="tw-text-xs tw-text-muted tw-select-none">
|
||||||
|
@ -30,10 +30,10 @@
|
||||||
</label>
|
</label>
|
||||||
<bit-form-field>
|
<bit-form-field>
|
||||||
<input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
|
<input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
|
||||||
<button type="button" bitIconButton bitPasswordInputToggle></button>
|
<button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button>
|
||||||
<button
|
<button
|
||||||
bitIconButton="bwi-clone"
|
bitIconButton="bwi-clone"
|
||||||
size="small"
|
bitSuffix
|
||||||
type="button"
|
type="button"
|
||||||
[appCopyClick]="field.value"
|
[appCopyClick]="field.value"
|
||||||
showToast
|
showToast
|
||||||
|
@ -42,18 +42,22 @@
|
||||||
</bit-form-field>
|
</bit-form-field>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="field.type === fieldType.Boolean">
|
<ng-container *ngIf="field.type === fieldType.Boolean">
|
||||||
<div class="tw-flex tw-my-2">
|
<bit-form-control>
|
||||||
<input type="checkbox" [value]="field.value" readonly aria-readonly="true" />
|
<input
|
||||||
<h5 class="tw-ml-3">
|
bitCheckbox
|
||||||
{{ field.name }}
|
type="checkbox"
|
||||||
</h5>
|
[checked]="field.value"
|
||||||
</div>
|
aria-readonly="true"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<bit-label> {{ field.name }} </bit-label>
|
||||||
|
</bit-form-control>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="field.type === fieldType.Linked">
|
<ng-container *ngIf="field.type === fieldType.Linked">
|
||||||
<label class="tw-text-xs tw-text-muted tw-select-none">
|
<label class="tw-text-xs tw-text-muted tw-select-none">
|
||||||
{{ "linked" | i18n }}: {{ field.name }}
|
{{ "linked" | i18n }}: {{ field.name }}
|
||||||
</label>
|
</label>
|
||||||
<div class="tw-flex tw-justify-between">
|
<bit-form-field>
|
||||||
<input
|
<input
|
||||||
readonly
|
readonly
|
||||||
bitInput
|
bitInput
|
||||||
|
@ -63,13 +67,13 @@
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
bitIconButton="bwi-clone"
|
bitIconButton="bwi-clone"
|
||||||
size="small"
|
bitSuffix
|
||||||
type="button"
|
type="button"
|
||||||
[appCopyClick]="field.name"
|
[appCopyClick]="field.name"
|
||||||
showToast
|
showToast
|
||||||
[appA11yTitle]="'copyValue' | i18n"
|
[appA11yTitle]="'copyValue' | i18n"
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</bit-form-field>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</bit-card>
|
</bit-card>
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {
|
||||||
SectionComponent,
|
SectionComponent,
|
||||||
SectionHeaderComponent,
|
SectionHeaderComponent,
|
||||||
TypographyModule,
|
TypographyModule,
|
||||||
|
CheckboxModule,
|
||||||
} from "@bitwarden/components";
|
} from "@bitwarden/components";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -29,6 +30,7 @@ import {
|
||||||
SectionComponent,
|
SectionComponent,
|
||||||
SectionHeaderComponent,
|
SectionHeaderComponent,
|
||||||
TypographyModule,
|
TypographyModule,
|
||||||
|
CheckboxModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class CustomFieldV2Component {
|
export class CustomFieldV2Component {
|
||||||
|
|
Loading…
Reference in New Issue