Add fieldset legends and input element labels to contact edit form

program/js/app.js

@@ -5562,6 +5562,7 @@ function rcube_webmail()
 
       if (appendcontainer.length && appendcontainer.get(0).nodeName == 'FIELDSET') {
         var input, colprop = this.env.coltypes[col],
+          input_id = 'ff_' + col + (colprop.count || 0),
           row = $('<div>').addClass('row'),
           cell = $('<div>').addClass('contactfieldcontent data'),
           label = $('<div>').addClass('contactfieldlabel label');
@@ -5569,13 +5570,13 @@ function rcube_webmail()
         if (colprop.subtypes_select)
           label.html(colprop.subtypes_select);
         else
-          label.html(colprop.label);
+          label.html('<label for="' + input_id + '">' + colprop.label + '</label>');
 
         var name_suffix = colprop.limit != 1 ? '[]' : '';
         if (colprop.type == 'text' || colprop.type == 'date') {
           input = $('<input>')
             .addClass('ff_'+col)
-            .attr({type: 'text', name: '_'+col+name_suffix, size: colprop.size})
+            .attr({type: 'text', name: '_'+col+name_suffix, size: colprop.size, id: input_id})
             .appendTo(cell);
 
           this.init_edit_field(col, input);
@@ -5586,7 +5587,7 @@ function rcube_webmail()
         else if (colprop.type == 'textarea') {
           input = $('<textarea>')
             .addClass('ff_'+col)
-            .attr({ name: '_'+col+name_suffix, cols:colprop.size, rows:colprop.rows })
+            .attr({ name: '_'+col+name_suffix, cols:colprop.size, rows:colprop.rows, id: input_id })
             .appendTo(cell);
 
           this.init_edit_field(col, input);
@@ -5621,7 +5622,7 @@ function rcube_webmail()
         else if (colprop.type == 'select') {
           input = $('<select>')
             .addClass('ff_'+col)
-            .attr('name', '_'+col+name_suffix)
+            .attr({ 'name': '_'+col+name_suffix, id: input_id })
             .appendTo(cell);
 
           var options = input.attr('options');
@@ -6953,13 +6954,7 @@ function rcube_webmail()
         container.data('callback')($(this).data('id'));
         return false;
       });
-/*
+
-      // hide selector on click out of selector element
-      var fn = function(e) { if (e.target != container.get(0)) container.hide(); };
-      $(document.body).on('mouseup', fn);
-      $('iframe').contents().on('mouseup', fn)
-        .load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-*/
       this.folder_selector_element = container;
     }
 

program/localization/en_US/labels.inc

@@ -353,7 +353,9 @@ $labels['addcontact'] = 'Add new contact';
 $labels['editcontact'] = 'Edit contact';
 $labels['contacts'] = 'Contacts';
 $labels['contactproperties'] = 'Contact properties';
+$labels['contactnameandorg'] = 'Name and Organization';
 $labels['personalinfo'] = 'Personal information';
+$labels['contactphoto'] = 'Contact photo';
 
 $labels['edit']   = 'Edit';
 $labels['cancel'] = 'Cancel';

program/steps/addressbook/edit.inc

@@ -98,12 +98,15 @@ function rcmail_get_edit_record()
 
 function rcmail_contact_edithead($attrib)
 {
+    global $RCMAIL;
+
     // check if we have a valid result
     $record = rcmail_get_edit_record();
     $i_size = !empty($attrib['size']) ? $attrib['size'] : 20;
 
     $form = array(
         'head' => array(
+            'name' => $RCMAIL->gettext('contactnameandorg'),
             'content' => array(
                 'prefix' => array('size' => $i_size),
                 'firstname' => array('size' => $i_size, 'visible' => true),

program/steps/addressbook/func.inc

@@ -649,6 +649,8 @@ function rcmail_contact_form($form, $record, $attrib = null)
                     if ($subtypes[$i])
                         $subtype = $subtypes[$i];
 
+                    $colprop['id'] = 'ff_' . $col . intval($coltypes[$field]['count']);
+
                     // render composite field
                     if ($colprop['type'] == 'composite') {
                         $composite = array(); $j = 0;
@@ -714,7 +716,7 @@ function rcmail_contact_form($form, $record, $attrib = null)
                     // display row with label
                     if ($label) {
                         $rows .= html::div('row',
-                            html::div('contactfieldlabel label', $select_subtype ? $select_subtype->show($subtype) : rcube::Q($label)) .
+                            html::div('contactfieldlabel label', $select_subtype ? $select_subtype->show($subtype) : html::label($colprop['id'], rcube::Q($label))) .
                             html::div('contactfieldcontent '.$colprop['type'], $val));
                     }
                     else   // row without label
@@ -803,7 +805,7 @@ function rcmail_contact_photo($attrib)
     else
         $ff_value = '-del-'; // will disable delete-photo action
 
-    $img = html::img(array('src' => $photo_img, 'border' => 1, 'alt' => ''));
+    $img = html::img(array('src' => $photo_img, 'border' => 1, 'alt' => $RCMAIL->gettext('contactphoto')));
     $content = html::div($attrib, $img);
 
     if ($CONTACT_COLTYPES['photo'] && ($RCMAIL->action == 'edit' || $RCMAIL->action == 'add')) {

program/steps/addressbook/show.inc

@@ -60,6 +60,7 @@ function rcmail_contact_head($attrib)
 
     $form = array(
         'head' => array(  // section 'head' is magic!
+            'name' => $RCMAIL->gettext('contactnameandorg'),
             'content' => array(
                 'prefix' => array('type' => 'text'),
                 'firstname' => array('type' => 'text'),

skins/classic/addressbook.css

@@ -279,6 +279,11 @@ body.iframe,
 	padding: 0;
 }
 
+#contacthead > legend
+{
+	display: none;
+}
+
 #contacthead .names span.namefield,
 #contacthead .names input
 {

skins/larry/addressbook.css

@@ -201,6 +201,8 @@
 	float: left;
 	margin: 0 18px 20px 0;
 	width: 112px;
+	border: 0;
+	padding: 0;
 }
 
 #contactpic {
@@ -236,6 +238,10 @@
 	opacity: 0.05;
 }
 
+#contactphoto .formlinks a[aria-disabled='true'] {
+	visibility: hidden;
+}
+
 #contacthead {
 	border: 0;
 	margin: 0 16em 1em 0;
@@ -244,6 +250,10 @@
 	font-size: 12px;
 }
 
+#contacthead > legend {
+	display: none;
+}
+
 form #contacthead {
 	margin-right: 0;
 }

skins/larry/settings.css

@@ -78,7 +78,7 @@
 	background-position: -24px -1137px;
 }
 
-#sections-table td.section,
+#sections-table tbody td,
 #sections-table .listitem span,
 #settings-sections .listitem a,
 #settings-sections .tablink a {

skins/larry/templates/contactedit.html

@@ -16,7 +16,8 @@
 		<div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" condition="env:action!='add'" /><roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" /></div>
 	<roundcube:endif />
 
-	<div id="contactphoto">
+	<fieldset id="contactphoto">
+		<legend class="voice"><roundcube:label name="contactphoto" /></legend>
 		<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
 		<roundcube:if condition="env:photocol" />
 		<roundcube:object name="fileDropArea" id="contactpic" />
@@ -25,7 +26,7 @@
 			<roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
 		</div>
 		<roundcube:endif />
-	</div>
+	</fieldset>
 
 	<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
 	<br style="clear:both" />