From 7d69baa41396b43e9b9f96e4543777722ce9f9ea Mon Sep 17 00:00:00 2001 From: tonio Date: Fri, 29 Jan 2010 17:41:30 +0100 Subject: [PATCH] New layout for "parameters" page. --- extensions/webmail/imap_listing.py | 8 +- static/js/mootools-more.js | 203 +++++++++++++++++++++++++++++ static/js/settings.js | 12 ++ static/stylesheets/default.css | 34 ++++- templates/admin/parameters.html | 46 +++---- 5 files changed, 273 insertions(+), 30 deletions(-) diff --git a/extensions/webmail/imap_listing.py b/extensions/webmail/imap_listing.py index 671394131..ca2631468 100644 --- a/extensions/webmail/imap_listing.py +++ b/extensions/webmail/imap_listing.py @@ -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): diff --git a/static/js/mootools-more.js b/static/js/mootools-more.js index 9658e2da6..3a4b1bffc 100644 --- a/static/js/mootools-more.js +++ b/static/js/mootools-more.js @@ -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. diff --git a/static/js/settings.js b/static/js/settings.js index 8e0721e6b..f420da35c 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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')); + }); \ No newline at end of file diff --git a/static/stylesheets/default.css b/static/stylesheets/default.css index 0e72a938d..610ff9fc0 100644 --- a/static/stylesheets/default.css +++ b/static/stylesheets/default.css @@ -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; -} \ No newline at end of file +} + +.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; +} diff --git a/templates/admin/parameters.html b/templates/admin/parameters.html index 523fe20cd..92637c6ce 100644 --- a/templates/admin/parameters.html +++ b/templates/admin/parameters.html @@ -7,32 +7,28 @@ {% load i18n %} {% url admin.views.saveparameters as action %}
- - - - - - {% for app, ps in params.items %} - {% for name, def in ps.items %} - - - - +
+ {% for app, ps in params.items %} +

{{ app }}

+
+ {% for name, def in ps.items %} +
+ + {% if def.value %} + + {% else %} + + {% endif %} + {% if def.help %} + + + + {% endif %} +
+ {% endfor %} +
{% endfor %} - {% endfor %} -
{% trans "Name" %}{% trans "Value" %}
{{ app }}::{{ name }} - {% if def.value %} - - {% else %} - - {% endif %} - {% if def.help %} - - - - {% endif %} -
- +

{% endblock %}