fix buttons colours and manage a bit more the date form

This commit is contained in:
Baptiste Lemoine 2020-01-23 17:36:56 +01:00
parent 2e6723a1f1
commit f056b0d79a
6 changed files with 78 additions and 27 deletions

View File

@ -23,14 +23,18 @@ export const defaultAnswers = [{
id: 0,
text: 'réponse de démo 1',
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
},
{
id: 1,
text: 'réponse 2',
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
},
{
id: 2,
text: 'la réponse D',
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
}];

View File

@ -23,29 +23,33 @@
<button
(click)="addDate()"
class="btn btn-primary"
class="btn btn--primary"
id="add_date_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add"|translate}}
</button >
<button
(click)="showDateInterval = !showDateInterval "
[ngClass]="{active: showDateInterval}"
class="btn btn-primary"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class='fa fa-clock-o' ></i >
{{"dates.add_interval"|translate}}
</button >
<button
(click)="emptyAll()"
class="btn btn-warning"
class="btn btn--warning"
id="empty_button"
>{{"dates.empty"|translate}}
>
<i class='fa fa-trash' ></i >
{{"dates.empty"|translate}}
</button >
<section
*ngIf="showDateInterval"
class="date-interval" >
class="date-interval " >
<!-- TODO à mettre en popup-->
<hr >
<h2 > {{"dates.add_interval"|translate}}</h2 >
@ -60,31 +64,38 @@
(change)="countDays()"
[(ngModel)]="endDateInterval"
type="date" >
<br >
</p >
<button
(click)="addIntervalOfDates()"
class="btn btn-block" >
class="btn btn-block btn--primary" >
<i class='fa fa-plus' ></i >
{{"dates.interval_button"|translate}}
{{intervalDays}}
{{"dates.interval_button_dates"|translate}}
</button >
<hr >
</section >
<div class="dates-list" >
<div class="dates-list " >
<div class='title' >
<span class="count-dates" >
{{config.timeList.length}}
</span >
<span class="count-dates-txt" >
<span class="count-dates-txt " >
{{"dates.count_time"|translate}}
(pour chaque jour)
</span >
<button
(click)="addTime()"
*ngIf="config.allowSeveralHours=='false'"
class="btn btn-primary pull-right"
id="add_time_button"
>
{{"dates.add_time"|translate}}
</button >
<button
(click)="addTime()"
*ngIf="config.allowSeveralHours=='false'"
class="btn btn--primary pull-right"
id="add_time_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add_time"|translate}}
</button >
</div >
<div
*ngIf="'false'==config.allowSeveralHours"
@ -94,19 +105,24 @@
*ngFor="let choice of config.timeList; index as id"
class="time-choice"
>
<label for='timeChoices_{{id}}' >
<i class='fa fa-clock-o' ></i >
</label >
<input
[(ngModel)]="choice.literal"
name="timeChoices_{{id}}"
type="name"
id='timeChoices_{{id}}'
>
<button
(click)="config.timeList.splice(id, 1)"
class="btn btn-warning" >X
class="btn btn-warning" ><i class="fa fa-times" ></i >
</button >
</div >
</div >
<hr >
<span class="count-dates" >
<span class="count-dates title" >
{{config.dateList.length}}
</span >
<span >
@ -121,15 +137,19 @@
name="dateChoices_{{id}}"
type="date"
>
<pre class='debug padded warning' >
choice.literal :
{{choice.literal|json}}
</pre >
<button
(click)="config.dateList.splice(id, 1)"
class="btn btn-warning"
>X
><i class="fa fa-times" ></i >
</button >
<button
(click)="addTimeToDate(choice, id)"
*ngIf="config.allowSeveralHours=='true'"
class="btn btn-primary"
class="btn btn--primary"
>
{{"dates.add_time"|translate}}
</button >
@ -149,7 +169,7 @@
<button
(click)="choice.timeList.splice(idTime, 1)"
class="btn btn-warning"
>X
><i class="fa fa-times" ></i >
</button >
</div >
</div >

View File

@ -2,10 +2,20 @@
padding-left: 1em;
}
.date-interval {
padding: 1em;
margin-bottom: 1em;
}
.title {
font-size: 1.5rem;
}
:host {
input, button {
+ button {
margin-left: 1em;
}
}
}

View File

@ -2,6 +2,7 @@ import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {ConfigService} from '../../services/config.service';
import {BaseComponent} from '../base-page/base.component';
import {DOCUMENT} from '@angular/common';
import {MessageService} from "primeng/api";
@Component({
selector: 'framadate-dates',
@ -17,6 +18,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
constructor(public config: ConfigService,
private cd: ChangeDetectorRef,
private messageService: MessageService,
@Inject(DOCUMENT) private document: any
) {
super(config);
@ -106,6 +108,12 @@ export class DatesComponent extends BaseComponent implements OnInit {
this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
this.showDateInterval = false;
this.messageService.add({
severity: 'success',
summary: 'Dates ajoutées',
detail: `les dates ont été ajoutées aux réponses possibles`
});
}
/**

View File

@ -108,7 +108,7 @@ export class ConfigService extends PollConfig {
},
title: this.title,
description: this.description,
type: this.pollType,
pollType: this.pollType,
visibility: this.visibility,
voteChoices: this.voteChoices,
allowSeveralHours: this.allowSeveralHours,

View File

@ -18,6 +18,7 @@
}
}
}
.clickable {
cursor: pointer;
}
@ -34,17 +35,25 @@
&--primary {
@include btnTheme($primary_color);
}
&--semi-bold {
font-weight: 600;
}
&--black-text {
color:black;
}
&--purple {
background-color:$pale-purple;
color: black;
}
&--alert {
&--purple {
background-color: $pale-purple;
}
&--warning {
@include btnTheme($dusty-orange);
}
&--alert,
&--danger {
@include btnTheme($red);
}