From 98ec296077161892bf106afa21e03d7d886a49e5 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 5 Apr 2021 13:14:43 +0000
Subject: [PATCH] [Library|Trunk]

CustomizationOptions.ts: update customizations based on new UI.



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

diff --git a/connect/community/CustomizationOptions.ts b/connect/community/CustomizationOptions.ts
index 93535151..7baf54df 100644
--- a/connect/community/CustomizationOptions.ts
+++ b/connect/community/CustomizationOptions.ts
@@ -1,177 +1,53 @@
 export class CustomizationOptions {
-  mainColor: string;
-  secondaryColor: string;
-  backgrounds:{
-    panels: {
-      onDarkBackground: boolean,
-      background: {
-        color: string; //background
-        borderStyle: string;
-        borderColor: string;
-        borderWidth: number;
-      }
-    }
-    homeBanner:{
-      onDarkBackground: boolean,
-      background: {
-        color: string; //background
-        borderStyle: string;
-        borderColor: string;
-        borderWidth: number;
-      }
-    }
-    lightPageBackground:{
-      background: {
-        color: string; //background
-        borderStyle: string;
-        borderColor: string;
-        borderWidth: number;
-      }
-    }
-
+  identity: {
+    isDefault: boolean;
+    mainColor: string;
+    secondaryColor: string;
   };
-  panel: {
-    onDarkBackground: boolean,
-    background: {
+  backgrounds: {
+    isDefault:boolean,
+    dark: {
+      isDefault:boolean,
+       color: string; //background
+    }
+    light: {
+      isDefault:boolean,
       color: string; //background
-      borderStyle: string;
-      borderColor: string;
-      borderWidth: number;
     }
-    , fonts: {
-      color: string;
-      family: string;
-      size: number;
-      weight: number;
-    },
-    title: {
-      color: string;
-      family: string;
-      size: number;
-      weight: number;
-    },
-/*    panelElements: {
-      backgroundColor: string;
-      borderColor: string;
-      color: string;
-    }*/
-  };
-
- /* box: {
-    borderColor: string;
-    borderStyle: string;
-    borderWidth: number;
-    borderRadius: number;
-  }
-  ;*/
-  links: {
-    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;
-      };
-    };
+    isDefault:boolean,
+    darkBackground: ButtonsCustomization;
+    lightBackground: ButtonsCustomization;
   };
 
-
-  constructor() {
-
-    this.mainColor = '#4687E6';
-    this.secondaryColor = '#2D72D6';
-    this.panel = {
-      onDarkBackground: true,
-      background: {
-        color: '#4687E6',
-        borderStyle: 'solid',
-        borderColor: "#4687E6",
-        borderWidth: 0
-      }, fonts: {
-        color: '#ffffff',
-        family: 'Open Sans',
-        size: 14,
-        weight: 400
-      },
-      title: {
-        color: '#ffffff',
-        family: 'Open Sans',
-        size: 18,
-        weight: 700
-      },
-
-    /*  panelElements: {
-        backgroundColor: 'rgba(255, 255, 255, 0.5)',
-        borderColor: 'rgba(255, 255, 255, 0.5)',
-        color: '#ffffff'
-      }*/
+  constructor(mainColor: string = null, secondaryColor: string = null) {
+    
+    this.identity= {
+      mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor,
+      secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor,
+      isDefault : true
     };
-
-   /* this.box = {
-      borderColor:  '#4C9CD5',
-      borderStyle: 'solid',
-      borderWidth: 2,
-      borderRadius: 6,
-    };*/
-    this.links = {
-      darkBackground: {
-        family: 'Open Sans',
-        size: 14,
-        weight: 400,
-        color: 'rgba(255, 255, 255, 0.98)',
-        onHover: {
-          color: 'rgba(255, 255, 255, 0.5)',
-        },
+    this.backgrounds={
+      isDefault: true,
+      dark : {
+        isDefault: true,
+        color: this.identity.mainColor,
       },
-      lightBackground: {
-        color: '#4687E6',
-        onHover: {
-          color: '#2D72D6'
-        },
+      light : {
+        isDefault: true,
+        color: CustomizationOptions.getRGBA(this.identity.mainColor,0.1),
       }
     };
 
+
     this.buttons = {
+      isDefault: true,
       darkBackground: {
+        isDefault:true,
         backgroundColor: "#ffffff",
-        color:"#000000",
-        borderStyle:"solid",
+        color: "#000000",
+        borderStyle: "solid",
         borderColor: "#ffffff",
         borderWidth: 1,
         borderRadius: 500,
@@ -182,20 +58,58 @@ export class CustomizationOptions {
         }
       },
       lightBackground: {
-        backgroundColor: '#4687E6',
+        isDefault:true,
+        backgroundColor: this.identity.mainColor,
         color: '#ffffff',
         borderStyle: "solid",
-        borderColor: "#4687E6",
+        borderColor: this.identity.mainColor,
         borderWidth: 1,
         borderRadius: 500,
         onHover: {
-          backgroundColor: '#2D72D6',
+          backgroundColor: this.identity.secondaryColor,
           color: '#ffffff',
-          borderColor: "#2D72D6",
+          borderColor: this.identity.secondaryColor,
         }
       }
 
     };
   }
+  public static getIdentity(community:string=null){
+    let COLORS= {
+    default:{
+        mainColor:'#4687E6',
+        secondaryColor: '#2D72D6'
+      },
+      "covid-19":{
+        mainColor:"#03ADEE",
+        secondaryColor: "#F15157"
+      }
+    };
+    if(community && COLORS[community]){
+      return COLORS[community];
+    }
+    return COLORS.default;
+  }
+  public static getRGBA(color, A){
+    if(color.indexOf("#")!=-1){
+      return 'rgba('+parseInt(color.substring(1,3),16)+','+parseInt(color.substring(3,5),16)+','+parseInt(color.substring(5,7),16)+','+A+')';
+    }
+    return color;
+  }
+
 
 }
+export class ButtonsCustomization{
+  isDefault:boolean;
+  backgroundColor: string;
+  color: string;
+  borderStyle: string;
+  borderColor: string;
+  borderWidth: number;
+  borderRadius: number;
+  onHover: {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+  };
+}