forked from tykayn/funky-framadate-front
style participation page, button colors and placeholder icons bg, cancel modal content
This commit is contained in:
tykayn
parent
0319d75b40
commit
e09429d0d8
@ -17,6 +17,7 @@ import { EditComponent } from './edit/edit.component';
|
||||
import { ResultsRoundedComponent } from './results-rounded/results-rounded.component';
|
||||
import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component';
|
||||
import { ChoiceTableComponent } from './choice-table/choice-table.component';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -39,6 +40,7 @@ import { ChoiceTableComponent } from './choice-table/choice-table.component';
|
||||
SharedModule,
|
||||
TranslateModule.forChild({ extend: true }),
|
||||
AdministrationModule,
|
||||
DialogModule,
|
||||
],
|
||||
})
|
||||
export class ConsultationModule {}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<!-- {{"calendar_widget.dayNames.Thursday" | translate}}-->
|
||||
</div>
|
||||
<div class="choice-subset" *ngFor="let choice of group_choice.choices">
|
||||
<div class="choice-label">
|
||||
<div class="choice-label title is-5">
|
||||
{{ choice.name }}
|
||||
</div>
|
||||
|
||||
@ -48,6 +48,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="vote_button_popup" class="button is-secondary" (click)="display_vote_dialog = true">
|
||||
{{ 'SENTENCES.Cancel' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-poll" *ngIf="!poll">
|
||||
@ -56,13 +59,13 @@
|
||||
<div class="bottom-step-buttons" *ngIf="poll">
|
||||
<div class="contained-in-main-column">
|
||||
<button
|
||||
class="button is-default pull-left"
|
||||
class="button is-secondary pull-left"
|
||||
[routerLink]="['/poll/' + pollService._poll.getValue().custom_url + '/consultation']"
|
||||
>
|
||||
{{ 'SENTENCES.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
class="button-next is-primary pull-right"
|
||||
class="button-next button is-primary pull-right"
|
||||
[routerLink]="['/poll/' + poll.custom_url + '/consultation/vote/user-infos']"
|
||||
>
|
||||
<b>
|
||||
@ -71,3 +74,51 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p-dialog
|
||||
[modal]="true"
|
||||
[(visible)]="display_vote_dialog"
|
||||
[breakpoints]="['960px']"
|
||||
[style]="{ width: '486px' }"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="true"
|
||||
[attr.aria-labelledby]="'popup.languages.title' | translate"
|
||||
role="dialog"
|
||||
id="vote_quit_modale"
|
||||
>
|
||||
<ng-template pTemplate="titlebar">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div class="top">
|
||||
<button
|
||||
id="close_dialog_vote"
|
||||
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
|
||||
(click)="closeModalAndFocusOnButtonToOpen()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
<img class="icon" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title is-1 has-text-left" id="lang_selector_modale_title">
|
||||
{{ 'participation.modal.cancel_own.title' | translate }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ 'participation.modal.cancel_own.description' | translate }}
|
||||
</p>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="footer">
|
||||
<div class="has-no-padding time-slice-list-of-a-day">
|
||||
<button
|
||||
class="button is-primary is-fullwidth pull-right has-text-white"
|
||||
(click)="applyTimeSlicesToDateChoices()"
|
||||
>
|
||||
{{ 'hours.modal.validate' | translate }}
|
||||
</button>
|
||||
<button class="button is-secondary pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
|
||||
{{ 'SENTENCES.Cancel' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.app-choice-button-dinum {
|
||||
button {
|
||||
margin-right: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
//button {
|
||||
// margin-right: 1rem;
|
||||
// display: inline-block;
|
||||
//}
|
||||
.groupe-label {
|
||||
color: #383838;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
import { ToastService } from '../../../core/services/toast.service';
|
||||
import { StorageService } from '../../../core/services/storage.service';
|
||||
@ -7,6 +7,7 @@ import { Poll } from '../../../core/models/poll.model';
|
||||
import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { DateService } from '../../../core/services/date.service';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit',
|
||||
@ -18,6 +19,7 @@ export class EditComponent implements OnInit {
|
||||
public fetching = true;
|
||||
private pollSlug: string;
|
||||
private pass_hash: string;
|
||||
display_vote_dialog: boolean = false;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
@ -27,6 +29,8 @@ export class EditComponent implements OnInit {
|
||||
public api: ApiService,
|
||||
public pollService: PollService,
|
||||
public dateService: DateService,
|
||||
private cd: ChangeDetectorRef,
|
||||
@Inject(DOCUMENT) private document: any,
|
||||
public toastService: ToastService
|
||||
) {
|
||||
this.pollService.poll.subscribe((newpoll: Poll) => {
|
||||
@ -80,4 +84,13 @@ export class EditComponent implements OnInit {
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
closeModalAndFocusOnButtonToOpen() {
|
||||
this.display_vote_dialog = false;
|
||||
this.cd.detectChanges();
|
||||
let elem = this.document.querySelector('#vote_button_popup');
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="box">
|
||||
<div class="rounded-block block-rounded add-answer-box">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<label class="label">{{ choice.name }}</label>
|
||||
@ -23,11 +23,11 @@
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="buttons has-addons is-right" (click)="openModal(choice)">
|
||||
<button class="button is-white">
|
||||
<button class="button is-secondary">
|
||||
{{ choice.counts.get(answerEnum.YES) }}
|
||||
<img class="image is-24x24" src="../../../assets/img/icon_voter_YES.svg" />
|
||||
</button>
|
||||
<button class="button is-white" *ngIf="poll.isMaybeAnswerAvailable">
|
||||
<button class="button is-primary" *ngIf="poll.isMaybeAnswerAvailable">
|
||||
{{ choice.counts.get(answerEnum.MAYBE) }}
|
||||
<img class="image is-24x24" src="../../../assets/img/icon_voter_MAYBE.svg" />
|
||||
</button>
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
.add-answer-box {
|
||||
.label {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
color: #383838;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,13 @@
|
||||
<button
|
||||
class="choice-button has-text-centered {{ 'is-answer-' + answerKind }}"
|
||||
<div
|
||||
class="choice-button-zone has-text-centered {{ 'is-answer-' + answerKind }} clickable"
|
||||
[ngClass]="{ 'is-active': storageService.choiceHasAnswerOfValue(choice.id, answerEnum[answerKind]) }"
|
||||
(click)="storageService.toggleAnswer(choice.id, answerEnum[answerKind])"
|
||||
*ngIf="poll.allowed_answers.indexOf(answerEnum[answerKind]) !== -1"
|
||||
>
|
||||
<button
|
||||
class="icon-deco choice-button has-background-answer-{{ answerKind }} is-filtered-icon-{{ answerKind }}"
|
||||
></button>
|
||||
<p class="button-description">
|
||||
{{ 'participation.' + answerEnum[answerKind] | translate }}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,62 @@
|
||||
.choice-button {
|
||||
margin-right: 1em;
|
||||
&.is-active {
|
||||
@import '../../../../../../src/styles/variables.scss';
|
||||
.choice-button-zone {
|
||||
margin-right: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 107px;
|
||||
min-height: 83px;
|
||||
padding: 8px 0 16px;
|
||||
.button-description {
|
||||
margin-top: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
&:focus {
|
||||
outline: $outline-color;
|
||||
outline-style: solid;
|
||||
outline-offset: 0.15rem;
|
||||
}
|
||||
&:active {
|
||||
outline: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.is-answer-YES {
|
||||
background: green;
|
||||
background: $d-success;
|
||||
color: $d-success-text;
|
||||
}
|
||||
&.is-answer-MAYBE {
|
||||
background: orange;
|
||||
background: $d-warning;
|
||||
color: $d-warning-text;
|
||||
}
|
||||
&.is-answer-NO {
|
||||
background: red;
|
||||
background: $d-error;
|
||||
color: $d-error-text;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
&.is-answer-YES {
|
||||
background: $d-success;
|
||||
color: $d-success-text;
|
||||
}
|
||||
&.is-answer-MAYBE {
|
||||
background: $d-warning;
|
||||
color: $d-warning-text;
|
||||
}
|
||||
&.is-answer-NO {
|
||||
background: $d-error;
|
||||
color: $d-error-text;
|
||||
}
|
||||
}
|
||||
.icon-deco {
|
||||
padding: 20px;
|
||||
border: solid 1px grey;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,10 +85,20 @@
|
||||
.has-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
// filters made with https://codepen.io/sosuke/pen/Pjoqqp
|
||||
|
||||
.is-filtered-icon-primary {
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
.is-filtered-icon-yes {
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
.is-filtered-icon-maybe {
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
.is-filtered-icon-no {
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
.is-large-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
@ -104,6 +114,17 @@
|
||||
.has-background-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.has-background-answer-YES {
|
||||
background: url('/assets/icons/plus-circle.svg') no-repeat 28px center;
|
||||
}
|
||||
.has-background-answer-MAYBE {
|
||||
background: url('/assets/icons/help-circle.svg') no-repeat 28px center;
|
||||
}
|
||||
.has-background-answer-NO {
|
||||
background: url('/assets/icons/x.svg') no-repeat 28px center;
|
||||
}
|
||||
|
||||
.has-background-plus {
|
||||
background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
|
||||
}
|
||||
|
||||
@ -179,7 +179,6 @@ a {
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
//background-color: $primary_color;
|
||||
button {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
@ -43,8 +43,8 @@ body {
|
||||
}
|
||||
.is-2 {
|
||||
color: $d-primary-intense;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.is-3 {
|
||||
@ -56,7 +56,33 @@ body {
|
||||
line-height: 28px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.is-4 {
|
||||
color: $d-primary-intense;
|
||||
font-family: $title_font;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.is-5 {
|
||||
color: #383838;
|
||||
font-family: $title_font;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.is-6 {
|
||||
color: #383838;
|
||||
font-family: $title_font;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user