Create a new interface for backgrounds and added to quick contact. Modal: Align title to the left
This commit is contained in:
parent
8a64b576d0
commit
bf80e2e0b4
|
@ -34,11 +34,9 @@ import {properties} from "../../../../environments/environment";
|
||||||
import {AlertModal} from "../../utils/modal/alert";
|
import {AlertModal} from "../../utils/modal/alert";
|
||||||
import {Subscriber} from "rxjs";
|
import {Subscriber} from "rxjs";
|
||||||
import {IndexInfoService} from "../../utils/indexInfo.service";
|
import {IndexInfoService} from "../../utils/indexInfo.service";
|
||||||
|
import {Background} from "../../utils/background-utils";
|
||||||
|
|
||||||
export interface SearchForm {
|
export interface SearchForm extends Background {}
|
||||||
class: string,
|
|
||||||
dark: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
declare var UIkit: any;
|
declare var UIkit: any;
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div #drop id="quick-contact" class="uk-drop"
|
<div #drop id="quick-contact" class="uk-drop"
|
||||||
uk-drop="mode: click; pos: top-right; animation: uk-animation-fade; offset: 20">
|
uk-drop="mode: click; pos: top-right; animation: uk-animation-fade; offset: 20">
|
||||||
<div class="uk-card uk-card-default uk-box-shadow-default uk-flex uk-flex-column uk-height-1-1">
|
<div class="uk-card uk-card-default uk-box-shadow-default uk-flex uk-flex-column uk-height-1-1">
|
||||||
<div class="uk-card-header uk-padding-small uk-text-center" [ngClass]="background">
|
<div class="uk-card-header uk-padding-small uk-text-center" [class.uk-light]="backgroundHeader.dark" [ngClass]="backgroundHeader.class">
|
||||||
<div class="uk-text-small">
|
<div class="uk-text-small">
|
||||||
Send a message
|
Send a message
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
|
import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
|
||||||
import {FormGroup} from "@angular/forms";
|
import {FormGroup} from "@angular/forms";
|
||||||
import {Subscriber} from "rxjs";
|
import {Subscriber} from "rxjs";
|
||||||
|
import {SearchForm} from "../../searchPages/searchUtils/newSearchPage.component";
|
||||||
|
import {Background} from "../../utils/background-utils";
|
||||||
|
|
||||||
declare var UIkit;
|
declare var UIkit;
|
||||||
|
|
||||||
|
@ -17,8 +19,7 @@ export class QuickContactComponent implements OnInit, OnDestroy {
|
||||||
public images: string[] = [];
|
public images: string[] = [];
|
||||||
@Input()
|
@Input()
|
||||||
public contact: string = 'contact';
|
public contact: string = 'contact';
|
||||||
@Input()
|
public backgroundHeader: Background = {class: 'uk-background-primary', dark: true};
|
||||||
public background: string = 'uk-background-primary';
|
|
||||||
@Input()
|
@Input()
|
||||||
public sending = false;
|
public sending = false;
|
||||||
@Input()
|
@Input()
|
||||||
|
@ -27,6 +28,15 @@ export class QuickContactComponent implements OnInit, OnDestroy {
|
||||||
private subscriptions: any[] = [];
|
private subscriptions: any[] = [];
|
||||||
@ViewChild('drop') drop: ElementRef;
|
@ViewChild('drop') drop: ElementRef;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
set background(background: Background | string) {
|
||||||
|
if(typeof background === 'string') {
|
||||||
|
this.backgroundHeader = {class: background, dark: true}
|
||||||
|
} else {
|
||||||
|
this.backgroundHeader = background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => {
|
this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => {
|
||||||
|
@ -41,6 +51,9 @@ export class QuickContactComponent implements OnInit, OnDestroy {
|
||||||
this.showDrop = false;
|
this.showDrop = false;
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
if(typeof this.background === 'string' ) {
|
||||||
|
this.background = {class: this.background, dark: true};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
export interface Background {
|
||||||
|
class: string,
|
||||||
|
dark: boolean
|
||||||
|
}
|
|
@ -7,7 +7,7 @@ declare var UIkit: any;
|
||||||
template: `
|
template: `
|
||||||
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #here">
|
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #here">
|
||||||
<div class="uk-modal-dialog">
|
<div class="uk-modal-dialog">
|
||||||
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
|
<div class="uk-modal-header uk-text-left uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
|
||||||
<div class="uk-modal-title" [hidden]=!alertHeader>
|
<div class="uk-modal-title" [hidden]=!alertHeader>
|
||||||
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
|
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue