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
This commit is contained in:
Sean Engelhardt 2019-07-10 19:22:32 +02:00
parent 6e8aa75162
commit e5621ad1ab
5 changed files with 17 additions and 53 deletions

View File

@ -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
*/

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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);
}
}