Fixing headers and overlays.

Interesting: Chrome crashes when the date time popover is animated, other animations does not any harm, so rather remove it, before we get into an issue....

src/app/beans/bean-sort/bean-sort.component.html

@@ -4,7 +4,9 @@
 <ion-content>
   <ion-list class="ion-no-padding">
     <ion-list-header>
-      {{"SORT_ORDER" | translate}}
+      <ion-item style="width: 100%;margin-left: 0px;--background: #ffffff;" class="ion-margin-top" lines="none" tappable>
+        {{"SORT_ORDER" | translate}}
+      </ion-item>
     </ion-list-header>
     <ion-grid class="ion-no-padding">
       <ion-row>

src/app/brew/brew-maximize-controls/brew-maximize-controls.component.ts

@@ -64,7 +64,6 @@ export class BrewMaximizeControlsComponent
     this.__writeTimeNative(wantedDisplayFormat);
     this.brewTimerTickedSubscription = this.brewTimerTickedEvent.subscribe(
       (_val) => {
-        console.log('test');
         this.__writeTimeNative(wantedDisplayFormat);
       },
     );

src/app/brew/brew-sort/brew-sort.component.html

@@ -4,7 +4,9 @@
 <ion-content>
   <ion-list class="ion-no-padding">
     <ion-list-header>
-      {{"SORT_ORDER" | translate}}
+      <ion-item  style="width: 100%;margin-left: 0px;--background: #ffffff;" class="ion-margin-top" lines="none" tappable>
+        {{"SORT_ORDER" | translate}}
+      </ion-item>
     </ion-list-header>
     <ion-grid class="ion-no-padding">
       <ion-row>

src/components/beans/bean-roast-information/bean-roast-information.component.ts

@@ -19,7 +19,7 @@ export class BeanRoastInformationComponent implements OnInit {
   constructor(
     private readonly platform: Platform,
     private readonly modalCtrl: ModalController,
-    private readonly bleManager: CoffeeBluetoothDevicesService
+    private readonly bleManager: CoffeeBluetoothDevicesService,
   ) {}
 
   public ngOnInit() {
@@ -45,21 +45,29 @@ export class BeanRoastInformationComponent implements OnInit {
     this.data.weight = this.bleManager.getScaleWeight();
   }
 
+  /**Somehow on devices an double/tripple click is triggered, and we can't fix this somehow, so we check if the popover is already shown and else ignore the triple tap**/
+  private _overLaytimeShown: boolean = false;
   public async showTimeOverlay(_event) {
+    if (this._overLaytimeShown === true) {
+      return;
+    }
+    this._overLaytimeShown = true;
+
     _event.stopPropagation();
     _event.stopImmediatePropagation();
 
     const modal = await this.modalCtrl.create({
       component: DatetimePopoverComponent,
       id: 'datetime-popover',
       cssClass: 'popover-actions',
-      animated: true,
+      animated: false,
       breakpoints: [0, 0.5, 0.75, 1],
       initialBreakpoint: 0.75,
       componentProps: { displayingTime: this.displayingTime },
     });
     await modal.present();
     const modalData = await modal.onWillDismiss();
+    this._overLaytimeShown = false;
     if (
       modalData !== undefined &&
       modalData.data &&
@@ -69,8 +77,8 @@ export class BeanRoastInformationComponent implements OnInit {
       this.data.bean_roast_information.roast_length = moment
         .duration(
           moment(modalData.data.displayingTime).diff(
-            moment(modalData.data.displayingTime).startOf('day')
-          )
+            moment(modalData.data.displayingTime).startOf('day'),
+          ),
         )
         .asSeconds();
     }

src/components/brew-timer/brew-timer.component.ts

@@ -514,7 +514,13 @@ export class BrewTimerComponent implements OnInit, OnDestroy {
     this.changeEvent();
   }
 
+  /**Somehow on devices an double/tripple click is triggered, and we can't fix this somehow, so we check if the popover is already shown and else ignore the triple tap**/
+  private _overLaytimeShown: boolean = false;
   public async showTimeOverlay(_event) {
+    if (this._overLaytimeShown === true) {
+      return;
+    }
+    this._overLaytimeShown = true;
     try {
       //Just do this on iOS 16.X...
       if (_event && this.isIos16) {
@@ -534,13 +540,14 @@ export class BrewTimerComponent implements OnInit, OnDestroy {
       component: DatetimePopoverComponent,
       id: 'datetime-popover',
       cssClass: 'popover-actions',
-      animated: true,
+      animated: false,
       breakpoints: [0, 0.5, 0.75, 1],
       initialBreakpoint: 0.75,
       componentProps: { displayingTime: this.displayingTime },
     });
     await modal.present();
     const modalData = await modal.onWillDismiss();
+    this._overLaytimeShown = false;
     if (
       modalData !== undefined &&
       modalData.data &&

src/components/brews/brew-brewing/brew-brewing.component.ts

@@ -848,7 +848,7 @@ export class BrewBrewingComponent implements OnInit, AfterViewInit {
       component: DatetimePopoverComponent,
       id: 'datetime-popover',
       cssClass: 'popover-actions',
-      animated: true,
+      animated: false,
       breakpoints: [0, 0.5, 0.75, 1],
       initialBreakpoint: 0.75,
       componentProps: { displayingTime: this.displayingBrewTime },

src/components/timer/timer.component.ts

@@ -45,7 +45,7 @@ export class TimerComponent implements OnInit, OnDestroy {
     private readonly modalCtrl: ModalController,
     private readonly bleManager: CoffeeBluetoothDevicesService,
     private readonly uiSettingsStorage: UISettingsStorage,
-    private readonly platform: Platform
+    private readonly platform: Platform,
   ) {
     this.settings = this.uiSettingsStorage.getSettings();
     Device.getInfo().then((deviceInfo) => {
@@ -191,7 +191,7 @@ export class TimerComponent implements OnInit, OnDestroy {
         return;
       }
       const milliSecondTimer = moment(moment().toDate()).subtract(
-        this.startedOffset
+        this.startedOffset,
       );
 
       this.timer.milliseconds = milliSecondTimer.milliseconds();
@@ -268,15 +268,21 @@ export class TimerComponent implements OnInit, OnDestroy {
 
   public changeDate(_event) {
     const durationPassed = moment.duration(
-      moment(_event).diff(moment(_event).startOf('day'))
+      moment(_event).diff(moment(_event).startOf('day')),
     );
     this.displayingTime = moment(_event).toISOString();
     this.timer.seconds = durationPassed.asSeconds();
     // Emit event so parent page can do something
     this.changeEvent();
   }
 
+  /**Somehow on devices an double/tripple click is triggered, and we can't fix this somehow, so we check if the popover is already shown and else ignore the triple tap**/
+  private _overLaytimeShown: boolean = false;
   public async showTimeOverlay(_event) {
+    if (this._overLaytimeShown === true) {
+      return;
+    }
+    this._overLaytimeShown = true;
     try {
       //Just do this on iOS 16.X...
       if (_event && this.isIos16) {
@@ -295,12 +301,14 @@ export class TimerComponent implements OnInit, OnDestroy {
       component: DatetimePopoverComponent,
       id: 'datetime-popover',
       cssClass: 'popover-actions',
+      animated: false,
       breakpoints: [0, 0.5, 0.75, 1],
       initialBreakpoint: 0.75,
       componentProps: { displayingTime: this.displayingTime },
     });
     await modal.present();
     const modalData = await modal.onWillDismiss();
+    this._overLaytimeShown = false;
     if (
       modalData !== undefined &&
       modalData.data &&
@@ -310,8 +318,8 @@ export class TimerComponent implements OnInit, OnDestroy {
       this.timer.seconds = moment
         .duration(
           moment(this.displayingTime).diff(
-            moment(this.displayingTime).startOf('day')
-          )
+            moment(this.displayingTime).startOf('day'),
+          ),
         )
         .asSeconds();
       this.timer.milliseconds = moment(this.displayingTime)