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

select dates text integration colors

This commit is contained in:
Tykayn 2021-11-18 11:22:44 +01:00 committed by tykayn
parent 56397d5a2c
commit f26a6d7826
6 changed files with 162 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/features/administration/form/date/list/day/day-list.component.html
View File

@ -2,7 +2,8 @@
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<!-- ajouter une date--> <!-- ajouter une date-->
<button class="btn btn--primary" (click)="addChoice()"> <button class="button is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
{{ 'dates.add' | translate }} {{ 'dates.add' | translate }}
</button> </button>
</div> </div>
@ -21,12 +22,23 @@
cdkDrag cdkDrag
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
> >
<span class="button is-default"> <!-- <span class="button is-default">-->
<i class="icon fa fa-arrows-v"></i> <!-- <i class="icon fa fa-arrows-v"></i>-->
<span *ngIf="choice.date_object"> <!-- <span *ngIf="choice.date_object">-->
{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }} <!-- {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
</span> <!-- </span>-->
</span> <!-- </span>-->
<div class="columns">
<div class="column">
<label for="dateChoices_{{ id }}">
Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
</label>
</div>
<div class="column has-text-right">
<span class="format-helper">JJ/MM/AAAA</span>
</div>
</div>
<input <input
[(ngModel)]="choice.date_input" [(ngModel)]="choice.date_input"
class="date-choice-item" class="date-choice-item"
@ -34,16 +46,16 @@
id="dateChoices_{{ id }}" id="dateChoices_{{ id }}"
type="date" type="date"
/> />
<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning"> <hr />
<i class="fa fa-times" aria-hidden="true"></i> <div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
</button> <i class="fa fa-trash-o" aria-hidden="true"></i>
<br /> Supprimer la date
</div>
<div *ngIf="hasSeveralHours" class="several-times"> <div *ngIf="hasSeveralHours" class="several-times">
<br /> <br />
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list> <app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
<div class="text-right"> <div class="text-right">
<button (click)="addTimeToDate(choice, id)" class="btn btn--primary"> <button (click)="addTimeToDate(choice, id)" class="button is-primary">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>

54
src/app/features/administration/form/date/list/day/day-list.component.scss
View File

@ -1,26 +1,70 @@
@import '../../../../../../../styles/variables';
.day-weekend { .day-weekend {
background: #dccfed; background: #dccfed;
} }
.button { .button {
min-width: 9ch; min-width: 9ch;
} }
.icon { .icon {
margin-right: 1ch; margin-right: 1ch;
margin-left: 1ch; margin-left: 1ch;
display: inline-block; display: inline-block;
} }
.several-times { .several-times {
padding-left: 2em; padding-left: 2em;
width: 96.5%; width: 96.5%;
} }
.date-choice { .date-choice {
&:nth-child(odd) { margin-bottom: 0.5em;
background: #fbf8ff; border-radius: 0.25em;
&.day-weekend { background: $bg-grey;
background: #d7cae9;
} .columns {
margin-bottom: 0;
} }
label {
font-weight: 600;
}
input,
.button {
width: 100%;
display: block;
}
hr {
margin: 0.5em -1em;
background: $rules;
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
} }
.date-choice-item { .date-choice-item {
width: 75%; width: 75%;
} }
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $secondary_color !important;
.fa {
color: $secondary_color !important;
}
}

2
src/app/features/administration/form/steps/step-three/step-three.component.ts
View File

@ -12,7 +12,7 @@ export class StepThreeComponent implements OnInit {
step_max: any; step_max: any;
@Input() @Input()
form: any; form: any;
public mode_calendar = true; public mode_calendar = false;
constructor(public pollService: PollService) { constructor(public pollService: PollService) {
this.pollService.step_current = 3; this.pollService.step_current = 3;

80
src/styles/partials/_datepicker.scss Normal file
View File

@ -0,0 +1,80 @@
// calendar primeng
.p-datepicker {
border: solid 1px $logo_color;
padding: 0.5em;
margin: 1em auto;
.p-datepicker-title,
.p-datepicker-calendar thead tr th span {
color: $secondary_color !important;
text-align: center;
width: 100%;
display: block;
}
p-button,
button {
border: solid 1px $secondary_color !important;
color: $secondary_color !important;
}
.p-datepicker-buttonbar {
margin-top: 0.5em;
}
.p-datepicker-month {
margin-right: 1em;
}
.p-datepicker-weeknumber span {
border-right: 1px solid $secondary_color;
}
.p-datepicker-today span {
font-weight: bold;
border: solid 3px $secondary_color !important;
background: $white;
}
.p-datepicker-calendar td span {
padding: 1.5em 0.5em;
width: 3.5em;
transition: all ease 0.5s;
background: $white;
border: solid 1px $secondary_color;
color: $secondary_color;
&:hover {
background: mix($white, $secondary_color);
color: $white;
transition: all ease 0.2s;
}
}
table td > span {
border-radius: 0.25em;
}
.p-highlight {
background: $secondary_color !important;
color: $white !important;
}
.p-disabled {
background: $d-grey;
color: $grey;
}
.p-datepicker-other-month {
color: white;
}
// weekend days
tr > td {
&:nth-of-type(6),
&:nth-of-type(7) {
//border-left: 1px solid $border-color;
background: $bg-grey;
}
}
}

78
src/styles/partials/_forms.scss
View File

@ -1,4 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
@import 'datepicker';
.input:hover, .input:hover,
input:hover, input:hover,
select:hover, select:hover,
@ -265,81 +268,6 @@ mat-checkbox {
padding: 1em; padding: 1em;
} }
// calendar primeng
.p-datepicker {
border: solid 1px $logo_color;
padding: 0.5em;
margin: 1em auto;
.p-datepicker-title,
.p-datepicker-calendar thead tr th span {
color: $secondary_color !important;
text-align: center;
width: 100%;
display: block;
}
p-button,
button {
border: solid 1px $secondary_color !important;
color: $secondary_color !important;
}
.p-datepicker-buttonbar {
margin-top: 0.5em;
}
.p-datepicker-month {
margin-right: 1em;
}
.p-datepicker-weeknumber span {
border-right: 1px solid $secondary_color;
}
.p-datepicker-today span {
font-weight: bold;
border: solid 3px $secondary_color !important;
background: $white;
}
.p-datepicker-calendar td span {
padding: 1.5em 0.5em;
width: 3.5em;
transition: all ease 0.5s;
background: $white;
border: solid 1px $secondary_color;
color: $secondary_color;
&:hover {
background: mix($white, $secondary_color);
color: $white;
transition: all ease 0.2s;
}
}
table td > span {
border-radius: 0.25em;
}
.p-highlight {
background: $secondary_color !important;
color: $white !important;
}
.p-disabled {
background: $d-grey;
color: $grey;
}
.p-datepicker-other-month {
color: white;
}
// weekend days
tr > td {
&:nth-of-type(6),
&:nth-of-type(7) {
//border-left: 1px solid $border-color;
background: $grey-lighter;
}
}
}
.advanced-config { .advanced-config {
.box { .box {
background: $light; background: $light;

5
src/styles/variables.scss
View File

@ -25,7 +25,8 @@ $beige-lighter: #eff0eb;
$d-primary: #3e3882; // bleu 800 $d-primary: #3e3882; // bleu 800
$d-primary-intense: #6359cf; // bleu 600 $d-primary-intense: #6359cf; // bleu 600
$d-grey: #f6f5fd; $d-grey: #f6f5fd; // bleu 300
$d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486; $d-neutral: #767486;
$d-alt: #a9607f; $d-alt: #a9607f;
@ -42,6 +43,7 @@ $d-error-text: #d51b38;
$primary_color: $d-primary; $primary_color: $d-primary;
$primary: $d-primary; $primary: $d-primary;
$secondary_color: $d-primary-intense; $secondary_color: $d-primary-intense;
$bg-grey: $d-grey;
$font_color: $black; $font_color: $black;
$logo_color: $d-primary; $logo_color: $d-primary;
$logo_color_2: $d-primary-intense; $logo_color_2: $d-primary-intense;
@ -49,6 +51,7 @@ $legend_color: $d-info-text;
$legend_color_2: $d-info; $legend_color_2: $d-info;
$choice_select_border_color: $d-info; $choice_select_border_color: $d-info;
$hover-color: $d-neutral; $hover-color: $d-neutral;
$rules: $d-rule;
$border-color: $d-neutral; $border-color: $d-neutral;
$grey-dark: $d-primary; $grey-dark: $d-primary;
$grey-lighter: $beige-light; $grey-lighter: $beige-light;