Show banners

assets/css/components/menuBar/banner.css

@@ -0,0 +1,41 @@
+/**
+ * Global banner
+ *
+ * @author Pierre Hubert
+ */
+
+.banner {
+    padding: 1px 15px;
+    text-align: left;
+    min-height: unset !important;
+    margin-bottom: 0px;
+}
+
+.banner button {
+    right: unset !important;
+}
+
+.banner a {
+    margin-left: 5px;
+}
+
+.content-wrapper + .content-wrapper,
+.content-wrapper + div + .content-wrapper,
+.content-wrapper + div + div + .content-wrapper,
+.content-wrapper + div + div + div + .content-wrapper {
+    padding-top: 1px;
+}
+
+@media screen and (max-width: 767px) {
+    .banner.content-wrapper {
+        margin-top: 50px;
+    }
+
+    .content-wrapper + .content-wrapper,
+    .content-wrapper + div + .content-wrapper,
+    .content-wrapper + div + div + .content-wrapper,
+    .content-wrapper + div + div + div + .content-wrapper {
+        margin-top: 0px !important;
+        padding-top: 2px !important;
+    }
+}

assets/css/pages/passwordForgotten/main.css

@@ -7,5 +7,5 @@
 .box-password-forgotten {
 	max-width: 350px;
 	margin: auto;
-	margin-top: 20px;
+	margin-top: 30px;
 }

assets/js/common/langs.js

@@ -121,4 +121,14 @@ ComunicWeb.common.langs = {
 
         return string;
     },
+}
+
+
+/**
+ * Get current language
+ * 
+ * @returns {string}
+ */
+function currLang() {
+    return ComunicWeb.common.langs.current();
 }

assets/js/common/page.js

@@ -252,7 +252,7 @@ const Page = {
                 (document.body.className.includes("sidebar-collapse") ? " sidebar-collapse " : "");
 
             //We load the menubar
-            ComunicWeb.components.menuBar.common.display();
+            MenuBar.display();
 
             //Bottom
             ComunicWeb.components.bottom.main.display();

assets/js/components/menuBar/authenticated.js

@@ -4,7 +4,7 @@
  * @author Pierre HUBERT
  */
 
-ComunicWeb.components.menuBar.authenticated = {
+const AuthenticatedMenuBar = {
 
 	/**
 	 * Dropdown menu links list
@@ -28,8 +28,8 @@ ComunicWeb.components.menuBar.authenticated = {
 		//Dark theme
 		{
 			innerLang: "menu_bar_action_dark_theme",
-			onclick: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(true, b)},
+			onclick: function(b){AuthenticatedMenuBar.darkThemeButtonClicked(true, b)},
-			oninit: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(false, b)},
+			oninit: function(b){AuthenticatedMenuBar.darkThemeButtonClicked(false, b)},
 			icon: "fa-sun-o"
 		},
 
@@ -56,7 +56,7 @@ ComunicWeb.components.menuBar.authenticated = {
 	 */
 	addElements: function(container){
 
-		// Site logo
+		// Site name
 		createElem2({
 			appendTo: container,
 			type: "a",
@@ -112,6 +112,13 @@ ComunicWeb.components.menuBar.authenticated = {
 
 		//Add dropdown menu
 		this.addDropdown(navbarRightElemList);
+
+		// Banner
+		const banner = MenubarBanner.addBanner(undefined)
+		if(banner) {
+			container.parentNode.insertBefore(banner, container.nextElementSibling)
+			banner.classList.add("content-wrapper")
+		}
 		
 	},
 

assets/js/components/menuBar/banner.js

@@ -0,0 +1,71 @@
+/**
+ * Menu bar banner
+ * 
+ * @author Pierre Hubert
+ */
+
+let hasClosedBanner = false;
+
+const MenubarBanner = {
+    /**
+     * Add menubar banner if required
+     * 
+     * @param {HTMLElement} target Target element
+     * @returns {HTMLElement} The banner (if it was created)
+     */
+    addBanner: function(target) {
+        if(hasClosedBanner ||
+            !ServerConfig.conf.banner || 
+            !ServerConfig.conf.banner.enabled && 
+            ServerConfig.conf.banner.expire < ComunicDate.time())
+            return;
+        
+        const banner = ServerConfig.conf.banner;
+
+        const rootEl = createElem2({
+            appendTo: target,
+            type: "div",
+            class: "banner alert alert-dismissible alert-" +(banner.nature == "information" ? "info" : (banner.nature == "success" ? "success" : "danger"))
+        })
+
+        // Close button
+        createElem2({
+            appendTo: rootEl,
+            type: "button",
+            class: "close",
+            elemType: "button",
+            innerHTML: "x",
+            onclick: () => {
+                rootEl.remove();
+                hasClosedBanner = true;
+            }
+        })
+
+        // icon
+        createElem2({
+            appendTo: rootEl,
+            type: "i",
+            class: "icon fa "+(banner.nature == "information" ? "fa-info" : (banner.nature == "success" ? "fa-check" : "fa-warning"))
+        })
+
+        // message
+        createElem2({
+            appendTo: rootEl,
+            type: "span",
+            innerHTML: banner.message.hasOwnProperty(currLang()) ? banner.message[currLang()] : banner.message["en"]
+        })
+
+        // link
+        if (banner.link) {
+            const link = createElem2({
+                appendTo: rootEl,
+                type: "a",
+                href: banner.link,
+                innerHTML: tr("Learn more")
+            })
+            link.target = "_blank";
+        }
+
+        return rootEl;
+    }
+};

assets/js/components/menuBar/common.js

@@ -4,7 +4,7 @@
  * @author Pierre HUBERT
  */
 
-ComunicWeb.components.menuBar.common = {
+const MenuBar = {
 	/**
 	 * Display menu bar
 	 * 
@@ -61,11 +61,11 @@ ComunicWeb.components.menuBar.common = {
 		//Call specific menu
 		if(signed_in()){
 			//Call authenticated menubar
-			ComunicWeb.components.menuBar.authenticated.addElements(menuContainer);
+			AuthenticatedMenuBar.addElements(menuContainer);
 		}
 		else {
 			//Call not-logged-in menubar
-			ComunicWeb.components.menuBar.notAuthenticated.addElements(menuContainer);
+			NotAuthenticatedMenuBar.addElements(menuContainer);
 		}
 	},
 

assets/js/components/menuBar/notAuthenticated.js

@@ -4,7 +4,7 @@
  * @author Pierre HUBERT
  */
 
-ComunicWeb.components.menuBar.notAuthenticated = {
+const NotAuthenticatedMenuBar = {
 	/**
 	 * Add not-authenticated user specific elements
 	 * 
@@ -124,5 +124,7 @@ ComunicWeb.components.menuBar.notAuthenticated = {
 			//Block form
 			return false;
 		}
+
+		MenubarBanner.addBanner(menuHeader)
 	}
 }

assets/js/pages/login.js

@@ -78,6 +78,9 @@ ComunicWeb.pages.login = {
 			//Check if we have to display a login failed message
 			if(additionnalData.loginFailedMessage)
 				ComunicWeb.pages.login.displayLoginError();
+			
+			// Add menu banner
+			MenubarBanner.addBanner(byId("login_banner"))
 		};
 
 		//Apply template

assets/js/typings/ServerConfig.d.ts

@@ -41,6 +41,14 @@ declare interface AccountInformationPolicy {
     max_location_length: number,
 }
 
+declare interface Banner {
+    enabled: boolean,
+    expire ?: number,
+    nature: "information"|"warning"|"success",
+    message: Map<string, string>,
+    link ?: string,
+}
+
 declare interface StaticServerConfig {
     terms_url: string,
     privacy_policy_url: string,
@@ -50,4 +58,5 @@ declare interface StaticServerConfig {
     data_conservation_policy: DataConservationPolicySettings,
     conversations_policy: ConversationPolicy,
     account_info_policy: AccountInformationPolicy,
+    banner?: Banner,
 }

assets/templates/pages/login/loginPage.tpl

@@ -5,6 +5,9 @@
 	</div>
 	<div class="login-box-body">
 
+		<!-- Global banner -->
+		<div id="login_banner"></div>
+
 		<!-- Login message -->
 		<p class="login-box-msg">{login_top_msg}</p>
 

system/config/dev.config.php

@@ -197,7 +197,8 @@ class Dev {
 
 		//Components stylesheets
 			//Menubar stylesheet
-			"css/components/menuBar.css",
+			"css/components/menuBar/base.css",
+			"css/components/menuBar/banner.css",
 
 			//Language picker stylesheet
 			"css/components/languagePicker.css",
@@ -387,6 +388,7 @@ class Dev {
 			"js/components/menuBar/common.js",
 			"js/components/menuBar/notAuthenticated.js",
 			"js/components/menuBar/authenticated.js",
+			"js/components/menuBar/banner.js",
 
 			// Main side bar
 			"js/components/sidebar/main.js",