:style: style for feedback options, fixed floating button

This commit is contained in:
tykayn 2020-05-30 12:14:47 +02:00
parent 442530983b
commit 9057e890a4
6 changed files with 54 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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