feat: more compact widgets

modules/pages/control-scheme-view/src/lib/widgets/widget-container/widget-container.component.scss

@@ -0,0 +1,3 @@
+:host {
+    --widget-background-color: var(--mdc-elevated-card-container-color);
+}

modules/pages/control-scheme-view/src/lib/widgets/widgets-grid/control-scheme-widgets-grid.component.scss

@@ -1,6 +1,6 @@
 :host {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     grid-auto-rows: 180px;
     gap: 15px;
     justify-items: stretch;

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge-value/index.ts

@@ -0,0 +1 @@
+export * from './tilt-gauge-value.component';

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge-value/tilt-gauge-value.component.html

@@ -0,0 +1,44 @@
+@if (value !== null) {
+    <svg xmlns="http://www.w3.org/2000/svg"
+         preserveAspectRatio="xMidYMid meet"
+         [attr.viewBox]="viewBox"
+    >
+        @if (clickable) {
+            <rect x="34%"
+                  y="80%"
+                  width="32%"
+                  height="19%"
+                  class="box box_clickable"
+                  (click)="onClick($event)"
+                  (keydown.enter)="onClick($event)"
+                  (keydown.space)="onClick($event)"
+                  [matTooltip]="'controlScheme.widgets.tiltCommon.compensateButtonTitle' | transloco"
+                  role="button"
+                  focusable="true"
+                  tabindex="0"
+                  rx="3"
+            ></rect>
+            <text x="50%"
+                  y="91%"
+                  class="value value_clickable"
+            >
+                {{ value }}
+            </text>
+        } @else {
+            <rect x="34%"
+                  y="80%"
+                  width="32%"
+                  height="19%"
+                  class="box"
+                  rx="3"
+            ></rect>
+            <text x="50%"
+                  y="91%"
+                  class="value"
+            >
+                {{ value }}
+            </text>
+        }
+
+    </svg>
+}

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge-value/tilt-gauge-value.component.scss

@@ -0,0 +1,21 @@
+.value {
+    dominant-baseline: middle;
+    font-size: 0.9em;
+    text-anchor: middle;
+    fill: var(--app-text-color);
+
+    &_clickable {
+        pointer-events: none;
+    }
+}
+
+.box {
+    fill: var(--widget-background-color, var(--app-background-color));
+    stroke: var(--app-primary-color);
+    stroke-width: 2;
+
+    &_clickable {
+        cursor: pointer;
+        user-select: none;
+    }
+}

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge-value/tilt-gauge-value.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslocoPipe } from '@ngneat/transloco';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Component({
+    standalone: true,
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'g[appTiltGaugeValue]',
+    templateUrl: './tilt-gauge-value.component.html',
+    styleUrls: [ './tilt-gauge-value.component.scss' ],
+    imports: [
+        TranslocoPipe,
+        MatTooltip
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TiltGaugeValueComponent {
+    @Input() public viewBox = '0 0 0 0';
+
+    @Input() public clickable = false;
+
+    @Input('appTiltGaugeValue') public value: number | null = null;
+
+    @Output() public readonly clicked = new EventEmitter<Event>();
+
+    public onClick(
+        event: Event
+    ): void {
+        if (this.clickable) {
+            this.clicked.emit(event);
+        }
+    }
+}

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge.component.html

@@ -18,4 +18,10 @@
             <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
         </g>
     }
+
+    <g [appTiltGaugeValue]="tiltDegrees"
+       [clickable]="valueClickable"
+       (clicked)="onValueClicked($event)"
+       [viewBox]="viewBox"
+    ></g>
 </svg>

modules/shared/ui/src/lib/tilt-gauge/tilt-gauge.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 import { TiltGaugeSectorDefinition, TiltGaugeSectorsComponent } from './tilt-gauge-sectors';
@@ -7,6 +7,7 @@ import { TiltGaugeTicksDefBuilderService } from './tilt-gauge-ticks-def-builder.
 import { TiltGaugeSectorDefBuilderService } from './tilt-gauge-sector-def-builder.service';
 import { TiltGaugeOptions } from './tilt-gauge-options';
 import { TiltGaugeBracketsDefBuilderService } from './tilt-gauge-brackets-def-builder.service';
+import { TiltGaugeValueComponent } from './tilt-gauge-value';
 
 @Component({
     standalone: true,
@@ -16,13 +17,18 @@ import { TiltGaugeBracketsDefBuilderService } from './tilt-gauge-brackets-def-bu
     imports: [
         TiltGaugeSectorsComponent,
         TiltGaugeTicksComponent,
-        NgTemplateOutlet
+        NgTemplateOutlet,
+        TiltGaugeValueComponent
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TiltGaugeComponent implements OnInit {
     @Input() public iconTemplate?: TemplateRef<unknown>;
 
+    @Input() public valueClickable = false;
+
+    @Output() public readonly valueClicked = new EventEmitter<Event>();
+
     private readonly baseOptions: TiltGaugeOptions = {
         chartRotation: 0,
         gaugeStepSizeDegrees: 10,
@@ -118,6 +124,14 @@ export class TiltGaugeComponent implements OnInit {
         this.updateChart();
     }
 
+    public onValueClicked(
+        event: Event
+    ): void {
+        if (this.valueClickable) {
+            this.valueClicked.emit(event);
+        }
+    }
+
     private updateIconTransform(): void {
         if (this._tiltDegrees === undefined) {
             this._iconTransform = 'rotate(0)';

modules/widgets/src/lib/common/common-tilt-widgets-styles.scss

@@ -0,0 +1,21 @@
+.widget-gauge {
+    display: block;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    grid-row: span 3;
+}
+
+.widget-icon {
+    fill: none;
+    stroke: var(--app-text-color);
+    stroke-linecap: round;
+
+    &__outline {
+        stroke-width: 2;
+    }
+
+    &__inline {
+        stroke-width: 1;
+    }
+}

modules/widgets/src/lib/pitch/pitch-sensor-widget.component.html

@@ -4,46 +4,21 @@
             (edit)="onEdit()"
             (delete)="onDelete()"
 >
-    <div class="pitch-content">
-        <lib-tilt-gauge [tiltDegrees]="pitch"
-                        class="pitch-gauge"
-                        [iconTemplate]="pitchIconTemplate"
-        ></lib-tilt-gauge>
+    <lib-tilt-gauge [tiltDegrees]="pitch"
+                    class="widget-gauge"
+                    [iconTemplate]="pitchIconTemplate"
+                    [valueClickable]="true"
+                    (valueClicked)="toggleCompensation()"
+    ></lib-tilt-gauge>
 
-        <span class="pitch-value">
-            @if (pitch !== null) {
-                {{ pitch }}°
-            } @else {
-                &nbsp;
-            }
-        </span>
-
-        <button mat-button
-                [disabled]="pitch === null"
-                (click)="onCompensate()"
-                class="pitch-control-button"
-                [title]="'controlScheme.widgets.pitch.compensateButtonTitle' | transloco"
-        >
-            <mat-icon [fontIcon]="'gps_not_fixed'"></mat-icon>
-        </button>
-        <button mat-button
-                [disabled]="pitch === null"
-                class="pitch-control-button"
-                (click)="onResetCompensation()"
-                [title]="'controlScheme.widgets.pitch.resetCompensationButtonTitle' | transloco"
+    <ng-template #pitchIconTemplate>
+        <svg xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 100 100"
         >
-            <mat-icon [fontIcon]="'gps_off'"></mat-icon>
-        </button>
-
-        <ng-template #pitchIconTemplate>
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 100 100"
-            >
-                <g class="pitch-icon">
-                    <path d="M 25 50 L 75 50 L 60 35 z" class="pitch-icon__outline"></path>
-                    <path d="M 60 35 L 65 50" class="pitch-icon__inline"></path>
-                </g>
-            </svg>
-        </ng-template>
-    </div>
+            <g class="widget-icon">
+                <path d="M 25 50 L 75 50 L 60 35 z" class="widget-icon__outline"></path>
+                <path d="M 60 35 L 65 50" class="widget-icon__inline"></path>
+            </g>
+        </svg>
+    </ng-template>
 </lib-widget>

modules/widgets/src/lib/pitch/pitch-sensor-widget.component.ts

@@ -7,17 +7,17 @@ import { TiltGaugeComponent, TiltGaugeIconDirective, WidgetComponent } from '@ap
 
 @Component({
     standalone: true,
-    selector: 'lib-tilt-sensor-widget',
+    selector: 'lib-pitch-sensor-widget',
     templateUrl: './pitch-sensor-widget.component.html',
-    styleUrls: [ './pitch-sensor-widget.component.scss' ],
+    styleUrls: [ '../common/common-tilt-widgets-styles.scss' ],
     imports: [
         WidgetComponent,
         TiltGaugeIconDirective,
         MatButtonModule,
         TranslocoPipe,
         TiltGaugeComponent,
         MatMenuItem,
-        MatIcon
+        MatIcon,
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -38,16 +38,18 @@ export class PitchSensorWidgetComponent {
 
     @Output() public readonly resetCompensation = new EventEmitter<void>();
 
-    public onCompensate(): void {
-        if (this.pitch !== null) {
+    private isCompensating = false;
+
+    public toggleCompensation(): void {
+        if (this.isCompensating) {
+            this.resetCompensation.emit();
+            this.isCompensating = false;
+        } else if (this.pitch !== null) {
             this.compensate.emit(this.pitch);
+            this.isCompensating = true;
         }
     }
 
-    public onResetCompensation(): void {
-        this.resetCompensation.emit();
-    }
-
     public onEdit(): void {
         this.edit.emit();
     }