pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: improve autocomplete dropdown UI

Browse Source 
- Before this commit, Autocomplete dropdown ui is not
compatible with existing editor ui.
- After this, Autocomplete dropdown UI for url and GMAP imrpoved.

closes odoo/odoo#63528

Taskid: 2352870
Closes: https://github.com/odoo/odoo/pull/60735
X-original-commit: d44339190ba90c3a3564cc30b78477a1724efaee
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
This commit is contained in:
Siddarth Gajjar
2020-12-17 12:20:30 +00:00
parent 1a8ac6b79e
commit 4f5c4911cf
4 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+9 -1
View File
@@ -39,7 +39,15 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
this.containerEl.appendChild(linkButton);
this.el.classList.add('o_we_large_input');
this.inputEl.classList.add('text-left');
wUtils.autocompleteWithPages(this, $(this.inputEl));
const options = {
position: {
collision: 'flip fit',
},
classes: {
"ui-autocomplete": 'o_website_ui_autocomplete'
},
}
wUtils.autocompleteWithPages(this, $(this.inputEl), options);
},
//--------------------------------------------------------------------------
addons/website/static/src/js/utils.js
+3 -2
View File
@@ -32,8 +32,9 @@ function loadAnchors(url) {
* @param {ServicesMixin|Widget} self - an element capable to trigger an RPC
* @param {jQuery} $input
*/
function autocompleteWithPages(self, $input) {
function autocompleteWithPages(self, $input, options) {
$.widget("website.urlcomplete", $.ui.autocomplete, {
options: options || {},
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
@@ -50,7 +51,7 @@ function autocompleteWithPages(self, $input) {
});
},
_renderSeparator: function (ul, item) {
return $("<li class='ui-autocomplete-category font-weight-bold text-capitalize m-2'>")
return $("<li class='ui-autocomplete-category font-weight-bold text-capitalize p-2'>")
.append(`<div>${item.separator}</div>`)
.appendTo(ul);
},
addons/website/static/src/scss/website.ui.scss
+29
View File
@@ -469,3 +469,32 @@ body .modal {
color: $info;
}
}
.ui-autocomplete.o_website_ui_autocomplete {
max-width: 400px;
font-size: $o-we-sidebar-font-size;
border: none;
background-color: $o-we-sidebar-content-field-dropdown-bg;
box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
> li {
border-bottom: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
border-radius: $o-we-sidebar-content-field-border-radius;
background-color: $o-we-sidebar-content-field-clickable-bg;
color: $o-we-sidebar-content-field-clickable-color;
&.ui-menu-item {
> div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 20px;
&.ui-state-active {
border: $o-we-sidebar-content-field-dropdown-border-width solid transparent;
background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
}
}
}
&.ui-autocomplete-category {
background-color: $o-we-bg-lighter;
}
}
}
addons/website/static/src/scss/website.wysiwyg.scss
+19 -2
View File
@@ -204,9 +204,26 @@ $i: 1;
.pac-container { // google map autosuggestion
z-index: $zindex-modal-backdrop; // > $o-we-zindex
min-width: 400px;
width: $o-we-sidebar-width !important;
font-size: $o-we-sidebar-font-size;
margin-left: -$o-we-sidebar-width/2;
border-top: none;
background-color: $o-we-sidebar-content-field-dropdown-bg;
box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
&:after {
display: none;
}
.pac-item {
border-top: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
border-radius: $o-we-sidebar-content-field-border-radius;
background-color: $o-we-sidebar-content-field-clickable-bg;
color: $o-we-sidebar-content-field-clickable-color;
&:hover {
background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
cursor: pointer;
}
}
.pac-item-query {
color: $o-we-sidebar-content-field-clickable-color;
}
}