tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'visibility-page' into 'dev'

Browse Source 
Visibility page

See merge request framasoft/framadate/funky-framadate-front!16
This commit is contained in:
ty kayn 2019-11-23 16:07:56 +01:00
commit 157a8d63c5
27 changed files with 617 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/app.component.html
View File

@ -1,25 +1,27 @@
<header style="text-align:center"> <header style="text-align:center">
<a [routerLink]="'home'" class="home_link" aria-roledescription="home"> <a [routerLink]="'home'" class="home_link" aria-roledescription="home">
<h1> <h1>
<span class="logo_first">Frama</span> <span class="logo_first">Frama</span>
<span class="logo_second">date</span> <span class="logo_second">date</span>
</h1> </h1>
</a> </a>
<div id="translate_example"> <div id="translate_example">
<div class="lang-choices"> <img src="assets/img/icone-langue.svg" alt="location icon">
<button class="btn btn-info" (click)="switchLanguage('en')">en</button> <img src="assets/img/icone-menu.svg" alt="menu icon">
<button class="btn btn-info" (click)="switchLanguage('fr')">fr</button> <div class="lang-choices">
</div> <button class="btn btn-info" (click)="switchLanguage('en')">en</button>
<h1 i18n>{{"Title"|translate}}</h1> <button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>
<div> </div>
{{"Intro"|translate:user}} <h1 i18n>{{"Title"|translate}}</h1>
</div> <div>
</div> {{"Intro"|translate:user}}
</div>
</div>
</header> </header>
<framadate-navigation></framadate-navigation> <framadate-navigation></framadate-navigation>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<framadate-debugger></framadate-debugger> <framadate-debugger></framadate-debugger>

12
src/app/app.module.ts
View File

@ -1,5 +1,5 @@
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import {LOCALE_ID, NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module'; import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component'; import {AppComponent} from './app.component';
@ -19,7 +19,6 @@ import {PicturesComponent} from './pages/pictures/pictures.component';
import {AnswersComponent} from './pages/answers/answers.component'; import {AnswersComponent} from './pages/answers/answers.component';
import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component'; import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component';
import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component'; import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
import {CalendarComponent} from './calendar/calendar.component';
import localeFr from '@angular/common/locales/fr'; import localeFr from '@angular/common/locales/fr';
import localeEn from '@angular/common/locales/en'; import localeEn from '@angular/common/locales/en';
import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component'; import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
@ -29,7 +28,7 @@ import {PasswordComponent} from './pages/password/password.component';
import {HomeComponent} from './pages/home/home.component'; import {HomeComponent} from './pages/home/home.component';
import {VoteChoiceComponent} from './vote-choice/vote-choice.component'; import {VoteChoiceComponent} from './vote-choice/vote-choice.component';
import {HttpClient, HttpClientModule} from '@angular/common/http'; import {HttpClient, HttpClientModule} from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown'; import {MarkdownModule} from 'ngx-markdown';
import { import {
MissingTranslationHandler, MissingTranslationHandler,
MissingTranslationHandlerParams, MissingTranslationHandlerParams,
@ -38,9 +37,10 @@ import {
TranslateService TranslateService
} from '@ngx-translate/core'; } from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { PollGraphicComponent } from './poll-graphic/poll-graphic.component'; import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
import { AdminComponent } from './pages/admin/admin.component'; import {AdminComponent} from './pages/admin/admin.component';
import {SelectorComponent} from './ui/selector/selector.component';
export class MyMissingTranslationHandler implements MissingTranslationHandler { export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) { handle(params: MissingTranslationHandlerParams) {
@ -70,7 +70,6 @@ export function HttpLoaderFactory(http: HttpClient) {
AnswersComponent, AnswersComponent,
EndConfirmationComponent, EndConfirmationComponent,
CreateOrRetrieveComponent, CreateOrRetrieveComponent,
CalendarComponent,
VotingSummaryComponent, VotingSummaryComponent,
VotingGraphComponent, VotingGraphComponent,
VotingChoiceComponent, VotingChoiceComponent,
@ -79,6 +78,7 @@ export function HttpLoaderFactory(http: HttpClient) {
PollGraphicComponent, PollGraphicComponent,
VoteChoiceComponent, VoteChoiceComponent,
AdminComponent, AdminComponent,
SelectorComponent,
], ],
imports: [ imports: [

1
src/app/calendar/calendar.component.html
View File

@ -1 +0,0 @@
<p>calendar works!</p>

1
src/app/calendar/calendar.component.html.save
View File

@ -1 +0,0 @@

15
src/app/calendar/calendar.component.ts
View File

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

42
src/app/config/PollConfig.ts
View File

@ -27,39 +27,47 @@ export const defaultDates = [
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}] timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
} }
]; ];
export const defaultAnswers = [{
id: 0,
text: 'réponse de démo 1'
},
{
id: 1,
text: 'réponse 2'
},
{
id: 2,
text: 'la réponse D'
}];
/** /**
* configuration of the poll, add new fields at will * configuration of the poll, add new fields at will
*/ */
export class PollConfig { export class PollConfig {
expiracyDateDefaultInDays = 60;
step = 0; step = 0;
stepMax = 3; stepMax = 3;
pollType = 'classic'; pollType = 'classic';// classic or date
title = ''; title = 'titre';
description = ''; description = 'ma description';
myName = ''; myName = 'mon pseudo';
// date specific poll // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
allowSeveralHours = 'false'; allowSeveralHours = 'false';
// access // access
visibility = 'link_only'; // visible to anyone with the link: visibility = 'link_only'; // visible to anyone with the link:
voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"
expirationDate = ''; // expiracy date
passwordAccess = 0;
password = ''; password = '';
customUrl = '';
canModifyAnswers = 1;// everybody, self, nobody (= just admin)
whoModifiesAnswers = "self";// everybody, self, nobody (= just admin)
whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin) whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
answers: any = [{
id: 0,
text: 'réponse de démo 1'
},
{ answers: any = defaultAnswers;
id: 1,
text: 'réponse 2'
},
{
id: 2,
text: 'la réponse D'
}];
} }

169
src/app/pages/admin/admin.component.html
View File

@ -1,75 +1,100 @@
<form> <form>
<h1>Nom du sondage</h1> <h1>Nom du sondage</h1>
<!--Infos--> <!--Infos-->
<h2>Informations du sondage</h2> <h2>Informations du sondage</h2>
<label for="title">Le titre du sondage est</label> <label for="title">Le titre du sondage est</label>
<input type="text" name="title"> <input type="text" name="title">
<label for="desc">et sa description :</label> <label for="desc">et sa description :</label>
<textarea name="desc"> </textarea> <textarea name="desc"> </textarea>
<label for="name">Je peux aussi préciser mon nom si je le souhaite :</label> <label for="name">Je peux aussi préciser mon nom si je le souhaite :</label>
<input type="text" name="name"> <input type="text" name="name">
<!--Params--> <!--Params-->
<h2>Paramètres</h2> <h2>Paramètres</h2>
<h3>Visibilité des réponses</h3> <h3>Visibilité des réponses</h3>
<section class="row"> <section class="row">
<label for="answer-visible">Je veux que</label> <label for="answer-visible">Je veux que</label>
<select name="answer-visible"> <select name="answer-visible">
<option value="all" selected>tout le monde</option> <option value="all" selected>tout le monde</option>
<option value="per">seulement moi</option> <option value="per">seulement moi</option>
</select> </select>
<label for="answer-visible">puisse voir les réponses au sondage</label> <label for="answer-visible">puisse voir les réponses au sondage</label>
</section> </section>
<h3>Votes</h3> <h3>Votes</h3>
<section class="row"> <section>
<label for="vote-date">Les personnes sondées pourront voter jusqu'au</label> <label for="vote-date">Les personnes sondées pourront voter jusqu'au</label>
<input type="date" name="vote-date"> <input type="date" name="vote-date">
</section> </section>
<section class="row"> <section>
<label for="alter-vote">Elles</label> <label for="alter-vote">Elles</label>
<select name="alter-vote"> <select name="alter-vote">
<option value="yes" selected>auront</option> <option value="yes" selected>auront</option>
<option value="no">n'auront pas</option> <option value="no">n'auront pas</option>
</select> </select>
<label for="type-vote">la possibilité de modifier</label> <label for="type-vote">la possibilité de modifier</label>
<select name="type-vote"> <select name="type-vote">
<option value="solo" selected>leur vote</option> <option value="solo" selected>leur vote</option>
<option value="all">tout les votes</option> <option value="all">tout les votes</option>
</select> </select>
</section> </section>
<label for="del-vote">Pour repartir à zéro, je peux tous les supprimer :</label>
<input class="btn btn--alert btn--outline" type="submit" name="del-vote" value="Supprimer tous les votes">
<h3>Commentaires</h3>
<label for="del-com">Si je le souhaite,je peux supprimer l'ensemble des commentaires</label>
<input class="btn btn--alert btn--outline" type="submit" name="del-com" value="Supprimer tous les commentaires">
<h3>Archivage</h3>
<section class="row">
<label for="arch">Ce sondage ne sera plus éditable à partir du</label>
<input type="date" name="arch">
</section>
<h3>Accés au sondage</h3>
<section class="row">
<label for="password">Je</label>
<select name="password">
<option value="yes" selected>n'ai pas besoin</option>
<option value="no">voudrais</option>
</select>
<label for="alter-vote">qu'il soit protégé par un mot de passe</label>
</section>
<h3>Tout supprimer</h3>
<label for="del">Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :</label>
<input class="btn btn--alert" type="submit" name="del" value="Supprimer le sondage">
<h2>Liens d'accès au sondage</h2>
<h3>Coté administrateur·ice</h3>
<label for="copy-link-admin">Pour accéder au sondage et à tous ses paramètres :
https://framadate.org/urladmindusondage</label>
<input class="btn btn--mini" type="submit" name="copy-link-admin" value="Copier le lien">
<a href="#" class="next">Voir le sondage coté administrateur·ice</a>
<h3>Côté sondé·es</h3>
<label for="copy-link">Pour accéder au sondage et à tous ses paramètres :
https://framadate.org/urladmindusondage</label>
<input class="btn btn--mini" type="submit" name="copy-link" value="Copier le lien">
<a href="#" class="next">Voir le sondage</a>
<h3>Recevoir les liens par mail</h3>
<label for="mail">Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :</label>
<input type="email" name="mail">
<input class="btn btn--mini" type="submit" name="send-mail" value="Envoyer les liens du sondage">
<section class="deletion">
{{"admin.deletion"|translate}}
{{"admin.deletion_desc"|translate}}
{{"admin.deletion_btn"|translate}}
</section>
<section class="links">
{{"admin.link"|translate}}
{{"admin.link_admin"|translate}}
{{"admin.link_admin_desc"|translate}}
{{"admin.link_admin_btn"|translate}}
{{"admin.copy_link"|translate}}
{{"admin.polled_people"|translate}}
{{"admin.polled_people_desc"|translate}}
{{"admin.polled_people_btn"|translate}}
{{"admin.email_links"|translate}}
{{"admin.email_links_desc"|translate}}
{{"admin.email_links_key"|translate}}
{{"admin.email_links_btn"|translate}}
</section>
<label for="del-vote">Pour repartir à zéro, je peux tous les supprimer :</label>
<input class="btn btn--alert btn--outline" type="submit" name="del-vote" value="Supprimer tous les votes">
<h3>Commentaires</h3>
<label for="del-com">Si je le souhaite,je peux supprimer l'ensemble des commentaires</label>
<input class="btn btn--alert btn--outline" type="submit" name="del-com" value="Supprimer tous les commentaires">
<h3>Archivage</h3>
<section class="row">
<label for="arch">Ce sondage ne sera plus éditable à partir du</label>
<input type="date" name="arch">
</section>
<h3>Accés au sondage</h3>
<section class="row">
<label for="password">Je</label>
<select name="password">
<option value="yes" selected>n'ai pas besoin</option>
<option value="no">voudrais</option>
</select>
<label for="alter-vote">qu'il soit protégé par un mot de passe</label>
</section>
<h3>Tout supprimer</h3>
<label for="del">Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :</label>
<input class="btn btn--alert" type="submit" name="del" value="Supprimer le sondage">
<h2>Liens d'accès au sondage</h2>
<h3>Coté administrateur·ice</h3>
<label for="copy-link-admin">Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage</label>
<input class="btn btn--mini" type="submit" name="copy-link-admin" value="Copier le lien">
<a href="#" class="next">Voir le sondage coté administrateur·ice</a>
<h3>Côté sondé·es</h3>
<label for="copy-link">Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage</label>
<input class="btn btn--mini" type="submit" name="copy-link" value="Copier le lien">
<a href="#" class="next">Voir le sondage</a>
<h3>Recevoir les liens par mail</h3>
<label for="mail">Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :</label>
<input type="email" name="mail">
<input class="btn btn--mini" type="submit" name="send-mail" value="Envoyer les liens du sondage">
</form> </form>

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

@ -1,7 +1,7 @@
<div class="answers"> <div class="answers">
<h1 i18n> <h1 i18n>
Choisir les propositions Choisir les propositions
</h1> </h1>
<p class="subtitle" i18n> <p class="subtitle" i18n>
Vous pouvez utiliser la syntaxe markdown Vous pouvez utiliser la syntaxe markdown
@ -14,9 +14,11 @@
type="text" type="text"
class="answer" class="answer"
[(ngModel)]="answer.text" [(ngModel)]="answer.text"
(keyup.enter)="addAnswer()"
(keyup)="navigateOrDelete($event,i)"
placeholder="réponse" placeholder="réponse"
> >
<button (click)="config.answers.splice(i,1)">X</button> <button class="btn btn--alert" (click)="config.answers.splice(i,1)">X</button>
</li> </li>
</ol> </ol>

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

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core'; import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {BaseComponent} from '../base-page/base.component'; import {BaseComponent} from '../base-page/base.component';
import {ConfigService} from '../../config.service'; import {ConfigService} from '../../config.service';
@ -9,7 +9,7 @@ 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 { export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
private answerList = []; private answerList = [];
@ -24,6 +24,10 @@ export class AnswersComponent extends BaseComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
ngAfterViewInit() {
this.focusOnAnswer(0)
}
trackFunction(index: number, item: any): number { trackFunction(index: number, item: any): number {
return item.id; return item.id;
} }
@ -35,19 +39,30 @@ export class AnswersComponent extends BaseComponent implements OnInit {
text: '' text: ''
}); });
this.cd.detectChanges(); // to refresh the view before focusing on the new input this.cd.detectChanges(); // to refresh the view before focusing on the new input
this.focusOnAnswer(this.config.answers.length - 1)
}
focusOnAnswer(i) {
const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer'); const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
const dom = AnswersDomToFocus[AnswersDomToFocus.length - 1]; const dom = AnswersDomToFocus[i];
if (dom.focus) { if (dom.focus) {
dom.focus(); dom.focus();
} }
if (dom.select) {
dom.select();
}
} }
// add a new answer on the press of ENTER in an input navigateOrDelete(event: KeyboardEvent, i) {
addWhenEnterKey(event) {
console.log('event', event); console.log('event', event);
if (event.keyCode === 13) { if (event.ctrlKey && event.key == "d") {
this.addAnswer(); this.config.answers.splice(i, 1)
}
if (event.key == "ArrowUp" && i > 0) {
this.focusOnAnswer(i - 1);
}
if (event.key == "ArrowDown" && i < this.config.answers.length) {
this.focusOnAnswer(i + 1);
} }
return;
} }
} }

25
src/app/pages/kind/kind.component.scss
View File

@ -1,22 +1,23 @@
@charset "UTF-8"; @charset "UTF-8";
section { section {
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 6px solid #000; border-bottom: 6px solid #000;
} }
+ section {
margin: 0 !important;
}
& + & {
margin-top: 3rem;
}
} }
article { article {
padding: 2rem 0; padding: 2rem 0;
border-top: 3px solid #ffb92c; border-top: 3px solid #ffb92c;
h3 { h3 {
&:not(:first-of-type) { &:not(:first-of-type) {
margin-top: 2rem; margin-top: 2rem;
}
} }
}
} }

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

@ -1,10 +1,31 @@
<h1 i18n> <h1>
Résumé avant validation Récapitulatif
</h1> </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> <section>
<div markdown *ngFor="let questions of config.answers"> <ul>
{{questions.id+1}}. {{questions.text}} <li markdown *ngFor="let questions of config.answers">
</div> {{questions.id + 1}}. {{questions.text}}
<button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button> </li>
</ul>
<button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button>
</section> </section>
<button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button> <button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>
<div class="back">
<a [routerLink]="'/step/visibility'"
class="btn btn--back">
Retour
</a>
</div>

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

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

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

@ -8,12 +8,36 @@ import {ConfigService} from '../../config.service';
styleUrls: ['./visibility.component.scss'] styleUrls: ['./visibility.component.scss']
}) })
export class VisibilityComponent extends BaseComponent implements OnInit { export class VisibilityComponent extends BaseComponent implements OnInit {
showCustomPassword = false;
constructor(public config: ConfigService) { constructor(public config: ConfigService) {
super(config); super(config);
} }
ngOnInit() { ngOnInit() {
this.config.customUrl = this.makeUuid();
this.config.expirationDate = (this.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10);
} }
/**
* generate unique id to have a default url for future poll
*/
makeUuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
/**
* add some days to a date, to compute intervals
* @param days
* @param date
*/
addDaysToDate(days: number, date: Date) {
date = new Date(date.valueOf());
date.setDate(date.getDate() + days);
return date;
};
} }

3
src/app/ui/navigation/navigation.component.html
View File

@ -26,6 +26,9 @@
<a [routerLink]="'/graphic/toto'" i18n> <a [routerLink]="'/graphic/toto'" i18n>
Graphique Graphique
</a> </a>
<a [routerLink]="'/step/admin'" i18n>
Administration
</a>
<a [routerLink]="'/home'" i18n> <a [routerLink]="'/home'" i18n>
Accueil Accueil
</a> </a>

9
src/app/ui/selector/selector.component.html Normal file
View File

@ -0,0 +1,9 @@
<select
class="custom-selector"
name="{{selectorConfig.name}}"
id="{{selectorConfig.id}}"
[(ngModel)]="selectorConfig.selectorNgModel">
<option value="{{item.value}}" selected *ngFor="let item of selectorConfig.listItems">
{{item.label}}
</option>
</select>

0
src/app/calendar/calendar.component.scss → src/app/ui/selector/selector.component.scss
View File

12
src/app/calendar/calendar.component.spec.ts → src/app/ui/selector/selector.component.spec.ts
View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CalendarComponent } from './calendar.component'; import { SelectorComponent } from './selector.component';
describe('CalendarComponent', () => { describe('SelectorComponent', () => {
let component: CalendarComponent; let component: SelectorComponent;
let fixture: ComponentFixture<CalendarComponent>; let fixture: ComponentFixture<SelectorComponent>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ CalendarComponent ] declarations: [ SelectorComponent ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(CalendarComponent); fixture = TestBed.createComponent(SelectorComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

30
src/app/ui/selector/selector.component.ts Normal file
View File

@ -0,0 +1,30 @@
import {Component, Input, OnInit} from '@angular/core';
interface Item {
label: string,
value: string
}
interface SelectorConfig {
label: string,
name: string,
id: string,
selectorNgModel: any,
listItems: Item[]
}
@Component({
selector: 'framadate-selector',
templateUrl: './selector.component.html',
styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit {
@Input() selectorConfig: SelectorConfig;
constructor() {
}
ngOnInit() {
}
}

53
src/assets/i18n/en.json
View File

@ -63,14 +63,55 @@
"links_mail": "Receive links by email" "links_mail": "Receive links by email"
}, },
"visibility": { "visibility": {
"top_txt": "A few settings...",
"title": "Visibility of answers", "title": "Visibility of answers",
"visibility_want": "Je veux que",
"visibility_link": "Ceux avec le lien",
"visibility_nobody": "personne ne",
"visibility_see": "puisse voir les réponses au sondage.",
"votes": "Votes", "votes": "Votes",
"archiving": "Archiving", "votes_possible": "Les réponses possibles seront :",
"access": "Access to the pool" "votes_possible_single": "Uniquement « oui »",
"votes_possible_normal": "« oui » ou « peut-être »",
"votes_possible_full": "« oui » ou « peut-être » ou « non »",
"archiving": "Les personnes sondées pourront voter jusqu’au ",
"archiving_start": "Elles",
"archiving_can": "auront",
"archiving_can_not": "n'auront pas",
"archiving_end": "la possibilité de modifier",
"modfiy_their": "leur vote",
"modfiy_everyone": "tous les votes",
"access": "Accès au sondage",
"access_url": "Les votants pourront y accéder via cette adresse :",
"access_url_key": "URL",
"see_pass": "voir",
"access_instructions": "peut contenir des lettres, chiffres et des tirets",
"access_want": "Je",
"access_want_yes": "souhaite",
"access_want_no": "n'ai pas besoin",
"access_protect": "qu’il soit protégé par un mot de passe.",
"validate_btn": "Créer ce sondage !"
}, },
"pollGraphic":{ "admin": {
"choiceColorblind":"I am", "deletion": "Tout supprimer",
"choiceNotColorblind":"I am not", "deletion_desc": "Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :",
"colorblindText":"colorblind." "deletion_btn": "Supprimer le sondage",
"link": "Liens d’accès au sondage",
"link_admin": "Coté administrateur·ice",
"link_admin_desc": "Pour accéder au sondage et à tous ses paramètres :",
"link_admin_btn": "Voir le sondage coté administrateur·ice",
"copy_link": "Copier le lien",
"polled_people": "Côté sondé·es",
"polled_people_desc": "Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage",
"polled_people_btn": "Voir le sondage",
"email_links": "Recevoir les liens par mail",
"email_links_desc": "Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail",
"email_links_key": "mail",
"email_links_btn": "Envoyer les liens du sondage"
},
"pollGraphic": {
"choiceColorblind": "I am",
"choiceNotColorblind": "I am not",
"colorblindText": "colorblind."
} }
} }

53
src/assets/i18n/fr.json
View File

@ -65,14 +65,55 @@
"links_mail": "Recevoir les liens par e-mail" "links_mail": "Recevoir les liens par e-mail"
}, },
"visibility": { "visibility": {
"top_txt": "Un peu de paramétrage…",
"title": "Visibilité des réponses", "title": "Visibilité des réponses",
"visibility_want": "Je veux que",
"visibility_link": "Tout le monde",
"visibility_nobody": "seulement moi",
"visibility_see": "puisse voir les réponses au sondage.",
"votes": "Votes", "votes": "Votes",
"archiving": "Archivage", "votes_possible": "Les réponses possibles seront :",
"access": "Accès au sondage" "votes_possible_single": "Uniquement « oui »",
"votes_possible_normal": "« oui » ou « peut-être »",
"votes_possible_full": "« oui » ou « peut-être » ou « non »",
"archiving": "Les personnes sondées pourront voter jusqu’au ",
"archiving_start": "Elles",
"archiving_can": "auront",
"archiving_can_not": "n'auront pas",
"archiving_end": "la possibilité de modifier",
"modfiy_their": "leur vote",
"modfiy_everyone": "tous les votes",
"access": "Accès au sondage",
"access_url": "Les votants pourront y accéder via cette adresse :",
"access_url_key": "URL",
"see_pass": "voir",
"access_instructions": "peut contenir des lettres, chiffres et des tirets",
"access_want": "Je",
"access_want_yes": "souhaite",
"access_want_no": "n'ai pas besoin",
"access_protect": "qu’il soit protégé par un mot de passe.",
"validate_btn": "Créer ce sondage !"
}, },
"pollGraphic":{ "admin": {
"choiceColorblind":"Je suis", "deletion": "Tout supprimer",
"choiceNotColorblind":"Je ne suis pas", "deletion_desc": "Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :",
"colorblindText":"daltonien." "deletion_btn": "Supprimer le sondage",
"link": "Liens d’accès au sondage",
"link_admin": "Coté administrateur·ice",
"link_admin_desc": "Pour accéder au sondage et à tous ses paramètres :",
"link_admin_btn": "Voir le sondage coté administrateur·ice",
"copy_link": "Copier le lien",
"polled_people": "Côté sondé·es",
"polled_people_desc": "Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage",
"polled_people_btn": "Voir le sondage",
"email_links": "Recevoir les liens par mail",
"email_links_desc": "Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail",
"email_links_key": "mail",
"email_links_btn": "Envoyer les liens du sondage"
},
"pollGraphic": {
"choiceColorblind": "Je suis",
"choiceNotColorblind": "Je ne suis pas",
"colorblindText": "daltonien."
} }
} }

3
src/assets/img/icone-langue.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
<path fill="#000" fill-rule="nonzero" d="M10.628 14.218c-.024.086-.605-.197-.759-.259a15.58 15.58 0 0 1-1.031-.602c-.178-.123-.854-.701-.937-.738a22.327 22.327 0 0 1-1.588 2.226c-.214.258-.854 1.095-1.245 1.353-.06.037-.403.074-.45.05.19-.148.735-.85.972-1.132.296-.357 1.707-2.399 1.944-2.866.249-.468.996-2.017 1.031-2.165-.118-.012-1.055.32-1.304.406-.237.074-.889.234-.936.27-.048.05-.012.197-.036.246-.024.05-.237.16-.367.185-.119.037-.392.05-.558 0-.154-.037-.296-.197-.332-.258 0 0-.047-.074-.059-.283.142-.05.38-.062.64-.136.261-.073.901-.27 1.245-.393.344-.123 1.008-.381 1.21-.43.213-.038.746-.407 1.03-.505.285-.098.487-.221.498-.16.012.062 0 .332-.011.406-.012.062-.581 1.218-.664 1.402-.048.099-.38.75-.913 1.612.19.086.593.258.759.344a73.66 73.66 0 0 0 1.683.738c.071.025.201.59.178.689zM8.198 8.24c.035.21-.024.295-.048.344-.118.234-.415.394-.593.468a2.098 2.098 0 0 1-.71.147c-.107-.012-.32-.049-.582-.32-.142-.16-.249-.59-.201-.54.047.049.391.098.545.06.154-.036.522-.147.688-.196.178-.061.533-.16.652-.172.118 0 .213.05.249.209zm8.274 1.587l.747 2.792-1.648-.517.901-2.275zm-13.135 9.84l8.227-2.854V4.12L3.337 6.985v12.682zm14.712-3.9l1.209.382-2.146-8.081-1.185-.382-2.56 6.593 1.208.382.534-1.353 2.501.8.439 1.66zM12.086 3.936l6.792 2.263V1.524l-6.792 2.41zm3.687 16.273l1.873.16-.64 1.968-.475-.812c-.96.64-2.145 1.132-3.272 1.328-.343.074-.735.148-1.078.148h-.996c-1.257 0-3.545-.775-4.54-1.525-.071-.062-.095-.11-.095-.197 0-.135.095-.234.213-.234.107 0 .664.357.818.43 1.067.554 2.56 1.059 3.758 1.059 1.482 0 2.49-.197 3.84-.8.392-.184.736-.418 1.103-.627l-.51-.898zm5.31-13.272v13.272c-9.163-3.026-9.175-3.026-9.175-3.026-.19.086-8.69 3.063-8.808 3.063a.229.229 0 0 1-.213-.16c0-.012-.012-.025-.012-.037V6.788c.012-.036.024-.098.047-.122.072-.087.166-.111.238-.136.035-.012.758-.258 1.766-.615V1.192l6.615 2.435c.083-.024 7.456-2.669 7.563-2.669.13 0 .237.099.237.259v5.141l1.742.578z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
src/assets/img/icone-menu.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18" viewBox="0 0 26 18">
<path fill="#000" fill-rule="nonzero" d="M23.267 2H2.733C2.328 2 2 1.552 2 1s.328-1 .733-1h20.534c.405 0 .733.448.733 1s-.328 1-.733 1zm0 14c.405 0 .733.448.733 1s-.328 1-.733 1H2.733C2.328 18 2 17.552 2 17s.328-1 .733-1h20.534zm0-8c.405 0 .733.448.733 1s-.328 1-.733 1H2.733C2.328 10 2 9.552 2 9s.328-1 .733-1h20.534z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 417 B

14
src/assets/scss/atoms/_buttons.scss
View File

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
@mixin btnTheme ($color) { @mixin btnTheme($color) {
background-color: $color; background-color: $color;
color: $white; color: $white;
&.btn--outline { &.btn--outline {
@ -12,6 +12,7 @@
&:hover, &:hover,
&:active { &:active {
background-color: rgba($color, .8); background-color: rgba($color, .8);
&.btn--outline { &.btn--outline {
background-color: rgba($color, .2); background-color: rgba($color, .2);
} }
@ -43,9 +44,16 @@
display: block; display: block;
min-width: 100%; min-width: 100%;
} }
&--mini{
background-color: $mini-button-color; &--mini {
background-color: $mini-button-color;
} }
&--link {
min-width: 219.3px;
margin: 0 auto;
display: block;
}
} }

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

@ -1,63 +1,78 @@
@charset "UTF-8"; @charset "UTF-8";
input[type="date"]::after{
content:"au format JJ/MM/AAAA"; .input-lg {
display: inline-block; display: block;
position: relative; width: 100%;
} }
select {
margin-right: 1ch;
}
input {
margin-right: 1ch;
&[type="date"]::after {
content: "au format JJ/MM/AAAA";
display: inline-block;
position: relative;
}
}
input, input,
select, select,
textarea { textarea {
padding: 1rem; padding: 1rem;
border: 1px solid $secondary_color; border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color; border-bottom: 3px solid $primary_color;
} }
input, input,
select { select {
display: inline-block; display: inline-block;
margin-bottom:10px; margin-bottom: 10px;
margin-left:5px; margin-left: 5px;
} }
textarea { textarea {
width: 100%; width: 100%;
border-left: 3px solid $primary_color; border-left: 3px solid $primary_color;
} }
select, select,
option { option {
// delete default display // delete default display
-webkit-appearance : none; -webkit-appearance: none;
-moz-appearance : none; -moz-appearance: none;
background: none; background: none;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
background-image: url("./assets/img/fleche_bas.svg"); background-image: url("./assets/img/fleche_bas.svg");
padding-right:1.5rem; padding-right: 1.5rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 9px 8px; background-size: 9px 8px;
background-position: right 1rem center; background-position: right 1rem center;
background-clip: border-box; background-clip: border-box;
// TODO -> check what angular can do // TODO -> check what angular can do
} }
label { label {
&[for] { &[for] {
cursor: pointer; cursor: pointer;
} }
&:not([for]) { &:not([for]) {
color: $dusty-orange; color: $dusty-orange;
&:before { &:before {
content: "ce label n'a pas d'attribut for, c'est mal."; content: "ce label n'a pas d'attribut for, c'est mal.";
color: $violet; color: $violet;
}
} }
}
} }

13
src/assets/scss/atoms/_headings.scss
View File

@ -2,14 +2,15 @@
h1, h1,
h2 { h2 {
font-family: $title_font; font-family: $title_font;
} }
h1 { h1 {
font-size: 2rem; font-size: 2.5rem;
font-weight: 600; font-weight: 600;
} }
h1::after{
background-color: $primary_color; h1::after {
height:2px; background-color: $primary_color;
height: 2px;
} }

6
src/assets/scss/atoms/_section.scss
View File

@ -1,7 +1 @@
@charset "UTF-8"; @charset "UTF-8";
section {
& + & {
margin-top: 6rem;
}
}

6
src/assets/scss/useful_classes.scss
View File

@ -3,4 +3,8 @@
.align-right { .align-right {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.pull-right {
float: right;
}