modoboa/extensions/webmail/templates/index.html

{% extends "common/email_listing.html" %}
{% load i18n %}
{% block css %}
#leftcol {
  float: left;
  width: 150px;
}

.box h3 {
  font-size: small;
  margin: 2px 0px 2px 0px;
  text-align: center;
}

.box ul {
  list-style: none;
  padding: 5px 5px;
  margin: 0;
}

.box li {
  clear: both;
  margin-bottom: 4px;
}

.box li.selected {
  background: #ffffcc;
}

.box a:link, .box a:visited {
  background: transparent;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.box a:hover { 
  color: #6AB0C5;
  text-decoration: none;
}

.box img {
  float: left;
  margin-right: 2px;
  border: 0;
}
{% endblock %}
{% block js %}
  {% url extensions.webmail.main.folder as view_url %}
  loadMail = function(event) {
    event.stop();
    if (event.target.parentNode.id) {
      var url = "{{ view_url }}" + event.target.parentNode.id + "?page=" 
        + $("pagenum").value;
      event.target.parentNode.setStyle("background", "#ffffcc");
      new Request.JSON({url: url, onSuccess: function(resp) {
        $("menubar").set("html", resp.menu);
        $("listing").set("html", resp.mailcontent);
        $("listing").setStyle("overflow", "hidden");
        $$("a[name=back]").addEvent("click", loadfolder);
        setDivHeight("mailcontent", $("table-container").getSize().y, 0);
      }}).get();
    }
  }
  updatelisting = function(resp) {
    if (resp.menu != "") {
      $("menubar").set("html", resp.menu);
    }
    $("pagenum").value = resp.current_page;
    $("listing").set("html", resp.listing);
    $("listing").setStyle("overflow", "auto");
    $$("tr").addEvent("click", loadMail);
    $("navbar").set("html", resp.navbar);
    $("navbar").getChildren("a").addEvent("click", navbarcallback);
  }
  navbarcallback = function(event) {
    event.stop();
    new Request.JSON({url: event.target.getParent().get("href"), onSuccess: function(resp) {
      updatelisting(resp);
    }}).get({"mode" : "ajax"});
  }
  select = function(obj) {
    $$("a[name=loadfolder]").each(function(item) {
      item.getParent().setStyle("background", "white");
    });
    obj.getParent().setStyle("background", "#FFFFCC");
  }
  loadfolder = function(event) {
    event.stop();
    new Request.JSON({url: event.target.get("href"), onSuccess: function(resp) {
      updatelisting(resp);
    }}).get({"mode" : "ajax"});
  }
  foldercallback = function(event) {
    select(event.target);
    loadfolder(event);
  }

  $$("a[name=loadfolder]").addEvent("click", foldercallback);
  $("navbar").getChildren("a").addEvent("click", navbarcallback);
  $$("tr").addEvent("click", loadMail);
{% endblock %}
{% block middletitle %}{% trans "Webmail" %}{% endblock %}
{% block menu %}
  {% load webextras %}
  {% listing_menu "" perms %}
{% endblock %}
{% block leftcol %}
<div id="leftcol" class="box">
  <h3>{% trans "Folders" %}</h3>
  <ul>
  {% for fd in folders %}
  {% url extensions.webmail.main.folder fd.name as fdurl %}
  <a href="{{ fdurl }}" name="loadfolder">
    <li {% ifequal selection fd.name %}class="selected"{% endifequal %}>
      {% if fd.icon %}<img src="/static/pics/{{ fd.icon }}" />
      {% else %}<img src="/static/pics/folder.png" />
      {% endif %}
    {{ fd.name }}</li>
  </a>
  {% endfor %}
  </ul>
</div>
{% endblock %}