:style: style for feedback options, fixed floating button

src/app/app.component.html

@@ -3,6 +3,7 @@
 
 	<main>
 		<router-outlet></router-outlet>
+		<app-feedback></app-feedback>
 	</main>
 
 	<app-footer></app-footer>

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],

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>

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

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

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