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

style participation page, button colors and placeholder icons bg, cancel modal content

This commit is contained in:
Tykayn 2022-03-14 15:21:26 +01:00 committed by tykayn
parent 0319d75b40
commit e09429d0d8
11 changed files with 198 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/consultation/consultation.module.ts
View File

@ -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 {}

57
src/app/features/consultation/edit/edit.component.html
View File

@ -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>

8
src/app/features/consultation/edit/edit.component.scss
View File

@ -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;

15
src/app/features/consultation/edit/edit.component.ts
View File

@ -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();
}
}
}

6
src/app/features/participation/add-answer/add-answer.component.html
View File

@ -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>

8
src/app/features/participation/add-answer/add-answer.component.scss
View File

@ -0,0 +1,8 @@
.add-answer-box {
.label {
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: #383838;
}
}

13
src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.html
View File

@ -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"
>
{{ 'participation.' + answerEnum[answerKind] | translate }}
</button>
<button
class="icon-deco choice-button has-background-answer-{{ answerKind }} is-filtered-icon-{{ answerKind }}"
></button>
<p class="button-description">
{{ 'participation.' + answerEnum[answerKind] | translate }}
</p>
</div>

60
src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.scss
View File

@ -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;
}
}

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

@ -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;
}

1
src/styles/partials/_buttons.scss
View File

@ -179,7 +179,6 @@ a {
&:hover {
color: $white !important;
//background-color: $primary_color;
button {
color: $white !important;
}

32
src/styles/partials/_typo.scss
View File

@ -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;
}