Merge pull request #90 from expsa/odex_sidebar_menu_updates
feat: Enhance sidebar settings with color schema and background options
This commit is contained in:
commit
b13feee2e8
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
li:hover > .flyout-panel {
|
||||
li:hover>.flyout-panel {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
z-index: 1200;
|
||||
}
|
||||
|
||||
.flyout-item.has-children:hover > .flyout-subpanel {
|
||||
.flyout-item.has-children:hover>.flyout-subpanel {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
}
|
||||
|
||||
// Flyout support for secondary-nav
|
||||
&:hover > .flyout-panel {
|
||||
&:hover>.flyout-panel {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
}
|
||||
|
||||
li.open {
|
||||
> .menu-item-container {
|
||||
>.menu-item-container {
|
||||
background-color: #fff;
|
||||
|
||||
.menu-item-link {
|
||||
|
|
@ -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;
|
||||
>.menu-item-container {
|
||||
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,16 +406,16 @@
|
|||
&.secondary-nav {
|
||||
margin-top: auto;
|
||||
// width: calc(100% - 30px);
|
||||
background: #151a2d;
|
||||
background: var(--ox-sidebar-bg-color, #151a2d);
|
||||
padding: 20px 15px;
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
// margin: 0 15px;
|
||||
|
||||
&:hover > .nav-link {
|
||||
color: #151a2d !important;
|
||||
background-color: #eef2ff;
|
||||
&:hover>.nav-link {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -12,18 +12,36 @@
|
|||
<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>
|
||||
<group>
|
||||
<field name="sidebar_menu_icon" widget="image"
|
||||
options="{'size': [128, 128]}"/>
|
||||
options="{'size': [128, 128]}" />
|
||||
</group>
|
||||
</setting>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue