From 36dc6b3bc0f5439146211e13d82b83c4c32ea0f1 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Fri, 13 Sep 2019 13:33:39 +0200
Subject: [PATCH] Select Preview Color in json, Initial Rescale Value in Theme
(Projector Theme to 150pct), tslint
---
.../shared/footer/footer.component.ts | 4 +-
src/app/models/rescale.ts | 4 +
src/theme/Theme.ts | 95 +++++++++++++------
src/theme/blue-theme/blueTheme.const.ts | 18 ++--
src/theme/dark-theme/darkTheme.const.ts | 18 ++--
src/theme/default-theme/defaultTheme.const.ts | 18 ++--
.../highContrastTheme.const.ts | 18 ++--
src/theme/purple-theme/purpleTheme.const.ts | 18 ++--
8 files changed, 121 insertions(+), 72 deletions(-)
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 9864c3612..3b338606b 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -15,6 +15,7 @@ import { HelpPageComponent } from '../_dialogs/help-page/help-page.component';
import { DataProtectionComponent } from '../../home/_dialogs/data-protection/data-protection.component';
import { Theme } from '../../../../theme/Theme';
import { OverlayComponent } from '../../home/_dialogs/overlay/overlay.component';
+import { AppComponent } from '../../../app.component';
@Component({
selector: 'app-footer',
@@ -138,9 +139,10 @@ export class FooterComponent implements OnInit {
changeTheme(theme: Theme) {
this.themeClass = theme.key;
this.themeService.activate(theme.key);
+ AppComponent.rescale.setInitialScale(theme.scale);
}
- getLanguage():string{
+ getLanguage(): string {
return localStorage.getItem('currentLang');
}
}
diff --git a/src/app/models/rescale.ts b/src/app/models/rescale.ts
index 606879935..92e72538a 100644
--- a/src/app/models/rescale.ts
+++ b/src/app/models/rescale.ts
@@ -27,6 +27,10 @@ export class Rescale {
this.scaleUpdate();
}
+ public setInitialScale(scale: number) {
+ this.cachedScale = scale;
+ }
+
private scaleUpdate() {
document.getElementById('rescale_screen').style.zoom = this.scale + '';
}
diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts
index c2e4925bf..ba3ca1d84 100644
--- a/src/theme/Theme.ts
+++ b/src/theme/Theme.ts
@@ -47,27 +47,63 @@ export class Theme {
*/
public main: ColorElem[];
- public order:number;
- public name:ThemeTranslationList;
- public description:ThemeTranslationList;
- public previewColor:string;
+ /**
+ * order:
+ * used for Array.sort, for correct display of Themes
+ */
+ public order: number;
+
+ /**
+ * name:
+ * name of Theme
+ */
+ public name: ThemeTranslationList;
+
+ /**
+ * description:
+ * description of Theme
+ */
+ public description: ThemeTranslationList;
+
+ /**
+ * previewColor:
+ * used for Color-Icon in Footer
+ */
+ public previewColor: ColorElem;
+
+ /**
+ * scale:
+ * Used for Initial Rescale value,
+ * when Theme is loaded
+ */
+ public scale: number;
constructor(
public key: string,
public palette: Object,
public meta: Object
) {
- this.order=meta['order'];
- this.name=new ThemeTranslationList(
- 'name',this.meta['translation']['name']
+
+ /*Init order*/
+ this.order = meta['order'];
+
+ /*Init name*/
+ this.name = new ThemeTranslationList(
+ 'name', this.meta['translation']['name']
);
- this.description=new ThemeTranslationList(
- 'description',this.meta['translation']['description']
+
+ /*Init description*/
+ this.description = new ThemeTranslationList(
+ 'description', this.meta['translation']['description']
);
- this.previewColor=this.palette['--primary'];
+
+ /*Init scale*/
+ this.scale = this.meta['scale'];
+
+ /*Init all ColorElem*/
+
this.colors = [];
this.main = [];
-
for (const k in palette) {
if (palette.hasOwnProperty(k)) {
if (k !== 'name') {
@@ -88,6 +124,7 @@ export class Theme {
Theme.variantColors.forEach(e => {
this.get(e).variant = this.get(e + '-variant');
});
+ this.previewColor = this.get(this.meta['previewColor']);
}
public get(name: string): ColorElem {
@@ -97,24 +134,20 @@ export class Theme {
return null;
}
- public getName(language:string):string{
+ public getName(language: string): string {
return this.name.get(language);
}
- public getDescription(language:string):string{
+ public getDescription(language: string): string {
return this.description.get(language);
}
- public getPreviewColor():string{
- return this.previewColor;
- }
-
- public getOnPreviewColor():string{
- return this.get('primary').on.color;
+ public getPreviewColor(): string {
+ return this.previewColor.color;
}
- public getSecondaryColor():string{
- return this.get('secondary').color;
+ public getOnPreviewColor(): string {
+ return this.previewColor.on.color;
}
public toString(): string {
@@ -122,23 +155,23 @@ export class Theme {
}
}
-export class ThemeTranslationList{
+export class ThemeTranslationList {
- map:string[][]=[];
+ map: string[][] = [];
- constructor(private name,translation:Object){
- for(let k in translation){
- if(translation.hasOwnProperty(k)){
- this.map.push([k,translation[k]]);
+ constructor(private name, translation: Object) {
+ for (const k in translation) {
+ if (translation.hasOwnProperty(k)) {
+ this.map.push([k, translation[k]]);
}
}
}
- public get(language:string){
- for(let i=0;i<this.map.length;i++){
- if(this.map[i][0]===language)return this.map[i][1];
+ public get(language: string) {
+ for (let i = 0; i < this.map.length; i++) {
+ if (this.map[i][0] === language) {return this.map[i][1]; }
}
- console.error('ThemeTranslationList: Translation Error, Unknown Language: '+language);
+ console.error('ThemeTranslationList: Translation Error, Unknown Language: ' + language);
return 'unknown';
}
diff --git a/src/theme/blue-theme/blueTheme.const.ts b/src/theme/blue-theme/blueTheme.const.ts
index 977d05632..8c5073233 100644
--- a/src/theme/blue-theme/blueTheme.const.ts
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -30,16 +30,18 @@ export const blue = {
export const blue_meta = {
- 'translation':{
- 'name':{
- 'en':'ENGLISH_NAME',
- 'de':'GERMAN_NAME'
+ 'translation': {
+ 'name': {
+ 'en': 'ENGLISH_NAME',
+ 'de': 'GERMAN_NAME'
},
- 'description':{
- 'en':'ENGLISH_DESCRIPTION',
- 'de':'GERMAN_DESCRIPTION'
+ 'description': {
+ 'en': 'ENGLISH_DESCRIPTION',
+ 'de': 'GERMAN_DESCRIPTION'
}
},
- 'order': 4
+ 'order': 4,
+ 'scale': 1,
+ 'previewColor': 'primary'
};
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index 2f67c748d..d53cb659b 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -30,16 +30,18 @@ export const dark = {
export const dark_meta = {
- 'translation':{
- 'name':{
- 'en':'Dark',
- 'de':'Dunkel'
+ 'translation': {
+ 'name': {
+ 'en': 'Dark',
+ 'de': 'Dunkel'
},
- 'description':{
- 'en':'Battery Friendly',
- 'de':'Akkufreundliche Darstellung'
+ 'description': {
+ 'en': 'Battery Friendly',
+ 'de': 'Akkufreundliche Darstellung'
}
},
- 'order': 3
+ 'order': 3,
+ 'scale': 1,
+ 'previewColor': 'primary'
};
diff --git a/src/theme/default-theme/defaultTheme.const.ts b/src/theme/default-theme/defaultTheme.const.ts
index ff37a5651..b6841ea78 100644
--- a/src/theme/default-theme/defaultTheme.const.ts
+++ b/src/theme/default-theme/defaultTheme.const.ts
@@ -30,16 +30,18 @@ export const arsnova = {
export const arsnova_meta = {
- 'translation':{
- 'name':{
- 'en':'Bright',
- 'de':'Hell'
+ 'translation': {
+ 'name': {
+ 'en': 'Bright',
+ 'de': 'Hell'
},
- 'description':{
- 'en':'Bright Theme',
- 'de':'Helle Darstellung'
+ 'description': {
+ 'en': 'Bright Theme',
+ 'de': 'Helle Darstellung'
}
},
- 'order': 2
+ 'order': 2,
+ 'scale': 1,
+ 'previewColor': 'primary'
};
diff --git a/src/theme/high-contrast-theme/highContrastTheme.const.ts b/src/theme/high-contrast-theme/highContrastTheme.const.ts
index 56960947a..92462748b 100644
--- a/src/theme/high-contrast-theme/highContrastTheme.const.ts
+++ b/src/theme/high-contrast-theme/highContrastTheme.const.ts
@@ -29,17 +29,19 @@ export const highcontrast = {
export const highcontrast_meta = {
- 'translation':{
- 'name':{
- 'en':'High Contrast',
- 'de':'Kontrastreich'
+ 'translation': {
+ 'name': {
+ 'en': 'High Contrast',
+ 'de': 'Kontrastreich'
},
- 'description':{
- 'en':'Visibility optimized',
- 'de':'Kontrastreiche Darstellung'
+ 'description': {
+ 'en': 'Visibility optimized',
+ 'de': 'Kontrastreiche Darstellung'
}
},
- 'order': 0
+ 'order': 0,
+ 'scale': 1,
+ 'previewColor': 'primary'
};
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index 99bb27dc9..fdbd77e4a 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -29,16 +29,18 @@ export const purple = {
export const purple_meta = {
- 'translation':{
- 'name':{
- 'en':'Projector',
- 'de':'Beamer'
+ 'translation': {
+ 'name': {
+ 'en': 'Projector',
+ 'de': 'Beamer'
},
- 'description':{
- 'en':'Projector optimized',
- 'de':'Beamer optimierte Darstellung'
+ 'description': {
+ 'en': 'Projector optimized',
+ 'de': 'Beamer optimierte Darstellung'
}
},
- 'order': 1
+ 'order': 1,
+ 'scale': 1.5,
+ 'previewColor': 'primary'
};
--
GitLab