Add option to select border style

Macro-Deck-App · May 8, 2024 · 6c3ff57 · 6c3ff57
1 parent 1f645dd
commit 6c3ff57
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 31 deletions.
diff --git a/src/app/pages/deck/widget-grid/widget-grid.component.ts b/src/app/pages/deck/widget-grid/widget-grid.component.ts
@@ -1,4 +1,14 @@
-import {AfterContentInit, AfterViewInit, ApplicationRef, Component, ElementRef, HostListener, OnDestroy, ViewChild} from '@angular/core';
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ApplicationRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  ViewChild
+} from '@angular/core';
 import {Widget} from "../../../datatypes/widgets/widget";
 import {Subscription} from "rxjs";
 import {MacroDeckService} from "../../../services/macro-deck/macro-deck.service";
@@ -16,6 +26,8 @@ export class WidgetGridComponent implements AfterContentInit, OnDestroy {
                 private applicationRef: ApplicationRef) {
     }
 
+    public static updated: EventEmitter<any> = new EventEmitter<any>();
+
     private subscription: Subscription = new Subscription();
 
     private buttonSize: number = 0;
@@ -68,6 +80,7 @@ export class WidgetGridComponent implements AfterContentInit, OnDestroy {
 
         this.widgetSpacingPoints = (((this.macroDeckService.buttonSpacing / 100) * this.buttonSize) * 72 / 96) / 2;
         WidgetGridComponent.borderRadiusPoints = (((this.macroDeckService.buttonRadius / 100) * this.buttonSize) * 72 / 96) / 2;
+        WidgetGridComponent.updated.emit();
     }
 
     countTotalWidgets(): number {

diff --git a/src/app/pages/shared/modals/settings-modal/settings-modal.component.html b/src/app/pages/shared/modals/settings-modal/settings-modal.component.html
@@ -23,23 +23,6 @@
       </ion-toggle>
     </ion-item>
 
-    <ion-item>
-      <ion-icon name="menu-outline" slot="start"></ion-icon>
-      <ion-toggle
-        (ngModelChange)="displayMenuButtonChange($event)"
-        [(ngModel)]="showMenuButton">Show menu button
-      </ion-toggle>
-    </ion-item>
-
-    <ion-item>
-      <ion-icon slot="start" class="mdi mdi-theme-light-dark d-flex align-items-center"></ion-icon>
-      <ion-select [(ngModel)]="appearanceType" label="Appearance">
-        <ion-select-option value="0">System</ion-select-option>
-        <ion-select-option value="1">Dark</ion-select-option>
-        <ion-select-option value="2">Light</ion-select-option>
-      </ion-select>
-    </ion-item>
-
     @if (isAndroid()) {
       <ion-item>
         <ion-icon slot="start" class="mdi mdi-lock-off d-flex align-items-center"></ion-icon>
@@ -75,6 +58,35 @@
       </ion-item>
     }
 
+    <ion-item-divider>
+      <ion-label>Appearance</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-icon name="menu-outline" slot="start"></ion-icon>
+      <ion-toggle
+        (ngModelChange)="displayMenuButtonChange($event)"
+        [(ngModel)]="showMenuButton">Show menu button
+      </ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon slot="start" class="mdi mdi-theme-light-dark d-flex align-items-center"></ion-icon>
+      <ion-select [(ngModel)]="appearanceType" label="Appearance">
+        <ion-select-option value="0">System</ion-select-option>
+        <ion-select-option value="1">Dark</ion-select-option>
+        <ion-select-option value="2">Light</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon slot="start" class="mdi mdi-border-all-variant d-flex align-items-center"></ion-icon>
+      <ion-select [(ngModel)]="buttonWidgetBorderStyle" label="Button widget border">
+        <ion-select-option value="0">None</ion-select-option>
+        <ion-select-option value="1">Colored</ion-select-option>
+      </ion-select>
+    </ion-item>
+
     @if (isAndroid()) {
       <ion-item-divider>
         <ion-label>USB settings</ion-label>

diff --git a/src/app/pages/shared/modals/settings-modal/settings-modal.component.ts b/src/app/pages/shared/modals/settings-modal/settings-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit} from '@angular/core';
 import {AlertController, ModalController, Platform} from "@ionic/angular";
 import {SettingsService} from "../../../../services/settings/settings.service";
 import {WakelockService} from "../../../../services/wakelock/wakelock.service";
@@ -7,6 +7,7 @@ import {SslHandler} from "../../../../../../capacitor_plugins/sslhandler/src";
 import {environment} from "../../../../../environments/environment.web";
 import {DiagnosticService} from "../../../../services/diagnostic/diagnostic.service";
 import {ThemeService} from "../../../../services/theme/theme.service";
+import {ButtonWidgetBorderStyle} from "../../../../widget-content-components/button-widget/button-widget-border-style";
 
 @Component({
   selector: 'app-settings-modal',
@@ -15,6 +16,8 @@ import {ThemeService} from "../../../../services/theme/theme.service";
 })
 export class SettingsModalComponent  implements OnInit {
 
+  public static settingsApplied: EventEmitter<any> = new EventEmitter();
+
   preventScreenTimeout: boolean = false;
   showMenuButton: boolean = false;
   skipSslValidation: boolean = false;
@@ -24,6 +27,7 @@ export class SettingsModalComponent  implements OnInit {
   usbAutoConnect: boolean = false;
   usbPort: number = 8191;
   usbUseSsl: boolean = false;
+  buttonWidgetBorderStyle: string = "0";
 
   constructor(private modalController: ModalController,
               private settingsService: SettingsService,
@@ -40,6 +44,7 @@ export class SettingsModalComponent  implements OnInit {
   async confirm() {
     await this.saveSettings();
     await this.modalController.dismiss(null, 'confirm');
+    SettingsModalComponent.settingsApplied.emit();
   }
 
   async cancel() {
@@ -56,6 +61,7 @@ export class SettingsModalComponent  implements OnInit {
     await this.settingsService.setUsbAutoConnect(this.usbAutoConnect);
     await this.settingsService.setUsbPort(this.usbPort);
     await this.settingsService.setUsbUseSsl(this.usbUseSsl);
+    await this.settingsService.setButtonWidgetBorderStyle(Number.parseInt(this.buttonWidgetBorderStyle));
 
     await this.wakelockService.updateWakeLock();
     await this.screenOrientationService.updateScreenOrientation();
@@ -75,6 +81,7 @@ export class SettingsModalComponent  implements OnInit {
     this.usbAutoConnect = await this.settingsService.getUsbAutoConnect();
     this.usbPort = await this.settingsService.getUsbPort();
     this.usbUseSsl = await this.settingsService.getUsbUseSsl();
+    this.buttonWidgetBorderStyle = (await this.settingsService.getButtonWidgetBorderStyle()).toString();
   }
 
   async preventScreenTimeoutChange(event: any) {

diff --git a/src/app/services/settings/settings.service.ts b/src/app/services/settings/settings.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {Storage} from "@ionic/storage";
 import {ScreenOrientationType} from "../../enums/screen-orientation-type";
 import {AppearanceType} from "../../enums/appearance-type";
+import {ButtonWidgetBorderStyle} from "../../widget-content-components/button-widget/button-widget-border-style";
 
 const clientIdStorageKey: string = "client_id";
 const wakeLockKey: string = "wake_lock_enabled";
@@ -14,7 +15,8 @@ const showMenuButtonKey: string = "show_menu_button";
 const appearanceKey: string = "appearance";
 const usbAutoConnectKey: string = "usb_auto_connect";
 const usbPortKey: string = "usb_port";
-const usbUseSsl: string = "usb_use_ssl";
+const usbUseSslKey: string = "usb_use_ssl";
+const buttonWidgetBorderStyleKey: string = "button_widget_border_style";
 
 @Injectable({
   providedIn: 'root'
@@ -25,12 +27,20 @@ export class SettingsService {
   constructor(private storage: Storage) {
   }
 
+  public async setButtonWidgetBorderStyle(style: ButtonWidgetBorderStyle) {
+    await this.storage.set(buttonWidgetBorderStyleKey, style);
+  }
+
+  public async getButtonWidgetBorderStyle() {
+    return  await this.storage.get(buttonWidgetBorderStyleKey) ?? ButtonWidgetBorderStyle.None;
+  }
+
   public async setUsbUseSsl(useSsl: boolean) {
-    await this.storage.set(usbUseSsl, useSsl);
+    await this.storage.set(usbUseSslKey, useSsl);
   }
 
   public async getUsbUseSsl() {
-    return  await this.storage.get(usbUseSsl) ?? false;
+    return  await this.storage.get(usbUseSslKey) ?? false;
   }
 
   public async setUsbPort(usbPort: number) {

diff --git a/src/app/widget-content-components/button-widget/button-widget-border-style.ts b/src/app/widget-content-components/button-widget/button-widget-border-style.ts
@@ -0,0 +1,4 @@
+export enum ButtonWidgetBorderStyle {
+  None,
+  Colored
+}
diff --git a/src/app/widget-content-components/button-widget/button-widget.component.html b/src/app/widget-content-components/button-widget/button-widget.component.html
@@ -1,8 +1,4 @@
-<div [ngStyle]="{
-        'border-radius': widgetGridComponent.borderRadiusPoints + 'pt',
-        'border': '2pt solid ' + borderColor,
-        'padding': '2pt'
-        }"
+<div [ngStyle]="borderStyle"
      (down)="onMouseDown($event)"
      (up)="onMouseUp($event)"
      (mouseleave)="onMouseLeave($event)"

diff --git a/src/app/widget-content-components/button-widget/button-widget.component.ts b/src/app/widget-content-components/button-widget/button-widget.component.ts
@@ -1,37 +1,66 @@
-import {Component, Renderer2} from '@angular/core';
+import {Component, OnDestroy, OnInit, Renderer2} from '@angular/core';
 import {Widget} from "../../datatypes/widgets/widget";
 import {ButtonWidget} from "../../datatypes/widgets/button-widget";
 import {WidgetGridComponent} from "../../pages/deck/widget-grid/widget-grid.component";
 import {MacroDeckService} from "../../services/macro-deck/macro-deck.service";
 import {WidgetInteractionType} from "../../enums/widget-interaction-type";
-import { DomSanitizer } from '@angular/platform-browser';
+import {DomSanitizer} from '@angular/platform-browser';
 import {SettingsService} from "../../services/settings/settings.service";
+import {ButtonWidgetBorderStyle} from "./button-widget-border-style";
+import {Subscription} from "rxjs";
+import {SettingsModalComponent} from "../../pages/shared/modals/settings-modal/settings-modal.component";
 
 @Component({
   selector: 'app-button-widget',
   templateUrl: './button-widget.component.html',
   styleUrls: ['./button-widget.component.scss'],
 })
-export class ButtonWidgetComponent {
+export class ButtonWidgetComponent implements OnInit, OnDestroy {
   protected readonly widgetGridComponent = WidgetGridComponent;
 
   foregroundImage: any;
   iconImage: any;
   backgroundStyle: any;
   borderColor: string | undefined;
   widget: Widget | undefined;
+  borderStyle: any;
 
   private longPressTrigger: boolean = false;
   private longPressTimeout: any;
   private pressed: boolean = false;
 
+  private subscription: Subscription = new Subscription();
+
   constructor(private renderer: Renderer2,
               private macroDeckService: MacroDeckService,
               private sanitizer: DomSanitizer,
               private settingsService: SettingsService) {
   }
 
-  updateWidget(widget: Widget) {
+  ngOnInit(): void {
+    this.subscription.add(this.widgetGridComponent.updated.subscribe(async _ => {
+      await this.updateSelf();
+    }));
+
+    this.subscription.add(SettingsModalComponent.settingsApplied.subscribe(async _ => {
+      await this.updateSelf();
+    }));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  async updateSelf() {
+    if (this.widget === undefined) {
+      return;
+    }
+
+    await this.updateWidget(this.widget);
+  }
+
+  async updateWidget(widget: Widget) {
+    let borderStyle = await this.settingsService.getButtonWidgetBorderStyle();
     this.widget = widget;
     const widgetContent = widget.widgetContent as ButtonWidget;
     this.foregroundImage = widgetContent?.labelBase64
@@ -42,6 +71,24 @@ export class ButtonWidgetComponent {
       : undefined;
     this.backgroundStyle = {'background-color': widget.backgroundColorHex};
     this.borderColor = widget.backgroundColorHex ? this.adjustColor(widget.backgroundColorHex, -40) : undefined;
+    this.setBorderStyle(borderStyle);
+  }
+
+  private setBorderStyle(borderStyle: ButtonWidgetBorderStyle) {
+    switch (borderStyle) {
+      case ButtonWidgetBorderStyle.None:
+        this.borderStyle = {
+          'border-radius': this.widgetGridComponent.borderRadiusPoints + 'pt'
+        }
+        break;
+      case ButtonWidgetBorderStyle.Colored:
+        this.borderStyle = {
+          'border-radius': this.widgetGridComponent.borderRadiusPoints + 'pt',
+          'border': '2pt solid ' + this.borderColor,
+          'padding': '2pt'
+        }
+        break;
+    }
   }
 
   onMouseUp(event: Event) {