tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

buttons to nav

This commit is contained in:
Baptiste Lemoine 2020-01-20 15:01:56 +01:00
parent 9ebd22536b
commit 3808f19425
10 changed files with 260 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/config/mocks/mockmypolls.ts
View File

@ -1,7 +1,7 @@
export const mockMyPolls = export const mockMyPolls =
[{ [{
"id": 1, "id": 1000001,
"title": "blehehehe heh hehhe e", "title": "blehehehe heh hehhe e test1",
"customUrl": null, "customUrl": null,
"description": "maaaaaaaaaaah", "description": "maaaaaaaaaaah",
"creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"}, "creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"},
@ -19,5 +19,25 @@ export const mockMyPolls =
"choices": {}, "choices": {},
"comments": {}, "comments": {},
"defaultExpiracyDaysFromNow": 60 "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
}] }]
; ;

7
src/app/pages/answers/answers.component.html
View File

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

8
src/app/pages/answers/answers.component.scss
View File

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

24
src/app/pages/answers/answers.component.ts
View File

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

69
src/app/pages/home/home.component.html
View File

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

70
src/app/pages/resume/resume.component.html
View File

@ -1,31 +1,45 @@
<h1> <h1 >
Récapitulatif 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 Retour
</a> </a >
</div> </div >

5
src/app/pages/resume/resume.component.scss
View File

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

224
src/app/pages/visibility/visibility.component.html
View File

@ -1,162 +1,174 @@
<h1 i18n> <h1 i18n >
{{"visibility.top_txt"|translate}} {{"visibility.top_txt"|translate}}
</h1> </h1 >
<section class="answers"> <section class="answers" >
<h2> <h2 >
{{"visibility.title"|translate}} {{"visibility.title"|translate}}
</h2> </h2 >
<span> <span >
{{"visibility.visibility_want"|translate}} {{"visibility.visibility_want"|translate}}
</span> </span >
<select <select
name="visible_people" name="visible_people"
id="visible_people" id="visible_people"
[(ngModel)]="config.visibility" [(ngModel)]="config.visibility"
> >
<option value="link_only"> <option value="link_only" >
{{"visibility.visibility_link"|translate}} {{"visibility.visibility_link"|translate}}
</option> </option >
<option value="only_me"> <option value="only_me" >
{{"visibility.visibility_nobody"|translate}} {{"visibility.visibility_nobody"|translate}}
</option> </option >
</select> </select >
<span> <span >
{{"visibility.visibility_see"|translate}} {{"visibility.visibility_see"|translate}}
</span> </span >
</section> </section >
<section class="possible_votes"> <section class="possible_votes" >
<h2> <h2 >
{{"visibility.votes"|translate}} {{"visibility.votes"|translate}}
</h2> </h2 >
<label for="votes"> <label for="votes" >
{{"visibility.votes_possible"|translate}} {{"visibility.votes_possible"|translate}}
</label> </label >
<select <select
name="votes" name="votes"
id="votes" id="votes"
[(ngModel)]="config.voteChoices" [(ngModel)]="config.voteChoices"
> >
<option value="only_yes"> <option value="only_yes" >
{{"visibility.votes_possible_single"|translate}} {{"visibility.votes_possible_single"|translate}}
</option> </option >
<option value="normal"> <option value="normal" >
{{"visibility.votes_possible_normal"|translate}} {{"visibility.votes_possible_normal"|translate}}
</option> </option >
<option value="full"> <option value="full" >
{{"visibility.votes_possible_full"|translate}} {{"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}} {{"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}} {{"visibility.archiving_start"|translate}}
</label> </label >
<select <select
name="modificationAbility" name="modificationAbility"
id="modificationAbility" id="modificationAbility"
[(ngModel)]="config.canModifyAnswers"> [(ngModel)]="config.canModifyAnswers" >
<option value="1"> <option value="1" >
{{"visibility.archiving_can"|translate}} {{"visibility.archiving_can"|translate}}
</option> </option >
<option value="0"> <option value="0" >
{{"visibility.archiving_can_not"|translate}} {{"visibility.archiving_can_not"|translate}}
</option> </option >
</select> </select >
<label for="modificationScope"> <label for="modificationScope" >
{{"visibility.archiving_end"|translate}} {{"visibility.archiving_end"|translate}}
</label> </label >
<select <select
name="modificationScope" name="modificationScope"
id="modificationScope" id="modificationScope"
[(ngModel)]="config.whoModifiesAnswers" [(ngModel)]="config.whoModifiesAnswers"
[disabled]="!config.canModifyAnswers"> [disabled]="!config.canModifyAnswers" >
<option value="self"> <option value="self" >
{{"visibility.modfiy_their"|translate}} {{"visibility.modfiy_their"|translate}}
</option> </option >
<option value="everybody"> <option value="everybody" >
{{"visibility.modfiy_everyone"|translate}} {{"visibility.modfiy_everyone"|translate}}
</option> </option >
</select> </select >
</div> </div >
</section >
</section> <section class="access" >
<section class="access"> <h2 >
<h2>
{{"visibility.access"|translate}} {{"visibility.access"|translate}}
</h2> </h2 >
<label for="url"> <label for="url" >
{{"visibility.access_url"|translate}} {{"visibility.access_url"|translate}}
<br> <br >
{{"visibility.access_url_key"|translate}} {{"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}} {{"visibility.access_instructions"|translate}}
</sub> </sub >
<div class="preview-url"> <div class="preview-url" >
{{baseUrl + '/' + config.customUrl}} {{baseUrl + '/' + config.customUrl}}
</div> </div >
<br> <br >
<label for="passwordAccess"> <label for="passwordAccess" >
{{"visibility.access_want"|translate}} {{"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}} {{"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}} {{"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}} {{"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 Retour
</a> </a >
</div> </div >

5
src/assets/scss/atoms/_forms.scss
View File

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

8
src/assets/scss/atoms/_images.scss
View File

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