⚡ 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'},
@@ -299,7 +298,7 @@ export const defaultAnswers: PollAnswer[] = [{
 </div>
 
 
-                   
+
 
 
 

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'},
@@ -427,7 +426,7 @@ export const defaultAnswers: PollAnswer[] = [{
 </div>
 
 
-                   
+
 
 
 

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'},
@@ -235,7 +234,7 @@ export const defaultAnswers: PollAnswer[] = [{
 </div>
 
 
-                   
+
 
 
 

src/app/app.component.html

@@ -1,61 +1,68 @@
-<header style="text-align:center" >
+<div
-    <a
+    id='big_container'
-        [routerLink]="'home'"
+    class={{this.config.themeClass}} >
-        class="home_link"
+
-        aria-roledescription="home"
+    <header style="text-align:center" >
-    >
+        <a
-        <h1 >
+            [routerLink]="'home'"
-            <span class="logo_first" >Frama</span >
+            class="home_link"
-            <span class="logo_second" >date</span > (démo)
+            aria-roledescription="home"
-        </h1 >
+        >
-        <div class="legend" >proposé par
+            <h1 >
-            <span class="legend_first" >Frama</span >
+                <span class="logo_first" >Frama</span >
-            <span class="legend_second" >soft</span >
+                <span class="logo_second" >date</span > (démo)
-        </div >
+            </h1 >
-    </a >
+            <div class="legend" >proposé par
-    <div id="translate_example" >
+                <span class="legend_first" >Frama</span >
-        <div class="wrapper" >
+                <span class="legend_second" >soft</span >
-            <img
+            </div >
-                src="assets/img/icone-langue.svg"
+        </a >
-                alt="location icon"
+        <div id="translate_example" >
-                (click)="changeLanguage()"
+            <div class="wrapper" >
-                class="lang_icon clickable"
+                <img
-            >
+                    src="assets/img/icone-langue.svg"
-            <img
+                    alt="location icon"
-                (click)="toggleMenu()"
+                    (click)="changeLanguage()"
-                alt="menu icon"
+                    class="lang_icon clickable"
-                class="menu_icon  clickable"
+                >
-                src="assets/img/icone-menu.svg"
+                <img
-            >
+                    (click)="toggleMenu()"
-            <select
+                    alt="menu icon"
-                name="language"
+                    class="menu_icon  clickable"
-                class="language-selector"
+                    src="assets/img/icone-menu.svg"
-                (change)="switchLanguage(currentLang)"
+                >
-                [(ngModel)]="currentLang"
+                <select
-            >
+                    name="language"
-                <option
+                    class="language-selector"
-                    value="d"
+                    (change)="switchLanguage(currentLang)"
-                    default
+                    [(ngModel)]="currentLang"
-                    class="select_language"
+                >
-                >{{"Language" | translate}}</option >
+                    <option
-                <option value="en" >English</option >
+                        value="d"
-                <option value="fr" >Français</option >
+                        default
-            </select >
+                        class="select_language"
-            <span
+                    >{{"Language" | translate}}</option >
-                (click)="toggleMenu()"
+                    <option value="en" >English</option >
-                class="menu_label" >Menu</span >
+                    <option value="fr" >Français</option >
+                </select >
+                <span
+                    (click)="toggleMenu()"
+                    class="menu_label" >Menu</span >
+            </div >
+
         </div >
 
-    </div >
+    </header >
 
-</header >
+    <framadate-theme-selector ></framadate-theme-selector >
 
-<main >
+    <main >
-    <router-outlet ></router-outlet >
+        <router-outlet ></router-outlet >
-</main >
+    </main >
-<framadate-debugger ></framadate-debugger >
+    <framadate-debugger ></framadate-debugger >
-<framadate-navigation
+    <framadate-navigation
-    *ngIf="menuVisible"
+        *ngIf="menuVisible"
-    [step]="step" ></framadate-navigation >
+        [step]="step" ></framadate-navigation >
-<p-toast position="top-right" ></p-toast >
+    <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);
@@ -37,7 +37,7 @@ export class AppComponent {
 
 
         });
-        this.route.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event:NavigationStart) => {
+        this.route.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event: NavigationStart) => {
             this.scrollGoToTop();
             this.updateCurrentTab(event);
             // only if there is a poll ID
@@ -76,7 +76,7 @@ export class AppComponent {
         this.document.documentElement.scrollTop = 0;
     }
 
-    updateCurrentTab(event){
+    updateCurrentTab(event) {
         if (event.url) {
             const tab = event.url.split('/');
             if (tab && tab[2]) {

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";