create quick-contact component button and modal
This commit is contained in:
parent
50a71ed258
commit
f3ff37c74c
|
@ -0,0 +1,21 @@
|
||||||
|
.quick-contact {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
.quick-contact-modal {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80px;
|
||||||
|
right: 0;
|
||||||
|
width: 375px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.quick-contact {
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.quick-contact-modal {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
<div class="quick-contact">
|
||||||
|
<a class="uk-button uk-button-primary" (click)="toggleModal()">
|
||||||
|
<icon *ngIf="!showModal" name="mail"></icon>
|
||||||
|
<icon *ngIf="showModal" name="close"></icon>
|
||||||
|
<span class="uk-margin-small-left">HELP</span>
|
||||||
|
</a>
|
||||||
|
<div *ngIf="showModal" class="quick-contact-modal uk-card uk-card-default">
|
||||||
|
<div class="uk-text-center">
|
||||||
|
Send a message <br>
|
||||||
|
How can we help? <br>
|
||||||
|
We usually respond in a few hours
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'quick-contact',
|
||||||
|
templateUrl: 'quick-contact.component.html',
|
||||||
|
styleUrls: ['quick-contact.component.css']
|
||||||
|
})
|
||||||
|
export class QuickContactComponent {
|
||||||
|
public showModal: boolean = false;
|
||||||
|
|
||||||
|
public toggleModal() {
|
||||||
|
this.showModal = !this.showModal;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {FormsModule} from '@angular/forms';
|
||||||
|
|
||||||
|
import {QuickContactComponent} from './quick-contact.component';
|
||||||
|
import {IconsModule} from '../../utils/icons/icons.module';
|
||||||
|
import {IconsService} from '../../utils/icons/icons.service';
|
||||||
|
import {mail} from '../../utils/icons/icons';
|
||||||
|
import {close} from '../../utils/icons/icons';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule, FormsModule, IconsModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
QuickContactComponent
|
||||||
|
],
|
||||||
|
providers:[],
|
||||||
|
exports: [
|
||||||
|
QuickContactComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class QuickContactModule {
|
||||||
|
constructor(private iconsService: IconsService) {
|
||||||
|
this.iconsService.registerIcons([mail,close])
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Injectable } from "@angular/core";
|
||||||
|
import { BehaviorSubject, Observable } from "rxjs";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: "root"
|
||||||
|
})
|
||||||
|
export class QuickContactService {
|
||||||
|
private display: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||||
|
|
||||||
|
public get isDisplayed(): Observable<boolean> {
|
||||||
|
return this.display.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
public setDisplay(display: boolean) {
|
||||||
|
this.display.next(display);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue