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

0001
0002   <button mat-icon-button matTooltip="Color legend" class="panel-button" (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       <!-- Optical phototn+ -->
0055       <div style="display: flex; align-items: center; gap: 12px;">
0056         <div style="width: 60px; height: 10px; background-color: #FFEE00;"></div>
0057         <span>Optical</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: #CF00FF;"></div>
0063         <span>Pi+</span>
0064       </div>
0065
0066       <!-- Pi- -->
0067       <div style="display: flex; align-items: center; gap: 12px;">
0068         <div style="width: 60px; height: 10px; background-color: #00FFD1;"></div>
0069         <span>Pi-</span>
0070       </div>
0071
0072       <!-- Positive Charge (other) -->
0073       <div style="display: flex; align-items: center; gap: 12px;">
0074         <div style="width: 60px; height: 10px; background-color: #FF0007;"></div>
0075         <span>Positive Track (other)</span>
0076       </div>
0077
0078       <!-- Negative Charge (other) -->
0079       <div style="display: flex; align-items: center; gap: 12px;">
0080         <div style="width: 60px; height: 10px; background-color: #003BFF;"></div>
0081         <span>Negative Track (other)</span>
0082       </div>
0083
0084       <!-- Neutral -->
0085       <div style="display: flex; align-items: center; gap: 12px;">
0086         <div style="width: 60px; height: 10px; position: relative;">
0087           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 0px;"></div>
0088           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 25px;"></div>
0089           <div style="position: absolute; width: 10px; height: 10px; background-color: #AAAAAA; left: 50px;"></div>
0090         </div>
0091         <span>Neutral Track (other)</span>
0092       </div>
0093     </div>
0094
0095     <div style="margin-top: 20px; font-size: 14px; color: #666;">
0096       <p>Note: Dashed lines represent neutrals</p>
0097     </div>
0098   </div>
0099   <button mat-dialog-close aria-label="Close dialog" class="close-btn">
0100     OK
0101   </button>
0102 </ng-template>
0103
0104 <!--    <button mat-raised-button [matMenuTriggerFor]="menu" matTooltip="Clipping configuration">-->
0105 <!--      <mat-icon>crop</mat-icon>-->
0106 <!--    </button>-->