github-jwinterm/modoboa
1
0
Fork 0
mirror of https://github.com/jwinterm/modoboa.git synced 2026-10-18 05:51:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Pure CSS layout working with FF. (at least for the webmail)

Browse Source 
Trying to make it work with IE6+...
This commit is contained in:
tonio
2010-02-19 18:17:19 +01:00
parent 24f40685c7
commit 9da21cb347
11 changed files with 233 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions/webmail/imap_listing.py
+3 -3
View File
@@ -17,11 +17,11 @@ class WMtable(tables.Table):
tableid = "emails"
idkey = "imapid"
# selection = tables.SelectionColumn("selection", width="20px", first=True)
_1_flags = tables.ImgColumn("flags", width="5%")
_1_flags = tables.ImgColumn("flags", width="6%")
_2_subject = tables.Column("subject", label=_("Subject"),
cssclass="draggable")
cssclass="draggable", width="50%")
_3_from_ = tables.Column("from", width="20%", label=_("From"))
_4_date = tables.Column("date", width="10%", label=_("Date"))
_4_date = tables.Column("date", width="20%", label=_("Date"))
def parse(self, header, value):
extensions/webmail/templates/index.html
+37 -11
View File
@@ -6,6 +6,30 @@
width: 150px;
}
thead tr {
position: relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
z-index: 1;
}
table#emails > tbody {
position: fixed;
bottom: 35px;
top: 155px;
left: 155px;
right: 0px;
overflow-x: hidden;
overflow-y: auto;
}
#emails th {
text-align: center;
}
#emails tr {
width: 100%;
}
.box h3 {
font-size: small;
margin: 2px 0px 2px 0px;
@@ -78,21 +102,22 @@ tr {
});
updatelisting = function(resp, overflow) {
if (!$defined(overflow)) {
/*if (!$defined(overflow)) {
overflow = "auto";
}
}*/
if ($defined(resp.menu)) {
$("menubar").set("html", resp.menu);
}
$("listing").set("html", resp.listing);
$("listing").setStyle("overflow", overflow);
if ($defined(resp.navbar)) {
/*if ($defined(resp.navbar)) {
$("navbar").set("html", resp.navbar);
$("navbar").setStyle("display", "block");
$("navbar").getChildren("a").addEvent("click", navbarcallback);
}
}*/
$$("a[name=compose]").addEvent("click", loadCompose);
$$("a[name=empty]").addEvent("click", empty);
}
empty = function(event) {
event.stop();
new Request.JSON({url : event.target.get("href"), onSuccess : function(resp) {
@@ -169,7 +194,7 @@ tr {
th.getElement("img").set("src", "/static/pics/" + src);
th.addClass("selected");
}
$$("td[class*=draggable]").each(function(item) {
/*$$("td[class*=draggable]").each(function(item) {
item.makeDraggable({
droppables: ".droppable",
}).addEvents({
@@ -215,7 +240,7 @@ tr {
}
}
});
});
});*/
$$("tr").addEvent("dblclick", viewmail);
$$("th[class*=sortable]").addEvent("click", function(evt) {
var tmp = "?";
@@ -235,20 +260,21 @@ tr {
});
});
navbarcallback = function(event) {
/*navbarcallback = function(event) {
event.stop();
current_anchor.setparams(navparams);
current_anchor.parse_string(event.target.getParent().get("href")).update();
}
}*/
foldercallback = function(event) {
select(event.target);
loadFolder(event, event.target);
}
ajaxListener("INBOX", updatelisting);
ajaxListener("INBOX/", updatelisting);
$$("a[name=loadfolder]").addEvent("click", foldercallback);
$("navbar").getChildren("a").addEvent("click", navbarcallback);
/*$("navbar").getChildren("a").addEvent("click", navbarcallback);*/
{% endblock %}
{% block middletitle %}{% trans "Webmail" %}{% endblock %}
{% block leftcol %}
lib/email_listing.py
+5 -5
View File
@@ -94,25 +94,25 @@ class EmailListing:
def fetch(self, request, id_start, id_stop):
table = self.tbltype(self.mbc.fetch(start=id_start, stop=id_stop,
folder=self.folder)).render(request)
folder=self.folder))
tpl = Template("""
<form method="POST" id="listingform">
{{ table }}
</form>""")
return tpl.render(Context({"table" : table}))
return tpl.render(Context({"table" : table.render(request)}))
def render(self, request, pageid=1, **kwargs):
page = self.paginator.getpage(pageid)
thead = listing = ""
if "empty" in kwargs.keys() and not kwargs["empty"]:
if not page:
listing = "Empty folder"
else:
listing = self.fetch(request, page.id_start, page.id_stop)
else:
listing = ""
elapsed = kwargs.has_key("start") and time.time() - kwargs["start"] or 0
return _render(request, self.tpl, {
"listing" : listing, "elapsed" : elapsed,
"listing" : listing,
"elapsed" : elapsed,
"navbar" : self.render_navbar(page),
"folders" : self.getfolders(),
"selection" : self.folder,
lib/tables.py
+35 -6
View File
@@ -1,6 +1,7 @@
# -*- coding: utf-8 -*-
import inspect
import lxml
from django.template import Template, Context
from django.template.loader import render_to_string
class Column:
@@ -53,9 +54,9 @@ class Table(object):
if isinstance(c, ImgColumn):
key = "img_%s" % c.name
if key in row.keys():
nrow["cols"] += [{"value" : c.render(row[key]), "safe" : True}]
nrow["cols"] += [{"value" : c.render(row[key]), "safe" : True, "width" : c.width}]
else:
nrow["cols"] += ["."]
nrow["cols"] += [{"width" : c.width}]
continue
if row.has_key(c.name):
try:
@@ -66,10 +67,38 @@ class Table(object):
cssclass += (cssclass != "") and ", %s" % row["class"] or row["class"]
nrow["cols"] += [{"value" : self.parse(c.name, row[c.name]),
"class" : cssclass}]
"class" : cssclass,
"width" : c.width}]
self.rows += [nrow]
def render(self, request):
return render_to_string("common/tables.html", {
"table" : self, "tableid" : self.tableid
})
t = Template("""
<table id="{{ tableid }}">
{% include "common/table_head.html" %}
{% include "common/table_body.html" %}
</table>
""")
return t.render(Context({
"table" : self, "tableid" : self.tableid
}))
def render_head(self, request):
t = Template("""
<table id="{{ tableid }}">
{% include "common/table_head.html" %}
</table>
""")
return t.render(Context({
"table" : self, "tableid" : "%s_head" % self.tableid
}))
def render_body(self, request):
t = Template("""
<table id="{{ tableid }}">
{% include "common/table_body.html" %}
</table>
""")
return t.render(Context({
"table" : self, "tableid" : "%s_body" % self.tableid
}))
static/js/common.js
+8 -5
View File
@@ -1,9 +1,9 @@
window.addEvent('domready', function(){
parse_menubar('topmenubar');
parse_menubar('menubar');
SqueezeBox.assign($$('a.boxed'), {
/*SqueezeBox.assign($$('a.boxed'), {
parse: 'rel',
});
});*/
});
callbacks = {};
@@ -15,10 +15,10 @@ register_callback = function(name, callback) {
current_anchor = null;
check_anchor = function() {
if (current_anchor.serialized == document.location.hash) {
if (current_anchor.serialized == location.hash) {
return;
}
current_anchor.from_string(document.location.hash);
current_anchor.from_string(location.hash);
if (!current_anchor.serialized) {
query = current_anchor.deflocation;
} else {
@@ -134,7 +134,7 @@ function HashWrapper(deflocation) {
parse_menubar = function(id) {
if ($(id)) {
$(id).getElements('li.dropdown').each( function( elem ){
$(id).getElements('li.dropdown').each(function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
@@ -206,6 +206,9 @@ setDivHeight = function(id, extrah, modulo) {
if ($("navbar")) {
contentsize -= $("navbar").getSize().y;
}
if ($("thead")) {
contentsize -= $("thead").getSize().y;
}
if (modulo) {
contentsize -= contentsize % modulo;
}
static/stylesheets/default.css
+44 -12
View File
@@ -5,15 +5,35 @@ html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#topmenubar {
width: 100%;
margin: 0 auto;
padding: 0;
background: #072342;
border-bottom: 2px solid #333;
div#container {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
background: white;
}
@media screen {
body > div#footer {
position: fixed;
}
}
div#topmenubar {
position: fixed;
border-bottom: 5px solid #333;
height: 30px;
bottom: auto;
}
div#footer {
position: absolute;
height: 30px;
bottom: 0px;
border-top: 5px solid #333;
}
#menubar {
@@ -45,14 +65,19 @@ html, body {
}
#page {
border: 2px solid #333;
background: white;
margin: 0 15px;
width: 100%;
top: 35px;
bottom: 35px;
position: absolute;
}
#content {
position: fixed;
overflow: auto;
padding: 5px;
top: 130px;
bottom: 35px;
width: 100%;
}
#header {
@@ -101,6 +126,13 @@ html, body {
width: 300px;
}
.uibar {
background: #153F65;
padding: 0;
margin: 0 auto;
width: 100%;
}
.menubar a, .menubar a:visited {
text-decoration: none;
}
@@ -138,7 +170,7 @@ html, body {
}
.left {
text-align: left;
float: left;
}
.right {
@@ -198,12 +230,12 @@ html, body {
}
table {
margin: 0 auto;
/*margin: 0 auto;*/
width: 100%;
border-collapse: collapse;
/*border-spacing: 20px;*/
}
tr.odd {
background: white;
}
templates/common/email_listing.html
+14 -5
View File
@@ -3,18 +3,28 @@
{% block html_head %}
<style type="text/css">
#listing {
position: absolute;
left: 155px;
right: 0px;
top: 130px;
height: expression(document.body.clientHeight - 35 + "px");
overflow: auto;
border-top: 1px solid #C8D6E8;
}
html > body #listing {
position: fixed;
bottom: 35px;
}
#navbar {
padding: 0;
margin: 0;
background: white;
height: 25px;
height: 40px;
width: 100%;
text-align: right;
border-top: 1px solid #C8D6E8;
/*border-top: 1px solid #C8D6E8;*/
display: none;
}
#navbar label {
@@ -40,7 +50,6 @@ window.addEvent("domready", function() {
});
}
{% block js %}{% endblock %}
setDivHeight("listing", 0, 25);
});
</script>
{% endblock %}
@@ -48,5 +57,5 @@ window.addEvent("domready", function() {
{% block leftcol %}{% endblock %}
<div id="listing">{{ listing }}</div>
<div class="spacer"></div>
<div id="navbar">{{ navbar }}</div>
<div id="navbar"></div>
{% endblock %}
templates/common/table_body.html
+13
View File
@@ -0,0 +1,13 @@
<tbody>
{% for row in table.rows %}
<tr id="{{ row.id }}" class="{% cycle 'odd' 'even' %}">
{% for cell in row.cols %}
{% if cell.safe %}
<td width="{{ cell.width }}">{{ cell.value|safe }}</td>
{% else %}
<td width="{{ cell.width }}" class="{{ cell.class }}">{{ cell.value }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
templates/common/table_head.html
+10
View File
@@ -0,0 +1,10 @@
<thead>
<tr>
{% for c in table.columns %}
<th id="{{ c.name }}" class="sortable" width="{{ c.width }}">
{{ c|safe }}
<span style="float: right"><img src="" style="display:none" /></span>
</th>
{% endfor %}
</tr>
</thead>
templates/common/tables.html
+1
View File
@@ -9,6 +9,7 @@
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr id="{{ row.id }}" class="{% cycle 'odd' 'even' %}">
templates/nlayout.html
+63 -69
View File
@@ -20,79 +20,73 @@
</head>
<body>
<div id="topmenubar" class="menubar">
<div class="left">
<ul>
<li>
{% url main.views.index as index_url %}
<a href="{{ index_url }}">
<img src="/static/pics/user.png" border="0" />{% trans "Preferences" %}</a>
</li>
{% loadextmenu perms %}
{% if user.is_superuser or perms.admin.view_domains %}
<li class="dropdown">
<img src="/static/pics/settings.png" border="0" />
<label>{% trans "Admin" %}</label>
<ul class="links">
{% url admin.views.domains as dom_url %}
<a href="{{ dom_url }}">
<li><img src="/static/pics/domains.png" />{% trans "Domains" %}</li>
</a>
{% url admin.views.settings as settings_url %}
<a href="{{ settings_url }}">
<li>
<img src="/static/pics/settings.png" border="0"/>
{% trans "Settings" %}
</li>
</a>
</ul>
</li>
{% endif %}
</ul>
</div>
<div class="right">
<ul>
<li class="title">
{% if user.first_name %}
{{ user.first_name }} {{ user.last_name }}
{% else %}
{{ user.username }}
<div id="container">
<div id="topmenubar" class="uibar menubar">
<div class="left" style="width: 50%">
<ul>
<li>
{% url main.views.index as index_url %}
<a href="{{ index_url }}">
<img src="/static/pics/user.png" border="0" />{% trans "Preferences" %}</a>
</li>
{% loadextmenu perms %}
{% if user.is_superuser or perms.admin.view_domains %}
<li class="dropdown">
<img src="/static/pics/settings.png" border="0" />
<label>{% trans "Admin" %}</label>
<ul class="links">
{% url admin.views.domains as dom_url %}
<a href="{{ dom_url }}">
<li><img src="/static/pics/domains.png" />{% trans "Domains" %}</li>
</a>
{% url admin.views.settings as settings_url %}
<a href="{{ settings_url }}">
<li>
<img src="/static/pics/settings.png" border="0"/>
{% trans "Settings" %}
</li>
</a>
</ul>
</li>
{% endif %}
/
</li>
<li>
{% url django.contrib.auth.views.logout_then_login as logout_url %}
<a href="{{ logout_url }}">
<img src="/static/pics/logout.png" border="0" />{% trans "Logout" %}</a>
</li>
</ul>
</div>
</div>
<div id="page">
<div id="header">
<img class="logo" src="/static/stylesheets/mailng.png" />
<h1>{% block middletitle %}{% endblock %}</h1>
<div id="menubar" class="menubar">
{% block menu %}{% endblock %}
</ul>
</div>
<div class="right">
<ul>
<li class="title">
{% if user.first_name %}
{{ user.first_name }} {{ user.last_name }}
{% else %}
{{ user.username }}
{% endif %}
/
</li>
<li>
{% url django.contrib.auth.views.logout_then_login as logout_url %}
<a href="{{ logout_url }}">
<img src="/static/pics/logout.png" border="0" />{% trans "Logout" %}</a>
</li>
</ul>
</div>
</div>
<div class="spacer"></div>
<div id="content">
{% block content %}{% endblock %}
<div id="page">
<div id="header">
<img class="logo" src="/static/stylesheets/mailng.png" />
<h1>{% block middletitle %}{% endblock %}</h1>
<div id="menubar" class="menubar">
{% block menu %}{% endblock %}
</div>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
<div id="footer" class="uibar menubar">
&nbsp;
</div>
</div>
<!-- <div id="header">
<img class="logo" src="/static/stylesheets/mailng.png" />
<div id="infos">
{% if messages %}
{% for m in messages %}{{ m }}{% endfor %}
{% endif %}
</div>
</div>
-->
</body>
</html>