git.lucas.co / cce-system-interface
system settings
git clone https://git.lucas.co/cce-system-interface.git

commit8dfa946a279f83a5d934f63191e0449e7cbf93e4
parent4e32a63619
authorLucas Galante <[email protected]>
date2026-06-18 12:16
interface: add Containers section, relocate Section, Graph, and ScrollingList to it, and move Popover to Surfaces

 src/main.rs            |  53 +++++++++--------
 src/pages/interface.rs | 155 +++++++++++++++++++++++++------------------------
 2 files changed, 106 insertions(+), 102 deletions(-)

diff --git a/src/main.rs b/src/main.rs
index dcffce3..da10f38 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -955,36 +955,23 @@ fn collect_popover_rects(w: &dyn cce_ui::widget::Element, popovers: &mut Vec<(f3
                 link_parent_child(&mut self.page_sec_containers[6], &mut self.app.layout.side_panel_border_opacity_spinbox, &mut self.ui_context);
             }
             Page::Interface => {
-                self.page_sec_containers.resize_with(8, cce_ui::widget::Container::new);
+                self.page_sec_containers.resize_with(9, cce_ui::widget::Container::new);
                 
-                for i in 0..8 {
+                for i in 0..9 {
                     link_parent_child(page_root, &mut self.page_sec_containers[i], &mut self.ui_context);
                 }
                 
                 // Section 0: Custom Parameters
                 link_parent_child(&mut self.page_sec_containers[0], &mut self.app.interface.custom_multicontrol, &mut self.ui_context);
                 
-                // Section 1: Layout (parent of Sections, Grid Layout)
+                // Section 1: Layout (parent of Grid Layout)
                 // (Layout widgets)
                 link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.color_selectors[7], &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.color_selectors[1], &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.color_selectors[2], &mut self.ui_context);
-
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_show_grid_toggle, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_snap_enabled_toggle, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_uniform_background_toggle, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_cell_opacity_spinbox, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_gap_opacity_spinbox, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.graph_gap_width_spinbox, &mut self.ui_context);
-                // (Sections child widgets)
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.section_padding_spinbox, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.page_margin_spinbox, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.section_label_font_selector, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.label_alignment_menu, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.label_offset_spinbox, &mut self.ui_context);
-                link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.nested_section_label_font_selector, &mut self.ui_context);
                 // (Grid Layout child widgets)
                 link_parent_child(&mut self.page_sec_containers[1], &mut self.app.interface.grid_min_col_width_spinbox, &mut self.ui_context);
+
                 
                 // Section 2: Status
                 link_parent_child(&mut self.page_sec_containers[2], &mut self.app.interface.color_selectors[8], &mut self.ui_context);
@@ -1004,22 +991,15 @@ fn collect_popover_rects(w: &dyn cce_ui::widget::Element, popovers: &mut Vec<(f3
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.tab_margin_spinbox_y, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.button_padding_spinbox, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.menubar_opacity_spinbox, &mut self.ui_context);
-                
-                // (Toggles child widgets)
+                 // (Toggles child widgets)
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.color_selectors[12], &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.color_selectors[13], &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.toggle_height_spinbox, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.toggle_corner_radius_spinbox, &mut self.ui_context);
                 
-                // (ScrollingList child widgets)
-                link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.color_selectors[14], &mut self.ui_context);
- 
                 // (Breadcrumb child widgets)
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.color_selectors[15], &mut self.ui_context);
  
-                // (Popover child widgets)
-                link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.color_selectors[16], &mut self.ui_context);
- 
                 // (Spinbox child widgets)
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.spinbox_height_spinbox, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[3], &mut self.app.interface.spinbox_corner_radius_spinbox, &mut self.ui_context);
@@ -1066,8 +1046,8 @@ fn collect_popover_rects(w: &dyn cce_ui::widget::Element, popovers: &mut Vec<(f3
                 link_parent_child(&mut self.page_sec_containers[6], &mut self.app.interface.plate_padding_spinbox, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[6], &mut self.app.interface.plate_opacity_spinbox, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[6], &mut self.app.interface.plate_corner_radius_spinbox, &mut self.ui_context);
-
-
+                // (Popover child widgets)
+                link_parent_child(&mut self.page_sec_containers[6], &mut self.app.interface.color_selectors[16], &mut self.ui_context);
                 
                 // Section 7: Fonts (parent of System Fonts and Program Fonts)
                 // (System Fonts)
@@ -1084,8 +1064,27 @@ fn collect_popover_rects(w: &dyn cce_ui::widget::Element, popovers: &mut Vec<(f3
                 link_parent_child(&mut self.page_sec_containers[7], &mut self.app.interface.fuzzel_box, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[7], &mut self.app.interface.terminal_menu, &mut self.ui_context);
                 link_parent_child(&mut self.page_sec_containers[7], &mut self.app.interface.terminal_box, &mut self.ui_context);
+
+                // Section 8: Containers (parent of ScrollingList, Sections, Graph)
+                // (Sections child widgets)
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.section_padding_spinbox, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.page_margin_spinbox, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.section_label_font_selector, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.label_alignment_menu, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.label_offset_spinbox, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.nested_section_label_font_selector, &mut self.ui_context);
+                // (ScrollingList child widgets)
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.color_selectors[14], &mut self.ui_context);
+                // (Graph child widgets)
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_show_grid_toggle, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_snap_enabled_toggle, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_uniform_background_toggle, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_cell_opacity_spinbox, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_gap_opacity_spinbox, &mut self.ui_context);
+                link_parent_child(&mut self.page_sec_containers[8], &mut self.app.interface.graph_gap_width_spinbox, &mut self.ui_context);
             }
 
+
             Page::Input => {
                 self.page_sec_containers.resize_with(6, cce_ui::widget::Container::new);
                 link_parent_child(page_root, &mut self.page_sec_containers[0], &mut self.ui_context);
diff --git a/src/pages/interface.rs b/src/pages/interface.rs
index d8f3641..3194bb9 100644
--- a/src/pages/interface.rs
+++ b/src/pages/interface.rs
@@ -1842,7 +1842,8 @@ pub async fn fetch_typeface_state() -> InterfaceState {
 pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_focused: &[bool], layout: &mut dyn LayoutStrategy, ctx: &mut cce_ui::context::UiContext) -> PageContent {
     let mut final_pc = PageContent::new();
     let sec_w = 260.0f32;
-    let mut builder = PageLayoutBuilder::new(layout, cx, cy, cw, ch, sec_w).with_section_count(8);
+    let mut builder = PageLayoutBuilder::new(layout, cx, cy, cw, ch, sec_w).with_section_count(9);
+
 
     // 1. Custom Parameters Section
     builder.add_section(&mut final_pc, "Custom Parameters", false, |sec| {
@@ -1865,36 +1866,6 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
         sec.widget_full(&mut state.color_selectors[2], 40.0, ctx);
         sec.spacing(12.0);
 
-        // Section child section
-
-        sec.add_section("Section", false, |subsec| {
-            subsec.spacing(8.0);
-            state.section_padding_spinbox.value = state.section_padding as i32;
-            subsec.widget_full(&mut state.section_padding_spinbox, 44.0, ctx);
-            subsec.spacing(8.0);
-            state.page_margin_spinbox.value = state.page_margin as i32;
-            subsec.widget_full(&mut state.page_margin_spinbox, 44.0, ctx);
-            subsec.spacing(8.0);
-            state.section_label_font_selector.font_family = state.section_label_font.clone();
-            subsec.widget_full(&mut state.section_label_font_selector, 44.0, ctx);
-            subsec.spacing(12.0);
-
-            // Nested Section child section
-            subsec.add_section("Nested Section", false, |subsubsec| {
-                subsubsec.spacing(8.0);
-                subsubsec.widget_full(&mut state.label_alignment_menu, 44.0, ctx);
-                subsubsec.spacing(8.0);
-                state.label_offset_spinbox.value = state.nested_section_label_offset as i32;
-                subsubsec.widget_full(&mut state.label_offset_spinbox, 44.0, ctx);
-                subsubsec.spacing(8.0);
-                state.nested_section_label_font_selector.font_family = state.nested_section_label_font.clone();
-                subsubsec.widget_full(&mut state.nested_section_label_font_selector, 44.0, ctx);
-                subsubsec.spacing(8.0);
-            });
-            subsec.spacing(8.0);
-        });
-        sec.spacing(12.0);
-
         // Grid Layout child section
         sec.add_section("Adaptive Grid", false, |subsec| {
             subsec.spacing(8.0);
@@ -1903,32 +1874,9 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
             subsec.spacing(8.0);
         });
         sec.spacing(12.0);
-
-        // Graph child section
-        sec.add_section("Graph", false, |subsec| {
-            subsec.spacing(8.0);
-            state.graph_show_grid_toggle.set_toggled(state.graph_show_grid);
-            subsec.widget_full(&mut state.graph_show_grid_toggle, state.toggle_height as f32, ctx);
-            subsec.spacing(8.0);
-            state.graph_snap_enabled_toggle.set_toggled(state.graph_snap_enabled);
-            subsec.widget_full(&mut state.graph_snap_enabled_toggle, state.toggle_height as f32, ctx);
-            subsec.spacing(8.0);
-            state.graph_uniform_background_toggle.set_toggled(state.graph_uniform_background);
-            subsec.widget_full(&mut state.graph_uniform_background_toggle, state.toggle_height as f32, ctx);
-            subsec.spacing(8.0);
-            state.graph_cell_opacity_spinbox.value = (state.graph_cell_opacity * 100.0).round() as i32;
-            subsec.widget_full(&mut state.graph_cell_opacity_spinbox, 44.0, ctx);
-            subsec.spacing(8.0);
-            state.graph_gap_opacity_spinbox.value = (state.graph_gap_opacity * 100.0).round() as i32;
-            subsec.widget_full(&mut state.graph_gap_opacity_spinbox, 44.0, ctx);
-            subsec.spacing(8.0);
-            state.graph_gap_width_spinbox.value = state.graph_gap_width as i32;
-            subsec.widget_full(&mut state.graph_gap_width_spinbox, 44.0, ctx);
-            subsec.spacing(8.0);
-        });
-        sec.spacing(8.0);
     });
 
+
     // 3. Status Section
     builder.add_section(&mut final_pc, "Status", false, |sec| {
         sec.spacing(8.0);
@@ -2003,17 +1951,6 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
             subsec.spacing(8.0);
         });
 
-        sec.spacing(12.0);
-
-        // ScrollingList Section
-        sec.add_section("ScrollingList", false, |subsec| {
-            subsec.spacing(8.0);
-            state.color_selectors[14].color = state.scrollinglist_bg_color;
-            subsec.widget_full(&mut state.color_selectors[14], 40.0, ctx);
-            subsec.spacing(8.0);
-        });
-        sec.spacing(12.0);
-
         // Breadcrumb Section
         sec.add_section("Breadcrumb", false, |subsec| {
             subsec.spacing(8.0);
@@ -2023,14 +1960,6 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
         });
         sec.spacing(12.0);
 
-        // Popover Section
-        sec.add_section("Popover", false, |subsec| {
-            subsec.spacing(8.0);
-            state.color_selectors[16].color = state.popover_bg_color;
-            subsec.widget_full(&mut state.color_selectors[16], 40.0, ctx);
-            subsec.spacing(8.0);
-        });
-        sec.spacing(12.0);
 
         // Spinbox Section
         sec.add_section("Spinbox", false, |subsec| {
@@ -2192,9 +2121,17 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
         });
         sec.spacing(12.0);
 
-
+        // Popover Section
+        sec.add_section("Popover", false, |subsec| {
+            subsec.spacing(8.0);
+            state.color_selectors[16].color = state.popover_bg_color;
+            subsec.widget_full(&mut state.color_selectors[16], 40.0, ctx);
+            subsec.spacing(8.0);
+        });
+        sec.spacing(12.0);
     });
 
+
     let widget_h = 26.0;
     const TEXT_DIM: [f32; 4] = [0.53, 0.53, 0.60, 1.0];
 
@@ -2289,7 +2226,75 @@ pub fn view(state: &mut InterfaceState, cx: f32, cy: f32, cw: f32, ch: f32, sec_
         sec.spacing(8.0);
     });
 
+    // 8. Containers Section
+    builder.add_section(&mut final_pc, "Containers", sec_focused.get(8).copied().unwrap_or(false), |sec| {
+        sec.spacing(12.0);
+
+        // Section child section
+        sec.add_section("Section", false, |subsec| {
+            subsec.spacing(8.0);
+            state.section_padding_spinbox.value = state.section_padding as i32;
+            subsec.widget_full(&mut state.section_padding_spinbox, 44.0, ctx);
+            subsec.spacing(8.0);
+            state.page_margin_spinbox.value = state.page_margin as i32;
+            subsec.widget_full(&mut state.page_margin_spinbox, 44.0, ctx);
+            subsec.spacing(8.0);
+            state.section_label_font_selector.font_family = state.section_label_font.clone();
+            subsec.widget_full(&mut state.section_label_font_selector, 44.0, ctx);
+            subsec.spacing(12.0);
+
+            // Nested Section child section
+            subsec.add_section("Nested Section", false, |subsubsec| {
+                subsubsec.spacing(8.0);
+                subsubsec.widget_full(&mut state.label_alignment_menu, 44.0, ctx);
+                subsubsec.spacing(8.0);
+                state.label_offset_spinbox.value = state.nested_section_label_offset as i32;
+                subsubsec.widget_full(&mut state.label_offset_spinbox, 44.0, ctx);
+                subsubsec.spacing(8.0);
+                state.nested_section_label_font_selector.font_family = state.nested_section_label_font.clone();
+                subsubsec.widget_full(&mut state.nested_section_label_font_selector, 44.0, ctx);
+                subsubsec.spacing(8.0);
+            });
+            subsec.spacing(8.0);
+        });
+        sec.spacing(12.0);
+
+        // ScrollingList Section
+        sec.add_section("ScrollingList", false, |subsec| {
+            subsec.spacing(8.0);
+            state.color_selectors[14].color = state.scrollinglist_bg_color;
+            subsec.widget_full(&mut state.color_selectors[14], 40.0, ctx);
+            subsec.spacing(8.0);
+        });
+        sec.spacing(12.0);
+
+        // Graph child section
+        sec.add_section("Graph", false, |subsec| {
+            subsec.spacing(8.0);
+            state.graph_show_grid_toggle.set_toggled(state.graph_show_grid);
+            subsec.widget_full(&mut state.graph_show_grid_toggle, state.toggle_height as f32, ctx);
+            subsec.spacing(8.0);
+            state.graph_snap_enabled_toggle.set_toggled(state.graph_snap_enabled);
+            subsec.widget_full(&mut state.graph_snap_enabled_toggle, state.toggle_height as f32, ctx);
+            subsec.spacing(8.0);
+            state.graph_uniform_background_toggle.set_toggled(state.graph_uniform_background);
+            subsec.widget_full(&mut state.graph_uniform_background_toggle, state.toggle_height as f32, ctx);
+            subsec.spacing(8.0);
+            state.graph_cell_opacity_spinbox.value = (state.graph_cell_opacity * 100.0).round() as i32;
+            subsec.widget_full(&mut state.graph_cell_opacity_spinbox, 44.0, ctx);
+            subsec.spacing(8.0);
+            state.graph_gap_opacity_spinbox.value = (state.graph_gap_opacity * 100.0).round() as i32;
+            subsec.widget_full(&mut state.graph_gap_opacity_spinbox, 44.0, ctx);
+            subsec.spacing(8.0);
+            state.graph_gap_width_spinbox.value = state.graph_gap_width as i32;
+            subsec.widget_full(&mut state.graph_gap_width_spinbox, 44.0, ctx);
+            subsec.spacing(8.0);
+        });
+        sec.spacing(12.0);
+    });
+
     final_pc
+
 }