LP1852782 MARC editable content aria-labels
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / share / marc-edit / rich-editor.component.html
1
2 <ng-container *ngIf="!dataLoaded">
3   <div class="row mt-5">
4     <div class="offset-lg-3 col-lg-6">
5       <eg-progress-inline></eg-progress-inline>
6     </div>
7   </div>
8 </ng-container>
9
10 <ng-container *ngIf="dataLoaded">
11   <div class="mt-3 text-monospace"
12     (contextmenu)="$event.preventDefault()">
13     <div class="row pb-2 mb-2 border-bottom border-muted">
14       <div class="col-lg-9 fixed-fields-container">
15         <eg-fixed-fields-editor [context]="context"></eg-fixed-fields-editor>
16       </div>
17       <div class="col-lg-3">
18         <div><button class="btn btn-outline-dark"
19           (click)="showHelp = !showHelp" i18n>Help</button></div>
20         <div class="mt-2"><button class="btn btn-outline-dark"
21           [disabled]="true"
22           (click)="validate()" i18n>Validate</button></div>
23         <div class="mt-2">
24           <button type="button" class="btn btn-outline-info" 
25             [disabled]="undoCount() < 1" (click)="undo()">
26             Undo <span class="badge badge-info">{{undoCount()}}</span>
27           </button>
28           <button type="button" class="btn btn-outline-info ml-2" 
29             [disabled]="redoCount() < 1" (click)="redo()">
30             Redo <span class="badge badge-info">{{redoCount()}}</span>
31           </button>
32         </div>
33         <div class="mt-2">
34           <div class="form-check">
35             <input class="form-check-input" type="checkbox" 
36               [disabled]="true"
37               [(ngModel)]="stackSubfields" id="stack-subfields-{{randId}}">
38             <label class="form-check-label" for="stack-subfields-{{randId}}">
39               Stack Subfields
40             </label>
41           </div>
42         </div>
43       </div>
44       <div class="col-lg-1">
45       </div>
46     </div>
47     <div *ngIf="showHelp" class="row m-2">
48       <div class="col-lg-4">
49         <ul>
50           <li>Undo: CTRL-z</li>
51           <li>Redo: CTRL-y</li>
52           <li>Add Row: CTRL+Enter</li>
53           <li>Insert Row: CTRL+Shift+Enter</li>
54         </ul>
55       </div>
56       <div class="col-lg-4">
57         <ul>
58          <li>Copy Current Row Above: CTRL+Up</li>
59          <li>Copy Current Row Below: CTRL+Down</li>
60          <li>Add Subfield: CTRL+D or CTRL+I</li>
61          <li>Remove Row: CTRL+Del</li>
62         </ul>
63       </div>
64       <div class="col-lg-4">
65         <ul>
66          <li>Remove Subfield: Shift+Del</li>
67          <li>Create/Replace 006: Shift+F6</li>
68          <li>Create/Replace 007: Shift+F7</li>
69          <li>Create/Replace 008: Shift+F8</li>
70         </ul>
71       </div>
72     </div>
73
74     <!-- LEADER -->
75     <div class="row pt-0 pb-0 pl-3 form-horizontal">
76       <eg-marc-editable-content
77         [context]="context" fieldType="tag"
78         fieldText="LDR" i18n-fieldText moreClasses="p-1">
79       </eg-marc-editable-content>
80
81       <eg-marc-editable-content
82         [context]="context" fieldType="ldr"
83         ariaLabel="Leader" i18n-ariaLabel moreClasses="p-1 pr-2">
84       </eg-marc-editable-content>
85     </div>
86
87     <!-- CONTROL FIELDS -->
88     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
89       *ngFor="let field of controlFields()">
90
91       <eg-marc-editable-content
92         [context]="context" [field]="field" fieldType="tag"
93         ariaLabel="Control Field Tag" i18n-ariaLabel moreClasses="p-1">
94       </eg-marc-editable-content>
95
96       <eg-marc-editable-content
97         [context]="context" [field]="field" fieldType="cfld"
98         ariaLabel="Control Field Content" i18n-ariaLabel moreClasses="p-1">
99       </eg-marc-editable-content>
100     </div>
101
102     <!-- data fields -->
103     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
104       *ngFor="let field of dataFields()">
105
106       <!-- TAG -->
107       <eg-marc-editable-content
108         [context]="context" [field]="field" fieldType="tag"
109         ariaLabel="Data Field Tag" i18n-ariaLabel moreClasses="p-1">
110       </eg-marc-editable-content>
111
112       <!-- INDICATOR 1 -->
113       <eg-marc-editable-content
114         [context]="context" [field]="field" fieldType="ind1"
115         ariaLabel="Data Field Indicator 1" i18n-ariaLabel moreClasses="p-1">
116       </eg-marc-editable-content>
117
118       <!-- INDICATOR 2 -->
119       <eg-marc-editable-content
120         [context]="context" [field]="field" fieldType="ind2"
121         ariaLabel="Data Field Indicator 2" i18n-ariaLabel moreClasses="p-1">
122       </eg-marc-editable-content>
123
124       <!-- SUBFIELDS -->
125       <ng-container *ngFor="let subfield of field.subfields">
126
127         <!-- SUBFIELD DECORATOR/DELIMITER -->
128         <eg-marc-editable-content fieldText="‡" i18n-fieldText
129           moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
130         </eg-marc-editable-content>
131
132         <!-- SUBFIELD CHARACTER -->
133         <eg-marc-editable-content
134           [context]="context" [field]="field" fieldType="sfc"
135           [subfield]="subfield" ariaLabel="Subfield Code" i18n-ariaLabel
136           moreClasses="sf-code border-left-0 p-1 pl-0">
137         </eg-marc-editable-content>
138
139         <!-- SUBFIELD VALUE -->
140         <eg-marc-editable-content
141           [context]="context" [field]="field" fieldType="sfv"
142           [subfield]="subfield" ariaLabel="Subfield Value" i18n-ariaLabel
143           moreClasses="p-1 pt-2">
144         </eg-marc-editable-content>
145       </ng-container>
146     </div>
147   </div>
148 </ng-container>
149