Skip to content
Permalink
Browse files

m

  • Loading branch information...
kea14 committed Mar 20, 2019
1 parent 3b38197 commit cb57833e4ae94a4be64003fb329772a1e3b26cb9
@@ -26,6 +26,7 @@ def _default_sequence(self):
child_id = fields.One2many('website.menu', 'parent_id', string='Child Menus')
parent_path = fields.Char(index=True)
is_visible = fields.Boolean(compute='_compute_visible', string='Is Visible')
mega_menu_content = fields.Html(string='Mega Menu Content', translate=True)

@api.multi
def name_get(self):
@@ -114,6 +115,7 @@ def make_tree(node):
parent_id=node.parent_id.id,
children=[],
is_homepage=is_homepage,
is_mega_menu=isinstance(node.mega_menu_content, str),
)
for child in node.child_id:
menu_node['children'].append(make_tree(child))
@@ -158,3 +160,18 @@ def replace_id(old_id, new_id):
menu_id.write(menu)

return True

@api.model
def toggle_mega_menu(self, data):
menu_item = self.browse(data['data']['id'])
if menu_item.mega_menu_content:
content = False
else:
content = """
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
"""
menu_item.write({'mega_menu_content': content})
@@ -215,6 +215,8 @@ var EditorMenu = Widget.extend({
* @private
*/
_onSaveClick: function () {
// Close all dropdowns menu to avoid saving opened + edited dropdown
$('.dropdown-menu').dropdown('hide');
this.save();
},
});
@@ -1539,4 +1539,11 @@ options.registry.anchorName = options.Class.extend({
this.$target.trigger('content_changed');
},
});

options.registry.megaMenu = options.Class.extend({

start: function () {
console.log('start');
},
});
});
@@ -453,6 +453,7 @@ var EditMenuDialog = weWidgets.Dialog.extend({
'click a.js_add_menu': '_onAddMenuButtonClick',
'click button.js_delete_menu': '_onDeleteMenuButtonClick',
'click button.js_edit_menu': '_onEditMenuButtonClick',
'click button.js_convert_mega_menu': '_onConvertMegaMenuButtonClick',
}),

/**
@@ -643,6 +644,19 @@ var EditMenuDialog = weWidgets.Dialog.extend({
Dialog.alert(null, "Could not find menu entry");
}
},
/**
* @private
*/
_onConvertMegaMenuButtonClick: function (ev) {
var $menu = $(ev.currentTarget).closest('[data-menu-id]');
var menuID = $menu.data('menu-id') | 0;
this._rpc({
model: 'website.menu',
method: 'toggle_mega_menu',
args: [{ data: this.flat[menuID] }],
});
$(ev.currentTarget).removeClass('btn-info').addClass('btn-success');
},
});

var PageOption = Class.extend({
@@ -1154,3 +1154,45 @@ table.table_desc tr td {
.modal-footer > .float-left {
margin-right: auto;
}

.dropdown-menu {
min-width: 200px;
}

.dropdown-menu.columns-2 {
min-width: 400px;
}

.dropdown-menu.columns-3 {
min-width: 600px;
}

.dropdown-menu li a {
padding: 5px 15px;
}

.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}

.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}

.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}

@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
@@ -10,9 +10,11 @@
<span class="js_menu_label o_text_overflow flex-grow-1">
<t t-esc="submenu.name"/>
</span>
<span t-if="submenu.is_mega_menu" class="badge badge-primary">Mega Menu</span>
<i t-if="submenu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
</span>
<span class="input-group-append">
<button type="button" t-attf-class="btn btn-info js_convert_mega_menu fa fa-sitemap" t-attf-aria-label="#{submenu.is_mega_menu ? 'Remove Mega Menu' : 'Convert into Mega Menu'}" t-attf-title="#{submenu.is_mega_menu ? 'Remove Mega Menu' : 'Convert into Mega Menu'}"/>
<button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>
<button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/>
</span>
@@ -818,6 +818,59 @@
</div>
</template>

<template id="s_link_menu" name="Link">
<div class="o_link_menu">
<a class="dropdown-item" href="#">New menu item</a>
</div>
</template>

<template id="s_sublink_menu" name="Sublink">
<div class="o_sublink_menu">
<a class="dropdown-item" href="#">New menu item</a>
</div>
</template>

<template id="s_dropdown_menu" name="Dropdown">
<div class="o_dropdown_menu dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</template>

<template id="s_title_menu" name="Title">
<div class="o_title_menu">
<h3 class="dropdown-item">Title</h3>
</div>
</template>

<template id="s_subtitle_menu" name="Subtitle">
<div class="o_subtitle_menu">
<h5 class="dropdown-item">Subtitle</h5>
</div>
</template>

<template id="s_image_menu" name="Image">
<div class="o_image_menu">
<img src="..." class="img-fluid" alt="Responsive image"/>
</div>
</template>

<template id="s_column_menu" name="Column">
<div class="o_column_menu col">
column
</div>
</template>

<template id="s_divider_menu" name="Divider">
<div class="o_divider_menu dropdown-divider"></div>
</template>

<!-- Snippets menu -->
<template id="snippets" inherit_id="web_editor.snippets" primary="True">
<xpath expr="//div[@id='o_scroll']" position="replace">
@@ -882,6 +935,23 @@
</div>
</div>

<div id="snippet_menu" class="o_panel">
<div class="o_panel_header">
<i class="fa fa-puzzle-piece"/> Mega Menu
</div>
<div class="o_panel_body">
<!-- TODO: change images! -->
<t t-snippet="website.s_link_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_sublink_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_dropdown_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_title_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_subtitle_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_column_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_divider_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
</div>
</div>

</div>
</xpath>

@@ -1354,5 +1424,13 @@
data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *, .row > div">
<a tabindex="-1" href="#" class="dropdown-item" data-no-preview="true" data-open-anchor-dialog=""><i class="fa fa-anchor"/>Anchor Name</a>
</div>

<div id="mega_menu_snippets"
data-selector=".o_link_menu, .o_sublink_menu, .o_dropdown_menu, .o_title_menu, .o_subtitle_menu, .o_image_menu, .o_column_menu, .o_divider_menu"
data-drop-near="ul.dropdown-menu, div.dropdown-menu, li.dropdown, a.dropdown-item"
data-drop-in=".o_mega_menu"/>

<div data-js="megaMenu"
data-selector="#top_menu div.dropdown-menu"/>
</template>
</odoo>
@@ -131,7 +131,8 @@
<!-- Layout -->
<template id="submenu" name="Submenu">
<t t-set="has_visible_submenu" t-value="submenu.child_id.filtered(lambda menu: menu.is_visible)"/>
<li t-if="submenu.is_visible and not has_visible_submenu" t-attf-class="#{item_class or ''}">
<t t-set="has_mega_menu_content" t-value="submenu.mega_menu_content"/>
<li t-if="submenu.is_visible and not has_visible_submenu and not has_mega_menu_content" t-attf-class="#{item_class or ''}">
<a t-att-href="submenu.clean_url()"
t-attf-class="#{link_class or ''} #{'active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
role="menuitem"
@@ -140,7 +141,7 @@
<span t-field="submenu.name"/>
</a>
</li>
<li t-if="has_visible_submenu" t-attf-class="#{item_class or ''} dropdown #{
<li t-if="has_visible_submenu and not has_mega_menu_content" t-attf-class="#{item_class or ''} dropdown #{
(submenu.clean_url() and submenu.clean_url() != '/' and any([request.httprequest.path == child.url for child in submenu.child_id if child.url]) or
(submenu.clean_url() and request.httprequest.path == submenu.clean_url())) and 'active'
}">
@@ -156,6 +157,34 @@
</t>
</ul>
</li>
<li t-if="has_mega_menu_content" t-attf-class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<span t-field="submenu.name"/><b class="caret"></b>
</a>
<span t-field="submenu.mega_menu_content" class="o_mega_menu"/>
<!-- <ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul> -->
</li>
</template>

<template id="layout" name="Main layout" inherit_id="portal.frontend_layout">

0 comments on commit cb57833

Please sign in to comment.
You can’t perform that action at this time.