[FIX] web_editor, website: restore content menu feature
Commit3c9e6c89e7made big changes to the link editor dialog... but also broke many features with it. Commit9a1ea6dc08already 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:
@@ -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",
|
||||
}, {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user