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

[IMP] website snippets: customize and style options inside overlay

Browse Source 
bzr revid: chm@openerp.com-20130919123206-kmn3tjxvqykvk0z6
This commit is contained in:
Christophe Matthieu
2013-09-19 14:32:06 +02:00
parent fd24ee28c0
commit 5bb8fb451c
4 changed files with 75 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+8 -1
View File
@@ -364,8 +364,15 @@ table.editorbar-panel td.selected {
display: inline-block;
}
.oe_overlay .oe_overlay_options .btn {
pointer-events: auto;
display: inline-block;
pointer-events: auto;
}
.oe_overlay .oe_overlay_options a {
pointer-events: auto;
}
.oe_overlay .oe_overlay_options .dropdown-menu {
text-align: left;
min-width: 180px;
}
.oe_overlay .oe_overlay_options .oe_label {
position: absolute;
addons/website/static/src/css/editor.sass
+6 -1
View File
@@ -322,8 +322,13 @@ table.editorbar-panel
> div
display: inline-block
.btn
pointer-events: auto
display: inline-block
pointer-events: auto
a
pointer-events: auto
.dropdown-menu
text-align: left
min-width: 180px
.oe_label
position: absolute
top: 3px
addons/website/static/src/js/website.snippets.js
+52 -56
View File
@@ -110,13 +110,8 @@
.click(function () {self.$el.toggleClass("hidden");})
.prependTo($ul);
var $stylesblock = $(openerp.qweb.render('website.snippets_style')).insertAfter($button);
$stylesblock.find('#oe_snippets_style').on('click', 'li a', _.bind(this.change_style, this));
this.fetch_snippet_templates();
this.change_style_options();
this.bind_selected_manipulator();
this.bind_snippet_click_editor();
this.activate_overlay_zones();
@@ -127,6 +122,7 @@
fetch_snippet_templates: function () {
var self = this;
var $styles = self.parent.$('#oe_snippets_style');
this.style_templates = {};
_.each(openerp.qweb.compiled_templates, function (val, key) {
if (key.indexOf('website.snippets.') === 0) {
@@ -135,15 +131,15 @@
if (snipped_id) {
if ($snippet.data('category') === 'style') {
var $li = $("<li/>")
.data("selector", $snippet.data('selector'))
.data("class", $snippet.find(".oe_snippet_class").text())
.data("snipped-id", snipped_id);
var $a = $('<a href="#"/>').text($snippet.find(".oe_snippet_label").text());
$li.append($a);
$styles.append($li);
} else if ($snippet.find(".oe_snippet_thumbnail").length) {
self.style_templates[snipped_id] = {
'snipped-id' : snipped_id,
'selector': $snippet.data('selector'),
'class': $snippet.find(".oe_snippet_class").text(),
'label': $snippet.find(".oe_snippet_label").text(),
'$el': $snippet
};
}
if ($snippet.find(".oe_snippet_thumbnail").length) {
self.$el.find('#snippet_' + $snippet.data('category')).append($snippet);
self.make_snippet_draggable($snippet);
}
@@ -151,47 +147,6 @@
}
});
},
change_style_options: function () {
var self = this;
var $styles = self.parent.$('#oe_snippets_style');
var visible = false;
$styles.find("li").each(function () {
var $li = $(this);
if (!$li.data("snipped-id"))
return;
if (self.$active_snipped_id && (!$li.data("selector") || self.dom_filter($li.data("selector")).is(self.$active_snipped_id))) {
$li.show();
if (self.$active_snipped_id.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
$li.addClass("active");
} else {
$li.removeClass("active");
}
visible = true;
}
else {
$li.hide();
}
});
$styles.parents("li:first").toggle(visible);
},
change_style: function (event) {
var $li = $(event.currentTarget).parent();
var snipped_id = $li.data("snipped-id");
var active = $li.hasClass("active");
if (website.snippet.editorRegistry[snipped_id]) {
var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$active_snipped_id);
snippet.build_snippet(this.$active_snipped_id);
}
var _class = "oe_snippet_" + snipped_id + " " + ($opt.data("class") || "");
if (active) {
this.$active_snipped_id.addClass(_class);
} else {
this.$active_snipped_id.removeClass(_class);
}
$li.toggleClass("active");
},
scrollspy: function (){
var self = this;
var $ul = this.$("ul");
@@ -296,7 +251,6 @@
} else {
self.$active_snipped_id = false;
}
this.change_style_options();
},
create_overlay: function ($snipped_id) {
if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
@@ -617,6 +571,7 @@
this.$overlay = this.$target.data('overlay');
this.snippet_id = this.$target.data("snippet-id");
this._readXMLData();
this.load_style_options();
this.start();
},
@@ -645,6 +600,10 @@
var $options = this.$overlay.find(".oe_overlay_options");
this.$editor.prependTo($options.find(".oe_options ul"));
if (!$options.find(".oe_options ul li").length) {
$options.find(".oe_options").hide();
}
$options.find(".oe_label").text(this.$el.find('.oe_snippet_label').text());
},
@@ -720,6 +679,43 @@
});
},
load_style_options: function () {
var self = this;
var $styles = this.$overlay.find('.oe_styles');
var $ul = $styles.find('ul');
$styles.hide();
_.each(this.parent.style_templates, function (val, key) {
if (!self.parent.dom_filter(val.selector).is(self.$target)) {
return;
}
var $li = $("<li/>").data(val);
$li.append($('<a href="#"/>').text(val.label));
$ul.append($li);
if (self.$target.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
$li.addClass("active");
}
$styles.show();
});
$styles.on('click', 'li a', _.bind(this.change_style, this));
},
change_style: function (event) {
var $li = $(event.currentTarget).parent();
var snipped_id = $li.data("snipped-id");
var active = $li.hasClass("active");
if (website.snippet.editorRegistry[snipped_id]) {
var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$target);
snippet.build_snippet(this.$target);
}
var _class = "oe_snippet_" + snipped_id + " " + ($li.data("class") || "");
if (active) {
this.$target.removeClass(_class);
} else {
this.$target.addClass(_class);
}
$li.toggleClass("active");
},
/*
* start
* This method is called after init and _readXMLData
addons/website/static/src/xml/website.snippets.xml
+9 -7
View File
@@ -37,14 +37,16 @@
<div class="oe_overlay">
<div class="oe_overlay_options">
<div class="dropdown oe_options">
<a href="#" data-toggle="dropdown" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-cog"/></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="divider"></li>
</ul>
<a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Customize">Customize <span class="glyphicon glyphicon-cog"/></a>
<ul class="dropdown-menu" role="menu"></ul>
</div>
<a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate"><span class="glyphicon glyphicon-tags"/></a>
<a href="#" class="btn btn-default btn-sm oe_snippet_move" title="move"><span class="glyphicon glyphicon-move"/></a>
<a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove"><span class="glyphicon glyphicon-remove"/></a>
<div class="dropdown oe_styles">
<a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Styles"><span class="glyphicon glyphicon-cog"/> Styles</a>
<ul class="dropdown-menu" role="menu"></ul>
</div>
<a href="#" class="btn btn-default btn-sm oe_snippet_clone"><span class="glyphicon glyphicon-tags"/></a>
<a href="#" class="btn btn-default btn-sm oe_snippet_move"><span class="glyphicon glyphicon-move"/></a>
<a href="#" class="btn btn-default btn-sm oe_snippet_remove"><span class="glyphicon glyphicon-remove"/></a>
<div class="oe_label"></div>
</div>
</div>