split many components, presentation with left nav

src/app/app.component.html

@@ -1,80 +1,47 @@
 <div
     id='big_container'
-    class={{this.config.themeClass}} >
+    class={{this.config.themeClass}}
+>
 
     <header class='big-header'>
         <div class='container'>
-            <div class='columns' >
+            <div class='columns'>
-                <div class='column' >
+                <div class='column'>
-                    <a
+                    <framadate-master-head></framadate-master-head>
-                        [routerLink]="'home'"
-                        class="home_link"
-                        aria-roledescription="home"
-                    >
-                        <h1 >
-                            <span class="logo_first" >Frama</span >
-                            <span class="logo_second" >date</span > (démo)
-                        </h1 >
-                        <div class="legend" >proposé par
-                            <span class="legend_first" >Frama</span >
-                            <span class="legend_second" >soft</span >
-                        </div >
-                    </a >
 
-                </div >
+                </div>
-                <div class='column' >
+                <div class='column'>
-                    <div id="translate_example" >
+                    <framadate-language></framadate-language>
-                        <div class="wrapper" >
+                </div>
-                            <img
+            </div>
-                                src="assets/img/icone-langue.svg"
-                                alt="location icon"
-                                (click)="changeLanguage()"
-                                class="lang_icon clickable"
-                            >
-                            <img
-                                (click)="toggleMenu()"
-                                alt="menu icon"
-                                class="menu_icon  clickable"
-                                src="assets/img/icone-menu.svg"
-                            >
-                            <select
-                                name="language"
-                                class="language-selector"
-                                (change)="switchLanguage(currentLang)"
-                                [(ngModel)]="currentLang"
-                            >
-                                <option
-                                    value="d"
-                                    default
-                                    class="select_language"
-                                >{{"Language" | translate}}</option >
-                                <option value="en" >English</option >
-                                <option value="fr" >Français</option >
-                            </select >
-                            <span
-                                (click)="toggleMenu()"
-                                class="menu_label" >Menu</span >
-                        </div >
-
-                    </div >
-                </div >
-                <div class='column' >
-                    <framadate-theme-selector ></framadate-theme-selector >
-                </div >
-            </div >
         </div>
 
+    </header>
 
-    </header >
+    <main>
+        <div class="container">
 
-    <main >
+            <div class="columns">
+                <div class="column is-one-quarter">
+                    <framadate-theme-selector></framadate-theme-selector>
 
-        <router-outlet ></router-outlet >
-    </main >
-    <framadate-debugger ></framadate-debugger >
                     <framadate-navigation
-        *ngIf="menuVisible"
+                        *ngIf="config.menuVisible"
-        [step]="step" ></framadate-navigation >
+                        [step]="step"
-    <p-toast position="top-right" ></p-toast >
+                    ></framadate-navigation>
+                    <framadate-debugger
 
-</div >
+                    *ngIf="isDevelopmentEnv"
+                    ></framadate-debugger>
+                    <p-toast position="top-right"></p-toast>
+                </div>
+                <div class="column">
+                    <router-outlet></router-outlet>
+                </div>
+            </div>
+
+        </div>
+
+    </main>
+
+</div>

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import {Component, Inject} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {NavigationStart, Router} from '@angular/router';
-import {DOCUMENT} from "@angular/common";
+import {DOCUMENT} from '@angular/common';
-import {filter} from "rxjs/operators";
+import {filter} from 'rxjs/operators';
-import {ConfigService} from "./services/config.service";
+import {ConfigService} from './services/config.service';
+import {environment} from '../environments/environment';
 
 @Component({
     selector: 'app-root',
@@ -11,25 +12,17 @@ import {ConfigService} from "./services/config.service";
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-    currentLang = 'fr';
+
-    langsAvailable = ['fr', 'en'];
-    title = 'framadate';
-    //translation demo:
-    minutes = 12;
-    user = {
-        name: 'Arthur',
-        age: 42
-    };
-    menuVisible: boolean = true;
     step: string;
+    isDevelopmentEnv=false;
 
     constructor(private translate: TranslateService,
                 public config: ConfigService,
                 @Inject(DOCUMENT) private document,
                 private route: Router) {
-        this.translate.setDefaultLang(this.currentLang);
         this.detectCurrentTabOnRouteChange();
 
+        this.isDevelopmentEnv = !environment.production
     }
 
     detectCurrentTabOnRouteChange() {
@@ -46,31 +39,6 @@ export class AppComponent {
 
     }
 
-    switchLanguage(language: string) {
-        this.translate.use(language);
-        this.currentLang = language;
-    }
-
-    /**
-     * set the next lang or loop to the first
-     * this is to manage future languages available
-     */
-    changeLanguage() {
-        let langs = this.langsAvailable;
-        let indexofCurrent = langs.indexOf(this.currentLang);
-        if (indexofCurrent > -1) {
-            let newIndex = indexofCurrent + 1;
-            if (newIndex > (langs.length - 1)) {
-                newIndex = 0;
-            }
-            this.currentLang = this.langsAvailable[newIndex];
-        }
-        this.translate.use(this.currentLang);
-    }
-
-    toggleMenu() {
-        this.menuVisible = !this.menuVisible;
-    }
 
     scrollGoToTop() {
         this.document.documentElement.scrollTop = 0;

src/app/app.module.ts

@@ -39,25 +39,27 @@ import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
 
 import {AdminComponent} from './pages/admin/admin.component';
 import {SelectorComponent} from './ui/selector/selector.component';
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ConfigService} from "./services/config.service";
+import {ConfigService} from './services/config.service';
-import {PollService} from "./services/poll.service";
+import {PollService} from './services/poll.service';
 import {ToastModule} from 'primeng/toast';
-import {ConfirmationService, MessageModule, MessageService} from "primeng";
+import {ConfirmationService, MessageModule, MessageService} from 'primeng';
 import {PollDisplayComponent} from './pages/poll-display/poll-display.component';
 import {VotingComponent} from './pages/voting/voting.component';
 import {VotingCommentComponent} from './pages/voting/voting-comment/voting-comment.component';
 import {ResettableInputDirective} from './ui/directives/resettable-input.directive';
-import {ClipboardModule} from "ngx-clipboard";
+import {ClipboardModule} from 'ngx-clipboard';
 import {ErasableInputComponent} from './ui/erasable-input/erasable-input.component';
 import {ConfirmDialogModule} from 'primeng/confirmdialog';
 import {DialogModule} from 'primeng/dialog';
-import {DateValueAccessorModule} from "./custom-lib/date-value-accessor";
+import {DateValueAccessorModule} from './custom-lib/date-value-accessor';
 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';
+import { MasterHeadComponent } from './ui/navigation/master-head/master-head.component';
+import { LanguageComponent } from './ui/selector/language/language.component';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -105,6 +107,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         ChoicesListComponent,
         VotingNavigationComponent,
         ThemeSelectorComponent,
+        MasterHeadComponent,
+        LanguageComponent,
 
     ],
     imports: [

src/app/config/PollConfig.ts

@@ -23,6 +23,9 @@ const baseConfigValues = {
  * configuration of the poll, add new fields at will
  */
 export class PollConfig {
+
+    menuVisible = true;
+
     expiracyDateDefaultInDays = 60;
     deletionDateAfterLastModification = 180;
     step: number = 0; // step in the progress of creating a poll

src/app/debugger/debugger.component.html

@@ -1,7 +1,7 @@
 <div class="well debug" >
     <strong >
         <h2 i18n >
-            infos de debug
+            infos de debug - environement de Dev
         </h2 >
         <span class="demo" >
 		{{"config.demo"|translate}}

src/app/pages/dates/dates.component.html

@@ -1,6 +1,6 @@
-<div i18n >
+<h1 class="title is-1" >
-    {{"dates.title"|translate}}
+    <i class="fa fa-calendar"></i> {{"dates.title"|translate}}
-</div >
+</h1 >
 
 <div >
     <label for="multi_hours" >

src/app/pages/dates/dates.component.ts

@@ -12,7 +12,7 @@ import {DateUtilities} from "../../config/DateUtilities";
     styleUrls: ['./dates.component.scss']
 })
 export class DatesComponent extends BaseComponent implements OnInit {
-    showDateInterval: boolean = true;
+    showDateInterval: boolean = false;
     startDateInterval: any;
     intervalDays: any;
     intervalDaysDefault: number = 7;

src/app/ui/navigation/master-head/master-head.component.html

@@ -0,0 +1,15 @@
+<a
+    [routerLink]="'home'"
+    class="home_link"
+    aria-roledescription="home"
+>
+    <h1>
+        <span class="logo_first">Frama</span>
+        <span class="logo_second">date</span>
+        (démo)
+    </h1>
+    <div class="legend">proposé par
+        <span class="legend_first">Frama</span>
+        <span class="legend_second">soft</span>
+    </div>
+</a>

src/app/ui/navigation/master-head/master-head.component.spec.ts

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

src/app/ui/navigation/master-head/master-head.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'framadate-master-head',
+  templateUrl: './master-head.component.html',
+  styleUrls: ['./master-head.component.scss']
+})
+export class MasterHeadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/ui/navigation/navigation.component.ts

@@ -11,7 +11,7 @@ import {ConfigService} from '../../services/config.service';
 })
 export class NavigationComponent extends BaseComponent implements OnInit {
 
-    @Input() public step: string = 'home';
+    @Input() public step = 'home';
 
     constructor(public config: ConfigService,
                 public route: Router) {

src/app/ui/selector/language/language.component.html

@@ -0,0 +1,34 @@
+<div id="translate_example">
+    <div class="wrapper">
+        <img
+            src="assets/img/icone-langue.svg"
+            alt="location icon"
+            (click)="changeLanguage()"
+            class="lang_icon clickable"
+        > <img
+        (click)="toggleMenu()"
+        alt="menu icon"
+        class="menu_icon  clickable"
+        src="assets/img/icone-menu.svg"
+    >
+        <select
+            name="language"
+            class="language-selector"
+            (change)="switchLanguage(currentLang)"
+            [(ngModel)]="currentLang"
+        >
+            <option
+                value="d"
+                default
+                class="select_language"
+            >{{"Language" | translate}}</option>
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+        </select>
+        <span
+            (click)="toggleMenu()"
+            class="menu_label"
+        >Menu</span>
+    </div>
+
+</div>

src/app/ui/selector/language/language.component.spec.ts

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

src/app/ui/selector/language/language.component.ts

@@ -0,0 +1,62 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {ConfigService} from '../../../services/config.service';
+import {DOCUMENT} from '@angular/common';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'framadate-language',
+    templateUrl: './language.component.html',
+    styleUrls: ['./language.component.scss']
+})
+export class LanguageComponent implements OnInit {
+
+    currentLang = 'fr';
+    langsAvailable = ['fr', 'en'];
+    title = 'framadate';
+    // translation demo:
+    minutes = 12;
+    user = {
+        name: 'Arthur',
+        age: 42
+    };
+
+    constructor(private translate: TranslateService,
+                public config: ConfigService,
+                @Inject(DOCUMENT) private document,
+                private route: Router) {
+
+        this.translate.setDefaultLang(this.currentLang);
+    }
+
+    ngOnInit(): void {
+    }
+
+    switchLanguage(language: string) {
+        this.translate.use(language);
+        this.currentLang = language;
+    }
+
+    /**
+     * set the next lang or loop to the first
+     * this is to manage future languages available
+     */
+    changeLanguage() {
+        const langs = this.langsAvailable;
+        const indexofCurrent = langs.indexOf(this.currentLang);
+        if (indexofCurrent > -1) {
+            let newIndex = indexofCurrent + 1;
+            if (newIndex > (langs.length - 1)) {
+                newIndex = 0;
+            }
+            this.currentLang = this.langsAvailable[newIndex];
+        }
+        this.translate.use(this.currentLang);
+    }
+
+
+    toggleMenu() {
+        this.config.menuVisible = !this.config.menuVisible;
+    }
+
+}

src/assets/scss/atoms/_main.scss

@@ -4,7 +4,6 @@ main {
     display: block;
     width: 100%;
     //max-width: 320px; // to look like the styleguide, to remove when we will have full width views
-    max-width: 800px;
     margin: 0 auto;
     padding: 0 2rem;
 }