From 3c0ae65d2f4d1939988bea059dcb318ab5ad1831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Mon, 27 Jan 2020 16:16:26 +0100
Subject: [PATCH] Give token columns alternating background colors
---
.../_dialogs/bonus-token/bonus-token.component.html | 4 +---
.../_dialogs/bonus-token/bonus-token.component.scss | 8 +++++++-
src/theme/dark-theme/darkTheme.const.ts | 1 +
src/theme/high-contrast-theme/highContrastTheme.const.ts | 1 +
src/theme/light-theme/light-theme.ts | 1 +
src/theme/purple-theme/purpleTheme.const.ts | 1 +
6 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
index 3bf0b8605..2885e815a 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
+++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
@@ -1,11 +1,9 @@
<div mat-dialog-content xmlns="http://www.w3.org/1999/html">
- <!--token for bonuspoints-->
<h2 class="oldtypo-h2">{{'room-page.bonus-token-header' | translate }}</h2>
- <!--no bonuspoints-->
<h3 class="oldtypo-h3">{{room.name}} - {{room.shortId.slice(0, 4)}} {{room.shortId.slice(4, 8)}}</h3>
<mat-divider></mat-divider>
<div *ngIf="bonusTokens.length >= 1">
- <div fxLayout="row" *ngFor="let bonusToken of bonusTokens; index as i">
+ <div fxLayout="row" *ngFor="let bonusToken of bonusTokens; index as i" class="token">
<p tabindex="0">
{{bonusToken.token}}
</p>
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss
index 2018f95ee..1e2091da9 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss
+++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.scss
@@ -4,7 +4,6 @@ p {
}
.mat-icon-button {
- margin-top: 5px;
color: var(--red);
}
@@ -14,3 +13,10 @@ p {
background-color: var(--red);
color: var(--on-secondary);
}
+
+.token {
+ padding-left: 3%;
+ &:nth-child(even) {
+ background-color: var(--alt-dialog);
+ }
+}
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index 130616013..a31c9635c 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -10,6 +10,7 @@ export const dark = {
'--surface': '#212121',
'--dialog': '#37474f',
'--cancel': '#26343c',
+ '--alt-dialog': '#455a64',
'--on-primary': '#000000',
'--on-secondary': '#000000',
diff --git a/src/theme/high-contrast-theme/highContrastTheme.const.ts b/src/theme/high-contrast-theme/highContrastTheme.const.ts
index 6725550d1..25307d294 100644
--- a/src/theme/high-contrast-theme/highContrastTheme.const.ts
+++ b/src/theme/high-contrast-theme/highContrastTheme.const.ts
@@ -9,6 +9,7 @@ export const highcontrast = {
'--background': '#141414',
'--surface': '#1e1e1e',
'--dialog': '#37474f',
+ '--alt-dialog': '#455a64',
'--on-primary': '#141414',
'--on-secondary': '#141414',
diff --git a/src/theme/light-theme/light-theme.ts b/src/theme/light-theme/light-theme.ts
index 147d6b82a..e6879ae1f 100644
--- a/src/theme/light-theme/light-theme.ts
+++ b/src/theme/light-theme/light-theme.ts
@@ -10,6 +10,7 @@ export const arsnova = {
'--surface': '#FFFFFF',
'--dialog': '#FFFFFF',
'--cancel': '#263238',
+ '--alt-dialog': '#eeeeee',
'--on-primary': '#ffffff',
'--on-secondary': '#FFFFFF',
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index 2c0ce318a..287320618 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -9,6 +9,7 @@ export const purple = {
'--background': 'beige',
'--surface': 'white',
'--dialog': 'white',
+ '--alt-dialog': '#eeeeee',
'--on-primary': 'white',
'--on-secondary': 'white',
--
GitLab