[Library | Trunk]: Annotation: make the widget draggable

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58446 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/annotation/annotation.component.ts

@@ -51,8 +51,8 @@ import {EnvProperties} from "../../utils/properties/env-properties";
         <button class="uk-button uk-button-default" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
       </div>
     </div>
-    <div [class.uk-hidden]="!visible"  class="widget">
-      <div class="widget-container">
+    <div [class.uk-hidden]="!visible">
+      <div class="widget-container" cdkDrag>
         <!--Close button, should be bound to hide the widget-->
         <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
           <span aria-hidden="true">×</span>

landingPages/annotation/annotation.css

@@ -1,28 +1,26 @@
-.widget {
-    position: fixed;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 .widget-container {
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%);
-    /*right: 30px;
-    top:40%;*/
     z-index: 10001;
     padding: 19px;
-    margin-bottom: 20px;
-    box-shadow: black 0 0 32px;
+    margin-left: -167px;
+    margin-top: -311px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     outline: 0;
     min-height: 20px;
     background-color: #f5f5f5;
+    cursor: move;
+}
+
+.widget-container:hover, .widget-container:active{
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .close {

landingPages/annotation/annotation.module.ts

@@ -1,9 +1,10 @@
 import {NgModule} from "@angular/core";
 import {AnnotationComponent} from "./annotation.component";
 import {CommonModule} from "@angular/common";
+import {DragDropModule} from "@angular/cdk/drag-drop";
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, DragDropModule],
     declarations: [AnnotationComponent],
     exports: [AnnotationComponent]
 })