Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

buttons to nav

Browse Source
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 =
[{
"id": 1,
"title": "blehehehe heh hehhe e",
"id": 1000001,
"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
}]
;

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

@ -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 >

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 {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 {

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

@ -1,32 +1,32 @@
<div class="description">
<router-outlet></router-outlet>
<h1 i18n>
<div class="description" >
<router-outlet ></router-outlet >
<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 value="classic">
</option >
<option value="classic" >
{{"creation.kind.classic"|translate}}
</option>
</select>
</option >
</select >
<span class="post-selector">
</span>
<span class="post-selector" >
</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>
<label for="my_name">
<div >
<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}}
</label>
{{"creation.description"|translate}}:
</label >
<br >
<textarea
[(ngModel)]="config.description"
cols="50"
@ -72,12 +73,12 @@
lines="5"
name="poll_description"
placeholder="description"
></textarea>
</div>
<div>
<label for="email">
></textarea >
</div >
<div >
<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>
</div>
<framadate-erasable-input [(inputModel)]="config.myEmail" ></framadate-erasable-input >
</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>
<hr>
</div>
</a >
<hr >
</div >

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

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

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

@ -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;
}

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