mirror of
https://github.com/jwinterm/modoboa.git
synced 2026-10-17 05:41:25 +02:00
New layout for "parameters" page.
This commit is contained in:
tonio
@@ -15,12 +15,12 @@ from mailng.lib import tables, imap_utf7, parameters
|
||||
class WMtable(tables.Table):
|
||||
tableid = "emails"
|
||||
idkey = "imapid"
|
||||
selection = tables.SelectionColumn("selection", width="20px", first=True)
|
||||
_1_flags = tables.ImgColumn("flags", width="40px")
|
||||
_2_subject = tables.Column("subject", width="50%", label=_("Subject"),
|
||||
# selection = tables.SelectionColumn("selection", width="20px", first=True)
|
||||
_1_flags = tables.ImgColumn("flags", width="5%")
|
||||
_2_subject = tables.Column("subject", label=_("Subject"),
|
||||
cssclass="draggable")
|
||||
_3_from_ = tables.Column("from", width="20%", label=_("From"))
|
||||
_4_date = tables.Column("date", width="20%", label=_("Date"))
|
||||
_4_date = tables.Column("date", width="10%", label=_("Date"))
|
||||
|
||||
|
||||
def parse(self, header, value):
|
||||
|
||||
@@ -292,6 +292,209 @@ provides: [Element.Delegation]
|
||||
/*
|
||||
---
|
||||
|
||||
script: Fx.Elements.js
|
||||
|
||||
description: Effect to change any number of CSS properties of any number of Elements.
|
||||
|
||||
license: MIT-style license
|
||||
|
||||
authors:
|
||||
- Valerio Proietti
|
||||
|
||||
requires:
|
||||
- core:1.2.4/Fx.CSS
|
||||
- /MooTools.More
|
||||
|
||||
provides: [Fx.Elements]
|
||||
|
||||
...
|
||||
*/
|
||||
|
||||
Fx.Elements = new Class({
|
||||
|
||||
Extends: Fx.CSS,
|
||||
|
||||
initialize: function(elements, options){
|
||||
this.elements = this.subject = $$(elements);
|
||||
this.parent(options);
|
||||
},
|
||||
|
||||
compute: function(from, to, delta){
|
||||
var now = {};
|
||||
for (var i in from){
|
||||
var iFrom = from[i], iTo = to[i], iNow = now[i] = {};
|
||||
for (var p in iFrom) iNow[p] = this.parent(iFrom[p], iTo[p], delta);
|
||||
}
|
||||
return now;
|
||||
},
|
||||
|
||||
set: function(now){
|
||||
for (var i in now){
|
||||
var iNow = now[i];
|
||||
for (var p in iNow) this.render(this.elements[i], p, iNow[p], this.options.unit);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
start: function(obj){
|
||||
if (!this.check(obj)) return this;
|
||||
var from = {}, to = {};
|
||||
for (var i in obj){
|
||||
var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {};
|
||||
for (var p in iProps){
|
||||
var parsed = this.prepare(this.elements[i], p, iProps[p]);
|
||||
iFrom[p] = parsed.from;
|
||||
iTo[p] = parsed.to;
|
||||
}
|
||||
}
|
||||
return this.parent(from, to);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
---
|
||||
|
||||
script: Fx.Accordion.js
|
||||
|
||||
description: An Fx.Elements extension which allows you to easily create accordion type controls.
|
||||
|
||||
license: MIT-style license
|
||||
|
||||
authors:
|
||||
- Valerio Proietti
|
||||
|
||||
requires:
|
||||
- core:1.2.4/Element.Event
|
||||
- /Fx.Elements
|
||||
|
||||
provides: [Fx.Accordion]
|
||||
|
||||
...
|
||||
*/
|
||||
|
||||
var Accordion = Fx.Accordion = new Class({
|
||||
|
||||
Extends: Fx.Elements,
|
||||
|
||||
options: {/*
|
||||
onActive: $empty(toggler, section),
|
||||
onBackground: $empty(toggler, section),
|
||||
fixedHeight: false,
|
||||
fixedWidth: false,
|
||||
*/
|
||||
display: 0,
|
||||
show: false,
|
||||
height: true,
|
||||
width: false,
|
||||
opacity: true,
|
||||
alwaysHide: false,
|
||||
trigger: 'click',
|
||||
initialDisplayFx: true,
|
||||
returnHeightToAuto: true
|
||||
},
|
||||
|
||||
initialize: function(){
|
||||
var params = Array.link(arguments, {'container': Element.type, 'options': Object.type, 'togglers': $defined, 'elements': $defined});
|
||||
this.parent(params.elements, params.options);
|
||||
this.togglers = $$(params.togglers);
|
||||
this.container = document.id(params.container);
|
||||
this.previous = -1;
|
||||
this.internalChain = new Chain();
|
||||
if (this.options.alwaysHide) this.options.wait = true;
|
||||
if ($chk(this.options.show)){
|
||||
this.options.display = false;
|
||||
this.previous = this.options.show;
|
||||
}
|
||||
if (this.options.start){
|
||||
this.options.display = false;
|
||||
this.options.show = false;
|
||||
}
|
||||
this.effects = {};
|
||||
if (this.options.opacity) this.effects.opacity = 'fullOpacity';
|
||||
if (this.options.width) this.effects.width = this.options.fixedWidth ? 'fullWidth' : 'offsetWidth';
|
||||
if (this.options.height) this.effects.height = this.options.fixedHeight ? 'fullHeight' : 'scrollHeight';
|
||||
for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);
|
||||
this.elements.each(function(el, i){
|
||||
if (this.options.show === i){
|
||||
this.fireEvent('active', [this.togglers[i], el]);
|
||||
} else {
|
||||
for (var fx in this.effects) el.setStyle(fx, 0);
|
||||
}
|
||||
}, this);
|
||||
if ($chk(this.options.display)) this.display(this.options.display, this.options.initialDisplayFx);
|
||||
this.addEvent('complete', this.internalChain.callChain.bind(this.internalChain));
|
||||
},
|
||||
|
||||
addSection: function(toggler, element){
|
||||
toggler = document.id(toggler);
|
||||
element = document.id(element);
|
||||
var test = this.togglers.contains(toggler);
|
||||
this.togglers.include(toggler);
|
||||
this.elements.include(element);
|
||||
var idx = this.togglers.indexOf(toggler);
|
||||
var displayer = this.display.bind(this, idx);
|
||||
toggler.store('accordion:display', displayer);
|
||||
toggler.addEvent(this.options.trigger, displayer);
|
||||
if (this.options.height) element.setStyles({'padding-top': 0, 'border-top': 'none', 'padding-bottom': 0, 'border-bottom': 'none'});
|
||||
if (this.options.width) element.setStyles({'padding-left': 0, 'border-left': 'none', 'padding-right': 0, 'border-right': 'none'});
|
||||
element.fullOpacity = 1;
|
||||
if (this.options.fixedWidth) element.fullWidth = this.options.fixedWidth;
|
||||
if (this.options.fixedHeight) element.fullHeight = this.options.fixedHeight;
|
||||
element.setStyle('overflow', 'hidden');
|
||||
if (!test){
|
||||
for (var fx in this.effects) element.setStyle(fx, 0);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
detach: function(){
|
||||
this.togglers.each(function(toggler) {
|
||||
toggler.removeEvent(this.options.trigger, toggler.retrieve('accordion:display'));
|
||||
}, this);
|
||||
},
|
||||
|
||||
display: function(index, useFx){
|
||||
if (!this.check(index, useFx)) return this;
|
||||
useFx = $pick(useFx, true);
|
||||
if (this.options.returnHeightToAuto){
|
||||
var prev = this.elements[this.previous];
|
||||
if (prev && !this.selfHidden){
|
||||
for (var fx in this.effects){
|
||||
prev.setStyle(fx, prev[this.effects[fx]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
|
||||
if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
|
||||
this.previous = index;
|
||||
var obj = {};
|
||||
this.elements.each(function(el, i){
|
||||
obj[i] = {};
|
||||
var hide;
|
||||
if (i != index){
|
||||
hide = true;
|
||||
} else if (this.options.alwaysHide && ((el.offsetHeight > 0 && this.options.height) || el.offsetWidth > 0 && this.options.width)){
|
||||
hide = true;
|
||||
this.selfHidden = true;
|
||||
}
|
||||
this.fireEvent(hide ? 'background' : 'active', [this.togglers[i], el]);
|
||||
for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
|
||||
}, this);
|
||||
this.internalChain.chain(function(){
|
||||
if (this.options.returnHeightToAuto && !this.selfHidden){
|
||||
var el = this.elements[index];
|
||||
if (el) el.setStyle('height', 'auto');
|
||||
};
|
||||
}.bind(this));
|
||||
return useFx ? this.start(obj) : this.set(obj);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
---
|
||||
|
||||
script: Fx.Slide.js
|
||||
|
||||
description: Effect to slide an element in and out of view.
|
||||
|
||||
@@ -11,4 +11,16 @@ window.addEvent('domready', function() {
|
||||
});
|
||||
|
||||
var tip = new Tips($$(".Tips"));
|
||||
|
||||
var accordion = new Accordion('h3.atStart', 'div.atStart', {
|
||||
opacity: false,
|
||||
onActive: function(toggler, element){
|
||||
toggler.setStyle('color', '#ff3300');
|
||||
},
|
||||
|
||||
onBackground: function(toggler, element){
|
||||
toggler.setStyle('color', '#222');
|
||||
}
|
||||
}, $('accordion'));
|
||||
|
||||
});
|
||||
@@ -244,6 +244,11 @@ input:hover {
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
|
||||
table.hr {
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.hr td.odd {
|
||||
background: #F7F9Fb;
|
||||
}
|
||||
@@ -254,4 +259,31 @@ input:hover {
|
||||
|
||||
.unseen {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.toggler {
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
border-left: 1px solid #f5f5f5;
|
||||
font-size: small;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.element {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
div.row {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
div.row label {
|
||||
float: left;
|
||||
width: 200px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
@@ -7,32 +7,28 @@
|
||||
{% load i18n %}
|
||||
{% url admin.views.saveparameters as action %}
|
||||
<form method="POST" action="{{ action }}">
|
||||
<table class="hr">
|
||||
<tr>
|
||||
<th width="50%">{% trans "Name" %}</th>
|
||||
<th>{% trans "Value" %}</th>
|
||||
</tr>
|
||||
{% for app, ps in params.items %}
|
||||
{% for name, def in ps.items %}
|
||||
<tr>
|
||||
<td class="odd">{{ app }}::{{ name }}</td>
|
||||
<td class="even">
|
||||
{% if def.value %}
|
||||
<input type="text" name="{{ app }}.{{ name }}" id="{{ app }}.{{ name }}" value="{{ def.value }}" />
|
||||
{% else %}
|
||||
<input type="text" name="{{ app }}.{{ name}}" id="{{ app }}.{{ name }}" value="{{ def.default }}" />
|
||||
{% endif %}
|
||||
{% if def.help %}
|
||||
<a href="{{ def.help }}" onclick="return false;" class="Tips" title="{% trans 'Help' %}">
|
||||
<img src="/static/pics/info.png" border="0" />
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<div id="accordion">
|
||||
{% for app, ps in params.items %}
|
||||
<h3 class="toggler atStart">{{ app }}</h3>
|
||||
<div class="element atStart">
|
||||
{% for name, def in ps.items %}
|
||||
<div class="row">
|
||||
<label>{{ name }}</label>
|
||||
{% if def.value %}
|
||||
<input type="text" name="{{ app }}.{{ name }}" id="{{ app }}.{{ name }}" value="{{ def.value }}" />
|
||||
{% else %}
|
||||
<input type="text" name="{{ app }}.{{ name}}" id="{{ app }}.{{ name }}" value="{{ def.default }}" />
|
||||
{% endif %}
|
||||
{% if def.help %}
|
||||
<a href="{{ def.help }}" onclick="return false;" class="Tips" title="{% trans 'Help' %}">
|
||||
<img src="/static/pics/info.png" border="0" />
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<p><input type="submit" name="update" value="{% trans 'Save' %}" /></p>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user