Fix width of event navigator buttons. Prevent right-click from activating button auto-repeat.

Author: kshetline

src/app/svc/svc-calendar-view/svc-calendar-view-options.component.html

@@ -3,20 +3,20 @@
     <div class="inc-dec-pair">
       <button pButton type="button" icon="fas fa-chevron-left" (click)="changeMonth(-1)"
         (touchstart)="onTouchStart($event, -1)" (touchend)="stopClickTimer()"
-        (mousedown)="onMouseDown(-1)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
+        (mousedown)="onMouseDown(-1, $event)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
       <span>Month</span>
       <button pButton type="button" icon="fas fa-chevron-right" (click)="changeMonth(1)"
         (touchstart)="onTouchStart($event, 1)" (touchend)="stopClickTimer()"
-        (mousedown)="onMouseDown(1)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
+        (mousedown)="onMouseDown(1, $event)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
     </div>
     <div class="inc-dec-pair">
       <button pButton type="button" icon="fas fa-chevron-left" (click)="changeMonth(-12)"
         (touchstart)="onTouchStart($event, -12)" (touchend)="stopClickTimer()"
-        (mousedown)="onMouseDown(-12)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
+        (mousedown)="onMouseDown(-12, $event)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
       <span>Year</span>
       <button pButton type="button" icon="fas fa-chevron-right" (click)="changeMonth(12)"
         (touchstart)="onTouchStart($event, 12)" (touchend)="stopClickTimer()"
-        (mousedown)="onMouseDown(12)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
+        (mousedown)="onMouseDown(12, $event)" (mouseup)="stopClickTimer()" (mouseleave)="stopClickTimer()"></button>
     </div>
   </div>
   <hr>

src/app/svc/svc-calendar-view/svc-calendar-view-options.component.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright © 2017 Kerry Shetline, kerry@shetline.com.
+  Copyright © 2017-2019 Kerry Shetline, kerry@shetline.com.
 
   This code is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -148,8 +148,8 @@ export class SvcCalendarViewOptionsComponent implements AfterViewInit, OnDestroy
     this.onMouseDown(delta);
   }
 
-  onMouseDown(delta: number): void {
-    if (!this.clickTimer) {
+  onMouseDown(delta: number, event?: MouseEvent): void {
+    if (!this.clickTimer && (!event || event.button === 0)) {
       this.clickTimer = timer(CLICK_REPEAT_DELAY, CLICK_REPEAT_RATE).subscribe(() => {
         this.changeMonth(delta);
       });

src/app/svc/svc-event-navigator/svc-event-navigator.component.html

@@ -1,13 +1,13 @@
 <div class="flex-container" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
   <button pButton type="button" icon="fas fa-chevron-left" [disabled]="disabled || !eventFinderReady"
           (touchstart)="onTouchStart($event, true)" (touchend)="onTouchEnd($event)"
-          (mousedown)="onMouseDown(true)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
+          (mousedown)="onMouseDown(true, $event)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
   <ks-dropdown scrollHeight="400px"
                [options]="events" [(ngModel)]="selectedEvent" [disabled]="disabled || !eventFinderReady"></ks-dropdown>
   <ks-dropdown scrollHeight="250px"
                [options]="planets" [(ngModel)]="selectedPlanet" [disabled]="disabled || noPlanets || !eventFinderReady"></ks-dropdown>
   <button pButton type="button" icon="fas fa-chevron-right" [disabled]="disabled || !eventFinderReady"
           (touchstart)="onTouchStart($event, false)" (touchend)="onTouchEnd($event)"
-          (mousedown)="onMouseDown(false)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
+          (mousedown)="onMouseDown(false, $event)" (mouseup)="onMouseUp()" (mouseleave)="stopClickTimer()"></button>
 </div>
 <p-growl [value]="messages" [life]="6000"></p-growl>

src/app/svc/svc-event-navigator/svc-event-navigator.component.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright © 2017-2018 Kerry Shetline, kerry@shetline.com.
+  Copyright © 2017-2019 Kerry Shetline, kerry@shetline.com.
 
   This code is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -192,8 +192,8 @@ export class SvcEventNavigatorComponent implements AfterViewInit, OnDestroy {
     this.onMouseDown(goBack);
   }
 
-  onMouseDown(goBack: boolean): void {
-    if (!this.clickTimer) {
+  onMouseDown(goBack: boolean, event?: MouseEvent): void {
+    if (!this.clickTimer && (!event || event.button === 0)) {
       this.lastGoBack = goBack;
 
       this.clickTimer = timer(CLICK_REPEAT_DELAY, CLICK_REPEAT_RATE).subscribe(() => {

src/app/widgets/ks-calendar/ks-calendar.component.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright © 2017 Kerry Shetline, kerry@shetline.com
+  Copyright © 2017-2019 Kerry Shetline, kerry@shetline.com
 
   MIT license: https://opensource.org/licenses/MIT
 
@@ -230,7 +230,7 @@ export class KsCalendarComponent implements ControlValueAccessor, OnDestroy {
   }
 
   onMouseDown(event: MouseEvent, delta: number): void {
-    if (!this.timerSubscription) {
+    if (!this.timerSubscription && (!event || event.button === 0)) {
       this.pendingEvent = event;
       this.pendingDelta = delta;
 

src/app/widgets/ks-sequence-editor/ks-sequence-editor.component.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright © 2017-2018 Kerry Shetline, kerry@shetline.com
+  Copyright © 2017-2019 Kerry Shetline, kerry@shetline.com
 
   MIT license: https://opensource.org/licenses/MIT
 
@@ -447,7 +447,7 @@ export class KsSequenceEditorComponent implements AfterViewInit, OnInit, OnDestr
   }
 
   onMouseDown(event: MouseEvent): void {
-    if (this.disabled || this.viewOnly)
+    if (this.disabled || this.viewOnly || event.button !== 0)
       return;
 
     this.startSelectionAction(this.getSelectionForEvent(event));

src/styles.scss

@@ -71,3 +71,7 @@ body {
 .ui-chkbox, .ui-radiobutton { // Prevent checkbox/radio button layout from changing as buttons are checked/unchecked.
   min-height: 14px;
 }
+
+button.ui-button-icon-only {
+  min-width: 2em;
+}