feat: Polish great circle line settings menu

Author: daniel-freiermuth

src/app/modules/settings/components/settings-dialog.html

@@ -889,9 +889,16 @@
                       </mat-form-field>
                     </div>
                     <div class="setting-card-row" style="padding-bottom: 10px; align-items: center; gap: 12px; flex-wrap: wrap">
-                      <div style="flex: 0 0 auto; font-size: 0.85em; min-width: 120px">Great Circle Line:</div>
-                      <mat-form-field style="width: 150px">
-                        <mat-label>Length kind</mat-label>
+                      <div style="flex: 0 0 auto; min-width: 120px">Great Circle Line:</div>
+                      <mat-form-field style="width: 110px">
+                        <mat-label>Value</mat-label>
+                        <input matInput type="number" min="0"
+                          [(ngModel)]="facade.settings.vessels.greatCircleStyle.lineLength.value"
+                          (change)="persistModel()"
+                        >
+                      </mat-form-field>
+                      <mat-form-field style="width: 75px">
+                        <mat-label>Unit</mat-label>
                         <mat-select
                           [(ngModel)]="facade.settings.vessels.greatCircleStyle.lineLength.kind"
                           (selectionChange)="persistModel()"
@@ -901,39 +908,34 @@
                           }
                         </mat-select>
                       </mat-form-field>
-                      <mat-form-field style="width: 90px">
-                        <mat-label>Value</mat-label>
-                        <input matInput type="number" min="0"
-                          [(ngModel)]="facade.settings.vessels.greatCircleStyle.lineLength.value"
+                      <mat-form-field style="width: 70px">
+                        <mat-label>Color</mat-label>
+                        <input matInput type="color"
+                          [(ngModel)]="facade.settings.vessels.greatCircleStyle.color"
                           (change)="persistModel()"
+                          style="cursor: pointer; padding: 0; height: 24px"
                         >
-                        <span matSuffix>
-                          @if (facade.settings.vessels.greatCircleStyle.lineLength.kind === 'time') { min }
-                          @if (facade.settings.vessels.greatCircleStyle.lineLength.kind === 'distance') { nmi }
-                          @if (facade.settings.vessels.greatCircleStyle.lineLength.kind === 'pixels') { px }
-                        </span>
                       </mat-form-field>
-                      <label style="font-size: 0.8em">Color</label>
-                      <input type="color"
-                        [(ngModel)]="facade.settings.vessels.greatCircleStyle.color"
-                        (change)="persistModel()"
-                        style="width: 40px; height: 28px; padding: 2px; cursor: pointer; border: none"
-                      >
-                      <mat-form-field style="width: 70px">
+                      <mat-form-field style="width: 80px">
                         <mat-label>Width</mat-label>
                         <input matInput type="number" min="1" max="10"
                           [(ngModel)]="facade.settings.vessels.greatCircleStyle.width"
                           (change)="persistModel()"
                         >
                       </mat-form-field>
-                      <mat-form-field style="width: 130px">
+                      <mat-form-field style="width: 200px">
                         <mat-label>Pattern</mat-label>
                         <mat-select
                           [(ngModel)]="facade.settings.vessels.greatCircleStyle.dash"
                           (selectionChange)="persistModel()"
                         >
                           @for(d of options.lineStyle.dashPatterns; track d[0]) {
-                            <mat-option [value]="d[0]">{{d[1]}}</mat-option>
+                            <mat-option [value]="d[0]">
+                              <svg width="48" height="10" style="vertical-align: middle; margin-right: 6px">
+                                <line x1="0" y1="5" x2="48" y2="5" stroke="currentColor" stroke-width="2"
+                                  [attr.stroke-dasharray]="options.lineStyle.dashArrays.get(d[0])"/>
+                              </svg>{{d[1]}}
+                            </mat-option>
                           }
                         </mat-select>
                       </mat-form-field>