components/legend-window/legend-window.component.html

0001
0002   <button mat-icon-button matTooltip="empty window" style="margin-left: 6px; box-shadow: var(--mat-sys-level1)" (click)="openDialog()">
0003     <mat-icon>info</mat-icon>
0004   </button>
0005
0006
0007
0008 <ng-template #dialogTemplate>
0009   <button mat-dialog-close aria-label="Close dialog" class="close-round-btn">
0010     <mat-icon>close</mat-icon>
0011   </button>
0012   <div class="mat-menu" style="padding: 45px 24px 0 24px; position: relative; font-family: Arial, sans-serif;">
0013     <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 18px;">Particle Track Legend</h3>
0014
0015     <div style="display: flex; flex-direction: column; gap: 12px;">
0016       <!-- Electron -->
0017       <div style="display: flex; align-items: center; gap: 12px;">
0018         <div style="width: 60px; height: 10px; background-color: #0097FF;"></div>
0019         <span>Electron (e-)</span>
0020       </div>
0021
0022       <!-- Positron -->
0023       <div style="display: flex; align-items: center; gap: 12px;">
0024         <div style="width: 60px; height: 10px; background-color: #FF0007;"></div>
0025         <span>Positron (e+)</span>
0026       </div>
0027
0028       <!-- Proton -->
0029       <div style="display: flex; align-items: center; gap: 12px;">
0030         <div style="width: 60px; height: 10px; background-color: #5400FF;"></div>
0031         <span>Proton</span>
0032       </div>
0033
0034       <!-- Neutron -->
0035       <div style="display: flex; align-items: center; gap: 12px;">
0036         <div style="width: 60px; height: 10px; position: relative;">
0037           <div style="position: absolute; width: 10px; height: 10px; background-color: #13FF00; left: 0px;"></div>
0038           <div style="position: absolute; width: 10px; height: 10px; background-color: #13FF00; left: 25px;"></div>
0039           <div style="position: absolute; width: 10px; height: 10px; background-color: #13FF00; left: 50px;"></div>
0040         </div>
0041         <span>Neutron</span>
0042       </div>
0043
0044       <!-- Gamma -->
0045       <div style="display: flex; align-items: center; gap: 12px;">
0046         <div style="width: 60px; height: 10px; position: relative;">
0047           <div style="position: absolute; width: 10px; height: 10px; background-color: #FFEE00; left: 0px;"></div>
0048           <div style="position: absolute; width: 10px; height: 10px; background-color: #FFEE00; left: 25px;"></div>
0049           <div style="position: absolute; width: 10px; height: 10px; background-color: #FFEE00; left: 50px;"></div>
0050         </div>
0051         <span>Gamma</span>
0052       </div>
0053
0054       <!-- Pi+ -->
0055       <div style="display: flex; align-items: center; gap: 12px;">
0056         <div style="width: 60px; height: 10px; background-color: #CF00FF;"></div>
0057         <span>Pi+</span>
0058       </div>
0059
0060       <!-- Pi- -->
0061       <div style="display: flex; align-items: center; gap: 12px;">
0062         <div style="width: 60px; height: 10px; background-color: #00FFD1;"></div>
0063         <span>Pi-</span>
0064       </div>
0065
0066       <!-- Positive Charge (other) -->
0067       <div style="display: flex; align-items: center; gap: 12px;">
0068         <div style="width: 60px; height: 10px; background-color: #FF0007;"></div>
0069         <span>Positive Track (other)</span>
0070       </div>
0071
0072       <!-- Negative Charge (other) -->
0073       <div style="display: flex; align-items: center; gap: 12px;">
0074         <div style="width: 60px; height: 10px; background-color: #003BFF;"></div>
0075         <span>Negative Track (other)</span>
0076       </div>
0077
0078       <!-- Neutral -->
0079       <div style="display: flex; align-items: center; gap: 12px;">
0080         <div style="width: 60px; height: 10px; position: relative;">
0081           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 0px;"></div>
0082           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 25px;"></div>
0083           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 50px;"></div>
0084         </div>
0085         <span>Neutral Track (other)</span>
0086       </div>
0087     </div>
0088
0089     <div style="margin-top: 20px; font-size: 14px; color: #666;">
0090       <p>Note: Dashed lines represent neutrals</p>
0091     </div>
0092   </div>
0093   <button mat-dialog-close aria-label="Close dialog" class="close-btn">
0094     OK
0095   </button>
0096 </ng-template>
0097
0098 <!--    <button mat-raised-button [matMenuTriggerFor]="menu" matTooltip="Clipping configuration">-->
0099 <!--      <mat-icon>crop</mat-icon>-->
0100 <!--    </button>-->