0613修改侧边栏

This commit is contained in:
WEB许何哲\xuhez
2023-06-13 17:32:21 +08:00
parent 8a4320c031
commit 414f485c17
5 changed files with 158 additions and 12 deletions

View File

@@ -34,11 +34,14 @@
"data": [
'views/layout.xml',
'views/icons.xml',
# 'views/navbar.xml'
],
'assets': {
'web.assets_backend': [
'code_backend_theme/static/src/xml/styles.xml',
'code_backend_theme/static/src/xml/top_bar.xml',
# 'code_backend_theme/static/src/xml/dropdown.xml',
'code_backend_theme/static/src/xml/navbar.xml',
'code_backend_theme/static/src/scss/theme_accent.scss',
'code_backend_theme/static/src/scss/navigation_bar.scss',
'code_backend_theme/static/src/scss/datetimepicker.scss',

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>

After

Width:  |  Height:  |  Size: 448 B

View File

@@ -1,6 +1,7 @@
odoo.define('code_backend_theme.SidebarMenu', function (require) {
"use strict";
//鼠标点击侧边导航栏,对应的导航选项卡的显隐
// console.log($('.d-block').css())
$(document).on("click", '.sidebar_menu li', function (event) {
var aA = $(this).children('.d-md-flex').children()
var aLi = $(this).parent().children()
@@ -25,15 +26,16 @@ odoo.define('code_backend_theme.SidebarMenu', function (require) {
}
}
})
//鼠标点击二级菜单svg图标随着三级菜单的显隐而切换
$(document).on("mouseover", '.sidebar_menu li', function (event) {
$('.sidebar_menu li').off()
$(this).css({'background-color': '#fff !important'})
})
$(document).on("mouseleave", '.sidebar_menu li', function (event) {
$(this).css({'background-color': '#ccc !important'})
})
// $(document).on("mouseover", '.sidebar_menu li', function (event) {
// $('.sidebar_menu li').off()
// $(this).css({'background-color': '#fff !important'})
// })
// $(document).on("mouseleave", '.sidebar_menu li', function (event) {
// $(this).css({'background-color': '#ccc !important'})
// })
//sidebar toggle effect
$(document).on("click", "#closeSidebar", function (event) {
$("#closeSidebar").hide();
@@ -45,8 +47,8 @@ odoo.define('code_backend_theme.SidebarMenu', function (require) {
});
$(document).on("click", "#openSidebar", function (event) {
$("#sidebar_panel").css({'display': 'block'});
$(".o_action_manager").css({'margin-left': '200px', 'transition': 'all .1s linear'});
$(".top_heading").css({'margin-left': '200px', 'transition': 'all .1s linear', 'width': 'auto'});
$(".o_action_manager").css({'margin-left': '250px', 'transition': 'all .1s linear'});
$(".top_heading").css({'margin-left': '250px', 'transition': 'all .1s linear', 'width': 'auto'});
//add class in navbar
var navbar = $(".o_main_navbar");

View File

@@ -1,3 +1,7 @@
#sidebar_panel {
width: 250px !important;
}
.o_menu_sections {
display: flex;
flex-direction: column;
@@ -12,9 +16,9 @@
background-color: transparent;
}
//.o_menu_sections {
// background-color: transparent !important;
//}
.o_menu_sections {
background-color: unset !important;
}
.d-md-flex {
visibility: hidden;
@@ -41,3 +45,71 @@
.nav-link {
box-shadow: 0px 0px 2px #fff;
}
.sidebar_menu li:hover .dropdown-item {
background-color: unset !important;
}
.sidebar_menu li:hover .o-dropdown {
background-color: unset !important;
transition: .3s all;
}
.sidebar_menu li .o-dropdown {
background-color: unset !important;
cursor: pointer;
padding-left: 53px !important;
}
.o_menu_sections .dropdown-menu {
position: unset !important;
background-color: unset;
}
.sidebar_menu li .o_menu_sections > a {
padding-left: 53px !important;
}
.sidebar_menu li:hover .dropdown-menu a,
.sidebar_menu li:hover .dropdown-menu {
background-color: unset !important;
}
.o_menu_sections .dropdown-menu .dropdown-menu_group {
color: #ccc;
background-color: unset;
padding-bottom: 0.5rem !important;
padding-left: 89px;
}
.o_menu_sections .dropdown-menu {
width: 250px !important;
margin-left: -75px !important;
max-height: unset !important;
box-shadow: unset !important;
border: none;
}
.o-dropdown--menu .dropdown-item.focus {
background-color: unset !important;
}
.dropdown-menu .dropdown-item {
padding-left: 103px !important;
}
svg {
width: 18px;
height: 18px;
}
svg:nth-of-type(1) {
display: none;
}
.dropdown-toggle {
width: 100% !important;
display: flex;
justify-content: space-between;
}

View File

@@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<!-- Inherit the original view -->
<t t-inherit="web.NavBar.SectionsMenu" t-inherit-mode="extension" owl="1">
<!-- Modify the contents of the original view -->
<xpath expr="//div[@class='o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1']" position="replace">
<div class="o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1">
<!-- Add your custom content here -->
<t t-foreach="sections" t-as="section" t-key="section.id">
<t
t-set="sectionsVisibleCount"
t-value="(sections.length - currentAppSectionsExtra.length)"
/>
<t t-if="section_index lt Math.min(10, sectionsVisibleCount)">
<t t-set="hotkey" t-value="((section_index + 1) % 10).toString()"/>
</t>
<t t-else="">
<t t-set="hotkey" t-value="undefined"/>
</t>
<t t-if="!section.childrenTree.length">
<DropdownItem
title="section.name"
class="'o_nav_entry'"
href="getMenuItemHref(section)"
hotkey="hotkey"
t-esc="section.name"
dataset="{ menuXmlid: section.xmlid, section: section.id }"
onSelected="() => this.onNavBarDropdownItemSelection(section)"
/>
</t>
<t t-else="">
<MenuDropdown
hotkey="hotkey"
title="section.name"
xmlid="section.xmlid"
>
<t t-set-slot="toggler">
<span t-esc="section.name" t-att-data-section="section.id"/>
<svg t="1686643514098" class="icon icon1" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="892" width="200" height="200"><path d="M191.874005 288.29452c-15.95436701 0-29.007661-13.05329399-29.007661-29.007661l0-71.167876c0-15.95436701 13.05329399-29.007661 29.007661-29.007661l643.973754 0c15.95436701 0 29.007661 13.05329399 29.007661 29.007661l0 71.16787599c0 15.95436701-13.05329399 29.007661-29.007661 29.00766101L191.874005 288.29452z" fill="#ffffff" p-id="893"></path>
<path d="M835.847759 391.806036c15.95436701 0 21.211091 10.468422 11.68206399 23.264866l-316.65186998 425.214425c-9.529027 12.795421-25.122167 12.795421-34.65017101 0l-316.65084699-425.214425c-9.529027-12.796444-4.272303-23.264866 11.68206399-23.264866L835.847759 391.806036z"
fill="#ffffff" p-id="894"></path></svg>
<svg t="1686643464598" class="icon icon2" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1031" width="200" height="200"><path d="M288.29452 832.125995c0 15.95436701-13.05329399 29.007661-29.007661 29.007661l-71.167876 0c-15.95436701 0-29.007661-13.05329399-29.007661-29.007661l0-643.973754c0-15.95436701 13.05329399-29.007661 29.007661-29.007661l71.16787599 0c15.95436701 0 29.007661 13.05329399 29.00766101 29.007661L288.29452 832.125995z" fill="#ffffff" p-id="1032"></path>
<path d="M391.806036 188.152241c0-15.95436701 10.468422-21.211091 23.264866-11.68206399l425.214425 316.65186998c12.795421 9.529027 12.795421 25.122167 0 34.65017101l-425.214425 316.65084699c-12.796444 9.529027-23.264866 4.272303-23.264866-11.68206399L391.806036 188.152241z"
fill="#ffffff" p-id="1033"></path></svg>
</t>
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
<t t-set="items" t-value="section.childrenTree"/>
</t>
</MenuDropdown>
</t>
</t>
<t t-if="currentAppSectionsExtra.length" t-call="web.NavBar.SectionsMenu.MoreDropdown">
<t t-set="sections" t-value="currentAppSectionsExtra"/>
<t t-if="sectionsVisibleCount lt 10">
<t t-set="hotkey" t-value="(sectionsVisibleCount + 1 % 10).toString()"/>
</t>
</t>
</div>
</xpath>
</t>
</templates>