odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] website snippet: icones goto parent snippet, clean css, unactive snippet when click outside 

bzr revid: chm@openerp.com-20131203100449-7ups314ffru0kobh
This commit is contained in:
Christophe Matthieu 2013-12-03 11:04:49 +01:00
parent 63f63ef470
commit 78dedf2dff
4 changed files with 119 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
addons/website/static/src/css/editor.css
View File

@ -441,11 +441,20 @@ ul.oe_menu_editor .disclose {
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
border-color: rgba(0, 0, 0, 0.5);
}
.oe_overlay.oe_active .oe_handle {
.oe_overlay .oe_handle {
display: block !important;
pointer-events: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 12px;
height: 12px;
margin: -2px;
}
.oe_overlay.oe_active .oe_handle:before {
.oe_overlay .oe_handle:before {
position: relative;
top: 50%;
left: 50%;
@ -470,23 +479,49 @@ ul.oe_menu_editor .disclose {
-o-transition: background 100ms linear;
transition: background 100ms linear;
}
.oe_overlay.oe_active .oe_handle:hover:before {
.oe_overlay .oe_handle:hover:before {
background: rgba(0, 0, 0, 0.5);
color: white;
-webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
}
.oe_overlay.oe_active .oe_handle.e:before {
.oe_overlay .oe_handle.e {
left: auto;
top: 2px;
height: 100%;
right: -4px;
cursor: w-resize;
}
.oe_overlay .oe_handle.e:before {
content: "\F061";
}
.oe_overlay.oe_active .oe_handle.s:before {
.oe_overlay .oe_handle.s {
top: auto;
left: 2px;
width: 100%;
bottom: -4px;
cursor: n-resize;
}
.oe_overlay .oe_handle.s:before {
content: "\F063";
}
.oe_overlay.oe_active .oe_handle.w:before {
.oe_overlay .oe_handle.w {
top: 2px;
height: 100%;
left: -4px;
cursor: e-resize;
}
.oe_overlay .oe_handle.w:before {
content: "\F060";
}
.oe_overlay.oe_active .oe_handle.n:before {
.oe_overlay .oe_handle.n {
left: 2px;
width: 100%;
top: -4px;
cursor: s-resize;
}
.oe_overlay .oe_handle.n:before {
content: "\F062";
}
.oe_overlay .icon.btn {
@ -528,36 +563,6 @@ ul.oe_menu_editor .disclose {
margin: -4px;
}
.oe_handle.n {
left: 2px;
width: 100%;
top: 0px;
cursor: s-resize;
}
.oe_handle.e {
left: auto;
top: 2px;
height: 100%;
right: 0px;
cursor: w-resize;
}
.oe_handle.s {
top: auto;
left: 2px;
width: 100%;
bottom: 0px;
cursor: n-resize;
}
.oe_handle.w {
top: 2px;
height: 100%;
left: 0px;
cursor: e-resize;
}
.s-resize-important, .s-resize-important * {
cursor: s-resize !important;
}

108
addons/website/static/src/css/editor.sass
View File

@ -331,37 +331,66 @@ ul.oe_menu_editor
border-width: 1px
+box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
border-color: rgba(0, 0, 0, 0.5)
.oe_handle
display: block !important
pointer-events: auto
&:before
position: relative
top: 50%
left: 50%
display: block
background: rgba(255, 255, 255, 1)
border: solid 1px rgba(0, 0, 0, .2)
+border-radius(5px)
width: 18px
height: 18px
margin: -9px
padding-left: 1px
font-size: 14px
line-height: 14px
font-family: FontAwesome
color: rgba(0,0,0,.5)
@include transition(background 100ms linear)
&:hover:before
background: rgba(0, 0, 0, .5)
color: #fff
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
.oe_handle.e:before
.oe_handle
display: block !important
pointer-events: auto
position: absolute
top: 50%
left: 50%
+box-sizing(border-box)
width: 12px
height: 12px
margin: -2px
&:before
position: relative
top: 50%
left: 50%
display: block
background: rgba(255, 255, 255, 1)
border: solid 1px rgba(0, 0, 0, .2)
+border-radius(5px)
width: 18px
height: 18px
margin: -9px
padding-left: 1px
font-size: 14px
line-height: 14px
font-family: FontAwesome
color: rgba(0,0,0,.5)
@include transition(background 100ms linear)
&:hover:before
background: rgba(0, 0, 0, .5)
color: #fff
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
.oe_handle.e
left: auto
top: 2px
height: 100%
right: -4px
cursor: w-resize
&:before
content: "\F061"
.oe_handle.s:before
.oe_handle.s
top: auto
left: 2px
width: 100%
bottom: -4px
cursor: n-resize
&:before
content: "\F063"
.oe_handle.w:before
.oe_handle.w
top: 2px
height: 100%
left: -4px
cursor: e-resize
&:before
content: "\F060"
.oe_handle.n:before
.oe_handle.n
left: 2px
width: 100%
top: -4px
cursor: s-resize
&:before
content: "\F062"
.icon.btn
@ -395,29 +424,6 @@ ul.oe_menu_editor
height: 8px
margin: -4px
.oe_handle.n
left: 2px
width: 100%
top: 0px
cursor: s-resize
.oe_handle.e
left: auto
top: 2px
height: 100%
right: 0px
cursor: w-resize
.oe_handle.s
top: auto
left: 2px
width: 100%
bottom: 0px
cursor: n-resize
.oe_handle.w
top: 2px
height: 100%
left: 0px
cursor: e-resize
.s-resize-important, .s-resize-important *
cursor: s-resize !important
.n-resize-important, .n-resize-important *

37
addons/website/static/src/js/website.snippets.editor.js
View File

@ -184,23 +184,24 @@
bind_snippet_click_editor: function () {
var self = this;
var snipped_event_flag = false;
$("body").on('click', "[data-oe-model] [data-snippet-id], [data-oe-model][data-snippet-id]", function (event) {
if (snipped_event_flag) {
return;
}
snipped_event_flag = true;
setTimeout(function () {snipped_event_flag = false;}, 0);
var $target = $(event.currentTarget);
if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
return;
}
self.make_active($target);
});
$("[data-oe-model]").on('click', function () {
if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
self.make_active(false);
}
});
$("#wrapwrap").on('click', function (event) {
if (snipped_event_flag) {
return;
}
snipped_event_flag = true;
setTimeout(function () {snipped_event_flag = false;}, 0);
var $target = $(event.srcElement);
if (!$target.attr("data-snippet-id")) {
$target = $target.parents("[data-snippet-id]:first");
}
if (!$target.attr("data-oe-model") && !$target.parents("[data-oe-model]:first").length) {
$target = false;
}
if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
return;
}
self.make_active($target);
});
},
snippet_blur: function ($snipped_id) {
if ($snipped_id) {
@ -233,7 +234,7 @@
this.snippet_blur(this.$active_snipped_id);
this.$active_snipped_id = false;
}
if ($snipped_id) {
if ($snipped_id && $snipped_id.length) {
if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) {
this.snippets.push($snipped_id.get(0));
}

2
addons/website/static/src/xml/website.snippets.xml
View File

@ -61,7 +61,7 @@
<div class="oe_overlay">
<div class="oe_overlay_options">
<div class="btn-group">
<a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><span class="icon-upload-alt"/></a>
<a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"></i></a>
<div class="dropdown oe_options hidden btn-group">
<a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
<ul class="dropdown-menu" role="menu"></ul>