feat: Enhance sidebar settings with color schema and background options

odex30_base/odex_sidebar_backend_theme2/models/res_config_settings.py

@@ -6,56 +6,147 @@ from odoo import fields,api, models
 class ResConfigSettings(models.TransientModel):
     _inherit = 'res.config.settings'
 
+    # Sidebar Menu Enable Setting
     sidebar_menu_enable = fields.Boolean(
         config_parameter='odex_sidebar_backend_theme2.sidebar_menu_enable',
         string='Enable Sidebar Menu',
         help='Enable or disable the sidebar menu in the backend'
     )
     
+    # Navigation Menu Section Disable Setting
     disable_nav_menu_section = fields.Boolean(
         config_parameter='odex_sidebar_backend_theme2.disable_nav_menu_section',
         string='Disable Navigation Menu Section',
         help='Enable or disable the top navigation bar menu section in the backend interface'
     )
     
+    # Sidebar Menu Icon Setting
     sidebar_menu_icon = fields.Binary(
         string="Sidebar Icon",
         help="Upload an icon for the sidebar menu.",
     )
 
+    # Uncollapsed Sidebar Overlay Setting
     uncollapsed_sidebar_overlay = fields.Boolean(
         config_parameter='odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay',
         string='Uncollapsed Sidebar Overlay',
         help='Enable overlay effect when sidebar is uncollapsed'
     )
     
-    # set default value for the setting
+    # Sidebar Background Settings
+    sidebar_background_type = fields.Selection(
+        [('color', 'Color'), ('image', 'Image')],
+        config_parameter='odex_sidebar_backend_theme2.sidebar_background_type',
+        string='Sidebar Background Type',
+        default='color',
+        help='Choose the type of background for the sidebar'
+    )
+    sidebar_background_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_background_color',
+        default='#151a2d',
+        string='Sidebar Background Color',
+        help='Set the background color for the sidebar (hex code or color name)'
+    )
+    sidebar_background_image = fields.Binary(
+        string='Sidebar Background Image',
+        help='Upload an image to use as the sidebar background'
+    )
+
+    # Sidebar Links Color Settings
+    sidebar_links_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_color',
+        default='#ffffff',
+        string='Sidebar Links Color',
+        help='Set the color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_hover_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_hover_color',
+        default='#151a2d',
+        string='Sidebar Links Hover Color',
+        help='Set the hover color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_active_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_active_color',
+        default='#151a2d',
+        string='Sidebar Links Active Color',
+        help='Set the active color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_bg_color',
+        default='#ffffff00',
+        string='Sidebar Links Background Color',
+        help='Set the background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_hover_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_hover_bg_color',
+        default='#151a2d',
+        string='Sidebar Links Hover Background Color',
+        help='Set the hover background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_active_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_active_bg_color',
+        default='#ffffff',
+        string='Sidebar Links Active Background Color',
+        help='Set the active background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_scrollbar_track_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_track_color',
+        default='#2f3542',
+        string='Sidebar Scrollbar Track Color',
+        help='Set the color for the sidebar scrollbar track (hex code or color name)'
+    )
+    sidebar_scrollbar_thumb_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color',
+        default='#151a2d',
+        string='Sidebar Scrollbar Thumb Color',
+        help='Set the color for the sidebar scrollbar thumb (hex code or color name)'
+    )
+    sidebar_scrollbar_thumb_hover_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color',
+        default='#151a2d',
+        string='Sidebar Scrollbar Thumb Hover Color',
+        help='Set the hover color for the sidebar scrollbar thumb (hex code or color name)'
+    )
+
     def get_values(self):
         res = super(ResConfigSettings, self).get_values()
         IrConfigParam = self.env['ir.config_parameter'].sudo()
         sidebar_menu_enable = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_enable')
         disable_nav_menu_section = IrConfigParam.get_param('odex_sidebar_backend_theme2.disable_nav_menu_section')
         uncollapsed_sidebar_overlay = IrConfigParam.get_param('odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay')
+        sidebar_background_type = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_type')
+        sidebar_background_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_color')
+        sidebar_background_image = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_image')
+        sidebar_links_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_color')
+        sidebar_links_hover_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_hover_color')
+        sidebar_links_active_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_active_color')
+        sidebar_links_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_bg_color')
+        sidebar_links_hover_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_hover_bg_color')
+        sidebar_links_active_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_active_bg_color')
+        sidebar_scrollbar_track_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_track_color')
+        sidebar_scrollbar_thumb_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color')
+        sidebar_scrollbar_thumb_hover_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color')
+
         res.update(
             sidebar_menu_enable=sidebar_menu_enable == 'True',
             disable_nav_menu_section=disable_nav_menu_section == 'True',
             sidebar_menu_icon=IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_icon'),
             uncollapsed_sidebar_overlay=uncollapsed_sidebar_overlay == 'True',
+            sidebar_background_type=sidebar_background_type or 'color',
+            sidebar_background_color=sidebar_background_color or '#151a2d',
+            sidebar_background_image=sidebar_background_image or False,
+            sidebar_links_color=sidebar_links_color or '#ffffff',
+            sidebar_links_hover_color=sidebar_links_hover_color or '#151a2d',
+            sidebar_links_active_color=sidebar_links_active_color or '#151a2d',
+            sidebar_links_bg_color=sidebar_links_bg_color or '#ffffff00',
+            sidebar_links_hover_bg_color=sidebar_links_hover_bg_color or '#151a2d',
+            sidebar_links_active_bg_color=sidebar_links_active_bg_color or '#ffffff',
+            sidebar_scrollbar_track_color=sidebar_scrollbar_track_color or '#2f3542',
+            sidebar_scrollbar_thumb_color=sidebar_scrollbar_thumb_color or '#151a2d',
+            sidebar_scrollbar_thumb_hover_color=sidebar_scrollbar_thumb_hover_color or '#151a2d',
         )
         return res
     
-    def _generate_sidebar_css(self):
-        """Generate CSS rules for sidebar menu state"""
-        if self.disable_nav_menu_section:
-            return """
-.o_main_navbar .o_menu_sections {
-    display: none!important;
-    visibility: hidden!important;
-}
-"""
-        return ""
-    
-    # save the setting value
     def set_values(self):
         super(ResConfigSettings, self).set_values()
         IrConfigParam = self.env['ir.config_parameter'].sudo()
@@ -75,7 +166,56 @@ class ResConfigSettings(models.TransientModel):
             'odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay',
             str(self.uncollapsed_sidebar_overlay)
         )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_type',
+            self.sidebar_background_type or 'color'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_color',
+            self.sidebar_background_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_image',
+            self.sidebar_background_image or False
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_color',
+            self.sidebar_links_color or '#ffffff'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_hover_color',
+            self.sidebar_links_hover_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_active_color',
+            self.sidebar_links_active_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_bg_color',
+            self.sidebar_links_bg_color or '#ffffff00'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_hover_bg_color',
+            self.sidebar_links_hover_bg_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_active_bg_color',
+            self.sidebar_links_active_bg_color or '#ffffff'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_track_color',
+            self.sidebar_scrollbar_track_color or '#2f3542'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color',
+            self.sidebar_scrollbar_thumb_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color',
+            self.sidebar_scrollbar_thumb_hover_color or '#151a2d'
+        )
 
+        # Store sidebar menu icon URL
         if self.sidebar_menu_icon:
             # Store the image URL in config parameter
             image_url = f"/web/image/res.config.settings/{self.id}/sidebar_menu_icon"
@@ -92,6 +232,32 @@ class ResConfigSettings(models.TransientModel):
             
         return True
     
+    def _generate_sidebar_css(self):
+        """Generate CSS rules for sidebar menu state"""
+        css = f"""
+/* Sidebar Menu State CSS */
+:root {{
+    --ox-sidebar-bg-color: {self.sidebar_background_color};
+    --ox-sidebar-links-color: {self.sidebar_links_color};
+    --ox-sidebar-links-hover-color: {self.sidebar_links_hover_color};
+    --ox-sidebar-links-active-color: {self.sidebar_links_active_color};
+    --ox-sidebar-links-bg-color: {self.sidebar_links_bg_color};
+    --ox-sidebar-links-hover-bg-color: {self.sidebar_links_hover_bg_color};
+    --ox-sidebar-links-active-bg-color: {self.sidebar_links_active_bg_color};
+    --ox-sidebar-scrollbar-track-color: {self.sidebar_scrollbar_track_color};
+    --ox-sidebar-scrollbar-thumb-color: {self.sidebar_scrollbar_thumb_color};
+    --ox-sidebar-scrollbar-thumb-hover-color: {self.sidebar_scrollbar_thumb_hover_color};
+}}
+"""
+        if self.disable_nav_menu_section:
+            css += """
+.o_main_navbar .o_menu_sections {
+    display: none!important;
+    visibility: hidden!important;
+}
+"""
+        return css
+    
     @api.model
     def get_sidebar_setting(self):
         IrConfigParam = self.env['ir.config_parameter'].sudo()

odex30_base/odex_sidebar_backend_theme2/static/src/scss/sidebar_menu.scss

@@ -10,7 +10,7 @@
     width: 270px;
     height: 100vh;
     overflow: auto;
-  background-color: #151a2d;
+    background-color: var(--ox-sidebar-bg-color, #151a2d);
     z-index: 999;
     transform: translateX(0%);
     transition: all 0.4s ease-in-out;
@@ -36,7 +36,7 @@
             left: 100%;
             top: 0;
             min-width: 220px;
-      background: #151a2d;
+            background: var(--ox-sidebar-bg-color, #151a2d);
             color: #fff;
             border-radius: 10px;
             padding: 10px;
@@ -250,16 +250,16 @@
     }
 
     &::-webkit-scrollbar-track {
-    background: #2f3542;
+        background: var(--ox-sidebar-scrollbar-track-color, #0e1223);
     }
 
     &::-webkit-scrollbar-thumb {
-    background-color: #151a2d;
+        background-color: var(--ox-sidebar-scrollbar-thumb-color, #151a2d);
         border-radius: 4px;
     }
 
     &::-webkit-scrollbar-thumb:hover {
-    background-color: #151a2d;
+        background-color: var(--ox-sidebar-scrollbar-thumb-hover-color, #151a2d);
     }
 
     .sidebar-header {
@@ -324,14 +324,15 @@
             transition: 0.4s ease;
 
             &.primary-nav {
+
                 .has-children,
                 li:not(.has-children) {
                     &:hover {
                         >.menu-item-container {
-              background-color: #eef2ff;
+                            background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
 
                             .menu-item-link {
-                color: #151a2d;
+                                color: var(--ox-sidebar-links-hover-color, #151a2d);
                             }
                         }
                     }
@@ -343,7 +344,7 @@
                         justify-content: space-between;
                         cursor: pointer;
                         transition: all 0.3s;
-            border: 1px solid #151a2d;
+                        border: 1px solid transparent;
                         text-decoration: none;
                         padding: 11px 15px;
                         border-radius: 8px;
@@ -390,11 +391,11 @@
                             transition: all 0.2s ease;
 
                             &:hover {
-                background-color: #eef2ff;
+                                background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
-                border-color: #151a2d;
+                                // border-color: #151a2d;
 
                                 .menu-item-link {
-                  color: #151a2d;
+                                    color: var(--ox-sidebar-links-hover-color, #151a2d);
                                 }
                             }
                         }
@@ -405,7 +406,7 @@
             &.secondary-nav {
                 margin-top: auto;
                 // width: calc(100% - 30px);
-        background: #151a2d;
+                background: var(--ox-sidebar-bg-color, #151a2d);
                 padding: 20px 15px;
 
                 .nav-item {
@@ -413,8 +414,8 @@
                     // margin: 0 15px;
 
                     &:hover>.nav-link {
-            color: #151a2d !important;
+                        color: var(--ox-sidebar-links-hover-color, #151a2d) !important;
-            background-color: #eef2ff;
+                        background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
                     }
 
                     .nav-link {
@@ -426,7 +427,7 @@
                         padding: 11px 15px;
                         align-items: center;
                         text-decoration: none;
-            border: 1px solid #151a2d;
+                        border: 1px solid transparent;
                         transition: 0.4s ease;
 
                         .nav_icon {

odex30_base/odex_sidebar_backend_theme2/views/res_config_settings.xml

@@ -12,7 +12,8 @@
                         <setting help="Enable or disable the sidebar menu in the backend interface">
                             <field name="sidebar_menu_enable" />
                         </setting>
-                        <setting help="Enable or disable the top navigation bar menu section in the backend interface">
+                        <setting
+                            help="Enable or disable the top navigation bar menu section in the backend interface">
                             <field name="disable_nav_menu_section" />
                         </setting>
                         <setting>
@@ -24,6 +25,23 @@
                         <setting help="Enable overlay effect when sidebar is uncollapsed">
                             <field name="uncollapsed_sidebar_overlay" />
                         </setting>
+                        <setting help="Color Schema Setting">
+                            <group>
+                                <field name="sidebar_background_type" />
+                                <field name="sidebar_background_color" widget="color" />
+                                <field name="sidebar_background_image" widget="image"
+                                    options="{'size': [128, 128]}" />
+                                <field name="sidebar_links_color" widget="color" />
+                                <field name="sidebar_links_hover_color" widget="color" />
+                                <field name="sidebar_links_active_color" widget="color" />
+                                <field name="sidebar_links_bg_color" widget="color" />
+                                <field name="sidebar_links_hover_bg_color" widget="color" />
+                                <field name="sidebar_links_active_bg_color" widget="color" />
+                                <field name="sidebar_scrollbar_track_color" widget="color" />
+                                <field name="sidebar_scrollbar_thumb_color" widget="color" />
+                                <field name="sidebar_scrollbar_thumb_hover_color" widget="color" />
+                            </group>
+                        </setting>
                     </block>
                 </app>
             </xpath>