From 9057e890a408199eb96b6a6b7a92336a4b31582c Mon Sep 17 00:00:00 2001
From: tykayn <tykayn@gmail.com>
Date: Sat, 30 May 2020 12:14:47 +0200
Subject: [PATCH] :style: style for feedback options, fixed floating button

---
 src/app/app.component.html                    |  1 +
 src/app/app.module.ts                         |  2 +
 .../feedback/feedback.component.html          | 14 ++++---
 .../feedback/feedback.component.scss          | 40 +++++++++++++++++++
 .../feedback/feedback.component.ts            |  2 +-
 .../participation/participation.module.ts     |  1 +
 6 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5fe0ccca..222bd836 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,6 +3,7 @@
 
 	<main>
 		<router-outlet></router-outlet>
+		<app-feedback></app-feedback>
 	</main>
 
 	<app-footer></app-footer>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 06a910e4..d19d7cb0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
 import { OldStuffModule } from './features/old-stuff/old-stuff.module';
 import { SharedModule } from './shared/shared.module';
+import { ParticipationModule } from './features/participation/participation.module';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
 	public handle(params: MissingTranslationHandlerParams): string {
@@ -60,6 +61,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 			useDefaultLang: false,
 		}),
 		OldStuffModule,
+		ParticipationModule,
 	],
 	providers: [Title, TranslateService],
 	bootstrap: [AppComponent],
diff --git a/src/app/features/participation/feedback/feedback.component.html b/src/app/features/participation/feedback/feedback.component.html
index f8880e3e..28865ed7 100644
--- a/src/app/features/participation/feedback/feedback.component.html
+++ b/src/app/features/participation/feedback/feedback.component.html
@@ -1,19 +1,23 @@
 <div class="feedback-container">
-	<div class="feedback-choices" *ngIf="isOpen">
-		<a href="mailto:contact@cipherbliss.com">
+	<div class="feedback-choices" *ngIf="isOpen" [ngClass]="{ active: isOpen }">
+		<a class="link" href="mailto:contact@cipherbliss.com">
 			Par email
 			<i class="fa fa-mail"></i>
 		</a>
-		<a href="https://framateam.org/ux-framatrucs/channels/framadate">
+		<a class="link" href="https://riot.im/app/#/room/#framadate:matrix.org">
+			Par Matrix
+			<i class="fa fa-mail"></i>
+		</a>
+		<a class="link" href="https://framateam.org/ux-framatrucs/channels/framadate">
 			Discuter sur Framateam
 			<i class="fa fa-comments"></i>
 		</a>
-		<a href="https://framagit.org/framasoft/framadate/funky-framadate-front">
+		<a class="link" href="https://framagit.org/framasoft/framadate/funky-framadate-front">
 			Créer une Issue sur Framagit
 			<i class="fa fa-gitlab"></i>
 		</a>
 	</div>
 	<div class="button" (click)="isOpen = !isOpen" [ngClass]="{ active: isOpen }">
-		<i class="fa fa-comment"></i>
+		<i class="fa fa-comment"></i> feedback
 	</div>
 </div>
diff --git a/src/app/features/participation/feedback/feedback.component.scss b/src/app/features/participation/feedback/feedback.component.scss
index e69de29b..c872a2e7 100644
--- a/src/app/features/participation/feedback/feedback.component.scss
+++ b/src/app/features/participation/feedback/feedback.component.scss
@@ -0,0 +1,40 @@
+:host {
+	position: fixed;
+	bottom: 1em;
+	right: 1em;
+	color: white;
+	.feedback-choices {
+		&.active {
+			background: #8eb6ed;
+			border-radius: 0.5em;
+			padding: 1em;
+			margin-bottom: 0.5em;
+		}
+	}
+	.link {
+		margin: 1ch;
+		display: block;
+		max-width: 10em;
+		a {
+			color: white;
+			&:hover {
+				background: white;
+				color: black;
+			}
+		}
+	}
+	i {
+		color: white;
+		margin: 1ch;
+	}
+	.button {
+		float: right;
+		color: white;
+		background: #0c5593;
+		padding: 1em;
+		border-radius: 2em;
+		&.active {
+			background: #2e6da4;
+		}
+	}
+}
diff --git a/src/app/features/participation/feedback/feedback.component.ts b/src/app/features/participation/feedback/feedback.component.ts
index 90609c93..0539e672 100644
--- a/src/app/features/participation/feedback/feedback.component.ts
+++ b/src/app/features/participation/feedback/feedback.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./feedback.component.scss'],
 })
 export class FeedbackComponent implements OnInit {
-	private isOpen = false;
+	private isOpen = true;
 
 	constructor() {}
 	ngOnInit(): void {}
diff --git a/src/app/features/participation/participation.module.ts b/src/app/features/participation/participation.module.ts
index 1b40c4b0..748585e6 100644
--- a/src/app/features/participation/participation.module.ts
+++ b/src/app/features/participation/participation.module.ts
@@ -11,5 +11,6 @@ import { FeedbackComponent } from './feedback/feedback.component';
 @NgModule({
 	declarations: [ParticipationComponent, PollComponent, FeedbackComponent],
 	imports: [CommonModule, ParticipationRoutingModule, SharedModule, TranslateModule.forChild({ extend: true })],
+	exports: [FeedbackComponent],
 })
 export class ParticipationModule {}