From b00db0e9e4da156220e3d19b1a1a9be3f99b322a Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Fri, 13 Sep 2019 13:12:05 +0200
Subject: [PATCH] Remove Console, Multiple Languages, Useful Descriptions
---
.../shared/footer/footer.component.html | 18 +++--
.../shared/footer/footer.component.scss | 50 ++++++++------
.../shared/footer/footer.component.ts | 8 ++-
.../shared/header/header.component.html | 2 +-
src/theme/Theme.ts | 68 +++++++++++++++++--
src/theme/blue-theme/blueTheme.const.ts | 12 +++-
src/theme/dark-theme/darkTheme.const.ts | 12 +++-
src/theme/default-theme/defaultTheme.const.ts | 12 +++-
.../highContrastTheme.const.ts | 12 +++-
src/theme/purple-theme/purpleTheme.const.ts | 12 +++-
src/theme/theme.service.ts | 8 +--
11 files changed, 160 insertions(+), 54 deletions(-)
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 857d8f609..f30c3b5ee 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -48,21 +48,27 @@
<div id="themeMenu">
<div class="scrollWrp">
- <button *ngFor="let theme of themes" (click)="changeTheme(theme)" matRipple [matRippleColor]="'rgba(0,0,0,0.1)'">
+ <button
+ *ngFor="let theme of themes"
+ (click)="changeTheme(theme);"
+ matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
+ title="{{theme.toString()}}"
+ aria-label="test">
<div class="btnContent">
- <div class="btnColorIcon" [ngStyle]="{'background-color':theme.previewColor}">
- <div class="checked" [ngClass]="{'checked_true':theme.key===themeClass,'checked_false':theme.key!==themeClass}">
- <mat-icon>
+ <div class="btnColorIcon" [ngStyle]="{'background-color':theme.getPreviewColor()}">
+ <div class="checked"
+ [ngClass]="{'checked_true':theme.key===themeClass,'checked_false':theme.key!==themeClass}">
+ <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
checked
</mat-icon>
</div>
</div>
<div class="btnAppend">
<div class="title">
- <p class="title_bold">{{theme.name}}</p>
+ <p class="title_bold">{{theme.getName(getLanguage())}}</p>
</div>
<div class="title">
- <p>{{theme.description}}</p>
+ <p>{{theme.getDescription(getLanguage())}}</p>
</div>
</div>
</div>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index b6fd5bbde..e47c98747 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -56,8 +56,24 @@ mat-icon {
line-height: 100%!important;
}
+::ng-deep .color-menu {
+ padding: 0 8px 0 8px;
+}
+
+.check {
+ font-size: 25px;
+ height: 25px;
+ width: 25px;
+ line-height: 100%!important;
+ position: absolute;
+ top:calc( 50% + 1px );
+ left:calc( 50% + 1px );
+ transform:translate(-50%,-50%);
+ color: white;
+}
+
#themeMenu{
- width:250px;
+ width:100%;
height:215px;
margin-bottom:8px;
float:left;
@@ -96,10 +112,6 @@ mat-icon {
border-radius:2px;
}
-.btnContent:hover{
- background-color:rgba(0,0,0,0.05);
-}
-
.btnContent>.btnColorIcon{
width:40px;
height:40px;
@@ -121,13 +133,21 @@ mat-icon {
.checked.checked_true{
transform:scale(1);
opacity:1;
+ background-color:transparent;
}
.checked.checked_false{
- transform:scale(0.2);
+ opacity:1;
+}
+
+.checked.checked_false>mat-icon{
opacity:0;
}
+.checked.checked_true>mat-icon{
+ opacity:1;
+}
+
.checked>mat-icon{
float:left;
position:relative;
@@ -135,6 +155,8 @@ mat-icon {
top:50%;
transform:translate(-50%,-50%);
color:#FFFFFF;
+ border-radius:100%;
+ transition:all 0.1s;
}
.btnContent>.btnAppend{
@@ -173,19 +195,3 @@ mat-icon {
color:rgba(0,0,0,0.9);
font-weight:500;
}
-
-::ng-deep .color-menu {
- padding: 0 8px 0 8px;
-}
-
-.check {
- font-size: 25px;
- height: 25px;
- width: 25px;
- line-height: 100%!important;
- position: absolute;
- top:calc( 50% + 1px );
- left:calc( 50% + 1px );
- transform:translate(-50%,-50%);
- color: white;
-}
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 5bb17c796..9864c3612 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -136,7 +136,11 @@ export class FooterComponent implements OnInit {
}
changeTheme(theme: Theme) {
- this.themeClass = theme.name;
- this.themeService.activate(theme.name);
+ this.themeClass = theme.key;
+ this.themeService.activate(theme.key);
+ }
+
+ getLanguage():string{
+ return localStorage.getItem('currentLang');
}
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 420bb08bc..e5f17e632 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -4,7 +4,7 @@
matTooltip="{{'header.back' | translate}}">
<mat-icon class="header-icons">arrow_back</mat-icon>
</button>
- <button mat-icon-button>
+ <button mat-icon-button aria-hidden="true">
<mat-icon class="header-icons" (click)="getRescale().activeScale();">fullscreen</mat-icon>
</button>
diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts
index a931bbb79..c2e4925bf 100644
--- a/src/theme/Theme.ts
+++ b/src/theme/Theme.ts
@@ -47,21 +47,30 @@ export class Theme {
*/
public main: ColorElem[];
+ public order:number;
+ public name:ThemeTranslationList;
+ public description:ThemeTranslationList;
+ public previewColor:string;
+
constructor(
public key: string,
- public name: string,
- public description: string,
- public previewColor: string,
public palette: Object,
- public order: number
+ public meta: Object
) {
-
+ this.order=meta['order'];
+ this.name=new ThemeTranslationList(
+ 'name',this.meta['translation']['name']
+ );
+ this.description=new ThemeTranslationList(
+ 'description',this.meta['translation']['description']
+ );
+ this.previewColor=this.palette['--primary'];
this.colors = [];
this.main = [];
for (const k in palette) {
if (palette.hasOwnProperty(k)) {
- if (k !== 'name' && k !== description) {
+ if (k !== 'name') {
this.colors.push(new ColorElem(
k.slice(2, k.length),
k,
@@ -79,7 +88,6 @@ export class Theme {
Theme.variantColors.forEach(e => {
this.get(e).variant = this.get(e + '-variant');
});
-
}
public get(name: string): ColorElem {
@@ -89,10 +97,56 @@ export class Theme {
return null;
}
+ public getName(language:string):string{
+ return this.name.get(language);
+ }
+
+ 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 getSecondaryColor():string{
+ return this.get('secondary').color;
+ }
+
public toString(): string {
return this.name + ' - ' + this.description;
}
+}
+export class ThemeTranslationList{
+ map:string[][]=[];
+
+ constructor(private name,translation:Object){
+ for(let 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];
+ }
+ 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 4517335c8..977d05632 100644
--- a/src/theme/blue-theme/blueTheme.const.ts
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -30,8 +30,16 @@ export const blue = {
export const blue_meta = {
- 'name': 'NAME',
- 'description': 'DESCRIPTION',
+ 'translation':{
+ 'name':{
+ 'en':'ENGLISH_NAME',
+ 'de':'GERMAN_NAME'
+ },
+ 'description':{
+ 'en':'ENGLISH_DESCRIPTION',
+ 'de':'GERMAN_DESCRIPTION'
+ }
+ },
'order': 4
};
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index 61844e517..2f67c748d 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -30,8 +30,16 @@ export const dark = {
export const dark_meta = {
- 'name': 'Dark ARSnova',
- 'description': 'Dark Default Theme',
+ 'translation':{
+ 'name':{
+ 'en':'Dark',
+ 'de':'Dunkel'
+ },
+ 'description':{
+ 'en':'Battery Friendly',
+ 'de':'Akkufreundliche Darstellung'
+ }
+ },
'order': 3
};
diff --git a/src/theme/default-theme/defaultTheme.const.ts b/src/theme/default-theme/defaultTheme.const.ts
index fcbea2708..ff37a5651 100644
--- a/src/theme/default-theme/defaultTheme.const.ts
+++ b/src/theme/default-theme/defaultTheme.const.ts
@@ -30,8 +30,16 @@ export const arsnova = {
export const arsnova_meta = {
- 'name': 'Light ARSnova',
- 'description': 'Bright Theme',
+ 'translation':{
+ 'name':{
+ 'en':'Bright',
+ 'de':'Hell'
+ },
+ 'description':{
+ 'en':'Bright Theme',
+ 'de':'Helle Darstellung'
+ }
+ },
'order': 2
};
diff --git a/src/theme/high-contrast-theme/highContrastTheme.const.ts b/src/theme/high-contrast-theme/highContrastTheme.const.ts
index 280eec1de..56960947a 100644
--- a/src/theme/high-contrast-theme/highContrastTheme.const.ts
+++ b/src/theme/high-contrast-theme/highContrastTheme.const.ts
@@ -29,8 +29,16 @@ export const highcontrast = {
export const highcontrast_meta = {
- 'name': 'High Contrast',
- 'description': 'Dark High Contrast Theme',
+ 'translation':{
+ 'name':{
+ 'en':'High Contrast',
+ 'de':'Kontrastreich'
+ },
+ 'description':{
+ 'en':'Visibility optimized',
+ 'de':'Kontrastreiche Darstellung'
+ }
+ },
'order': 0
};
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index a3b4f17e2..99bb27dc9 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -29,8 +29,16 @@ export const purple = {
export const purple_meta = {
- 'name': 'Projector',
- 'description': 'Projector Friendly Theme',
+ 'translation':{
+ 'name':{
+ 'en':'Projector',
+ 'de':'Beamer'
+ },
+ 'description':{
+ 'en':'Projector optimized',
+ 'de':'Beamer optimierte Darstellung'
+ }
+ },
'order': 1
};
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index 7195401b0..9393193ff 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { themes, themes_meta } from './arsnova-theme.const';
-import { Theme } from './Theme';
+import { Theme, ThemeTranslationList } from './Theme';
@Injectable({
providedIn: 'root'
@@ -16,18 +16,14 @@ export class ThemeService {
for (const k in themes) {
this.themes.push(new Theme(
k,
- themes_meta[k]['name'],
- themes_meta[k]['description'],
- themes[k]['--primary'],
themes[k],
- themes_meta[k]['order'])
+ themes_meta[k])
);
}
this.themes.sort((a, b) => {
if (a.order < b.order) {return -1; } else if (a.order > b.order) {return 1; }
return 0;
});
- console.log(this.themes);
}
public getTheme() {
--
GitLab