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

style on hours main

Browse Source
This commit is contained in:
Tykayn 2022-03-01 11:49:42 +01:00 committed by tykayn
parent 6f49099cdf
commit 0c8cb9248e
4 changed files with 92 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -3,7 +3,7 @@
<div class="min-height"> <div class="min-height">
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day"> <div class="custom-day-time-slices" *ngIf="1">
<h1 class="title is-2"> <h1 class="title is-2">
{{ 'hours.title' | translate }} {{ 'hours.title' | translate }}
</h1> </h1>
@ -20,22 +20,23 @@
<label class="pull-left" for="dateChoices_{{ id }}"> <label class="pull-left" for="dateChoices_{{ id }}">
{{ 'hours.element' | translate }} {{ id + 1 }} {{ 'hours.element' | translate }} {{ id + 1 }}
</label> </label>
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
<button <button
[attr.aria-label]="'choices.delete' | translate" [attr.aria-label]="'choices.delete' | translate"
class="button is-full has-no-border delete-hour pull-right" class="has-no-border delete-hour"
(click)="dayChoice.timeSlices.splice(id, 1)" (click)="dayChoice.timeSlices.splice(id, 1)"
> >
{{ 'choices.delete' | translate }} <!-- {{ 'choices.delete' | translate }}-->
<img src="assets/icons/trash-2.svg" class="icon" /> <img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
</button> </button>
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
</div> </div>
<div class="add-time-choice"> <div class="add-time-choice">
<button <button
class="has-text-primary button has-no-border is-fullwidth has-text-left" class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
(click)="addChoiceForDay(dayChoice)" (click)="addChoiceForDay(dayChoice)"
> >
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" /> <!-- <img class="icon is-filtered-icon-primary" aria-hidden="true" src="assets/icons/plus-circle.svg" />-->
{{ 'hours.add' | translate }} {{ 'hours.add' | translate }}
</button> </button>
</div> </div>
@ -150,7 +151,7 @@
</ng-template> </ng-template>
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<div class="columns"> <div class="columns">
<div class="column has-no-padding"> <div class="column has-no-padding time-slice-list-of-a-day">
<button <button
class="button is-primary is-fullwidth pull-right has-text-white" class="button is-primary is-fullwidth pull-right has-text-white"
(click)="applyTimeSlicesToDateChoices()" (click)="applyTimeSlicesToDateChoices()"

50
src/app/features/administration/form/steps/step-four/step-four.component.scss
View File

@ -1,22 +1,36 @@
@import '../../../../../../styles/variables'; @import '../../../../../../styles/variables';
@import '../../../../../../styles/dev-utilities/helpers'; @import '../../../../../../styles/dev-utilities/helpers';
.time-slice-list-of-a-day { .custom-day-time-slices {
.heading-day-choice {
font-size: 1.25rem;
line-height: 1.25rem;
color: $d-black;
font-weight: 700;
margin-bottom: 1rem;
}
.time-slice-list-of-a-day {
label { label {
line-height: 2.25rem; line-height: 2.25rem;
margin-bottom: 0;
} }
}
.button { input {
width: calc(100% - 2rem);
margin-bottom: 1rem;
}
.button {
color: $primary_color; color: $primary_color;
.icon { .icon {
margin-right: 1rem; margin-right: 1rem;
fill: $primary_color; fill: $primary_color;
} }
} }
#close_dialog { #close_dialog {
border: 0; border: 0;
color: $primary !important; color: $primary !important;
@ -25,24 +39,26 @@
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
} }
} }
.heading-day-choice { .add-time-choice {
font-size: 1.25rem;
line-height: 1.25rem;
color: $d-black;
font-weight: 700;
margin-bottom: 1rem;
}
.add-time-choice {
margin-top: 0.5rem; margin-top: 0.5rem;
.button { .button {
justify-content: inherit; justify-content: inherit;
background: transparent; background: transparent;
} }
} }
.delete-hour {
.delete-hour {
background: transparent; background: transparent;
font-size: 0.8rem;
width: 2rem;
padding: 0;
float: right;
margin-top: -3rem;
margin-right: 0;
margin-bottom: 0;
}
}
} }

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

@ -22,7 +22,7 @@ export class StepFourComponent implements OnInit {
form: any; form: any;
showSameTimeSlices: boolean = false; showSameTimeSlices: boolean = false;
timeSlicesProposals: TimeSlices[] = timeSlicesProposals; timeSlicesProposals: TimeSlices[] = timeSlicesProposals;
display_same_hours_dialog: boolean = false; display_same_hours_dialog: boolean = true;
constructor( constructor(
private dateUtilitiesService: DateUtilitiesService, private dateUtilitiesService: DateUtilitiesService,

23
src/styles/dev-utilities/_helpers.scss
View File

@ -91,3 +91,26 @@
.has-no-padding { .has-no-padding {
padding: 0; padding: 0;
} }
.is-filtered-icon-primary {
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
}
.is-large-button {
width: 100%;
display: block;
}
.has-no-padd-left {
padding-left: 0;
}
.has-background-icon-left {
padding-left: 33px;
}
// icone bg
.has-background-transparent {
background-color: transparent;
}
.has-background-plus {
background: url('/assets/icons/plus-circle.svg') no-repeat left center;
//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
}