forked from tykayn/funky-framadate-front
hop
This commit is contained in:
tykayn
parent
766ac2ad98
commit
f8e8958b68
@ -2,15 +2,16 @@
|
||||
<div
|
||||
class="columns days-list"
|
||||
cdkDropList
|
||||
[ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }"
|
||||
[cdkDropListData]="dateChoices"
|
||||
(cdkDropListDropped)="dropDayItem($event)"
|
||||
>
|
||||
<div class="column">
|
||||
<div
|
||||
*ngFor="let choice of dateChoices; index as id"
|
||||
class="date-choice padded"
|
||||
class="date-choice"
|
||||
cdkDrag
|
||||
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
|
||||
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }"
|
||||
>
|
||||
<!-- <span class="button is-default">-->
|
||||
<!-- <i class="icon fa fa-arrows-v"></i>-->
|
||||
@ -18,15 +19,12 @@
|
||||
<!-- {{ timeSlice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="top">
|
||||
<label class="pull-left" for="dateChoices_{{ id }}">
|
||||
Date {{ id + 1 }}
|
||||
Date {{ id + 1 }} ( weekend : {{ isWeekendDay(choice.date_input) }} )
|
||||
<!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
|
||||
</label>
|
||||
<span class="format-helper pull-right">JJ/MM/AAAA</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
[(ngModel)]="choice.date_input"
|
||||
@ -35,7 +33,9 @@
|
||||
id="dateChoices_{{ id }}"
|
||||
type="date"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="bottom">
|
||||
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
|
||||
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
|
||||
Supprimer la date
|
||||
@ -53,9 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="add_date">
|
||||
<!-- ajouter une date-->
|
||||
<button class="button is-primary" (click)="addChoice()">
|
||||
<i class="fa fa-plus"></i>
|
||||
@ -63,4 +61,5 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,12 +3,27 @@
|
||||
.day-list-container {
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.bottom,
|
||||
.top {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.day-weekend {
|
||||
background: #dccfed;
|
||||
}
|
||||
|
||||
.button {
|
||||
min-width: 9ch;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@ -38,6 +53,7 @@
|
||||
input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input,
|
||||
.button {
|
||||
width: 100%;
|
||||
@ -45,25 +61,29 @@
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0.5em -1em;
|
||||
background: $rules;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//&.day-weekend {
|
||||
// background: mix($legend_color_2, $grey-lighter);
|
||||
//}
|
||||
.colored-weekend-days {
|
||||
.date-choice {
|
||||
&.day-weekend {
|
||||
background: #b1a1d5;
|
||||
}
|
||||
|
||||
//&:nth-child(odd) {
|
||||
// background: $grey-lighter;
|
||||
//
|
||||
// &.day-weekend {
|
||||
// background: mix($d-neutral, $grey-lighter);
|
||||
// }
|
||||
//}
|
||||
&:nth-of-type(odd) {
|
||||
background: #9880d5;
|
||||
&.day-weekend {
|
||||
background: #8e72d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-choice-item {
|
||||
width: 75%;
|
||||
border-color: $border-color !important;
|
||||
}
|
||||
|
||||
.button .fa {
|
||||
@ -76,11 +96,13 @@
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
margin-right: 0;
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
float: left;
|
||||
color: $primary_color;
|
||||
margin: 0;
|
||||
margin-right: 1rem;
|
||||
height: 1.25rem;
|
||||
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
|
||||
@ -105,4 +127,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.add_date {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shor
|
||||
import { DateChoice } from '../../../../../../core/models/dateChoice.model';
|
||||
import { PollService } from '../../../../../../core/services/poll.service';
|
||||
import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
@Component({
|
||||
selector: 'app-day-list',
|
||||
templateUrl: './day-list.component.html',
|
||||
@ -23,6 +24,7 @@ export class DayListComponent {
|
||||
public hasSeveralHours: boolean;
|
||||
timeList: any;
|
||||
display = false;
|
||||
public environment = environment;
|
||||
|
||||
constructor(
|
||||
public dialog: MatDialog,
|
||||
@ -164,9 +166,12 @@ export class DayListComponent {
|
||||
}
|
||||
}
|
||||
|
||||
isWeekendDay(date_object: Date) {
|
||||
isWeekendDay(date_input: string) {
|
||||
let date_object = new Date(Date.parse(date_input));
|
||||
console.log('date_object', date_object);
|
||||
if (date_object) {
|
||||
const day = date_object.getDay();
|
||||
console.log('day', day);
|
||||
return day === 6 || day === 0;
|
||||
}
|
||||
return false;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="contained-in-main-column">
|
||||
<button
|
||||
*ngIf="display_previous_button"
|
||||
class="button button-previous is-secondary pull-left"
|
||||
class="button-previous is-secondary pull-left"
|
||||
[routerLink]="['/administration/step/' + previous_step_number]"
|
||||
>
|
||||
{{ 'nav.previous' | translate }}
|
||||
@ -10,17 +10,17 @@
|
||||
|
||||
<button
|
||||
*ngIf="display_next_button"
|
||||
class="button button-next pull-right"
|
||||
class="button-next pull-right"
|
||||
[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
|
||||
[routerLink]="['/administration/step/' + next_step_number]"
|
||||
(click)="runNextAction()"
|
||||
>
|
||||
<span *ngIf="is_finish_step">
|
||||
{{ 'nav.save' | translate }}
|
||||
</span>
|
||||
<span *ngIf="!is_finish_step">
|
||||
<b *ngIf="!is_finish_step">
|
||||
{{ 'nav.next' | translate }}
|
||||
</span>
|
||||
</b>
|
||||
<b *ngIf="is_finish_step">
|
||||
{{ 'nav.save' | translate }}
|
||||
</b>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,6 +31,7 @@ export const environment = {
|
||||
display_header_create_button: false,
|
||||
display_menu_creation: false,
|
||||
display_routes: false, // demo paths to test polls
|
||||
enable_colored_weekend_days: false, // color differently the weekend days
|
||||
expiresDaysDelay: 60,
|
||||
frontDomain: 'http://127.0.0.1:4200',
|
||||
interval_days_default: 7,
|
||||
|
||||
@ -12,7 +12,7 @@ input.is-hovered,
|
||||
select.is-hovered,
|
||||
.is-hovered.textarea,
|
||||
.select select.is-hovered {
|
||||
border-color: $font_color !important;
|
||||
border-color: $input-border-color !important;
|
||||
}
|
||||
|
||||
app-step-one,
|
||||
@ -53,7 +53,8 @@ select,
|
||||
.select {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.25rem;
|
||||
border: solid 1px $font_color;
|
||||
border: solid 1px $input-border-color !important;
|
||||
border-radius: 4px;
|
||||
max-width: 90vw !important;
|
||||
@extend .clickable;
|
||||
&:focus {
|
||||
@ -89,6 +90,11 @@ textarea {
|
||||
overflow-x: auto;
|
||||
@extend .clickable;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
height: auto;
|
||||
}
|
||||
.button {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -88,7 +88,8 @@ a span.ui-steps-number {
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 10px 30px;
|
||||
height: auto;
|
||||
}
|
||||
.button {
|
||||
&.is-secondary {
|
||||
|
||||
@ -27,9 +27,10 @@ $d-primary-intense: #3e3882; // bleu 800
|
||||
$d-blue-700: #4f47af; // bleu 700
|
||||
$d-primary: #6359cf; // bleu 600
|
||||
$d-grey: #e3e3ea;
|
||||
$d-blue30: #f6f5fd; // bleu 300
|
||||
$d-blue30: #d6d2e0; // bleu 300
|
||||
$d-rule: #e2e0fa; // bleu 100
|
||||
$d-neutral: #767486;
|
||||
$d-neutral: #b5b5c6;
|
||||
$d-border: #4e4c59;
|
||||
$d-alt: #a9607f;
|
||||
|
||||
$d-info: #ecf4ff;
|
||||
@ -56,6 +57,7 @@ $choice_select_border_color: $d-info;
|
||||
$hover-color: $d-neutral;
|
||||
$rules: $d-rule;
|
||||
$border-color: $d-neutral;
|
||||
$input-border-color: $d-border;
|
||||
$grey-dark: $d-primary;
|
||||
$grey-lighter: $beige-light;
|
||||
$clicked-color: $d-primary;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user