Prevent motion-detail jumps

- Fixes an error where the extension label could open automatically due to state changes by others.
- Changes the quick-navigation div to a host-listener
- Changes the quick-navigation keys to meta+alt+arrow to shift+alt+arrow, since Firefox does not recognize meta
- Removed the ID from all os-sort-lists and moves it into the extra controls of category-motion-sort-list

client/src/app/shared/components/extension-field/extension-field.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Router, NavigationEnd } from '@angular/router';
@@ -8,7 +8,7 @@ import { Router, NavigationEnd } from '@angular/router';
     templateUrl: './extension-field.component.html',
     styleUrls: ['./extension-field.component.scss']
 })
-export class ExtensionFieldComponent implements OnInit, OnDestroy, AfterViewInit {
+export class ExtensionFieldComponent implements OnInit, OnDestroy {
     /**
      * Optional additional classes for the `mat-chip`.
      */
@@ -27,33 +27,11 @@ export class ExtensionFieldComponent implements OnInit, OnDestroy, AfterViewInit
     @Input()
     public chipValue: string;
 
-    /**
-     * Allow automatically jump into autoEdit
-     */
-    private allowAutoEdit = false;
-
     /**
      * Boolean, whether the extension should be shown.
      */
-    private _hasExtension = false;
-
-    /**
-     * Setter for the extension condition
-     */
-    @Input() public set hasExtension(extension: boolean) {
-        this._hasExtension = extension;
-
-        if (this.hasExtension && this.allowAutoEdit) {
-            this.editMode = true;
-        }
-    }
-
-    /**
-     * Getter for the extension condition
-     */
-    public get hasExtension(): boolean {
-        return this._hasExtension;
-    }
+    @Input()
+    public hasExtension = false;
 
     /**
      * Optional label for the input.
@@ -193,13 +171,6 @@ export class ExtensionFieldComponent implements OnInit, OnDestroy, AfterViewInit
         }
     }
 
-    /**
-     * After view inits, allow to automatically open the edit view
-     */
-    public ngAfterViewInit(): void {
-        this.allowAutoEdit = true;
-    }
-
     /**
      * On destroy unsubscribe from the subscriptions
      */

client/src/app/shared/components/sorting-list/sorting-list.component.html

@@ -19,9 +19,6 @@
         </div>
         <div class="section-three">
             <!-- Extra controls slot using implicit template references -->
-            <mat-basic-chip class="bluegrey" disableRipple matTooltip="{{ 'Sequential number' | translate }}">
-                {{ item.id }}
-            </mat-basic-chip>
             <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
         </div>
         <div class="line" *cdkDragPreview>

client/src/app/site/motions/modules/category/components/category-motions-sort/category-motions-sort.component.html

@@ -1,8 +1,4 @@
-<os-head-bar
-    [editMode]="hasChanged"
-    (saveEvent)="sendUpdate()"
-    (mainEvent)="onCancel()"
-    [nav]="false">
+<os-head-bar [editMode]="hasChanged" (saveEvent)="sendUpdate()" (mainEvent)="onCancel()" [nav]="false">
     <!-- Title -->
     <div class="title-slot">
         <h2 *ngIf="category">{{ 'Sort motions' | translate }} ({{ category.prefixedName }})</h2>
@@ -13,12 +9,13 @@
     <div *ngIf="isMultiSelect">
         <span>{{ sortSelector.multiSelectedIndex.length }}&nbsp;</span>
         <span translate>selected</span>
-        <button mat-button (click)="moveToPosition()"><span translate>move ...</span>
-        </button>
+        <button mat-button (click)="moveToPosition()"><span translate>move ...</span></button>
     </div>
-    <os-sorting-list
-        (sortEvent)="onListUpdate($event)"
-        [input]="motionObservable"
-        #sorter
-    ></os-sorting-list>
+    <os-sorting-list (sortEvent)="onListUpdate($event)" [input]="motionObservable" #sorter>
+        <ng-template let-motion>
+            <mat-basic-chip class="bluegrey" disableRipple matTooltip="{{ 'Sequential number' | translate }}">
+                {{ motion.id }}
+            </mat-basic-chip>
+        </ng-template>
+    </os-sorting-list>
 </mat-card>

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -1,4 +1,3 @@
-<div (window:keydown)="onKeyNavigation($event)"></div>
 <os-head-bar
     [mainButton]="perms.isAllowed('update', motion)"
     mainButtonIcon="edit"

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts

@@ -746,15 +746,15 @@ export class MotionDetailComponent extends BaseViewComponent implements OnInit,
     }
 
     /**
-     * Using Meta, Alt + the arrow keys will navigate between the motions
+     * Using Shift, Alt + the arrow keys will navigate between the motions
      *
      * @param event has the key code
      */
-    public onKeyNavigation(event: KeyboardEvent): void {
-        if (event.key === 'ArrowLeft' && event.altKey && event.metaKey) {
+    @HostListener('document:keydown', ['$event']) public onKeyNavigation(event: KeyboardEvent): void {
+        if (event.key === 'ArrowLeft' && event.altKey && event.shiftKey) {
             this.navigateToMotion(this.previousMotion);
         }
-        if (event.key === 'ArrowRight' && event.altKey && event.metaKey) {
+        if (event.key === 'ArrowRight' && event.altKey && event.shiftKey) {
             this.navigateToMotion(this.nextMotion);
         }
     }