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

[IMP] Editor flicker+resize (cf. task: [CMS] Source editor) 

bzr revid: ddm@openerp.com-20131016091947-5aymhkl1we878bdl
This commit is contained in:
ddm 2013-10-16 11:19:47 +02:00
parent 12f6a051ff
commit e375557b84
3 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
@charset "utf-8";
/* ---- CKEditor Minimal Reset ---- */
.navbar.navbar-inverse .cke_chrome {
border: none;
@ -602,17 +603,12 @@ table.editorbar-panel td.selected {
/* ---- ACE EDITOR ---- */
.oe_ace_view_editor {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
position: fixed;
top: 51px;
right: 0;
z-index: 1000;
height: 100%;
width: 720px;
}
.oe_ace_view_editor .oe_ace_view_editor_title {
width: 100%;
@ -643,15 +639,11 @@ table.editorbar-panel td.selected {
left: 0;
width: 720px;
}
.oe_ace_view_editor:hover {
.oe_ace_view_editor.oe_ace_open {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.oe_ace_view_editor.oe_ace_open {
width: 720px;
}
.oe_ace_view_editor.oe_ace_closed {
width: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}

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

@ -4,15 +4,15 @@
@import "compass/css3/user-interface"
@import "compass/css3/transition"
//smartphones, iPhone, portrait 480x320 phones
//smartphones, iPhone, portrait 480x320 phones
$smart_phone: 320px
//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
$small-tablet: 481px
$small-tablet: 481px
//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
$portrait-tablet: 641px
//tablet, landscape iPad, lo-res laptops ands desktops
$portrait-tablet: 641px
//tablet, landscape iPad, lo-res laptops ands desktops
$tablet: 961px
//big landscape tablets, laptops, and desktops
//big landscape tablets, laptops, and desktops
$desktop: 1025px
/* ---- CKEditor Minimal Reset ---- */
@ -179,7 +179,7 @@ table.editorbar-panel
background: black !important
> a
padding: 2px 10px !important
width: 100%
width: 100%
display: block
border: 0
z-index: 1
@ -189,13 +189,13 @@ table.editorbar-panel
display: inline-block
white-space: nowrap
background: black
> div
> div
background: rgb(0,0,0)
label
width: 44px
color: #fff
padding-left: 10px
div
width: 100px
text-align: center
@ -267,13 +267,13 @@ table.editorbar-panel
margin: 0px -24px !important
&.oe_overlay
border-radius: 3px
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//background-size: 100px 100px
background: rgba(153, 0, 255,.5)
.oe_drop_zone, .oe_drop_zone_style
border: none
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//background-size: 100px 100px
background: rgba(153, 0, 255, .3)
+border-radius(4px)
@ -293,7 +293,7 @@ table.editorbar-panel
display: none
position: absolute
background: transparent
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
+border-radius(3px)
@include transition(opacity 100ms linear)
+box-sizing(border-box)
@ -476,13 +476,12 @@ $navbar_height: 51px
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
line-height: normal
.oe_ace_view_editor
@include transition(all 0.2s ease-in)
+opacity(0.3)
position: fixed
top: $navbar_height
right: 0
z-index: 1000
height: 100%
width: $ace_width
.oe_ace_view_editor_title
width: 100%
padding-top: 4px
@ -504,12 +503,9 @@ $navbar_height: 51px
bottom: $navbar_height
left: 0
width: $ace_width
&:hover
+opacity(1)
&.oe_ace_open
width: $ace_width
+opacity(1)
&.oe_ace_closed
width: 0
+opacity(0)
/* ---- EDITOR TOUR ---- */

35
addons/website/static/src/js/website.ace.js
View File

@ -66,6 +66,9 @@
});
website.ace.ViewEditor = openerp.Widget.extend({
resizing: false,
refX: 0,
minWidth: 40,
template: 'website.ace_view_editor',
events: {
'change #ace-view-list': 'displaySelectedView',
@ -89,6 +92,32 @@
self.loadViews.call(self, views);
self.open.call(self);
});
var $editor = $('.ace_editor');
function resizeEditor (target) {
var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), self.minWidth));
$editor.width(width);
self.aceEditor.resize();
self.$el.width(width);
}
function startResizing (e) {
self.refX = e.pageX;
self.resizing = true;
}
function stopResizing () {
self.resizing = false;
}
function updateWidth (e) {
if (self.resizing) {
var offset = e.pageX - self.refX;
var width = self.$el.width() - offset;
self.refX = e.pageX;
resizeEditor(width);
}
}
document.body.addEventListener('mouseup', stopResizing, true);
self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
$(document).mousemove(updateWidth);
},
loadViews: function (views) {
var self = this;
@ -205,11 +234,7 @@
},
close: function () {
window.location.hash = "";
var self = this;
this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
globalEditor = null;
self.destroy.call(self);
}).removeClass('oe_ace_open').addClass('oe_ace_closed');
this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
},
});