Divide panel into sections

.gitignore

@@ -2,3 +2,5 @@ nbcl/config/config.nbcl
 scss/local/
 dprint.json
 ewwii.core
+nbcl/test/
+scss/test/

ewwii.css

@@ -7,6 +7,21 @@
 .ewwii_panel {
 	background-color: rgba(95, 95, 95, 0.404);
 }
+.ewwii_panel .panel_section {
+	background-color: rgba(110, 150, 72, 0.733);
+	padding: 0;
+	font-size: 14px;
+	font-family: "Fragment Mono";
+}
+.ewwii_panel .panel_section.panel_section_left {
+	background-color: rgba(72, 134, 150, 0.733);
+}
+.ewwii_panel .panel_section.panel_section_center {
+	background-color: rgba(150, 114, 72, 0.733);
+}
+.ewwii_panel .panel_section.panel_section_right {
+	background-color: rgba(57, 148, 95, 0.733);
+}
 .ewwii_panel .textwidg {
 	background-color: rgba(72, 150, 98, 0.733);
 	padding: 0 0.2em;

nbcl/components/datetime_widg.nbcl

@@ -9,4 +9,16 @@ component DateTimeWidg (widgname, widgtextvar) {
 		halign = "end"
 		height = config.panel_height
     }
-}
+}
+
+#-
+# Example usage
+		DateTimeWidg "paneldatewidg" {
+			widgname = "paneldatewidg"
+			widgtextvar = "date_ddM"
+		}
+		DateTimeWidg "paneltimewidg" {
+			widgname = "paneltimewidg"
+			widgtextvar = "time_hhmm"
+		}
+-#

nbcl/panel/panel_component.nbcl

@@ -1,4 +1,5 @@
 import "nbcl/components/datetime_widg.nbcl" as datetime_widg { * }
+import "nbcl/panel/panel_section.nbcl" as datetime_widg { * }
 
 component EwwiiPanel () {
   Box {
@@ -7,15 +8,19 @@ component EwwiiPanel () {
 	class = "ewwii_panel"
 	height = config.panel_height
 	width = config.panel_width
-	space_evenly = false
+	space_evenly = true
-
+	
-	DateTimeWidg "paneldatewidg" {
+	PanelSection "section_left" {
-		widgname = "paneldatewidg"
+		section_side = "left"
-		widgtextvar = "date_ddM"
+		widg_align = "start"
 	}
-	DateTimeWidg "paneltimewidg" {
+	PanelSection "section_left" {
-		widgname = "paneltimewidg"
+		section_side = "center"
-		widgtextvar = "time_hhmm"
+		widg_align = "center"
+	}
+	PanelSection "section_left" {
+		section_side = "right"
+		widg_align = "end"
 	}
   }
 }

nbcl/panel/panel_section.nbcl

@@ -0,0 +1,19 @@
+# 3 Sections of the panel
+component PanelSection (section_side, widg_align) {
+  Box {
+    orinetation = "horizontal"
+    halign = "center"
+	class = "panel_section panel_section_" + section_side
+	height = config.panel_height
+	width = config.panel_width/3
+	space_evenly = true
+
+	Label {
+		class = "panel_section_widg"
+		text = "panel_section_" + section_side
+		halign = widg_align
+		height = config.panel_height
+        width = "100%"
+    }
+  }
+}

scss/colors/_glass.scss

@@ -5,3 +5,8 @@
 // Common
 $primary_bg: rgba(95, 95, 95, 0.404);
 $primary_text_col: #ffffff;
+
+$panel_sections_bg: rgba(110, 150, 72, 0.733);
+$panel_section_left_bg: rgba(72, 134, 150, 0.733);
+$panel_section_center_bg: rgba(150, 114, 72, 0.733);
+$panel_section_right_bg: rgba(57, 148, 95, 0.733);

scss/panel/_panel.scss

@@ -1,9 +1,11 @@
 @use "../colors/glass" as *;
 @use "./panelwidgs" as *;
+@use "./panelsection" as *;
 
 /* Top bar */
 .ewwii_panel {
 	background-color: $primary_bg;
 
+	@include panelsection;
 	@include textwidgets;
 }

scss/panel/_panelsection.scss

@@ -0,0 +1,20 @@
+@use "../colors/glass" as *;
+
+@mixin panelsection() {
+	.panel_section {
+		background-color: $panel_sections_bg;
+		padding: 0;
+		font-size: 14px;
+		font-family: "Fragment Mono";
+
+		&.panel_section_left {
+			background-color: $panel_section_left_bg;
+		}
+		&.panel_section_center {
+			background-color: $panel_section_center_bg;
+		}
+		&.panel_section_right {
+			background-color: $panel_section_right_bg;
+		}
+	}
+}