1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00

[PM-7161] browser v2 view container (#9723)

* Build new view-v2 component and reusable view sections. Custom Fields, Item Details, Attachments, Additional Info,  Item History
This commit is contained in:
Jason Ng
2024-07-10 00:11:51 -04:00
committed by GitHub
parent 7dfef8991c
commit 6d6785297b
26 changed files with 846 additions and 8 deletions

View File

@@ -0,0 +1,76 @@
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
</bit-section-header>
<bit-card>
<div
class="tw-mb-4 tw-border-secondary-300 tw-bg-background"
*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 }"
>
<ng-container *ngIf="field.type === fieldType.Text">
<label class="tw-text-xs tw-text-muted tw-select-none">
{{ field.name }}
</label>
<div class="tw-flex tw-justify-between">
<input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
<button
bitIconButton="bwi-clone"
size="small"
type="button"
[appCopyClick]="field.value"
showToast
[appA11yTitle]="'copyValue' | i18n"
></button>
</div>
</ng-container>
<ng-container *ngIf="field.type === fieldType.Hidden">
<label class="tw-text-xs tw-text-muted tw-select-none">
{{ field.name }}
</label>
<bit-form-field>
<input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
<button type="button" bitIconButton bitPasswordInputToggle></button>
<button
bitIconButton="bwi-clone"
size="small"
type="button"
[appCopyClick]="field.value"
showToast
[appA11yTitle]="'copyValue' | i18n"
></button>
</bit-form-field>
</ng-container>
<ng-container *ngIf="field.type === fieldType.Boolean">
<div class="tw-flex tw-my-2">
<input type="checkbox" [value]="field.value" readonly aria-readonly="true" />
<h5 class="tw-ml-3">
{{ field.name }}
</h5>
</div>
</ng-container>
<ng-container *ngIf="field.type === fieldType.Linked">
<label class="tw-text-xs tw-text-muted tw-select-none">
{{ "linked" | i18n }}: {{ field.name }}
</label>
<div class="tw-flex tw-justify-between">
<input
readonly
bitInput
type="text"
[value]="getLinkedType(field.linkedId)"
aria-readonly="true"
/>
<button
bitIconButton="bwi-clone"
size="small"
type="button"
[appCopyClick]="field.name"
showToast
[appA11yTitle]="'copyValue' | i18n"
></button>
</div>
</ng-container>
</div>
</bit-card>
</bit-section>