Single Image changes

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174381 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.html

@@ -40,7 +40,7 @@
 </div>
 
 <div *ngIf="itemData" class="ecm-card" id="ecm-item" (click)="storeItem()">
-	<ecm-image [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>	
+	<ecm-image [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>	
 	<div class="ecm-card-footer" id="ecm-item-footer">
 		<div class="ecm-card-info" id="ecm-item-info">
 			<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.descr}}</span> 		

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.css

@@ -45,3 +45,57 @@
 	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
 	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
 }
+
+/* ContentPlugin - External Component CSS*/
+.contentPopupTitle{
+	color: mediumvioletred;
+}
+.galaxyButton {
+    cursor: pointer;
+    background: mediumvioletred;
+    border-radius: 2px;
+    margin: 5px 0 5px 0;
+    padding: 5px 20px 5px 20px;
+    color: #fff;
+}
+
+.close-button {
+	right: 0;
+	position: absolute;
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	margin: 15px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	border-radius: 100%;
+	transition: 0.6s;
+	-webkit-transition: 0.6s;
+	z-index: 4;
+	box-shadow: none;
+    left: auto;
+}
+.close-button:hover {
+	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+    color: transparent;
+}
+.close-button:before, .close-button:after {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: mediumvioletred;
+	border-radius: 5px;
+	transition: 0.5s;
+}
+.close-button:before {
+	transform: translateY(-50%) rotate(45deg) scale(1);
+}
+.close-button:after {
+	transform: translateY(-50%) rotate(-45deg) scale(1);
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.ts

-import { Component, OnInit, AfterViewChecked, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, Input, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
 
 declare var getAttachmentsPlugin: any;
 
 @Component({
   selector: 'ecm-image',
   templateUrl: './ecm-image.component.html',
-  styleUrls: ['./ecm-image.component.css']
+  styleUrls: ['./ecm-image.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 export class EcmImageComponent implements OnInit, AfterViewChecked {
 
@@ -13,6 +14,9 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
     @Input() refSer : string;
     @Input() object : string;
     @Input() attachType : string;
+    @Input() isSingleImage : any;
+    @Input() height : string;
+    @Input() width : any;
 
     @ViewChild('targetAttachImage') targetDiv:ElementRef;
     @ViewChild('targetImage') targetImg:ElementRef;
@@ -30,7 +34,7 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
       }
       else
       {
-          this.initAttachImage(this.object,this.refSer, this.refId, 'V');
+          this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width);
       }
   }
   
@@ -49,7 +53,7 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
       console.log("created imageUrl " + this.imageUrl);      
   }
   
-  initAttachImage(objName:string, refSer:string, refId:string, uiMode:string)
+  initAttachImage(objName:string, refSer:string, refId:string, uiMode:string, isSingleImage:any, height:string, width:string)
   {
       console.log("loadImage check window.getAttachmentsPlugin ");          
       if (! getAttachmentsPlugin ){
@@ -71,12 +75,13 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
           // V - For getting view ui (user can only view attachments)
           UI : uiMode,
           // The thumbnail height and width
-          THUMBNAIL_WIDTH : '100%',
-          THUMBNAIL_HEIGHT : '100%',
+          THUMBNAIL_WIDTH : width ? width : '100%',
+          THUMBNAIL_HEIGHT : height ? height : '100%',
           // Maximum width of attachment plugin, can be specified in pixels
           MAX_WIDTH : "100%",
           // true for browser, false for mobile.
-          IS_HOSTED_MODE : true || false
+          IS_HOSTED_MODE : true || false,
+          ENABLE_SINGLE_IMAGE : isSingleImage
       });
       
       //console.log("created attchPluginViewUI " + this.attchPluginViewUI);