Embed address book widget on compose screen

skins/larry/mail.css

@@ -961,6 +961,56 @@ div.message-part blockquote blockquote blockquote {
 	bottom: 0;
 }
 
+#compose-contacts #directorylist {
+	border-bottom: 4px solid #c7e3ef;
+}
+
+#contacts-table {
+	table-layout: fixed;
+}
+
+#contacts-table td {
+	width: 100%;
+}
+
+#contacts-table td span {
+	display: block;
+}
+
+#compose-contacts li a, #contacts-table td {
+	background: url(images/listicons.png) -100px 0 no-repeat;
+	overflow: hidden;
+	padding-left: 36px;
+	text-overflow: ellipsis;
+}
+
+#compose-contacts li.addressbook a {
+	background-position: 6px -766px;
+}
+
+#compose-contacts li.addressbook.selected a {
+	background-position: 6px -791px;
+}
+
+#contacts-table td.contactgroup {
+	background-position: 6px -1555px;
+}
+
+#contacts-table tr.unfocused td.contactgroup,
+#contacts-table tr.selected td.contactgroup {
+	background-position: 6px -1579px;
+}
+
+#contacts-table td.contact {
+	background-position: 6px -1603px;
+}
+
+#contacts-table tr.unfocused td.contact,
+#contacts-table tr.selected td.contact {
+	background-position: 6px -1627px;
+}
+
+
 #compose-content {
 	position: absolute;
 	top: 42px;

skins/larry/styles.css

@@ -736,6 +736,7 @@ a.iconlink.upload {
 .listbox .tablink.selected,
 .listbox .listitem.selected > a,
 .listbox .tablink.selected > a,
+.listing tbody tr.unfocused td,
 .listing tbody tr.selected td,
 .listing li.selected,
 .listing li.selected > a {

skins/larry/templates/compose.html

@@ -17,11 +17,18 @@
 <div id="compose-contacts" class="uibox listbox">
 <h2 class="boxtitle"><roundcube:label name="contacts" /></h2>
 <div class="scroller withfooter">
-	
+	<roundcube:object name="adressbooks" id="directorylist" class="listing" />
+	<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
 </div>
 <div class="boxfooter">
 	<roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
 </div>
+<div class="boxpagenav">
+	<roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&amp;lt;" />
+	<roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
+	<roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
+	<roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;gt;|" />
+</div>
 </div>
 
 </div>

skins/larry/ui.js

@@ -82,6 +82,7 @@ function rcube_mail_ui()
       else if (rcmail.env.action == 'compose') {
         rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
         rcmail.addEventListener('aftersend-attachment', show_uploadform);
+        rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); });
         layout_composeview();
 
         $('#composeoptionstoggle').parent().click(function(){
@@ -183,7 +184,12 @@ function rcube_mail_ui()
       }
     });
 
-    $(window).resize(resize);
+    $(window).resize(function(e) {
+      // check target due to bugs in jquery
+      // http://bugs.jqueryui.com/ticket/7514
+      // http://bugs.jquery.com/ticket/9841
+      if (e.target == window) resize();
+    });
   }
 
   /**
@@ -631,11 +637,16 @@ function rcube_mail_ui()
   /**
    *
    */
-  function show_header_row(which)
+  function show_header_row(which, updated)
   {
-    if (compose_headers[which])
+    var row = $('#compose-' + which);
+    if (row.is(':visible'))
+      return;  // nothing to be done here
+
+    if (compose_headers[which] && !updated)
       $('#_' + which).val(compose_headers[which]);
-    $('#compose-' + which).show();
+
+    row.show();
     $('#' + which + '-link').hide();
     layout_composeview();
     return false;