buttons to nav

src/app/config/mocks/mockmypolls.ts

@@ -1,7 +1,7 @@
 export const mockMyPolls =
     [{
-        "id": 1,
+        "id": 1000001,
-        "title": "blehehehe heh hehhe e",
+        "title": "blehehehe heh hehhe e test1",
         "customUrl": null,
         "description": "maaaaaaaaaaah",
         "creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"},
@@ -19,5 +19,25 @@ export const mockMyPolls =
         "choices": {},
         "comments": {},
         "defaultExpiracyDaysFromNow": 60
+    }, {
+        "id": 1000002,
+        "title": "bleh z zr erth tuyjikioy yylil test2",
+        "customUrl": null,
+        "description": "maaaaaaaaaaah 2",
+        "creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"},
+        "expiracyDate": {"date": "2020-01-20 14:21:16.270178", "timezone_type": 3, "timezone": "Europe/Paris"},
+        "owner": null,
+        "kind": "text",
+        "allowedAnswers": ["yes"],
+        "modificationPolicy": "nobody",
+        "mailOnComment": null,
+        "mailOnVote": null,
+        "hideResults": null,
+        "showResultEvenIfPasswords": null,
+        "votes": {},
+        "stacksOfVotes": {},
+        "choices": {},
+        "comments": {},
+        "defaultExpiracyDaysFromNow": 60
     }]
 ;

src/app/pages/answers/answers.component.html

@@ -63,6 +63,7 @@
                 [(ngModel)]="answer.text"
                 (keyup.enter)="addAnswer()"
                 (keyup)="navigateOrDelete($event,i)"
+                required='required'
                 placeholder="réponse"
             >
             <button
@@ -75,15 +76,19 @@
     <button
         class="btn btn--primary btn--outline"
         (click)="addAnswer()"
+        [ngClass]="{'btn--primary': allAnswersAreValid}"
         i18n
     >
+        <i class='fa fa-plus' ></i >
         Ajouter une proposition
     </button >
     <br >
     <button
         [routerLink]="'/step/resume'"
-        class="btn btn--full btn--primary"
+        class="btn btn--full "
         i18n
+        [ngClass]="{'btn--primary': allAnswersAreValid}"
+        [disabled]='!allAnswersAreValid'
     >
         Voyons ce que ça donne
     </button >

src/app/pages/answers/answers.component.scss

@@ -1,8 +0,0 @@
-:host {
-    .img-thumbnail {
-        width: 5em;
-        height: 5em;
-        margin: 1ch 0;
-        display: inline-block;
-    }
-}

src/app/pages/answers/answers.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core';
 import {BaseComponent} from '../base-page/base.component';
 import {ConfigService} from '../../services/config.service';
 
@@ -9,7 +9,9 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './answers.component.html',
     styleUrls: ['./answers.component.scss']
 })
-export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
+export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
+
+    private allAnswersAreValid = false;
 
     private answerList = [];
     private currentHeader: any = "";
@@ -26,8 +28,24 @@ export class AnswersComponent extends BaseComponent implements OnInit, AfterView
     ngOnInit() {
     }
 
+    ngOnChanges() {
+
+        this.checkValidAnswers();
+    }
+
+    checkValidAnswers() {
+        this.allAnswersAreValid = true;
+        this.config.answers.forEach(answer => {
+            if (!answer.text.length) {
+                this.allAnswersAreValid = false;
+                return;
+            }
+        });
+    }
+
     ngAfterViewInit() {
-        this.focusOnAnswer(0)
+        this.focusOnAnswer(0);
+        this.checkValidAnswers();
     }
 
     trackFunction(index: number, item: any): number {

src/app/pages/home/home.component.html

@@ -1,32 +1,32 @@
-<div class="description">
+<div class="description" >
-    <router-outlet></router-outlet>
+    <router-outlet ></router-outlet >
-    <h1 i18n>
+    <h1 i18n >
         {{"creation.title"|translate}}
-    </h1>
+    </h1 >
     <span
         class="pre-selector"
         i18n
     >
 		{{"creation.want"|translate}}
-	</span>
+	</span >
     <select
         [(ngModel)]="config.pollType"
         autofocus="autofocus"
         id="selector"
         name="selector"
     >
-        <option value="dates">
+        <option value="dates" >
             {{"creation.kind.date"|translate}}
-        </option>
+        </option >
-        <option value="classic">
+        <option value="classic" >
             {{"creation.kind.classic"|translate}}
-        </option>
+        </option >
-    </select>
+    </select >
 
-    <span class="post-selector">
+    <span class="post-selector" >
-	</span>
+	</span >
 
-    <div>
+    <div >
 
         <label
             class="title-label"
@@ -34,7 +34,7 @@
             i18n
         >
             {{"creation.choose_title"|translate}}
-        </label>
+        </label >
         <input
             [(ngModel)]="config.title"
             id="poll_title"
@@ -42,12 +42,12 @@
             placeholder="{{'creation.choose_title_placeholder'|translate}}"
             type="name"
         >
-    </div>
+    </div >
 
-    <div>
+    <div >
-        <label for="my_name">
+        <label for="my_name" >
             {{"creation.name"|translate}} :
-        </label>
+        </label >
         <input
             [(ngModel)]="config.myName"
             id="my_name"
@@ -55,16 +55,17 @@
             placeholder="{{'creation.name_placeholder'|translate}}"
             type="name"
         >
-    </div>
+    </div >
 
-    <div>
+    <div >
         <label
             class="title-label"
             for="poll_description"
             i18n
         >
-            {{"creation.description"|translate}}
+            {{"creation.description"|translate}}:
-        </label>
+        </label >
+        <br >
         <textarea
             [(ngModel)]="config.description"
             cols="50"
@@ -72,12 +73,12 @@
             lines="5"
             name="poll_description"
             placeholder="description"
-        ></textarea>
+        ></textarea >
-    </div>
+    </div >
-    <div>
+    <div >
-        <label for="email">
+        <label for="email" >
             Mon email pour administrer le sondage est
-        </label>
+        </label >
         <input
             [(ngModel)]="config.myEmail"
             autofocus="autofocus"
@@ -86,22 +87,22 @@
             required="required"
             type="email"
         />
-        <framadate-erasable-input [(inputModel)]="config.myEmail"></framadate-erasable-input>
+        <framadate-erasable-input [(inputModel)]="config.myEmail" ></framadate-erasable-input >
-    </div>
+    </div >
 
     <button
         [routerLink]="'/step/answers'"
-        class="btn btn-block"
+        class="btn btn--primary btn--full"
         i18n
     >
         Continuer
-    </button>
+    </button >
     <a
         [routerLink]="'/step/answers'"
         class="prev"
         i18n
     >
         Retour
-    </a>
+    </a >
-    <hr>
+    <hr >
-</div>
+</div >

src/app/pages/resume/resume.component.html

@@ -1,31 +1,45 @@
-<h1>
+<h1 >
     Récapitulatif
-</h1>
+</h1 >
-<h2 class="hero-title">
+<div class='card content' >
-    {{config.title}}
-</h2>
-<div class="creation">
-    créé par
-    {{config.myName}}
-</div>
-<div class="description">
-    <p>
-        {{config.description}}
-    </p>
-</div>
-<section>
-    <ul>
-        <li markdown *ngFor="let questions of config.answers">
-            {{questions.id + 1}}. {{questions.text}}
-        </li>
-    </ul>
-    <button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button>
-</section>
-<button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>
 
-<div class="back">
+    <h2 class="hero-title title" >
-    <a [routerLink]="'/step/visibility'"
+        {{config.title}}
-       class="btn btn--back">
+    </h2 >
+    <div class="creation" >
+        créé par
+        {{config.myName}}
+    </div >
+    <div class="description" >
+        <p >
+            {{config.description}}
+        </p >
+    </div >
+    <section >
+        <ul >
+            <li
+                markdown
+                *ngFor="let questions of config.answers" >
+                <img
+                    class='img-thumbnail'
+                    src='{{questions.url}}'
+                    alt='image {{questions.url}}' >
+                {{questions.id + 1}}. {{questions.text}}
+            </li >
+        </ul >
+    </section >
+
+</div >
+<button
+    [routerLink]="'/step/end'"
+    class="btn btn--primary btn--full"
+    i18n="@@confirm" >C'est parfait!
+</button >
+
+<div class="back" >
+    <a
+        [routerLink]="'/step/answers'"
+        class="prev" >
         Retour
-    </a>
+    </a >
-</div>
+</div >

src/app/pages/resume/resume.component.scss

@@ -0,0 +1,5 @@
+.card {
+    box-shadow: 0px 0px 0.5em #ccc;
+    padding: 2em;
+    margin: 1em 0;
+}

src/app/pages/visibility/visibility.component.html

@@ -1,162 +1,174 @@
-<h1 i18n>
+<h1 i18n >
     {{"visibility.top_txt"|translate}}
-</h1>
+</h1 >
-<section class="answers">
+<section class="answers" >
-    <h2>
+    <h2 >
         {{"visibility.title"|translate}}
-    </h2>
+    </h2 >
-    <span>
+    <span >
     {{"visibility.visibility_want"|translate}}
-    </span>
+    </span >
     <select
         name="visible_people"
         id="visible_people"
         [(ngModel)]="config.visibility"
     >
-        <option value="link_only">
+        <option value="link_only" >
             {{"visibility.visibility_link"|translate}}
-        </option>
+        </option >
-        <option value="only_me">
+        <option value="only_me" >
             {{"visibility.visibility_nobody"|translate}}
-        </option>
+        </option >
-    </select>
+    </select >
-    <span>
+    <span >
     {{"visibility.visibility_see"|translate}}
-    </span>
+    </span >
 
-</section>
+</section >
 
-<section class="possible_votes">
+<section class="possible_votes" >
-    <h2>
+    <h2 >
         {{"visibility.votes"|translate}}
-    </h2>
+    </h2 >
-    <label for="votes">
+    <label for="votes" >
         {{"visibility.votes_possible"|translate}}
-    </label>
+    </label >
     <select
         name="votes"
         id="votes"
         [(ngModel)]="config.voteChoices"
     >
-        <option value="only_yes">
+        <option value="only_yes" >
             {{"visibility.votes_possible_single"|translate}}
-        </option>
+        </option >
-        <option value="normal">
+        <option value="normal" >
             {{"visibility.votes_possible_normal"|translate}}
-        </option>
+        </option >
-        <option value="full">
+        <option value="full" >
             {{"visibility.votes_possible_full"|translate}}
-        </option>
+        </option >
-    </select>
+    </select >
-</section>
+</section >
-<section class="expiracy">
+<section class="expiracy" >
-    <label for="expirationDate">
+    <label for="expirationDate" >
         {{"visibility.archiving"|translate}}
-    </label>
+    </label >
 
-    <input type="date"
+    <input
-           id="expirationDate"
+        type="date"
-           [(ngModel)]="config.expirationDate">
+        id="expirationDate"
-    <div class="modification">
+        [(ngModel)]="config.expirationDate" >
-        <label for="modificationAbility">
+    <div class="modification" >
+        <label for="modificationAbility" >
             {{"visibility.archiving_start"|translate}}
-        </label>
+        </label >
         <select
             name="modificationAbility"
             id="modificationAbility"
-            [(ngModel)]="config.canModifyAnswers">
+            [(ngModel)]="config.canModifyAnswers" >
-            <option value="1">
+            <option value="1" >
                 {{"visibility.archiving_can"|translate}}
-            </option>
+            </option >
-            <option value="0">
+            <option value="0" >
                 {{"visibility.archiving_can_not"|translate}}
-            </option>
+            </option >
-        </select>
+        </select >
-        <label for="modificationScope">
+        <label for="modificationScope" >
             {{"visibility.archiving_end"|translate}}
-        </label>
+        </label >
 
         <select
             name="modificationScope"
             id="modificationScope"
             [(ngModel)]="config.whoModifiesAnswers"
-            [disabled]="!config.canModifyAnswers">
+            [disabled]="!config.canModifyAnswers" >
-            <option value="self">
+            <option value="self" >
                 {{"visibility.modfiy_their"|translate}}
-            </option>
+            </option >
-            <option value="everybody">
+            <option value="everybody" >
                 {{"visibility.modfiy_everyone"|translate}}
-            </option>
+            </option >
-        </select>
+        </select >
 
-    </div>
+    </div >
 
-
+</section >
-</section>
+<section class="access" >
-<section class="access">
+    <h2 >
-    <h2>
         {{"visibility.access"|translate}}
-    </h2>
+    </h2 >
-    <label for="url">
+    <label for="url" >
         {{"visibility.access_url"|translate}}
-        <br>
+        <br >
         {{"visibility.access_url_key"|translate}}
-    </label>
+    </label >
-    <br>
+    <br >
-    <input type="name"
+    <input
-           class="input-lg"
+        type="name"
-           name="url"
+        class="input-lg"
-           id="url"
+        name="url"
-           [(ngModel)]="config.customUrl">
+        id="url"
+        [(ngModel)]="config.customUrl" >
 
-    <sub class="instructions">
+    <sub class="instructions" >
         {{"visibility.access_instructions"|translate}}
-    </sub>
+    </sub >
-    <div class="preview-url">
+    <div class="preview-url" >
         {{baseUrl + '/' + config.customUrl}}
-    </div>
+    </div >
-    <br>
+    <br >
-    <label for="passwordAccess">
+    <label for="passwordAccess" >
         {{"visibility.access_want"|translate}}
-    </label>
+    </label >
-    <select name="passwordAccess" id="passwordAccess" [(ngModel)]="config.passwordAccess">
+    <select
-        <option value="0">  {{"visibility.access_want_no"|translate}}</option>
+        name="passwordAccess"
-        <option value="1">  {{"visibility.access_want_yes"|translate}}</option>
+        id="passwordAccess"
-    </select>
+        [(ngModel)]="config.passwordAccess" >
+        <option value="0" >  {{"visibility.access_want_no"|translate}}</option >
+        <option value="1" >  {{"visibility.access_want_yes"|translate}}</option >
+    </select >
 
-    <label for="password">
+    <label for="password" >
         {{"visibility.access_protect"|translate}}
-    </label>
+    </label >
 
-    <div class="enablepassword" *ngIf="config.passwordAccess == '1'">
+    <div
-        <input type="password"
+        class="enablepassword"
-               name="password"
+        *ngIf="config.passwordAccess == '1'" >
-               id="password"
+        <input
-               min="8"
+            type="password"
-               *ngIf="!showCustomPassword"
+            name="password"
-               [(ngModel)]="config.password">
+            id="password"
-        <input type="name"
+            min="8"
-               name="password_visible"
+            *ngIf="!showCustomPassword"
-               id="password_visible"
+            [(ngModel)]="config.password" >
-               min="8"
+        <input
-               *ngIf="showCustomPassword"
+            type="name"
-               [(ngModel)]="config.password">
+            name="password_visible"
-        <button (click)="showCustomPassword = !showCustomPassword" [disabled]="!config.password"
+            id="password_visible"
-                class="btn btn--default">
+            min="8"
-            <i class="fa fa-eye"></i>
+            *ngIf="showCustomPassword"
+            [(ngModel)]="config.password" >
+        <button
+            (click)="showCustomPassword = !showCustomPassword"
+            [disabled]="!config.password"
+            class="btn btn--default" >
+            <i class="fa fa-eye" ></i >
             {{"visibility.see_pass"|translate}}
-        </button>
+        </button >
-    </div>
+    </div >
-</section>
+</section >
 
-<a [routerLink]="'/step/end'"
+<a
-   class="btn btn-link btn--primary">
+    [routerLink]="'/step/end'"
+    class="btn btn-link btn--primary" >
     {{"visibility.validate_btn"|translate}}
-</a>
+</a >
-<div class="back">
+<div class="back" >
 
-    <a [routerLink]="'/step/answers'"
+    <a
-       class="btn btn--back">
+        [routerLink]="'/step/answers'"
+        class="prev" >
         Retour
-    </a>
+    </a >
-</div>
+</div >

src/assets/scss/atoms/_forms.scss

@@ -46,7 +46,6 @@ option {
     -webkit-appearance: none;
     -moz-appearance: none;
 
-    background: none;
     border-radius: 0;
 
     background-color: transparent;
@@ -164,3 +163,7 @@ select, input, textarea {
     display: block;
     width: 100%;
 }
+
+.btn, a {
+    cursor: pointer;
+}

src/assets/scss/atoms/_images.scss

@@ -1 +1,7 @@
-@charset "UTF-8";
+@charset "UTF-8";
+.img-thumbnail {
+    width: 5em;
+    height: 5em;
+    margin: 1ch 0;
+    display: inline-block;
+}