[IMP] website snippet: test with cache and highlight
bzr revid: chm@openerp.com-20130920184211-t7aa6e2nna1th6yi
This commit is contained in:
parent
97eb279f6e
commit
33ab9a60d6
|
@ -129,6 +129,18 @@ table.editorbar-panel td.selected {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- SNIPPET EDITOR ---- */
|
/* ---- SNIPPET EDITOR ---- */
|
||||||
|
#oe_snippet_cache {
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1001;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
#oe_snippets {
|
#oe_snippets {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
@ -272,7 +284,7 @@ table.editorbar-panel td.selected {
|
||||||
}
|
}
|
||||||
.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
|
.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
|
||||||
background: rgba(0, 255, 133, 0.22);
|
background: rgba(0, 255, 133, 0.22);
|
||||||
z-index: 1001;
|
z-index: 1002;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oe_drop_zone_style {
|
.oe_drop_zone_style {
|
||||||
|
@ -282,6 +294,12 @@ table.editorbar-panel td.selected {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- SNIPPET MANIPULATOR ---- */
|
/* ---- SNIPPET MANIPULATOR ---- */
|
||||||
|
.oe_snippet_overlay_activate {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1003;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
.oe_overlay {
|
.oe_overlay {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -290,6 +308,7 @@ table.editorbar-panel td.selected {
|
||||||
transition: opacity 100ms linear;
|
transition: opacity 100ms linear;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
z-index: 1003;
|
||||||
}
|
}
|
||||||
.oe_overlay.oe_active {
|
.oe_overlay.oe_active {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -343,7 +362,7 @@ table.editorbar-panel td.selected {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: -11px;
|
top: -11px;
|
||||||
z-index: 1002;
|
z-index: 1003;
|
||||||
}
|
}
|
||||||
.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
|
.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
|
@ -116,6 +116,17 @@ table.editorbar-panel
|
||||||
|
|
||||||
/* ---- SNIPPET EDITOR ---- */
|
/* ---- SNIPPET EDITOR ---- */
|
||||||
|
|
||||||
|
#oe_snippet_cache
|
||||||
|
background: rgba(0,0,0,.4)
|
||||||
|
position: fixed
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
z-index: 1001
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
display: none
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
#oe_snippets
|
#oe_snippets
|
||||||
position: fixed
|
position: fixed
|
||||||
left: 0px
|
left: 0px
|
||||||
|
@ -239,7 +250,7 @@ table.editorbar-panel
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
&.oe_hover
|
&.oe_hover
|
||||||
background: rgba(0, 255, 133, 0.22)
|
background: rgba(0, 255, 133, 0.22)
|
||||||
z-index: 1001
|
z-index: 1002
|
||||||
|
|
||||||
.oe_drop_zone_style
|
.oe_drop_zone_style
|
||||||
color: white
|
color: white
|
||||||
|
@ -248,6 +259,11 @@ table.editorbar-panel
|
||||||
|
|
||||||
/* ---- SNIPPET MANIPULATOR ---- */
|
/* ---- SNIPPET MANIPULATOR ---- */
|
||||||
|
|
||||||
|
.oe_snippet_overlay_activate
|
||||||
|
position: relative
|
||||||
|
z-index: 1003
|
||||||
|
background: rgba(255,255,255,1)
|
||||||
|
|
||||||
.oe_overlay
|
.oe_overlay
|
||||||
display: none
|
display: none
|
||||||
position: absolute
|
position: absolute
|
||||||
|
@ -256,6 +272,7 @@ table.editorbar-panel
|
||||||
transition: opacity 100ms linear
|
transition: opacity 100ms linear
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
z-index: 1003
|
||||||
&.oe_active
|
&.oe_active
|
||||||
display: block
|
display: block
|
||||||
border-style: dashed
|
border-style: dashed
|
||||||
|
@ -301,7 +318,7 @@ table.editorbar-panel
|
||||||
width: 100%
|
width: 100%
|
||||||
text-align: center
|
text-align: center
|
||||||
top: -11px
|
top: -11px
|
||||||
z-index: 1002
|
z-index: 1003
|
||||||
.btn, a
|
.btn, a
|
||||||
pointer-events: auto
|
pointer-events: auto
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
return this._super.apply(this, arguments);
|
return this._super.apply(this, arguments);
|
||||||
},
|
},
|
||||||
save: function () {
|
save: function () {
|
||||||
|
this.snippets.make_active(false);
|
||||||
remove_added_snippet_id();
|
remove_added_snippet_id();
|
||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
|
@ -77,9 +78,6 @@
|
||||||
init: function (parent) {
|
init: function (parent) {
|
||||||
this.parent = parent;
|
this.parent = parent;
|
||||||
this._super.apply(this, arguments);
|
this._super.apply(this, arguments);
|
||||||
if(!$('#oe_manipulators').length){
|
|
||||||
$("<div id='oe_manipulators'></div>").appendTo('body');
|
|
||||||
}
|
|
||||||
this.$active_snipped_id = false;
|
this.$active_snipped_id = false;
|
||||||
hack_to_add_snippet_id();
|
hack_to_add_snippet_id();
|
||||||
$("body").on('DOMNodeInserted', hack_to_add_snippet_id);
|
$("body").on('DOMNodeInserted', hack_to_add_snippet_id);
|
||||||
|
@ -104,6 +102,10 @@
|
||||||
start: function() {
|
start: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
if(!$('#oe_manipulators').length){
|
||||||
|
$("<div id='oe_snippet_cache'></div><div id='oe_manipulators'></div>").appendTo('body');
|
||||||
|
}
|
||||||
|
|
||||||
var $ul = this.parent.$("#website-top-edit ul");
|
var $ul = this.parent.$("#website-top-edit ul");
|
||||||
|
|
||||||
var $button = $(openerp.qweb.render('website.snippets_button'))
|
var $button = $(openerp.qweb.render('website.snippets_button'))
|
||||||
|
@ -196,23 +198,20 @@
|
||||||
bind_snippet_click_editor: function () {
|
bind_snippet_click_editor: function () {
|
||||||
var self = this;
|
var self = this;
|
||||||
var snipped_event_flag = false;
|
var snipped_event_flag = false;
|
||||||
$("body").on('click', "[data-snippet-id]", function (event) {
|
$("body").on('click', "[data-oe-model], > header, > footer", function (event) {
|
||||||
if (snipped_event_flag) {
|
if (snipped_event_flag) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
snipped_event_flag = true;
|
var $target = $(event.srcElement).parents("[data-snippet-id]:first");
|
||||||
setTimeout(function () {snipped_event_flag = false;}, 0);
|
snipped_event_flag = true;
|
||||||
var $target = $(event.currentTarget);
|
setTimeout(function () {snipped_event_flag = false;}, 0);
|
||||||
if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
|
|
||||||
return;
|
if (!$target.length) {
|
||||||
}
|
self.make_active(false);
|
||||||
|
} else if (!self.$active_snipped_id || !self.$active_snipped_id.is($target)) {
|
||||||
self.make_active($target);
|
self.make_active($target);
|
||||||
});
|
}
|
||||||
$("[data-oe-model]").on('click', function (ev) {
|
});
|
||||||
if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
|
|
||||||
self.make_active(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
snippet_blur: function ($snipped_id) {
|
snippet_blur: function ($snipped_id) {
|
||||||
if ($snipped_id) {
|
if ($snipped_id) {
|
||||||
|
@ -245,7 +244,9 @@
|
||||||
this.$active_snipped_id = $snipped_id;
|
this.$active_snipped_id = $snipped_id;
|
||||||
this.create_overlay(this.$active_snipped_id);
|
this.create_overlay(this.$active_snipped_id);
|
||||||
this.snippet_focus($snipped_id);
|
this.snippet_focus($snipped_id);
|
||||||
|
$("#oe_snippet_cache").show();
|
||||||
} else {
|
} else {
|
||||||
|
$("#oe_snippet_cache").hide();
|
||||||
self.$active_snipped_id = false;
|
self.$active_snipped_id = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -777,6 +778,7 @@
|
||||||
*/
|
*/
|
||||||
onFocus : function () {
|
onFocus : function () {
|
||||||
this.$overlay.addClass('oe_active');
|
this.$overlay.addClass('oe_active');
|
||||||
|
this.$target.addClass('oe_snippet_overlay_activate');
|
||||||
},
|
},
|
||||||
|
|
||||||
/* onFocus
|
/* onFocus
|
||||||
|
@ -784,6 +786,7 @@
|
||||||
*/
|
*/
|
||||||
onBlur : function () {
|
onBlur : function () {
|
||||||
this.$overlay.removeClass('oe_active');
|
this.$overlay.removeClass('oe_active');
|
||||||
|
this.$target.removeClass('oe_snippet_overlay_activate');
|
||||||
},
|
},
|
||||||
|
|
||||||
/* setOptions
|
/* setOptions
|
||||||
|
|
|
@ -87,10 +87,6 @@
|
||||||
</div>
|
</div>
|
||||||
</t>
|
</t>
|
||||||
|
|
||||||
<t t-name="website.snippet_manipulator">
|
|
||||||
<div class='oe_snippet_manipulator'></div>
|
|
||||||
</t>
|
|
||||||
|
|
||||||
<!-- snippet objects -->
|
<!-- snippet objects -->
|
||||||
|
|
||||||
<div t-name="website.snippets.resize" data-snippet-id='resize'>
|
<div t-name="website.snippets.resize" data-snippet-id='resize'>
|
||||||
|
|
Loading…
Reference in New Issue