diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/modal')
4 files changed, 32 insertions, 6 deletions
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 index 9a0fdf6bf4..6fc55d19e7 100644 --- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html @@ -1,6 +1,14 @@ <div class="custom-modal {{input.size}}"> - <div class="ng2-modal-content"> - <div class="ng2-modal-header modal-type-{{input.type}}"> + <div class="ng2-modal-content" + ngDraggable + [ngDraggable]="input.isMovable" + [handle]="ModalHandle" + [bounds]="ModalBounds" + [inBounds]="true" + [preventDefaultEvent]="false"> + <div #ModalHandle + class="ng2-modal-header modal-type-{{input.type}}" + [ngClass]="{'movable': input.isMovable}"> <span class="title">{{ input.title }}</span> <span class="close-button" (click)="close()"></span> </div> @@ -18,4 +26,4 @@ </div> </div> </div> -<div class="modal-background"></div> +<div #ModalBounds class="modal-background" [ngClass]="{'transparent': input.isMovable}"></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 index fac1ae74a8..03b2a70667 100644 --- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -12,7 +12,7 @@ bottom: 0; left: 0; z-index: 15007; - overflow: auto; + overflow: visible; margin: auto; display: flex; align-items: center; @@ -22,6 +22,8 @@ width: 100%; box-shadow: 0 5px 15px rgba(0,0,0,.5); border-radius: 4px; + + .ng2-modal-body{ padding: 20px; } @@ -29,19 +31,28 @@ .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; + margin: 0px 20px; + 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; + + &.ng-draggable { + cursor: move; + user-select: none; + } &.modal-type-standard { border-bottom: solid 3px @main_color_a; @@ -101,9 +112,14 @@ background-color: #000; opacity: 0.5; z-index: 900; + + &.transparent { + background-color: transparent; + } } + .xl { width: 1200px; } 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 index 89db8d1140..777e9bdc06 100644 --- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts @@ -33,6 +33,7 @@ import { ButtonsModelMap, ModalModel } from 'app/models'; }) export class ModalComponent implements OnInit, OnDestroy { + @Input() isMovable: boolean; @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. 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 index c38e60194b..2999528d13 100644 --- a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts @@ -1,5 +1,6 @@ import { NgModule } from "@angular/core"; import { CommonModule } from '@angular/common'; +import { AngularDraggableModule } from 'angular2-draggable'; import { ModalService } from 'app/ng2/services/modal.service'; import { ErrorMessageComponent } from "./error-message/error-message.component"; import {ModalComponent} from "./modal.component"; @@ -9,7 +10,7 @@ import {ModalComponent} from "./modal.component"; ModalComponent, ErrorMessageComponent ], - imports: [CommonModule], + imports: [CommonModule, AngularDraggableModule], exports: [ModalComponent, ErrorMessageComponent], entryComponents: [ //need to add anything that will be dynamically created ModalComponent, |