Add fieldset legends and input element labels to contact edit form

Thomas Bruederli

2014-06-04 24e89eceed9694882ff943c4106519fab449705f

Add fieldset legends and input element labels to contact edit form

 program/js/app.js

@@ -5562,6 +5562,7 @@

      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 @@
        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 @@
        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 @@
        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 @@
        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['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_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 @@
                    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 @@
                    // 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 @@
    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 @@

    $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 @@
    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" />