From 138dac42944228d269d0226e1094b513ba30bb73 Mon Sep 17 00:00:00 2001
From: Lukas Phillip Haase <lukas.haase@mni.thm.de>
Date: Tue, 17 Sep 2019 17:51:33 +0200
Subject: [PATCH] Refactor placeholder for textarea in room-edit component and
fix indentation of create-comment component
---
src/app/app.component.html | 27 ++--
src/app/app.component.scss | 7 +-
.../shared/footer/footer.component.ts | 7 +
.../shared/header/header.component.html | 2 +-
src/app/models/rescale.ts | 137 ++++++++++++++++--
src/assets/i18n/home/en.json | 5 +-
src/theme/theme.service.ts | 7 +
7 files changed, 158 insertions(+), 34 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 11e0c3cda..b2c03e284 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,9 @@
+<script src="models/rescale.ts"></script>
<div fxLayout="column" fxFill appTheme>
+ <header class="header" id="header_rescale">
+ <app-header #header></app-header>
+ </header>
<div id="rescale_screen">
- <header class="header" id="header_rescale">
- <app-header #header></app-header>
- </header>
<div class="main_container">
<div class="inner_main_container">
<main fxFlex class="app-component">
@@ -10,22 +11,22 @@
</main>
</div>
</div>
- <footer role="contentinfo" class="footer" id="footer_rescale">
- <app-footer></app-footer>
- </footer>
</div>
- <div class="rescale_overlay" id="overlay_rescale" aria-hidden="true;">
- <button mat-icon-button (click)="getRescale().deactivateScale()">
- <mat-icon>arrow_back</mat-icon>
+ <footer role="contentinfo" class="footer" id="footer_rescale">
+ <app-footer></app-footer>
+ </footer>
+ <div class="rescale_overlay" id="overlay_rescale" aria-hidden="true">
+ <button mat-icon-button (click)="getRescale().toggleState()" title="toggle">
+ <mat-icon>{{getRescale().getState()==1?'fullscreen':'fullscreen_exit'}}</mat-icon>
</button>
- <button mat-icon-button (click)="getRescale().scaleUp()">
+ <button mat-icon-button (click)="getRescale().scaleUp()" title="Zoom +">
<mat-icon>zoom_in</mat-icon>
</button>
- <button mat-icon-button (click)="getRescale().scaleDown()">
+ <button mat-icon-button (click)="getRescale().scaleDown()" title="Zoom -">
<mat-icon>zoom_out</mat-icon>
</button>
- <button mat-icon-button (click)="getRescale().scaleUndo()">
- <mat-icon>undo</mat-icon>
+ <button mat-icon-button (click)="getRescale().scaleUndo()" title="Reset Zoom">
+ <mat-icon>refresh</mat-icon>
</button>
</div>
</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index dd9d8b1fd..0825e8bbc 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -34,6 +34,7 @@ main {
left:0;
top:0;
z-index:2;
+ transition:all 0.2s ease-in-out;
}
.footer{
@@ -42,19 +43,21 @@ main {
left:0;
bottom:0;
z-index:2;
+ transition:all 0.2s ease-in-out;
}
.rescale_overlay{
width:190px;
height:50px;
- border-radius:25px;
+ border-radius:0px 25px 25px 0px;
background-color:var(--surface);
position:fixed;
- left:15px;
+ left:-100px;
top:15px;
z-index:2;
display:none;
box-shadow:0px 2px 4px rgba(0,0,0,0.5);
+ transition:all 0.2s ease-in-out;
}
.rescale_overlay>button{
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 744a662c8..276cdcfd4 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -50,6 +50,7 @@ export class FooterComponent implements OnInit {
ngOnInit() {
if (!this.themeService.getTheme()['source']['_value']) {
this.themeService.activate('dark');
+ this.themeClass = 'dark';
}
this.deviceType = localStorage.getItem('deviceType');
this.translateService.use(localStorage.getItem('currentLang'));
@@ -57,6 +58,7 @@ export class FooterComponent implements OnInit {
this.open = message;
});
this.themes = this.themeService.getThemes();
+ this.updateScale(this.themeService.getThemeByKey(this.themeClass));
this.cookieAccepted = localStorage.getItem('cookieAccepted') === 'true';
if (!localStorage.getItem('cookieAccepted')) {
@@ -132,7 +134,12 @@ export class FooterComponent implements OnInit {
changeTheme(theme: Theme) {
this.themeClass = theme.key;
this.themeService.activate(theme.key);
+ this.updateScale(theme);
+ }
+
+ updateScale(theme: Theme) {
AppComponent.rescale.setInitialScale(theme.scale);
+ AppComponent.rescale.setDefaultScale(theme.scale);
}
getLanguage(): string {
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index fca0eb5e4..ed93cf1f1 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -5,7 +5,7 @@
<mat-icon class="header-icons">arrow_back</mat-icon>
</button>
<button mat-icon-button aria-hidden="true">
- <mat-icon class="header-icons" (click)="getRescale().activeScale();">format_size</mat-icon>
+ <mat-icon class="header-icons" (click)="getRescale().toggleState();">format_size</mat-icon>
</button>
<span class="fill-remaining-space"></span>
diff --git a/src/app/models/rescale.ts b/src/app/models/rescale.ts
index 92e72538a..2f91cf902 100644
--- a/src/app/models/rescale.ts
+++ b/src/app/models/rescale.ts
@@ -1,9 +1,20 @@
+import { KeyboardUtils } from '../utils/keyboard';
+import { KeyboardKey } from '../utils/keyboard/keys';
export class Rescale {
public scale = 1;
public cachedScale = 1;
private f;
+ public defaultScale = 1;
+
+ private state = 0;
+
+ public setDefaultScale(defaultScale: number) {
+ this.scale = defaultScale;
+ this.defaultScale = defaultScale;
+ this.scaleUpdate();
+ }
public scaleUp() {
this.setScale(this.scale + 0.1);
@@ -14,7 +25,7 @@ export class Rescale {
}
public scaleUndo() {
- this.setScale(1);
+ this.setScale(this.defaultScale);
}
public setScale(scale: number) {
@@ -35,27 +46,121 @@ export class Rescale {
document.getElementById('rescale_screen').style.zoom = this.scale + '';
}
- public activeScale() {
- window.addEventListener('keydown', this.f = e => {
- if (e.key === 'Escape') {
- this.deactivateScale();
- }
- });
- this.setScale(this.cachedScale);
- this.setStateScale(true);
+ public toggleState() {
+ this.state++;
+ if (this.state >= 3) {
+ this.state = 0;
+ }
+ this.updateState();
+ }
+
+ public toggleBetweenRescale() {
+ if (this.state === 1) {
+ this.activateFull();
+ } else if (this.state === 2) {
+ this.activate();
+ }
}
- public deactivateScale() {
+ public getState(): number {
+ return this.state;
+ }
+
+ private updateState() {
+ switch (this.state) {
+ case 0:
+ this.reset();
+ break;
+ case 1:
+ this.activate();
+ break;
+ case 2:
+ this.activateFull();
+ break;
+ default: break;
+ }
+ }
+
+ public reset() {
window.removeEventListener('keydown', this.f);
+ this.f = null;
this.cachedScale = this.scale;
- this.scaleUndo();
- this.setStateScale(false);
+ this.scaleUpdate();
+ this.toggleHeader(true);
+ this.toggleFooter(true);
+ this.toggleRescaler(false);
+ this.state = 0;
+ }
+
+ public activate() {
+ this.createKeyListener();
+ this.setScale(this.cachedScale);
+ this.toggleHeader(true);
+ this.toggleFooter(true);
+ this.setOffsetRescaler(0, 75);
+ this.toggleRescaler(true);
+ this.state = 1;
+ }
+
+ public activateFull() {
+ this.createKeyListener();
+ this.toggleHeader(false);
+ this.toggleFooter(false);
+ this.setOffsetRescaler(0, 15);
+ this.toggleRescaler(true);
+ this.state = 2;
+ }
+
+ private createKeyListener() {
+ if (!this.f) {
+ window.addEventListener('keydown', this.f = e => {
+ if (KeyboardUtils.isKeyEvent(e, KeyboardKey.Escape)) {
+ this.state--;
+ this.updateState();
+ }
+ });
+ }
+ }
+
+ private toggleHeader(b: boolean) {
+ if (b) {
+ this.getElem('header_rescale').style.display = 'block';
+ setTimeout(() => {
+ this.getElem('header_rescale').style.top = '0px';
+ }, 1);
+ } else {
+ this.getElem('header_rescale').style.top = '-60px';
+ setTimeout(() => {
+ this.getElem('header_rescale').style.display = 'none';
+ }, 200);
+ }
+ }
+
+ private toggleFooter(b: boolean) {
+ if (b) {
+ this.getElem('footer_rescale').style.display = 'block';
+ setTimeout(() => {
+ this.getElem('footer_rescale').style.bottom = '0px';
+ }, 1);
+ } else {
+ this.getElem('footer_rescale').style.bottom = '-60px';
+ setTimeout(() => {
+ this.getElem('footer_rescale').style.display = 'none';
+ }, 200);
+ }
+ }
+
+ private getElem(name: string): HTMLElement {
+ return document.getElementById(name);
+ }
+
+ private toggleRescaler(b: boolean) {
+ this.getElem('overlay_rescale').style.display = (b ? 'block' : 'none');
}
- private setStateScale(b: boolean) {
- document.getElementById('header_rescale').style.display = (b ? 'none' : 'block');
- document.getElementById('footer_rescale').style.display = (b ? 'none' : 'block');
- document.getElementById('overlay_rescale').style.display = (b ? 'block' : 'none');
+ private setOffsetRescaler(x: number, y: number) {
+ document.getElementById('overlay_rescale').style.left = x + 'px';
+ document.getElementById('overlay_rescale').style.top = y + 'px';
}
}
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index ffcc1934a..9857c0246 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -77,11 +77,12 @@
"home-page": {
"accessibility-create": "Create a new session",
"accessibility-join-button": "Enter the session with the specified session key.",
- "accessibility-join-input": "Here you can enter the session ID of the room you want to join. Your lecturer will tell you the session ID.",
+ "accessibility-join-input": "Here you can enter the session key of the session you want to join.",
"create-session": "New session",
"created-1": "Session '",
"created-2": "' successfully created",
- "exactly-8": "A session ID has exactly 8 digits.",
+ "exactly-8": "A session key has exactly 8 digits.",
+ "accessibility-join-input": "Here you can enter the key of the session you want to join. Your lecturer will tell you the session key.",
"live-announcer": "Welcome to fragpunktjetzt. To get information about key combinations press the Enter key or call the announcement later with the Escape key.",
"live-announcer-user": "You are now on the user page. To get information about key combinations press the Enter key or call the announcement later with the Escape key.",
"install": "Install",
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index 9393193ff..697d7de66 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -38,4 +38,11 @@ export class ThemeService {
public getThemes(): Theme[] {
return this.themes;
}
+
+ public getThemeByKey(key: string): Theme {
+ for (let i = 0; i < this.themes.length; i++) {
+ if (this.themes[i].key === key) {return this.themes[i]; }
+ }
+ return null;
+ }
}
--
GitLab