[FIX] web_editor: restore m2o widget in edit mode

Hide the button used to display the input and show the input
directly. Add a search icon into the input. Deactivate the browser
autocomplete. Improve and fix the layout. Keep the field selected
after choosing a result from the list.

This commit was only about making it work in the 13.0 left panel. It
will be improved further in master with our new left panel.

task-2187712

closes odoo/odoo#50024

X-original-commit: 6660ee960a3c643ae92448d7bdc37f6c780605b6
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2020-04-22 16:53:06 +00:00
committed by qsm-odoo
parent c22f99dd09
commit 3920bb6fcf
3 changed files with 7 additions and 18 deletions
@@ -3093,9 +3093,7 @@ registry.many2one = SnippetOptionWidget.extend({
self.$target.html($li.data('name'));
}
_.defer(function () {
self.trigger_up('deactivate_snippet');
});
this._clear();
}
});
@@ -999,16 +999,6 @@ body.editor_enable.editor_has_snippets {
}
}
}
.contact_menu {
display: block;
top: -24px;
margin: 0px;
padding: 2px 0px;
position: relative;
min-height: 44px;
position: absolute !important;
}
}
.s-resize-important * {
@@ -51,19 +51,20 @@
</div>
</div>
<!-- t-field options -->
<t t-name="web_editor.many2one.button">
<div class="btn-group">
<a role="button" href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a>
<ul class="dropdown-menu contact_menu" role="menu">
<li><a role="menuitem" class="dropdown-item"><input href="#" type="email" placeholder="Search"/></a></li>
<a role="button" href="#" class="btn btn-secondary dropdown-toggle d-none" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact">
<i class="fa fa-search"></i>
</a>
<ul class="dropdown-menu contact_menu d-block list-group list-group-flush mx-1" role="menu">
<li class="px-1"><a role="menuitem" class="dropdown-item pl-1 pr-2"><i class="fa fa-search"></i><input href="#" type="email" placeholder="Search" class="ml-2" autocomplete="off"/></a></li>
</ul>
</div>
</t>
<t t-name="web_editor.many2one.search">
<t t-foreach="contacts" t-as="item">
<li><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
<li class="list-group-item px-2"><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
</t>
</t>
</templates>