[FIX] css: further etherpad fixes:

bzr revid: fva@openerp.com-20120924134600-5avqr2vohdsh7y9n
This commit is contained in:
Frédéric van der Essen 2012-09-24 15:46:00 +02:00
parent db6c61f666
commit a7f63f3fb2
3 changed files with 118 additions and 78 deletions

View File

@ -1,17 +1,36 @@
.oe_pad_head {
box-sizing: border-box;
width: 100%;
display: block;
padding: 4px;
text-align: right;
}
.oe_pad_head .oe_pad_switch {
.oe_pad {
margin-top: 16px;
}
.oe_pad_readonly {
border: 1px solid #ddd;
padding: 8px;
.oe_pad_switch_positioner {
position: relative;
}
.oe_pad_switch {
position: absolute;
top: 5px;
left: 383px;
width: 28px;
height: 28px;
background-image: -webkit-linear-gradient(top, white, #f0f0f0);
border: solid 1px #ccc;
border-radius:3px;
text-align: center;
line-height: 22px;
overflow: hidden;
-webkit-box-sizing: border-box;
color: #666666;
padding-top:-3px;
padding-left:-1px;
cursor: pointer;
}
.oe_pad_switch:hover{
background-image: -webkit-linear-gradient(top, #f4f4f4, #e4e4e4);
}
.oe_pad_fullscreen .oe_pad_switch {
top:4px;
}
.oe_pad_fullscreen {
@ -27,9 +46,9 @@
z-index: 1000;
}
.oe_pad_content {
.oe_pad.oe_configured .oe_pad_content.oe_editing{
border: solid 1px #c4c4c4;
height: 150px;
height:300px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
@ -37,12 +56,7 @@
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.oe_pad_content > p {
text-align: center;
opacity: 0.75;
}
.oe_pad_fullscreen .oe_pad_content {
.oe_pad.oe_configured.oe_pad_fullscreen .oe_pad_content {
height: 100%;
border: none;
-webkit-box-shadow: none;
@ -52,6 +66,16 @@
box-shadow: none;
}
.oe_pad.oe_unconfigured > p {
text-align: center;
opacity: 0.75;
}
.oe_pad_loading{
text-align: center;
opacity: 0.75;
}
.etherpad_readonly ul, .etherpad_readonly ol {
margin-before: 1em;
margin-after: 1em;

View File

@ -1,49 +1,47 @@
openerp.pad = function(instance) {
instance.web.form.FieldPad = instance.web.form.AbstractField.extend({
template: 'FieldPad',
start: function() {
this._super();
var self = this;
this.$el.find('div.oe_pad_head').click(function(ev) {
self.$el.toggleClass('oe_pad_fullscreen');
});
this.on("change:effective_readonly", this, function() {
this.render_value();
});
},
set_value: function(val) {
var self = this;
var _super = self._super;
_super.apply(self,[val]);
this._dirty_flag = true;
self.render_value();
},
render_value: function() {
console.log("display");
var self = this;
var value = this.get('value');
if (!_.str.startsWith(value, "http")) {
self.$('.oe_pad_content').html(instance.web.qweb.render('FieldPad.unconfigured'));
} else {
if (!this.get("effective_readonly")) {
var pad_username = this.session.username;
var code = '<iframe width="100%" height="100%" frameborder="0" src="'+value+'?showChat=false&userName='+pad_username+'"></iframe>';
this.$('.oe_pad_content').html(code);
} else {
$.get(value+'/export/html').success(function(data) {
self.$('.oe_pad_content').html('<div class="oe_pad_readonly">'+data+'</div>');
}).error(function() {
self.$('.oe_pad_content').text('Unable to load pad');
});
instance.web.form.FieldPad = instance.web.form.AbstractField.extend({
template: 'FieldPad',
configured: false,
content: "",
set_value: function(val) {
var self = this;
var _super = self._super;
_super.apply(self,[val]);
this._dirty_flag = true;
self.renderElement();
},
renderElement: function(){
var self = this;
var value = this.get('value');
if(!_.str.startsWith(value,'http')){
this.configured = false;
this.content = "";
}else{
this.configured = true;
if(!this.get('effective_readonly')){
this.content = '<iframe width="100%" height="100%" frameborder="0" src="'+value+'?showChat=false&userName='+this.session.username+'"></iframe>';
}else{
this.content = '<div class="oe_pad_loading">... Loading pad ...</div>';
$.get(value+'/export/html').success(function(data){
self.$('.oe_pad_content').html('<div class="oe_pad_readonly">'+data+'<div>');
}).error(function(){
self.$('.oe_pad_content').text('Unable to load pad');
});
}
}
}
},
});
instance.web.form.widgets = instance.web.form.widgets.extend({
'pad': 'instance.web.form.FieldPad',
});
this._super();
this.$('.oe_pad_content').html(this.content);
this.$('.oe_pad_switch').click(function(){
self.$el.toggleClass('oe_pad_fullscreen');
});
this.on('change:effective_readonly',this,function(){
self.renderElement();
});
},
});
instance.web.form.widgets = instance.web.form.widgets.extend({
'pad': 'instance.web.form.FieldPad',
});
};

View File

@ -2,17 +2,35 @@
<!-- vim:fdl=1:
-->
<templates id="template" xml:space="preserve">
<t t-name="FieldPad">
<div class="oe_form_field_text oe_pad">
<div class="oe_pad_head">
<button class="oe_pad_switch oe_button">Fullscreen</button>
</div>
<div class="oe_pad_content"></div>
</div>
</t>
<t t-name="FieldPad.unconfigured">
<p>
You must configure the etherpad through the menu Setting > Companies > Companies, in the configuration tab of your company.<br/>
</p>
</t>
<t t-name="FieldPad">
<t t-if="!widget.configured">
<div class="oe_form_field_text oe_pad oe_unconfigured">
<p>
You must configure the etherpad through the menu Setting > Companies > Companies, in the configuration tab of your company.
</p>
</div>
</t>
<t t-if="widget.configured">
<t t-if="widget.get('effective_readonly')">
<div class="oe_form_field_text oe_pad oe_configured">
<div class="oe_pad_content etherpad_readonly">
</div>
</div>
</t>
<t t-if="!widget.get('effective_readonly')">
<div class="oe_form_field_text oe_pad oe_configured">
<div class="oe_pad_switch_positioner">
<span class="oe_pad_switch oe_e">&amp;Ntilde;</span>
</div>
<div class="oe_pad_content oe_editing">
</div>
</div>
</t>
</t>
</t>
</templates>