summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/modal
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/modal')
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html18
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.less115
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts46
3 files changed, 179 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
new file mode 100644
index 0000000000..4882449596
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -0,0 +1,18 @@
+<div class="custom-modal {{size}}">
+ <div class="ng2-modal-content">
+ <div class="ng2-modal-header">
+ <span class="title">{{ title }}</span>
+ <span class="close-button" (click)="close()"></span>
+ </div>
+ <div class="ng2-modal-body">
+ <ng-content></ng-content>
+ </div>
+ <div class="ng2-modal-footer">
+ <button *ngFor="let buttonName of buttonsNames"
+ class="tlv-btn {{buttons[buttonName].cssClass}}"
+ [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
+ (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
new file mode 100644
index 0000000000..a35f829e6a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less
@@ -0,0 +1,115 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/sprite-old';
+/deep/ modal {
+ display: none;
+
+ .custom-modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ overflow: auto;
+ margin: auto;
+ display: flex;
+ align-items: center;
+
+ .ng2-modal-content {
+ background: #fff;
+ width: 100%;
+ box-shadow: 0 5px 15px rgba(0,0,0,.5);
+ border-radius: 4px;
+ .ng2-modal-body{
+ padding: 20px;
+ }
+
+ .ng2-modal-header{
+ .m_18_m;
+ font-weight: bold;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ height: 50px;
+ line-height: 50px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-align: left;
+ border-bottom: solid 1px @main_color_o;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 0px 20px;
+ .title{
+ -webkit-box-flex: 999;
+ -ms-flex-positive: 999;
+ flex-grow: 999;
+ }
+ .close-button{
+ .sprite;
+ .sprite.x-btn-black;
+ cursor: pointer;
+ }
+ }
+
+ .ng2-modal-footer{
+ background-color: @tlv_color_t;
+ padding: 17px 30px;
+ clear: both;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ border-radius: 4px;
+ button{
+ margin: 0 12px 0 6px;
+ }
+ }
+ }
+ }
+
+ .modal-background {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #000;
+ opacity: 0.5;
+ z-index: 900;
+ }
+}
+
+.xl {
+ width: 1200px;
+}
+
+.l {
+ width: 875px;
+}
+
+.md {
+ width: 650px;
+}
+
+.sm {
+ width: 552px;
+}
+
+.xsm {
+ width: 432px;
+}
+
+body.modal-open {
+ overflow: hidden;
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
new file mode 100644
index 0000000000..4a00871b21
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by rc2122 on 6/1/2017.
+ */
+import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import * as $ from 'jquery';
+import {ButtonsModelMap} from "app/models/button";
+
+@Component({
+ selector: 'modal',
+ templateUrl: './modal.component.html',
+ styleUrls:['modal.component.less']
+})
+
+export class ModalComponent implements OnInit, OnDestroy {
+ @Input() size: string; 'xl|l|md|sm|xsm'
+ @Input() title: string;
+ @Input() public buttons:ButtonsModelMap;
+ private modalElement: JQuery;
+ private buttonsNames:Array<string>;
+
+ constructor( el: ElementRef ) {
+ this.modalElement = $(el.nativeElement);
+ }
+
+ ngOnInit(): void {
+ let modal = this;
+ this.modalElement.appendTo('body');
+ if(this.buttons){
+ this.buttonsNames = Object.keys(this.buttons);
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.modalElement.remove();
+ }
+
+ open(): void {
+ this.modalElement.show();
+ $('body').addClass('modal-open');
+ }
+
+ close(): void {
+ this.modalElement.hide();
+ $('body').removeClass('modal-open');
+ }
+}