From 0b5ded71d1fdd2209d1fc524f35c71bedd913aa5 Mon Sep 17 00:00:00 2001
From: Andre Hanke <andre.holger.hanke@mni.thm.de>
Date: Wed, 17 Jun 2020 14:29:58 +0200
Subject: [PATCH] allow keyboard navigation in themepicker
---
.../shared/footer/footer.component.html | 15 +++++----------
.../shared/footer/footer.component.scss | 3 +--
2 files changed, 6 insertions(+), 12 deletions(-)
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index a78872ae9..b0e049f93 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -49,19 +49,14 @@
</span>
</button>
- <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
- <button
- *ngFor="let theme of themes"
- (click)="changeTheme(theme);"
- matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
- title="{{theme.toString(getLanguage())}}"
- aria-label="test">
+ <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false" cdkTrapFocus>
+ <button *ngFor="let theme of themes" mat-menu-item style="height:50px;" (click)="changeTheme(theme)">
<div class="btnContent">
<div class="btnColorIcon" [ngStyle]="{
- 'background-color':theme.getPreviewColor()}">
+'background-color':theme.getPreviewColor()}">
<div class="checked" [ngClass]="{
- 'checked_true':theme.key===themeClass,
- 'checked_false':theme.key!==themeClass}">
+'checked_true':theme.key===themeClass,
+'checked_false':theme.key!==themeClass}">
<mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
checked
</mat-icon>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index 05b8d234b..b6d171f09 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -167,8 +167,7 @@ mat-icon {
width:calc( 100% - 50px );
float:right;
position:relative;
- top:50%;
- transform:translateY(-50%);
+ top:-10px;
}
.btnContent>.btnAppend>.title{
--
GitLab