From 95bace54c85adecd8156d2c71f5a3acc2fc7c687 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Thu, 9 Nov 2017 16:18:02 +0200
Subject: [PATCH] --

---
 dmp-frontend/src/app/app.component.css        |  29 +++--
 dmp-frontend/src/app/app.component.html       |  53 ++++----
 .../src/app/form/dynamic-form.component.css   |  39 ++++++
 .../src/app/form/dynamic-form.component.html  | 120 ++++++++----------
 .../src/app/form/dynamic-form.component.ts    |   6 +-
 dmp-frontend/src/app/form/dynamic-form.css    |   5 -
 .../form/tableOfContents/toc.component.css    |   3 +
 .../form/tableOfContents/toc.component.html   |   4 +-
 .../app/form/tableOfContents/toc.component.ts |   1 +
 dmp-frontend/src/index.html                   |   1 -
 10 files changed, 146 insertions(+), 115 deletions(-)
 create mode 100644 dmp-frontend/src/app/form/dynamic-form.component.css
 delete mode 100644 dmp-frontend/src/app/form/dynamic-form.css
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/toc.component.css

diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index d1a3ac813..69ad35423 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -15,7 +15,7 @@
   }
   
 
-  .navbar-center {
+.navbar-center {
     position: absolute;
     width: 100%;
     left: 0;
@@ -66,30 +66,32 @@
     width:100%;
     float:left;
 }
-.child_div{
+
+.child_div_left{
     height:100%;
-    /*
-    width:100%;
-    */
     float:left;
 }
 
+.child_div_right{
+    height:100%;
+    float:right;
+}
+
 
 .sidenav {
-    /*
-    position: absolute;
-    padding-bottom: 500px; 
-    */
+
+    display:none;
 
     border-radius: 15px;
 
-
     z-index: 1;
-    overflow-x: hidden;
-    height: 100%;
     width: 0px;
+    /*
     top: 0px;
+    height: 100%;
     left: 0px;
+    */
+    overflow-x: hidden;
     background-color: #f8f8f8;
     transition: 0.5s;
     padding-top: 60px;
@@ -97,6 +99,9 @@
 
 .sidenav.expanded{
     width: 15%;
+   
+
+    display: block;
 
     border-style: solid;
     border-width: thin;
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index baebd067f..a78df1f2d 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -42,32 +42,33 @@
 
 <div class="parent_div">
 
-    <div id="appSidebar" class="sidenav child_div">
-        <!--<a href="javascript:void(0)" class="closebtn" (click)='slideNav()'>&times;</a>-->
-        <a class="cursor">My Workspace</a>
-        <a class="cursor">Orphan Datasets</a>
-        <a class="cursor">...</a>
-        <a class="cursor">Basically</a>
-        <a class="cursor">George</a>
-        <a class="cursor">tell us</a>
-        <a class="cursor">what to</a>
-        <a class="cursor">put here</a>
-      </div>
-
-      <div id="appBody" class="child_div">
-          
-        <router-outlet [ngClass]="{true:'visible'}[tokenService.isLoggedIn() == true]" ></router-outlet> 
-        <!--
-        <main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window>
-        -->
-        
-        <!--this should be invisible -->
-        <app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
-        
-<!--    
-        <sample-form></sample-form>
--->
-
+  <div id="appSidebar" class="sidenav child_div_left">
+    <a class="cursor">My Workspace</a>
+    <a class="cursor">Orphan Datasets</a>
+    <a class="cursor">...</a>
+    <a class="cursor">Basically</a>
+    <a class="cursor">George</a>
+    <a class="cursor">tell us</a>
+    <a class="cursor">what to</a>
+    <a class="cursor">put here</a>
   </div>
+  <!--
+  -->
+
+    <div id="appBody" class="child_div_right">
+          
+      <router-outlet [ngClass]="{true:'visible'}[tokenService.isLoggedIn() == true]" ></router-outlet> 
+      <!--
+      <main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window>
+      -->
+      
+      <!--this should be invisible -->
+      <app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
+          
+      <!--    
+      <sample-form></sample-form>
+      -->
+
+    </div>
 
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
new file mode 100644
index 000000000..f5621e21c
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -0,0 +1,39 @@
+.btncustom{
+    background-color:#337ab7;
+    color:white;
+    margin-top:15px;
+}
+
+
+
+.styled-scrollbar::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+	border-radius: 10px;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	background-image: -webkit-gradient(linear,
+            left bottom,
+            left top,
+            color-stop(0.44, rgb(122,153,217)),
+            color-stop(0.72, rgb(73,125,189)),
+            color-stop(0.86, rgb(28,58,148)));
+}
+
+.parent-div {
+    height: calc(100vh - 80px);
+    width:100%;
+}
+
+.child-div-left{
+    overflow-y: scroll;
+    height: 100%;
+}
+
+.child-div-right {
+    overflow-y: scroll;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 7cb8f93c5..d61e4e872 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,8 +1,8 @@
-<div class="col-md-8 col-sm-9">
+<div class="parent-div">
 
 
-	<div class="panel-body">
-		
+	<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" >
+			
 		<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
 
 			<div *ngFor = "let section of dataModel.sections; let i = index;">							
@@ -42,82 +42,70 @@
 		</form>
 		<p>Form value: {{ form.value | json }}</p>
 
-			
-				<!--
-				<div class="col-md-4">
-						<h4>On this page:</h4>
-						<div *ngIf="dataModel.groups.length">
-								<toc [dataModel]="dataModel"></toc>
-						</div>
-					</div>
-				-->
-	</div>
 
 
+		<div class="text-center">
+			<!-- pagination -->
+			<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+				<li [ngClass]="{disabled:pagination.currentPage === 1}">
+					<a (click)="setPage(1)" class="cursor-link" >First</a>
+				</li>
+				<li [ngClass]="{disabled:pagination.currentPage === 1}">
+					<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
+				</li>
+				<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+					<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
+				</li>
+				<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+					<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
+				</li>
+				<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+					<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
+				</li>
+			</ul>
+		</div>
 
-	<div class="text-center">
-		<!-- pagination -->
-		<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
-			<li [ngClass]="{disabled:pagination.currentPage === 1}">
-				<a (click)="setPage(1)" class="cursor-link" >First</a>
-			</li>
-			<li [ngClass]="{disabled:pagination.currentPage === 1}">
-				<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
-			</li>
-			<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-				<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
-			</li>
-			<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-				<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
-			</li>
-			<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-				<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
-			</li>
-		</ul>
-	</div>
-
-	<div class="panel-footer">
-		<div class="progress">
-			<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
-				{{dirtyValues}}%
+		<div >
+			<div class="progress">
+				<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
+					{{dirtyValues}}%
+				</div>
 			</div>
 		</div>
+
+	</div>	
+
+
+
+	<div class="col-md-4  col-sm-3 child-div-right styled-scrollbar">
+		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 	</div>
 
-</div>	
 
 
-<div class="col-md-4  col-sm-3"  >  <!-- style="overflow:scroll; height: 100%;"        *ngIf="dataModel.groups.length" -->
-	<div  > <!--  ngDraggable  style="top:60; position:fixed;" to ekana sxolio gia na ginetai responsive-->
-		<div class="panel panel-default" >
-			<div class="panel-heading" data-toggle="collapse" href="#collapse-panel">
-				<h4>Table of contents:</h4>
-			</div>
-			<div class="panel-body" id="collapse-panel" class="panel-collapse">
-				<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
-			</div>
-		</div>
-	</div>
+	
+
+
 </div>
 
 
-	<!--Modal for Confirmation -->
+<!--Modal for Confirmation -->
 <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					  </button>
-				</div>
-				<div class="modal-body">
-					<p>Are you sure you want to save and finalize?</p>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-					<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
-				</div>
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+					</button>
+			</div>
+			<div class="modal-body">
+				<p>Are you sure you want to save and finalize?</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+				<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
 			</div>
 		</div>
 	</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 2815630dd..699c35146 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -33,7 +33,7 @@ import * as scroll from '../../assets/jquery.scrollTo.min.js';
 @Component({
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
-  styleUrls: ['./dynamic-form.css'],
+  styleUrls: ['./dynamic-form.component.css'],
   providers: [FieldControlService, ServerService, dataModelBuilder]
 })
 export class DynamicFormComponent implements OnInit {
@@ -53,7 +53,7 @@ export class DynamicFormComponent implements OnInit {
 
   expandedForm : boolean = false;
   expandedToc : boolean = true;
-  
+
 
   constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
     private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) {
@@ -122,7 +122,7 @@ export class DynamicFormComponent implements OnInit {
 
 
             this.dataModel = new DataModel();
-            this.dataModel = this.dataModelService.getDataModel(data, formValues); debugger;
+            this.dataModel = this.dataModelService.getDataModel(data, formValues); 
 
             this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.css b/dmp-frontend/src/app/form/dynamic-form.css
deleted file mode 100644
index 21ef9b93a..000000000
--- a/dmp-frontend/src/app/form/dynamic-form.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.btncustom{
-    background-color:#337ab7;
-    color:white;
-    margin-top:15px;
-}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.css b/dmp-frontend/src/app/form/tableOfContents/toc.component.css
new file mode 100644
index 000000000..97928ae22
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.css
@@ -0,0 +1,3 @@
+.cursor-hand{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
index aaade3bd5..f707ac58d 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
@@ -5,10 +5,10 @@
                     <div  *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
                             <ul>
                                 <li>
-                                    <a (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
+                                    <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
                                     <ul *ngFor="let field of group.groupFields">
                                         <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
-                                            <a (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
+                                            <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
                                         </li>
                                     </ul>
                                 </li>
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
index c0fd4bb1a..db1cb50cf 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
@@ -8,6 +8,7 @@ import * as scroll from '../../../assets/jquery.scrollTo.min.js';
 @Component({
   selector: 'toc',
   templateUrl: '/toc.component.html',
+  styleUrls: ['./toc.component.css'],
   providers:  []
 })
 export class TocComponent implements OnInit{ 
diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html
index 565ccf1d3..7d93383a5 100644
--- a/dmp-frontend/src/index.html
+++ b/dmp-frontend/src/index.html
@@ -43,7 +43,6 @@
 		<script src="assets/custom.js"></script>
 	
 
-
 </head>
 <body>
 		<script>