Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Fullscreen keyboard shortcut

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-27 23:56:07 +02:00
parent 81f540f883
commit 5682e0a331
8 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -30,8 +30,10 @@ export class IconsModule {
'edit',
'entries',
'error',
'exit-fullscreen',
'expand',
'folder',
'fullscreen',
'info',
'lightning',
'logout',

42
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -68,8 +68,8 @@
<redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
<redaction-circle-button
(action)="fullScreenService.toggleFullScreen()"
icon="red:plus"
tooltip="common.fullscreen"
icon="red:fullscreen"
tooltip="file-preview.fullscreen"
tooltipPosition="before"
></redaction-circle-button>
<redaction-circle-button
@ -97,26 +97,28 @@
<div class="right-fixed-container">
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<redaction-circle-button
*ngIf="fullScreenService.fullScreen"
(action)="fullScreenService.toggleFullScreen()"
icon="red:plus"
tooltip="common.fullscreen"
tooltipPosition="before"
></redaction-circle-button>
<redaction-filter
(filtersChanged)="filtersChanged($event)"
[chevron]="true"
[filterTemplate]="annotationFilterTemplate"
[filters]="annotationFilters"
></redaction-filter>
</div>
<div>
<redaction-filter
(filtersChanged)="filtersChanged($event)"
[chevron]="true"
[filterTemplate]="annotationFilterTemplate"
[filters]="annotationFilters"
></redaction-filter>
<redaction-circle-button
*ngIf="fullScreenService.fullScreen"
(action)="fullScreenService.toggleFullScreen()"
icon="red:exit-fullscreen"
tooltip="file-preview.exit-fullscreen"
tooltipPosition="before"
></redaction-circle-button>
</div>
</div>
<div class="right-content">
<div
#quickNavigation
(keydown)="preventArrowDefault($event)"
(keyup)="preventArrowDefault($event)"
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="pagesPanelActive"
class="pages"
tabindex="0"
@ -133,8 +135,8 @@
<div
#annotationsElement
(keydown)="preventArrowDefault($event)"
(keyup)="preventArrowDefault($event)"
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="!pagesPanelActive"
class="annotations"
tabindex="1"

12
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -55,6 +55,14 @@ redaction-pdf-viewer {
width: 14px;
cursor: pointer;
}
> div {
display: flex;
redaction-circle-button {
margin-left: 2px;
}
}
}
.right-content {
@ -139,10 +147,6 @@ redaction-pdf-viewer {
margin-left: 8px;
}
.mr-8 {
margin-right: 8px;
}
.mr-16 {
margin-right: 16px;
}

9
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -27,7 +27,7 @@ import { processFilters } from '../../../common/filter/utils/filter-utils';
import { UserPreferenceService } from '../../../common/service/user-preference.service';
import { FullScreenService } from '../../../utils/full-screen.service';
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F'];
@Component({
selector: 'redaction-file-preview-screen',
@ -259,6 +259,11 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
return;
}
if (['f', 'F'].includes($event.key)) {
this.fullScreenService.toggleFullScreen();
return;
}
if ($event.key === 'ArrowLeft') {
this.pagesPanelActive = true;
}
@ -413,7 +418,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
this._changeDetectorRef.markForCheck();
}
preventArrowDefault($event: KeyboardEvent) {
preventKeyDefault($event: KeyboardEvent) {
if (KEY_ARRAY.includes($event.key)) {
$event.preventDefault();
}

1
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -12,7 +12,6 @@ import { FileStatusWrapper } from '../model/file-status.wrapper';
import { KeycloakService } from 'keycloak-angular';
import { environment } from '../../../../environments/environment';
import { AnnotationDrawService } from '../service/annotation-draw.service';
import { keypress } from '../../../utils/functions';
export interface ViewerState {
displayMode?: any;

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -251,7 +251,9 @@
"unassigned": "Unassigned",
"assign-reviewer": "Assign Reviewer",
"assign-me": "Assign to me",
"last-reviewer": "Last Reviewed by:"
"last-reviewer": "Last Reviewed by:",
"fullscreen": "Full Screen (F)",
"exit-fullscreen": "Exit Full Screen (F)"
},
"annotation-actions": {
"message": {

1
apps/red-ui/src/assets/icons/general/exit-fullscreen.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 215 B

1
apps/red-ui/src/assets/icons/general/fullscreen.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 216 B