put correct icons in participation vote, add dropdown on option button

This commit is contained in:
Tykayn 2022-03-22 10:31:05 +01:00 committed by tykayn
parent 873c7dd9c8
commit c6861d1690
7 changed files with 43 additions and 31 deletions

View File

@ -1,21 +1,17 @@
<div class="actions"> <div class="actions-menu">
<button class="button" (click)="displayMenu = false"> <button class="export export-print button is-secondary" (click)="print()">
{{ 'SENTENCES.Close' | translate }}
<i class="fa fa-times"></i>
</button>
<button class="export export-print btn" (click)="print()">
<i class="fa fa-print"></i> <i class="fa fa-print"></i>
{{ 'participation.modal.options.print' | translate }} {{ 'participation.modal.options.print' | translate }}
</button> </button>
<button class="export export-csv btn" (click)="exportCSV()"> <button class="export export-csv button is-secondary" (click)="exportCSV()">
<i class="fa fa-file-calc-o" aria-hidden="true"></i> <i class="fa fa-file-calc-o" aria-hidden="true"></i>
{{ 'participation.modal.options.export_csv' | translate }} {{ 'participation.modal.options.export_csv' | translate }}
</button> </button>
<button class="export export-json btn" (click)="exportJson()"> <button class="export export-json button is-secondary" (click)="exportJson()">
<i class="fa fa-file-archive-o" aria-hidden="true"></i> <i class="fa fa-file-archive-o" aria-hidden="true"></i>
JSON JSON
</button> </button>
<button class="replicate duplicate btn" (click)="duplicate()"> <button class="replicate duplicate button is-secondary" (click)="duplicate()">
<i class="fa fa-copy" aria-hidden="true"></i> <i class="fa fa-copy" aria-hidden="true"></i>
{{ 'success.copy' | translate }} {{ 'success.copy' | translate }}
</button> </button>

View File

@ -0,0 +1,15 @@
.actions-menu {
background: white;
padding: 1rem;
border-radius: 8px;
border: solid 1px #ccc;
position: relative;
z-index: 10;
margin-top: 4rem;
margin-bottom: 1rem;
.button {
margin-right: 1ch;
margin-bottom: 1ch;
width: 100%;
}
}

View File

@ -14,7 +14,7 @@ import { ConfirmationService } from 'primeng/api';
styleUrls: ['./actions-menu.component.scss'], styleUrls: ['./actions-menu.component.scss'],
}) })
export class ActionsMenuComponent implements OnInit { export class ActionsMenuComponent implements OnInit {
@Input() displayMenu = false; @Input() displayMenu: boolean;
constructor( constructor(
private router: Router, private router: Router,

View File

@ -3,9 +3,9 @@
<section class="poll_loaded padded consultation" *ngIf="!fetching && poll"> <section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
<div class="step contained-in-large-column"> <div class="step contained-in-large-column">
<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff"> <div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
<h2 class="title is-2"> <h1 class="title is-2">
{{ 'participation.share_title' | translate }} {{ 'participation.share_title' | translate }}
</h2> </h1>
<p class="description"> <p class="description">
{{ 'participation.share_description' | translate }} {{ 'participation.share_description' | translate }}
</p> </p>
@ -22,24 +22,24 @@
</div> </div>
</div> </div>
<section class="main-title-poll rounded-block"> <section class="main-title-poll rounded-block">
<div class="columns"> <h2 class="title is-2">
<div class="column"> {{ poll.title }}
<h2 class="title is-2"> </h2>
{{ poll.title }}
</h2> <button
</div> class="pull-right button is-action"
<div class="columns"> (click)="displayOptions()"
<button class="options-button pull-right" (click)="displayOptions()"> [ngClass]="{ 'is-active': display_options_menu }"
{{ 'participation.menu_label' | translate }} >
<i class="fa fa-chevron-down"></i> {{ 'participation.menu_label' | translate }}
</button> <i class="fa fa-chevron-down"></i>
</div> </button>
</div> <app-actions-menu [displayMenu]="display_options_menu" *ngIf="display_options_menu"></app-actions-menu>
<p class="description"> <p class="description">
{{ poll.description }} {{ poll.description }}
</p> </p>
<app-actions-menu [displayMenu]="display_options_menu" *ngIf="display_options_menu"></app-actions-menu>
<button <button
class="vote-button is-primary button" class="vote-button is-primary button"
*ngIf="poll.votes_allowed" *ngIf="poll.votes_allowed"

View File

@ -15,5 +15,6 @@
background: transparent; background: transparent;
} }
.vote-button { .vote-button {
margin-right: 2rem; margin-right: 1ch;
margin-bottom: 1ch;
} }

View File

@ -1,6 +1,6 @@
<div class="columns"> <div class="columns">
<div class="column has-text-centered"> <div class="column has-text-centered">
<h1>Participation</h1> <h1 class="title is-1">Participation</h1>
</div> </div>
</div> </div>

View File

@ -127,13 +127,13 @@
} }
.has-background-answer-YES { .has-background-answer-YES {
background: url('/assets/icons/plus-circle.svg') no-repeat 28px center; background: url('/assets/icons/advanced/yes.svg') no-repeat 28px center;
} }
.has-background-answer-MAYBE { .has-background-answer-MAYBE {
background: url('/assets/icons/help-circle.svg') no-repeat 28px center; background: url('/assets/icons/advanced/maybe.svg') no-repeat 28px center;
} }
.has-background-answer-NO { .has-background-answer-NO {
background: url('/assets/icons/x.svg') no-repeat 28px center; background: url('/assets/icons/advanced/no.svg') no-repeat 28px center;
} }
.has-background-link-icon { .has-background-link-icon {