[FIX] web_editor, website: restore content menu feature

Commit 3c9e6c89e7 made big changes to the
link editor dialog... but also broke many features with it.

Commit 9a1ea6dc08 already fixed some of
them but this commit fixes a bigger one. Indeed, the menu edition
feature was totally broken since the changes. Also, the DOM was messy
which broke form navigation, etc.
This commit also simplifies the LESS which was uselessly big.
This commit is contained in:
qsm-odoo
2017-02-20 17:37:15 +01:00
parent a5361605cb
commit b4d8a270e1
6 changed files with 85 additions and 109 deletions
+5 -5
View File
@@ -166,16 +166,16 @@ odoo.define('web_editor.tour', function (require) {
extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right',
}, {
content: "click on color style",
trigger: '.o-link-color-selector > .o-link-color.btn-success',
trigger: '.o_link_dialog_color > .o_link_dialog_color_item.btn-success',
extra_trigger: 'a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right',
}, {
content: "insert a link url",
trigger: '#link-external',
trigger: '#o_link_dialog_url_input',
extra_trigger: 'a#link-preview.btn',
run: "text http://www.odoo.com",
}, {
content: "change text label",
trigger: '#link-text',
trigger: '#o_link_dialog_label_input',
run: "text ABC[IMG] DEF",
}, {
content: "save link",
@@ -191,11 +191,11 @@ odoo.define('web_editor.tour', function (require) {
extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right',
}, {
content: "click on color style again",
trigger: '.o-link-color-selector > .o-link-color.btn-success',
trigger: '.o_link_dialog_color > .o_link_dialog_color_item.btn-success',
extra_trigger: 'a#link-preview:containsRegex(/^<img [^>]+>$/) img',
}, {
content: "insert an email",
trigger: '#link-external',
trigger: '#o_link_dialog_url_input',
extra_trigger: 'a#link-preview.btn',
run: "text test@test.test",
}, {
+4 -3
View File
@@ -945,7 +945,7 @@ var LinkDialog = Dialog.extend({
'keyup :input.url': 'onkeyup',
'keyup :input': 'preview',
'click button.remove': 'remove_link',
'change input#link-text': function (e) {
'change input#o_link_dialog_label_input': function (e) {
this.text = $(e.target).val();
},
'change .link-style': function (e) {
@@ -1041,6 +1041,7 @@ var LinkDialog = Dialog.extend({
start: function () {
this.bind_data();
this.$('input.url-source:eq(1)').closest('.list-group-item').addClass('active');
this.$('#o_link_dialog_label_input').focus();
return this._super.apply(this, arguments);
},
get_data: function (test) {
@@ -1051,7 +1052,7 @@ var LinkDialog = Dialog.extend({
$e = this.$('input.url-source:first');
}
var val = $e.val();
var label = this.$('#link-text').val() || val;
var label = this.$('#o_link_dialog_label_input').val() || val;
if (label && this.data.images) {
for(var i=0; i<this.data.images.length; i++) {
@@ -1105,7 +1106,7 @@ var LinkDialog = Dialog.extend({
var text = this.data.text;
var classes = this.data.iniClassName;
this.$('input#link-text').val(text);
this.$('input#o_link_dialog_label_input').val(text);
this.$('input.window-new').prop('checked', new_window);
this.$('input.link-style').prop('checked', false).first().prop("checked", true);
@@ -442,49 +442,31 @@ body .modal {
}
// LINK EDITOR DIALOG COLOR SELECTOR
.o-link-editor-dialog{
.o-link-color-selector{
.o-link-color{
position: relative;
display: inline-block;
height: 30px;
width: 30px;
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.25);
input.link-style{
display: none;
}
&:first-child{
span{
color: #444;
}
&::before{
content: 'L';
display: inline-block;
color: @link-color;
font-weight: bold;
font-size: 17px;
text-decoration: underline;
.o-position-absolute(@top: 0px, @left: 8px);
}
}
input:checked + span{
height: 0px;
width: 0px;
&::before {
content: '\f00c';
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
.o-position-absolute(@top: 6px, @left: 5px);
}
.o_link_dialog {
.o_link_dialog_color > .o_link_dialog_color_item {
position: relative;
width: 30px;
height: 30px;
border: 2px solid rgba(0, 0, 0, 0.25);
border-radius: 50%;
input:checked + i::before {
content: "\f00c";
.o-position-absolute(@top: 6px, @left: 5px);
}
&.btn-link {
padding: 3px 9px;
> span {
text-decoration: underline;
}
}
}
.o-link-vr{
border-right: 1px solid @gray-lighter;
.o_link_dialog_preview {
border-left: 1px solid @gray-lighter;
}
}
}
// FIXME bootstrap modal : 1050
+49 -46
View File
@@ -218,58 +218,61 @@
</t>
<!-- Link Dialog (allows to choose a style and content for a link on the page) -->
<form t-name="web_editor.dialog.link" class="o-link-editor-dialog">
<div t-name="web_editor.dialog.link" class="o_link_dialog">
<div class="row">
<div class="col-md-8 o-link-vr">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="link-new">Link Label</label>
<div class="col-sm-9">
<input class="form-control" id="link-text" required="required"/>
</div>
<form class="col-md-8 form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="o_link_dialog_label_input">Link Label</label>
<div class="col-sm-9">
<input class="form-control" id="o_link_dialog_label_input" required="required"/>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="link-new">URL or Email</label>
<div class="col-sm-9">
<input class="form-control url email-address url-source" id="link-external" required="required"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="o_link_dialog_url_input">URL or Email</label>
<div class="col-sm-9">
<input class="form-control url email-address url-source" id="o_link_dialog_url_input" required="required"/>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Size</label>
<div class="col-sm-9">
<select class="form-control col-sm-3 link-style">
<option value="btn-xs">Extra Small</option>
<option value="btn-sm">Small</option>
<option value="" selected="selected">Medium</option>
<option value="btn-lg">Large</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Size</label>
<div class="col-sm-9">
<select class="form-control col-sm-3 link-style">
<option value="btn-xs">Extra Small</option>
<option value="btn-sm">Small</option>
<option value="" selected="selected">Medium</option>
<option value="btn-lg">Large</option>
</select>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Color</label>
<div class="col-sm-9">
<div class="o-link-color-selector">
<t t-foreach="['', 'btn-primary', 'btn-success', 'btn-info', 'btn-warning', 'btn-danger', 'btn-alpha', 'btn-beta', 'btn-gamma', 'btn-delta', 'btn-epsilon', 'btn-default']" t-as="color">
<label t-attf-class="o-link-color #{color}" t-att-data-color="color">
<input class="link-style" name="link-style-type" type="radio" t-att-value="color"/>
<span/>
</label>
</t>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<label class="o_switch">
<input class="window-new" type="checkbox"/>
<span/>
Open in new window
</label>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Color</label>
<div class="col-sm-9">
<div class="o_link_dialog_color">
<label t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color="">
<span>L</span>
<input class="hidden link-style" name="link-style-type" type="radio" value=""/>
<i class="fa"/>
</label>
<t t-foreach="['btn-primary', 'btn-default', 'btn-success', 'btn-info', 'btn-warning', 'btn-danger', 'btn-alpha', 'btn-beta', 'btn-gamma', 'btn-delta', 'btn-epsilon']" t-as="color">
<label t-attf-class="o_link_dialog_color_item o_btn_preview btn #{color}" t-att-data-color="color">
<input class="hidden link-style" name="link-style-type" type="radio" t-att-value="color"/>
<i class="fa"/>
</label>
</t>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<label class="o_switch">
<input class="window-new" type="checkbox"/>
<span/>
Open in new window
</label>
</div>
</div>
</form>
<div class="col-md-4 o_link_dialog_preview">
<div class="form-group text-center">
<label>Preview</label>
<div style="overflow: auto; max-width: 100%; max-height: 200px;">
@@ -278,7 +281,7 @@
</div>
</div>
</div>
</form>
</div>
<!--=================-->
<!-- Snippet options -->
@@ -321,23 +321,13 @@ var MenuEntryDialog = widget.LinkDialog.extend({
return this._super.apply(this, arguments);
},
start: function () {
var self = this;
this.$(".link-style").remove();
this.$("label[for=link-new]").text("Menu Label");
return $.when(this._super.apply(this, arguments)).then(function () {
var $link_text = self.$('#link-text').focus();
self.$('#link-page').change(function (e) {
if ($link_text.val()) { return; }
var data = $(this).select2('data');
$link_text.val(data.create ? data.id : data.text);
$link_text.focus();
});
});
this.$(".o_link_dialog_preview").remove();
this.$(".window-new, .link-style").closest(".form-group").remove();
this.$("label[for='o_link_dialog_label_input']").text(_t("Menu Label"));
return this._super.apply(this, arguments);
},
save: function () {
var $e = this.$('#link-text');
var $e = this.$('#o_link_dialog_label_input');
if (!$e.val() || !$e[0].checkValidity()) {
$e.closest('.form-group').addClass('has-error');
$e.focus();
@@ -112,8 +112,8 @@ website.TopBar.include({
widget.LinkDialog.include({
bind_data: function () {
this.$( "#link-external" ).autocomplete({
source: function(request, response) {
this.$( "#o_link_dialog_url_input" ).autocomplete({
source: function (request, response) {
return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
model: 'website',
method: 'search_pages',