Added basic contact groups feature

8 files changed, 150 insertions, 66 deletions

diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css
index ce82a1594..456d137b1 100644
--- a/skins/default/addressbook.css
+++ b/skins/default/addressbook.css
@@ -4,7 +4,7 @@
 {
   position: absolute;
   top: 45px;
-  left: 205px;
+  left: 225px;
   height: 35px;
 }
 
@@ -76,8 +76,8 @@
 #abookcountbar
 {
   position: absolute;
-  bottom: 16px;
-  left: 200px;
+  bottom: 6px;
+  left: 225px;
   width: 240px;
   height: 20px;
   text-align: left;
@@ -94,22 +94,80 @@
   position: absolute;
   top: 85px;
   right: 20px;
-  bottom: 40px;
-  left: 205px;
+  bottom: 30px;
+  left: 225px;
 }
 
-#directorylist
+#directorylistbox
 {
   position: absolute;
   top: 85px;
-  bottom: 40px;
+  bottom: 30px;
   left: 20px;
-  width: 175px;
+  width: 195px;
   border: 1px solid #999999;
   background-color: #F9F9F9;
   overflow: hidden;
 }
 
+#directorylistwarp
+{
+  position: absolute;
+  top: 20px;
+  bottom: 22px;
+  left: 0;
+  right: 0;
+  overflow: auto;
+}
+
+#groups-title
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+#directorylistbox input
+{
+  display: absolute;
+  margin: 2px;
+}
+
+#directoylistbuttons
+{
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 22px;
+  border-top: 1px solid #999;
+  background: url('images/listheader.gif') top left repeat-x #CCC;
+}
+
+#directoylistbuttons a.button,
+#directoylistbuttons a.buttonPas
+{
+  display: block;
+  float: left;
+  width: 34px;
+  height: 22px;
+  padding: 0px;
+  margin: 0;
+  overflow: hidden;
+  background: url('images/icons/groupactions.png') 0 0 no-repeat transparent;
+  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
+}
+
+#directoylistbuttons a.groupactions {
+  background-position: 0 -26px;
+}
+
+#directoylistbuttons a.buttonPas {
+  opacity: 0.35;
+}
+
 #addresslist
 {
   position: absolute;
@@ -120,6 +178,11 @@
   overflow: auto;
 }
 
+#contactgroupslist
+{
+  border-top: 1px solid #999;
+}
+
 #importbox
 {
   position: absolute;
@@ -136,7 +199,7 @@
 #addresslist
 {
   left: 0px;
-  width: 340px;
+  width: 280px;
 }
 
 #importbox a
@@ -144,7 +207,7 @@
   color: blue;
 }
 
-#directorylist ul
+#directorylist
 {
   list-style: none;
   margin: 0;
@@ -152,23 +215,31 @@
   background-color: #FFFFFF;
 }
 
-#directorylist ul li
+#directorylist li
 {
+  display: block;
   font-size: 11px;
+  background: url(images/icons/folders.png) 5px -108px no-repeat;
   border-bottom: 1px solid #EBEBEB;
   white-space: nowrap;
 }
 
-#directorylist ul li a
+#directorylist li a
 {
+  cursor: default;
   display: block;
-  padding-left: 6px;
+  padding-left: 25px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
   white-space: nowrap;
 }
 
+#directorylist li.contactgroup
+{
+  background-position: 5px -144px;
+}
+
 #directorylist li.selected
 {
   background-color: #929292;
@@ -201,7 +272,7 @@
 {
   position: absolute;
   top: 0px;
-  left: 555px;
+  left: 290px;
   right: 0px;
   bottom: 0px;
   border: 1px solid #999999;
diff --git a/skins/default/functions.js b/skins/default/functions.js
index ca4c6694b..6d99e921d 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -126,37 +126,52 @@ function rcmail_init_compose_form()
 
 function rcube_mail_ui()
 {
-  this.markmenu = $('#markmessagemenu');
-  this.searchmenu = $('#searchmenu');
-  this.messagemenu = $('#messagemenu');
-  this.listmenu = $('#listmenu');
-  this.dragmessagemenu = $('#dragmessagemenu');
+  this.popupmenus = {
+    markmenu:'markmessagemenu',
+    searchmenu:'searchmenu',
+    messagemenu:'messagemenu',
+    listmenu:'listmenu',
+    dragmessagemenu:'dragmessagemenu',
+    groupmenu:'groupoptionsmenu'
+  };
+  
+  var obj;
+  for (var k in this.popupmenus) {
+    obj = $('#'+this.popupmenus[k])
+    if (obj.length)
+      this[k] = obj;
+  }
 }
 
 rcube_mail_ui.prototype = {
 
-show_markmenu: function(show)
+show_popupmenu: function(obj, refname, show, above)
 {
   if (typeof show == 'undefined')
-    show = this.markmenu.is(':visible') ? false : true;
+    show = obj.is(':visible') ? false : true;
   
-  var ref = rcube_find_object('markreadbutton');
-  if (show && ref)
-    this.markmenu.css({ left:ref.offsetLeft, top:(ref.offsetTop + ref.offsetHeight) });
+  var ref = rcube_find_object(refname);
+  if (show && ref) {
+    var pos = $(ref).offset();
+    obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
+  }
   
-  this.markmenu[show?'show':'hide']();
+  obj[show?'show':'hide']();
 },
 
-show_messagemenu: function(show)
+show_markmenu: function(show)
 {
-  if (typeof show == 'undefined')
-    show = this.messagemenu.is(':visible') ? false : true;
+  this.show_popupmenu(this.markmenu, 'markreadbutton', show);
+},
 
-  var ref = rcube_find_object('messagemenulink');
-  if (show && ref)
-    this.messagemenu.css({ left:ref.offsetLeft, top:(ref.offsetTop + ref.offsetHeight) });
+show_messagemenu: function(show)
+{
+  this.show_popupmenu(this.messagemenu, 'messagemenulink', show);
+},
 
-  this.messagemenu[show?'show':'hide']();
+show_groupmenu: function(show)
+{
+  this.show_popupmenu(this.groupmenu, 'groupactionslink', show, true);
 },
 
 show_searchmenu: function(show)
@@ -267,6 +282,8 @@ body_mouseup: function(evt, p)
     this.show_messagemenu(false);
   else if (this.dragmessagemenu && this.dragmessagemenu.is(':visible') && !rcube_mouse_is_over(evt, rcube_find_object('dragmessagemenu')))
     this.dragmessagemenu.hide();
+  else if (this.groupmenu &&  this.groupmenu.is(':visible') && target != rcube_find_object('groupactionslink'))
+    this.show_groupmenu(false);
   else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink')) {
     var menu = rcube_find_object('listmenu');
     while (target.parentNode) {
@@ -290,16 +307,10 @@ body_mouseup: function(evt, p)
 body_keypress: function(evt, p)
 {
   if (rcube_event.get_keycode(evt) == 27) {
-    if (this.markmenu && this.markmenu.is(':visible'))
-      this.show_markmenu(false);
-    if (this.searchmenu && this.searchmenu.is(':visible'))
-      this.show_searchmenu(false);
-    if (this.messagemenu && this.messagemenu.is(':visible'))
-      this.show_messagemenu(false);
-    if (this.listmenu && this.listmenu.is(':visible'))
-      this.show_listmenu(false);
-    if (this.dragmessagemenu && this.dragmessagemenu.is(':visible'))
-      this.dragmessagemenu.hide();
+    for (var k in this.popupmenus) {
+      if (this[k] && this[k].is(':visible'))
+        this[k].hide();
+    }
   }
 }
 
@@ -312,7 +323,9 @@ function rcube_init_mail_ui()
   rcmail_ui = new rcube_mail_ui();
   rcube_event.add_listener({ object:rcmail_ui, method:'body_mouseup', event:'mouseup' });
   rcube_event.add_listener({ object:rcmail_ui, method:'body_keypress', event:'keypress' });
-  rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui);
-  rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui);
-  rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
+  if (rcmail.env.task == 'mail') {
+    rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui);
+    rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui);
+    rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
+  }
 }
diff --git a/skins/default/images/icons/folders.png b/skins/default/images/icons/folders.png
index dcd688425..5013318f8 100644
--- a/skins/default/images/icons/folders.png
+++ b/skins/default/images/icons/folders.png
diff --git a/skins/default/images/icons/groupactions.png b/skins/default/images/icons/groupactions.png
new file mode 100644
index 000000000..2e9c5f101
--- /dev/null
+++ b/skins/default/images/icons/groupactions.png
diff --git a/skins/default/images/listheader.gif b/skins/default/images/listheader.gif
index e7f501537..2f5c7f862 100644
--- a/skins/default/images/listheader.gif
+++ b/skins/default/images/listheader.gif
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 7b233f861..a3bb4ab9b 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -686,7 +686,7 @@ body.messagelist
 #messagelist thead tr td.sortedASC,
 #messagelist thead tr td.sortedDESC
 {
-  background-position: 0 -20px;
+  background-position: 0 -22px;
 }
 
 #messagelist thead tr td.sortedASC a
diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html
index fe9019208..f47931502 100644
--- a/skins/default/templates/addressbook.html
+++ b/skins/default/templates/addressbook.html
@@ -4,27 +4,16 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 <script type="text/javascript" src="/splitter.js"></script>
-
+<script type="text/javascript" src="/functions.js"></script>
 <style type="text/css">
-<roundcube:if condition="count(env:address_sources) &lt;= 1" />
-#abookcountbar { left: 20px; }
-#addressscreen { left: 20px; 
-<roundcube:exp expression="browser:ie ? 'width:expression((parseInt(document.documentElement.clientWidth)-40)+\\'px\\');' : ''" />
-}
-#addresslist { width: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter-5 : 245" />px; }
-#contacts-box { left: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255" />px;
-<roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255).')+\\'px\\');') : ''" />
-}
-<roundcube:else />
 #addresslist { width: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter-5 : 245" />px; }
 #contacts-box { left: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255" />px;
-<roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255).')+\\'px\\');') : ''" />
+	<roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255).')+\\'px\\');') : ''" />
 }
-<roundcube:endif />
 </style>
 
 </head>
-<body>
+<body onload="rcube_init_mail_ui()">
 
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
@@ -45,12 +34,24 @@
 <roundcube:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" />
 </div>
 
-<roundcube:if condition="count(env:address_sources) &gt; 1" />
-<div id="directorylist">
+<div id="directorylistbox">
 <div id="groups-title" class="boxtitle"><roundcube:label name="groups" /></div>
-<roundcube:object name="directorylist" id="directories-list" />
+<div id="directorylistwarp">
+  <roundcube:object name="directorylist" id="directorylist" />
+  <roundcube:object name="groupslist" id="contactgroupslist" />
+</div>
+<div id="directoylistbuttons">
+  <roundcube:button command="add-group" type="link" title="newcontactgroup" class="buttonPas addgroup" classAct="button addgroup" content=" " />
+  <roundcube:button name="groupactions" id="groupactionslink" type="link" title="groupactions" class="button groupactions" onclick="rcmail_ui.show_groupmenu();return false" content=" " />
+</div>
+</div>
+
+<div id="groupoptionsmenu" class="popupmenu">
+  <ul>
+    <li><roundcube:button command="rename-group" label="rename" classAct="active" /></li>
+    <li><roundcube:button command="delete-group" label="delete" classAct="active" /></li>
+  </ul>
 </div>
-<roundcube:endif />
 
 <div id="addressscreen">
 
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index a1084b096..9ade5641f 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -119,6 +119,7 @@
 <roundcube:container name="toolbar" id="messagetoolbar" />
 <roundcube:button name="markreadbutton" id="markreadbutton" type="link" class="button markmessage" title="markmessages" onclick="rcmail_ui.show_markmenu();return false" content=" " />
 <roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" content=" " />
+</div>
 
 <div id="markmessagemenu" class="popupmenu">
   <ul class="toolbarmenu">
@@ -132,8 +133,6 @@
 
 <roundcube:include file="/includes/messagemenu.html" />
 
-</div>
-
 <div id="searchmenu" class="popupmenu">
   <ul class="toolbarmenu">
     <li><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="rcmail_ui.set_searchmod(this)" /><label for="s_mod_subject"><roundcube:label name="subject" /></label></li>