[IMP] website: UX improvements in Optimize SEO Dialog

Added cursor pointer when hovering a keyword in Related Keywords and
added relevant tooltip for the better user experience.

Renamed classes:
js_seo_keyword_suggestion -> o_seo_keyword_suggestion
js_seo_suggestion -> o_seo_suggestion

task-2070946
closes odoo/odoo#36709

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
This commit is contained in:
Kaushalya Mandaliya
2019-09-12 10:58:57 +00:00
parent dc2e990aec
commit 710406e935
3 changed files with 9 additions and 5 deletions
+3 -3
View File
@@ -20,7 +20,7 @@ var Suggestion = Widget.extend({
template: 'website.seo_suggestion',
xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
events: {
'click .js_seo_suggestion': 'select',
'click .o_seo_suggestion': 'select',
},
init: function (parent, options) {
@@ -106,7 +106,7 @@ var Keyword = Widget.extend({
},
start: function () {
var self = this;
this.$('.js_seo_keyword_suggestion').empty();
this.$('.o_seo_keyword_suggestion').empty();
this.suggestionList = new SuggestionList(this, {
root: this.keyword,
language: this.language,
@@ -115,7 +115,7 @@ var Keyword = Widget.extend({
this.suggestionList.on('selected', this, function (word, language) {
this.trigger('selected', word, language);
});
return this.suggestionList.appendTo(this.$('.js_seo_keyword_suggestion')).then(function() {
return this.suggestionList.appendTo(this.$('.o_seo_keyword_suggestion')).then(function() {
self.htmlPage.on('title-changed', self, self._updateTitle);
self.htmlPage.on('description-changed', self, self._updateDescription);
self._updateTitle();
@@ -284,6 +284,10 @@ body .modal {
}
}
}
td.o_seo_keyword_suggestion span.o_seo_suggestion.badge {
cursor: pointer;
}
}
}
@@ -32,14 +32,14 @@
<td class="text-center"><i class="js_seo_keyword_title fa fa-check" style="visibility: hidden;" t-attf-title="{{ widget.keyword }} is used in page title"/></td>
<td class="text-center"><i class="js_seo_keyword_description fa fa-check" style="visibility: hidden;" t-attf-title="{{ widget.keyword }} is used in page description"/></td>
<td class="text-center"><i t-if="widget.used_content" class="fa fa-check" t-attf-title="{{ widget.keyword }} is used in page content"/></td>
<td class="js_seo_keyword_suggestion"/>
<td class="o_seo_keyword_suggestion"/>
<td class="text-center"><a href="#" class="oe_remove" data-action="remove-keyword" t-attf-title="Remove {{ widget.keyword }}"><i class="fa fa-trash"/></a></td>
</tr>
</t>
<t t-name="website.seo_suggestion">
<li class="list-inline-item">
<span class="js_seo_suggestion badge badge-info" t-att-data-keyword="widget.keyword" t-esc="widget.keyword"/>
<span class="o_seo_suggestion badge badge-info" t-att-data-keyword="widget.keyword" t-attf-title="Add {{ widget.keyword }}" t-esc="widget.keyword"/>
</li>
</t>