From bc427b7e62b61a607f0b5d071d6640b951d2316a Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 7 Oct 2019 06:58:49 +0000
Subject: [PATCH] [Library|Trunk]

CustomizationOptions class: update according to UI - admin design


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57274 d315682c-612b-4755-9ff5-7f18f6832af3
---
 connect/community/CustomizationOptions.ts | 188 ++++++++++++++++------
 1 file changed, 140 insertions(+), 48 deletions(-)

diff --git a/connect/community/CustomizationOptions.ts b/connect/community/CustomizationOptions.ts
index bb37ab3e..4505d198 100644
--- a/connect/community/CustomizationOptions.ts
+++ b/connect/community/CustomizationOptions.ts
@@ -2,47 +2,24 @@ export class CustomizationOptions {
   mainColor: string;
   secondaryColor: string;
   panel: {
+    onDarkBackground: boolean,
     background: {
-      // gradientDirection: string;
+      color: string; //background
       borderStyle: string;
       borderColor: string;
-      borderWidth: string;
+      borderWidth: number;
     }, fonts: {
       color: string;
       family: string;
-      size: string;
+      size: number;
+      weight: number;
     },
     title: {
       color: string;
       family: string;
-      size: string;
+      size: number;
+      weight: number;
     },
-    links: {
-      color: string;
-      family: string;
-      size: string;
-      // decoration: string;
-      onHover: {
-        color: string;
-      }
-    };
-    buttons: {
-      backgroundColor: string;
-      color: string;
-      fontWeight:string;
-      borderStyle: string;
-      borderColor: string;
-      borderWidth: string;
-      borderRadius: string;
-      onHover: {
-        backgroundColor: string;
-        color: string;
-        borderColor: string;
-      }
-
-    };
-
-
     panelElements: {
       backgroundColor: string;
       borderColor: string;
@@ -53,30 +30,145 @@ export class CustomizationOptions {
   box: {
     borderColor: string;
     borderStyle: string;
-    borderWidth: string;
-    borderRadius: string;
+    borderWidth: number;
+    borderRadius: number;
   }
   ;
   links: {
-    color: "";
-    family: string;
-    decoration: string;
-    onHover: {
+    darkBackground: {
+      family: string;
+      size: number;
+      weight: number;
       color: string;
+
+      onHover: {
+        color: string;
+      };
+    };
+    lightBackground: {
+      color: string;
+      onHover: {
+        color: string;
+      };
+    };
+  };
+  buttons: {
+    darkBackground: {
+      backgroundColor: string;
+      color: string;
+      borderStyle: string;
+      borderColor: string;
+      borderWidth: number;
+      borderRadius: number;
+      onHover: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+      };
+    };
+    lightBackground: {
+      backgroundColor: string;
+      color: string;
+      borderStyle: string;
+      borderColor: string;
+      borderWidth: number;
+      borderRadius: number;
+      onHover: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+      };
     };
   };
 
-  buttons: {
-    backgroundColor: string;
-    color: string;
-    borderStyle: string;
-    borderColor: string;
-    borderWidth: string;
-    borderRadius: string;
-    onHover: {
-      backgroundColor: string;
-      color: string;
-      borderColor: string;
+
+  constructor() {
+
+    this.mainColor = '#4C9CD5';
+    this.secondaryColor = '#24857F';
+    this.panel = {
+      onDarkBackground: true,
+      background: {
+        color: '#4C9CD5',
+        borderStyle: 'solid',
+        borderColor: "#4C9CD5",
+        borderWidth: 0
+      }, fonts: {
+        color: '#ffffff',
+        family: '"Open Sans", sans-serif',
+        size: 14,
+        weight: 400
+      },
+      title: {
+        color: '#ffffff',
+        family: '"Open Sans", sans-serif',
+        size: 18,
+        weight: 700
+      },
+
+      panelElements: {
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+        borderColor: 'rgba(255, 255, 255, 0.5)',
+        color: '#ffffff'
+      }
     };
-  };
+
+    this.box = {
+      borderColor:  '#4C9CD5',
+      borderStyle: 'solid',
+      borderWidth: 2,
+      borderRadius: 6,
+    };
+    this.links = {
+      darkBackground: {
+        family: '"Open Sans", sans-serif',
+        size: 14,
+        weight: 400,
+        color: 'rgba(255, 255, 255, 0.98)',
+        onHover: {
+          color: 'rgba(255, 255, 255, 0.5)',
+        },
+      },
+      lightBackground: {
+        color: '#4C9CD5',
+        onHover: {
+          color: '#24857F'
+        },
+      }
+    };
+
+    this.buttons = {
+      darkBackground: {
+        backgroundColor: "#ffffff",
+        color:"#4C9CD5",
+        borderStyle:"solid",
+        borderColor: "#ffffff",
+        borderWidth: 1,
+        borderRadius: 4,
+        onHover: {
+          backgroundColor: "#eeeeee",
+          color: "#4C9CD5",
+          borderColor: "#eeeeee",
+        }
+      },
+      lightBackground: {
+        backgroundColor: '#003052',
+        color: '#ffffff',
+        borderStyle: "solid",
+        borderColor: "#003052",
+        borderWidth: 1,
+        borderRadius: 4,
+        onHover: {
+          backgroundColor: '#154B71',
+          color: '#ffffff',
+          borderColor: "#154B71",
+        }
+      }
+
+    };
+  }
+
+  getCopy(): CustomizationOptions {
+    return (JSON.parse(JSON.stringify(this)));
+  }
 }