Merge branch devel-addressbook (r4193:4382) back into trunk

9 files changed, 246 insertions, 31 deletions

diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css
index a90dcf1bf..6e07281f7 100644
--- a/skins/default/addressbook.css
+++ b/skins/default/addressbook.css
@@ -214,3 +214,166 @@ body.iframe,
   text-align: right;
 }
 
+#contacttabs
+{
+	position: relative;
+	padding-bottom: 22px;
+}
+
+#contacttabs div.tabsbar {
+	top: 0;
+	left: 2px;
+}
+
+#contacttabs fieldset.tabbed {
+	position: relative;
+	top: 22px;
+	min-height: 5em;
+}
+
+#contacthead
+{
+	margin-bottom: 1em;
+	border: 0;
+	padding: 0;
+}
+
+#contacthead .names span.namefield,
+#contacthead .names input
+{
+	font-size: 140%;
+}
+
+#contacthead .displayname span.namefield
+{
+	font-size: 120%;
+}
+
+#contacthead span.nickname:before,
+#contacthead span.nickname:after,
+#contacthead input.ff_nickname:before,
+#contacthead input.ff_nickname:after
+{
+	content: '"';
+}
+
+#contacthead input
+{
+	margin-right: 6px;
+	margin-bottom: 0.2em;
+}
+
+#contacthead .names input,
+#contacthead .addnames input,
+#contacthead .jobnames input
+{
+	width: 180px;
+}
+
+#contacthead input.ff_prefix,
+#contacthead input.ff_suffix
+{
+	width: 90px;
+}
+
+#contacthead .addnames input.ff_name
+{
+	width: 374px;
+}
+
+#contactphoto
+{
+	float: right;
+	width: 60px;
+	margin-left: 3em;
+	margin-right: 4px;
+}
+
+#contactpic
+{
+	width: 60px;
+	min-height: 60px;
+	border: 1px solid #ccc;
+	background: white;
+}
+
+#contactpic img {
+	width: 60px;
+}
+
+#contactphoto .formlinks
+{
+	margin-top: 0.5em;
+	text-align: center;
+}
+
+fieldset.contactfieldgroup
+{
+	border: 0;
+	margin: 0.5em 0;
+	padding: 0.5em 2px;
+}
+
+fieldset.contactfieldgroup legend
+{
+	font-size: 0.9em;
+}
+
+.contactfieldgroup .row
+{
+	position: relative;
+	margin-bottom: 0.4em;
+}
+
+.contactfieldgroup .contactfieldlabel
+{
+	position: absolute;
+	top: 0;
+	left: 2px;
+	width: 90px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: #666;
+	font-weight: bold;
+}
+
+.contactfieldgroup .contactfieldlabel select
+{
+	width: 78px;
+	background: none;
+	border: 0;
+	color: #666;
+	font-weight: bold;
+	padding-left: 0;
+}
+
+.contactfieldgroup .contactfieldcontent
+{
+	padding-left: 100px;
+	min-height: 1em;
+	line-height: 1.3em;
+}
+
+.contactfieldgroup .contactfield {
+	line-height: 1.3em;
+}
+
+.contactcontrolleraddress .contactfieldcontent input {
+	margin-bottom: 0.1em;
+}
+
+.contactfieldcontent .contactfieldbutton {
+	vertical-align: middle;
+	margin-left: 0.5em;
+}
+
+#upload-form
+{
+	padding: 6px;
+}
+
+#upload-form div
+{
+	padding: 2px;
+}
diff --git a/skins/default/common.css b/skins/default/common.css
index e052552d0..0d9b30718 100644
--- a/skins/default/common.css
+++ b/skins/default/common.css
@@ -76,6 +76,12 @@ input, textarea
   padding: 1px 3px;
 }
 
+input.placeholder,
+textarea.placeholder
+{
+  color: #aaa;
+}
+
 input.button
 {
   height: 20px;
@@ -114,6 +120,20 @@ img
   font-size: 11px;
 }
 
+.formlinks a,
+.formlinks a:visited
+{
+  color: #CC0000;
+  font-size: 11px;
+  text-decoration: none;
+}
+
+.formlinks a.disabled,
+.formlinks a.disabled:visited
+{
+  color: #999999;
+}
+
 /** common user interface objects */
 
 #mainscreen
diff --git a/skins/default/functions.js b/skins/default/functions.js
index 00e97fd1a..62e4783cb 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -25,9 +25,8 @@ function rcube_show_advanced(visible)
 // Warning: don't place "caller" <script> inside page element (id)
 function rcube_init_tabs(id, current)
 {
-  var content = document.getElementById(id),
-    // get fieldsets of the higher-level (skip nested fieldsets)
-    fs = $('fieldset', content).not('fieldset > fieldset');
+  var content = $('#'+id),
+    fs = content.children('fieldset');
 
   if (!fs.length)
     return;
@@ -42,9 +41,7 @@ function rcube_init_tabs(id, current)
 
   // convert fildsets into tabs
   fs.each(function(idx) {
-    var tab, a, elm = $(this),
-      // get first legend element
-      legend = $(elm).children('legend');
+    var tab, a, elm = $(this), legend = elm.children('legend');
 
     // create a tab
     a   = $('<a>').text(legend.text()).attr('href', '#');
@@ -66,8 +63,7 @@ function rcube_init_tabs(id, current)
 
 function rcube_show_tab(id, index)
 {
-  var content = document.getElementById(id),
-    fs = $('fieldset', content).not('fieldset > fieldset');
+  var fs = $('#'+id).children('fieldset');
 
   fs.each(function(idx) {
     // Show/hide fieldset (tab content)
@@ -94,7 +90,8 @@ function rcube_mail_ui()
     mailboxmenu:    {id:'mailboxoptionsmenu', above:1},
     composemenu:    {id:'composeoptionsmenu', editable:1},
     // toggle: #1486823, #1486930
-    uploadmenu:     {id:'attachment-form', editable:1, above:1, toggle:!bw.ie&&!bw.linux }
+    uploadmenu:     {id:'attachment-form', editable:1, above:1, toggle:!bw.ie&&!bw.linux },
+    uploadform:     {id:'upload-form', editable:1, toggle:!bw.ie&&!bw.linux }
   };
 
   var obj;
@@ -136,6 +133,9 @@ show_popupmenu: function(popup, show)
     if (!above && pos.top + ref.offsetHeight + obj.height() > window.innerHeight)
       above = true;
 
+    if (pos.left + obj.width() > window.innerWidth)
+      pos.left = window.innerWidth - obj.width() - 30;
+
     obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
   }
 
@@ -500,6 +500,9 @@ function rcube_init_mail_ui()
     if (rcmail.env.action == 'compose')
       rcmail_ui.init_compose_form();
   }
+  else if (rcmail.env.task == 'addressbook') {
+    rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); });
+  }
 }
 
 // Events handling in iframes (eg. preview pane)
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index 29ab8cb75..4c0816ad8 100644
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@@ -236,3 +236,9 @@ table.records-table thead tr td
 {
   margin-top: 2px;
 }
+
+.contactfieldgroup legend
+{
+	padding: 0 0 0.5em 0;
+	margin-left: -4px;
+}
diff --git a/skins/default/images/contactpic.png b/skins/default/images/contactpic.png
new file mode 100644
index 000000000..bdb6cdcc0
--- /dev/null
+++ b/skins/default/images/contactpic.png
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 7bb308c06..30572299e 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -1342,20 +1342,6 @@ input.from_address
   display: none;
 }
 
-.formlinks a,
-.formlinks a:visited
-{
-  color: #999999;
-  font-size: 11px;
-  text-decoration: none;
-}
-
-.formlinks a,
-.formlinks a:visited
-{
-  color: #CC0000;
-}
-
 #compose-editorfooter
 {
   position: absolute;
diff --git a/skins/default/templates/contact.html b/skins/default/templates/contact.html
index 06d0fbee5..084664e9d 100644
--- a/skins/default/templates/contact.html
+++ b/skins/default/templates/contact.html
@@ -9,12 +9,17 @@
 
 <div id="contact-title" class="boxtitle"><roundcube:label name="contactproperties" /></div>
 <div id="contact-details" class="boxcontent">
-  <roundcube:object name="contactdetails" />
+  <div id="contactphoto"><roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /></div>
+  <roundcube:object name="contacthead" id="contacthead" />
+  <div style="clear:both"></div>
+  <div id="contacttabs">
+    <roundcube:object name="contactdetails" />
+  </div>
   <p>
     <roundcube:button command="edit" type="input" class="button" label="editcontact" condition="!ENV:readonly" />
   </p>
 </div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
 
 </body>
 </html>
diff --git a/skins/default/templates/contactadd.html b/skins/default/templates/contactadd.html
index 1a10f10ac..b5fd05609 100644
--- a/skins/default/templates/contactadd.html
+++ b/skins/default/templates/contactadd.html
@@ -5,18 +5,34 @@
 <roundcube:include file="/includes/links.html" />
 <script type="text/javascript" src="/functions.js"></script>
 </head>
-<body class="iframe">
+<body class="iframe" onload="rcube_init_mail_ui()">
 
 <div id="contact-title" class="boxtitle"><roundcube:label name="addcontact" /></div>
 <div id="contact-details" class="boxcontent">
-  <roundcube:object name="contacteditform" size="40" />
+<form name="editform" method="post" action="./">
+  <div id="contactphoto">
+    <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+    <div class="formlinks">
+      <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="addphoto" class="disabled" classAct="active" onclick="rcmail_ui.show_popup('uploadform', true);return false" condition="env:photocol" /><br/>
+      <roundcube:button command="delete-photo" type="link" label="delete" class="disabled" classAct="active" condition="env:photocol" />
+    </div>
+  </div>
+  <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
+  <div style="clear:both"></div>
+  
+  <div id="contacttabs">
+    <roundcube:object name="contacteditform" size="40" textareacols="60" deleteIcon="/images/icons/delete.png" form="editform" />
+  </div>
   <p>
     <input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />&nbsp;
     <roundcube:button command="save" type="input" class="button mainaction" label="save" />
   </p>
 </form>
 </div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+
+<roundcube:object name="photoUploadForm" id="upload-form" size="30" class="popupmenu" />
+
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
 
 </body>
 </html>
diff --git a/skins/default/templates/contactedit.html b/skins/default/templates/contactedit.html
index a15aaf22a..681201caa 100644
--- a/skins/default/templates/contactedit.html
+++ b/skins/default/templates/contactedit.html
@@ -5,18 +5,34 @@
 <roundcube:include file="/includes/links.html" />
 <script type="text/javascript" src="/functions.js"></script>
 </head>
-<body class="iframe">
+<body class="iframe" onload="rcube_init_mail_ui()">
 
 <div id="contact-title" class="boxtitle"><roundcube:label name="editcontact" /></div>
 <div id="contact-details" class="boxcontent">
-  <roundcube:object name="contacteditform" size="40" />
+<form name="editform" method="post" action="./">
+  <div id="contactphoto">
+    <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+    <div class="formlinks">
+      <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="disabled" classAct="active" onclick="rcmail_ui.show_popup('uploadform', true);return false" condition="env:photocol" /><br/>
+      <roundcube:button command="delete-photo" type="link" label="delete" class="disabled" classAct="active" condition="env:photocol" />
+    </div>
+  </div>
+  <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
+  <div style="clear:both"></div>
+  
+  <div id="contacttabs">
+    <roundcube:object name="contacteditform" size="40" textareacols="60" deleteIcon="/images/icons/delete.png" form="editform" />
+  </div>
   <p>
     <roundcube:button command="show" type="input" class="button" label="cancel" />&nbsp;
     <roundcube:button command="save" type="input" class="button mainaction" label="save" />
   </p>
 </form>
 </div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+
+<roundcube:object name="photoUploadForm" id="upload-form" size="30" class="popupmenu" />
+
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
 
 </body>
 </html>