feat: Enhance sidebar settings with color schema and background options

This commit is contained in:
Altahir Hassan 2026-01-20 17:07:38 +04:00
parent 9a74671234
commit 90bc0679b4
3 changed files with 633 additions and 448 deletions

View File

@ -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()

View File

@ -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;
border-color: #151a2d;
background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
// 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;
background-color: #eef2ff;
color: var(--ox-sidebar-links-hover-color, #151a2d) !important;
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 {

View File

@ -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>