Some more style & header work

kdots/css/kdots.css

@@ -163,7 +163,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
 }
 #egw_fw_topmenu_info_items > * {
   border: none;
-  background: transparent;
+  background-color: transparent;
 }
 #egw_fw_topmenu_info_items et2-avatar {
   --size: var(--icon-size);
@@ -217,7 +217,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
 }
 #egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
   display: block;
-  background-image: url(../../api/templates/default/images/add.svg);
+  background-image: url(../../node_modules/bootstrap-icons/icons/plus-circle.svg);
   background-repeat: no-repeat;
   background-size: 24px;
   background-position: center;
@@ -262,6 +262,9 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
 #egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(combobox) {
   visibility: hidden;
 }
+#egw_fw_topmenu_info_items #topmenu_info_notifications {
+  background-image: url(../../node_modules/bootstrap-icons/icons/bell-fill.svg);
+}
 #egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-menu-item et2-image {
   width: 1em;
 }
@@ -364,6 +367,11 @@ body egw-app[name="ranking"],
 /*** END APPLICATION ***/
 /*** WIDGETS ***/
 /* This should mostly go away with webcomponents */
+/* Show something for undefined widget */
+*:not(:defined) {
+  background-size: contain;
+  background-image: url(../../node_modules/bootstrap-icons/icons/question-circle.svg);
+}
 /* Get nextmatch sizing more nicely without messing with dynheight */
 div.et2_nextmatch {
   display: flex;

kdots/css/kdots.less

@@ -116,7 +116,7 @@ egw-framework#egw_fw_basecontainer {
 
   & > * {
 	border: none;
-	background: transparent;
+	background-color: transparent;
   }
 
   et2-avatar {
@@ -178,7 +178,7 @@ egw-framework#egw_fw_basecontainer {
 
 	span#quick_add {
 	  display: block;
-	  background-image: url(../../api/templates/default/images/add.svg);
+	  background-image: url(../../node_modules/bootstrap-icons/icons/plus-circle.svg);
 	  background-repeat: no-repeat;
 	  background-size: 24px;
 	  background-position: center;
@@ -231,6 +231,9 @@ egw-framework#egw_fw_basecontainer {
 	}
   }
 
+  #topmenu_info_notifications {
+	background-image: url(../../node_modules/bootstrap-icons/icons/bell-fill.svg);
+  }
   #topmenu_info_user_avatar {
 	sl-menu-item et2-image {
 	  width: 1em;
@@ -348,6 +351,12 @@ body, :root {
 /*** WIDGETS ***/
 /* This should mostly go away with webcomponents */
 
+/* Show something for undefined widget */
+*:not(:defined) {
+  background-size: contain;
+  background-image: url(../../node_modules/bootstrap-icons/icons/question-circle.svg);
+}
+
 /* Get nextmatch sizing more nicely without messing with dynheight */
 div.et2_nextmatch {
   display: flex;

kdots/inc/class.kdots_framework.inc.php

@@ -128,8 +128,6 @@ class kdots_framework extends Api\Framework\Ajax
 			}
 		}
 
-		//////////
-
 		$vars['topmenu_items'] = "<sl-menu id='egw_fw_topmenu_items'>" . implode("\n", $this->topmenu_items) . "</sl-menu>";
 		$vars['topmenu_info_items'] = '';
 		foreach($this->topmenu_info_items as $id => $item)
@@ -139,6 +137,9 @@ class kdots_framework extends Api\Framework\Ajax
 				case 'user_avatar':
 					$vars['topmenu_info_items'] .= "<sl-dropdown class=\"topmenu_info_item\" id=\"topmenu_info_{$id}\" aria-label='" . lang("User menu") . "' tabindex='0'><div slot='trigger'>$item</div> {$vars['topmenu_items']}</sl-dropdown>";
 					break;
+				case 'notifications':
+					$vars['topmenu_info_items'] .= $item;
+					break;
 				case 'darkmode':
 					$vars['topmenu_info_items'] .= $item;
 					break;
@@ -254,6 +255,20 @@ class kdots_framework extends Api\Framework\Ajax
 			($mode == 'dark' ? 'darkmode_on' : '') . '"' . ($mode == 'dark' ? 'darkmode' : '') . '> </egw-darkmode-toggle>';
 	}
 
+	/**
+	 * Prepare notification signal (blinking bell)
+	 *
+	 *
+	 * @return string
+	 */
+	protected static function _get_notification_bell()
+	{
+		// This should all be handled by notification app
+		$path = "../../notifications/js/Et2NotificationBell.js";
+		self::includeJS($path . '?' . filemtime(EGW_SERVER_ROOT . $path));
+		return '<et2-notification-bell loading class="topmenu_info_item"></et2-notification-bell>';
+	}
+
 	/**
 	 * Prepare the quick add selectbox
 	 *

kdots/js/app.ts

@@ -5,7 +5,6 @@
 import {EgwFramework} from "./EgwFramework";
 import {EgwFrameworkApp} from "./EgwFrameworkApp";
 import {EgwDarkmodeToggle} from "./EgwDarkmodeToggle";
-import {app} from "../../api/js/jsapi/egw_global";
 
 document.addEventListener('DOMContentLoaded', () =>
 {
@@ -57,9 +56,9 @@ document.addEventListener('DOMContentLoaded', () =>
 	}
 });
 
-class KDots
+class KDots extends fw_desktop
 {
 
 }
 
-app.classes.kdots = KDots;
+window['fw_kdots'] = new KDots();