diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/modal')
6 files changed, 277 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +<div class="error-message-component"> + <div>Error code: {{input.messageId}}</div> + <div>Status code: {{input.status}}</div> + <div class="error-message">{{input.message}}</div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html new file mode 100644 index 0000000000..9a0fdf6bf4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html @@ -0,0 +1,21 @@ +<div class="custom-modal {{input.size}}"> + <div class="ng2-modal-content"> + <div class="ng2-modal-header modal-type-{{input.type}}"> + <span class="title">{{ input.title }}</span> + <span class="close-button" (click)="close()"></span> + </div> + <div class="ng2-modal-body" > + <div *ngIf="input.content">{{input.content}}</div> + <div #dynamicContentContainer></div> + </div> + + <div class="ng2-modal-footer"> + <button *ngFor="let button of input.buttons" + class="tlv-btn {{button.cssClass}}" + [disabled] = "button.getDisabled && button.getDisabled()" + [attr.data-tests-id] = "button.text" + (click) = "button.callback()">{{button.text}}</button> + </div> + </div> +</div> +<div class="modal-background"></div> diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less new file mode 100644 index 0000000000..fac1ae74a8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -0,0 +1,129 @@ +@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: 15007; + 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_r; + 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; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + + .title{ + .s_18_r; + -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/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts new file mode 100644 index 0000000000..89db8d1140 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 6/1/2017. + */ +import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; +import * as $ from 'jquery'; +import { ButtonsModelMap, ModalModel } from 'app/models'; + +@Component({ + selector: 'modal', + templateUrl: './modal.component.html', + styleUrls:['modal.component.less'] +}) + +export class ModalComponent implements OnInit, OnDestroy { + @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. + private modalElement: JQuery; + + constructor( el: ElementRef ) { + this.modalElement = $(el.nativeElement); + } + + ngOnInit(): void { + this.modalElement.appendTo('body'); + } + + ngOnDestroy(): void { + this.modalElement.remove(); + } + + open(): void { + this.modalElement.show(); + $('body').addClass('modal-open'); + } + + close(): void { + this.modalElement.hide(); + $('body').removeClass('modal-open'); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts new file mode 100644 index 0000000000..c38e60194b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ErrorMessageComponent } from "./error-message/error-message.component"; +import {ModalComponent} from "./modal.component"; + +@NgModule({ + declarations: [ + ModalComponent, + ErrorMessageComponent + ], + imports: [CommonModule], + exports: [ModalComponent, ErrorMessageComponent], + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent + ], + providers: [ModalService] +}) +export class ModalModule { + +}
\ No newline at end of file |