⚡ component to select theme

documentation/interfaces/DateChoice.html

@@ -213,7 +213,6 @@ export interface PollAnswer {
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
-debugger;
 
 export const basicSlicesOfDay: TimeSlices[] = [
     {literal: 'matin'},

documentation/interfaces/PollAnswer.html

@@ -341,7 +341,6 @@ export interface PollAnswer {
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
-debugger;
 
 export const basicSlicesOfDay: TimeSlices[] = [
     {literal: 'matin'},

documentation/interfaces/TimeSlices.html

@@ -149,7 +149,6 @@ export interface PollAnswer {
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
-debugger;
 
 export const basicSlicesOfDay: TimeSlices[] = [
     {literal: 'matin'},

src/app/app.component.html

@@ -1,3 +1,7 @@
+<div
+    id='big_container'
+    class={{this.config.themeClass}} >
+
     <header style="text-align:center" >
         <a
             [routerLink]="'home'"
@@ -50,6 +54,8 @@
 
     </header >
 
+    <framadate-theme-selector ></framadate-theme-selector >
+
     <main >
         <router-outlet ></router-outlet >
     </main >
@@ -59,3 +65,4 @@
         [step]="step" ></framadate-navigation >
     <p-toast position="top-right" ></p-toast >
 
+</div >

src/app/app.component.ts

@@ -24,7 +24,7 @@ export class AppComponent {
     step: string;
 
     constructor(private translate: TranslateService,
-                private config : ConfigService,
+                public config: ConfigService,
                 @Inject(DOCUMENT) private document,
                 private route: Router) {
         this.translate.setDefaultLang(this.currentLang);

src/app/app.module.ts

@@ -57,6 +57,7 @@ import {CopyTextComponent} from './ui/copy-text/copy-text.component';
 import {CommentsListComponent} from './pages/voting/comments-list/comments-list.component';
 import {ChoicesListComponent} from './pages/voting/choices-list/choices-list.component';
 import {VotingNavigationComponent} from './pages/voting/voting-navigation/voting-navigation.component';
+import { ThemeSelectorComponent } from './ui/theme-selector/theme-selector.component';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -103,6 +104,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         CommentsListComponent,
         ChoicesListComponent,
         VotingNavigationComponent,
+        ThemeSelectorComponent,
 
     ],
     imports: [

src/app/config/PollConfig.ts

@@ -28,6 +28,10 @@ export class PollConfig {
     step: number = 0; // step in the progress of creating a poll
     stepMax: number = 3; // step max in the progress of creating a poll
     pollType: string = 'dates';// classic or dates
+    // front end choices
+    themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid'];
+    themeSelected: number = 0;
+    themeClass: string = 'light-watermelon';
     title: string = 'titre';
     description: string = 'ma description';
     myName: string = 'mon pseudo';

src/app/config/defaultConfigs.ts

@@ -21,7 +21,6 @@ export interface PollAnswer {
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
-debugger;
 
 export const basicSlicesOfDay: TimeSlices[] = [
     {literal: 'matin'},

src/app/ui/theme-selector/theme-selector.component.html

@@ -0,0 +1,25 @@
+<div class='theme-selector' >
+    <h1 >Thème ( {{config.themeClass}})</h1 >
+    <span
+        class='choice btn'
+        [ngClass]="{ 'btn-primary' : config.themeClass ==='light-watermelon' }"
+        (click)="selectTheme('light-watermelon')" >
+
+        <i class='fa fa-sun-o' ></i > light
+    </span >
+    <span
+        class='choice btn'
+        [ngClass]="{ 'btn-primary' : config.themeClass ==='dark-crystal' }"
+        (click)="selectTheme('dark-crystal')" >
+
+        <i class='fa fa-moon-o' ></i > dark
+    </span >
+    <span
+        class='choice btn'
+        [ngClass]="{ 'btn-primary' : config.themeClass ==='hot-covid' }"
+
+        (click)="selectTheme('hot-covid')" >
+
+        <i class='fa fa-wheelchair' ></i > red
+    </span >
+</div >

src/app/ui/theme-selector/theme-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThemeSelectorComponent } from './theme-selector.component';
+
+describe('ThemeSelectorComponent', () => {
+  let component: ThemeSelectorComponent;
+  let fixture: ComponentFixture<ThemeSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThemeSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThemeSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/theme-selector/theme-selector.component.ts

@@ -0,0 +1,24 @@
+import {Component, OnInit} from '@angular/core';
+import {ConfigService} from "../../services/config.service";
+
+@Component({
+    selector: 'framadate-theme-selector',
+    templateUrl: './theme-selector.component.html',
+    styleUrls: ['./theme-selector.component.scss']
+})
+export class ThemeSelectorComponent implements OnInit {
+
+    constructor(public config: ConfigService) {
+    }
+
+    ngOnInit(): void {
+    }
+
+    selectTheme(themeName: string) {
+        if (this.config.themeChoices.includes(themeName)) {
+            this.config.themeSelected = this.config.themeChoices.indexOf(themeName);
+            this.config.themeClass = `theme-${themeName}`;
+        }
+
+    }
+}

src/assets/scss/themes/_light.scss

@@ -0,0 +1,63 @@
+#big_container {
+    &.theme-light-watermelon {
+        background: #fff;
+    }
+
+    &.theme-dark-crystal {
+        background: #222;
+        color: #ddd;
+
+        main {
+            background: #444;
+            padding-top: 4em;
+            padding-bottom: 6em;
+        }
+
+        h1::after {
+            background-color: #1b6d85;
+        }
+
+        .btn--primary:focus, .btn--primary:hover, .btn--primary:active,
+        .btn--primary {
+            background-color: #1b6d85;
+        }
+
+        .btn--warning:focus, .btn--warning:hover, .btn--warning:active,
+        .btn--warning {
+            background-color: #554685;
+        }
+
+        select {
+            background: #1b6d85;
+            border-color: #1b6d85;
+
+            &:hover {
+                color: #ccc;
+            }
+        }
+
+        .title {
+            color: #ccc;
+        }
+
+        .lang_icon, .menu_icon {
+            fill: #1b6d85 !important;
+            color: #1b6d85 !important;
+        }
+
+    }
+
+    &.theme-hot-covid {
+        background: #ffbca4;
+        color: #501016;
+
+        h1::after {
+            background-color: #850003;
+        }
+
+        .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary {
+            background-color: #850003 !important;
+        }
+    }
+
+}

src/styles.scss

@@ -2,6 +2,7 @@
 @import "~bulma/bulma";
 @import "assets/scss/variables";
 @import "assets/scss/default";
+@import "assets/scss/themes/light";
 @import "assets/scss/useful_classes";
 
 @import "assets/scss/atoms/main";