mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-01 13:24:10 +01:00
Contacts: Inline address editing.
This commit is contained in:
Thomas Tanghus
parent
f5a58df90e
commit
9c50bebe93
@ -235,20 +235,36 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
|
||||
|
||||
/* Contact layout */
|
||||
|
||||
#contact > ul {
|
||||
#contact > ul.propertylist {
|
||||
font-size: 10px;
|
||||
/*display: table;
|
||||
border-spacing: 1em;
|
||||
border: thin solid black;*/
|
||||
}
|
||||
#contact > ul > li {
|
||||
#contact > ul.propertylist > li {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
/*display: table-cell;*/
|
||||
}
|
||||
|
||||
#rightcontent footer { padding: 1em; }
|
||||
.adr.edit {
|
||||
width: 20em;
|
||||
border: 1px solid silver; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:.3em; outline:none;
|
||||
}
|
||||
.adr.edit ul {
|
||||
-moz-column-count: 1;
|
||||
-webkit-columns: 1;
|
||||
-o-columns: 1;
|
||||
columns: 1;
|
||||
}
|
||||
.adr.edit input.value { border: none; }
|
||||
.adr.edit input.value:hover { border: none; }
|
||||
.adr.edit input.value.street, ul.adr.edit input.value.country, ul.adr.edit input.value.region { width: 19em;}
|
||||
.adr.edit input.value.zip { width: 5em; }
|
||||
.adr.edit input.value.city { width: 10em; }
|
||||
|
||||
#rightcontent footer { padding: 1em; width: 100%; box-sizing: border-box; clear: both; }
|
||||
#rightcontent footer > { display: inline-block; }
|
||||
/* contact list */
|
||||
|
||||
#contactlist { position: relative; top: 0; left: 0; right: 0; width: 100%; }
|
||||
@ -271,7 +287,7 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
|
||||
#contact span.adr:hover { /*overflow: inherit;*/ white-space: pre-wrap; }
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
#contact > ul {
|
||||
#contact > ul.propertylist {
|
||||
-moz-column-count: 3;
|
||||
-webkit-columns: 3;
|
||||
-o-columns: 3;
|
||||
@ -280,7 +296,7 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
|
||||
}
|
||||
@media screen and (min-width: 800px) and (max-width: 1400) {
|
||||
#singlevalues { max-width: 50%; }
|
||||
#contact > ul {
|
||||
#contact > ul.propertylist {
|
||||
-moz-column-count: 2;
|
||||
-webkit-columns: 2;
|
||||
-o-columns: 2;
|
||||
@ -288,7 +304,7 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
#contact > ul {
|
||||
#contact > ul.propertylist {
|
||||
-moz-column-count: 1;
|
||||
-webkit-columns: 1;
|
||||
-o-columns: 1;
|
||||
|
||||
@ -62,6 +62,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
var $list = this.$fullelem.find('ul.' + name.toLowerCase());
|
||||
$list.show();
|
||||
$list.append($elem);
|
||||
$elem.find('.adr.display').trigger('click');
|
||||
break;
|
||||
case 'IMPP':
|
||||
$elem = this.renderIMProperty();
|
||||
@ -611,7 +612,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
}
|
||||
break;
|
||||
case 'ADR':
|
||||
$property = self.renderAddressProperty(property);
|
||||
$property = self.renderAddressProperty(idx, property);
|
||||
break;
|
||||
case 'IMPP':
|
||||
$property = self.renderIMProperty(property);
|
||||
@ -714,11 +715,19 @@ OC.Contacts = OC.Contacts || {};
|
||||
* Render an ADR (address) property.
|
||||
* @return A jquery object to be injected in the DOM
|
||||
*/
|
||||
Contact.prototype.renderAddressProperty = function(property) {
|
||||
Contact.prototype.renderAddressProperty = function(idx, property) {
|
||||
console.log('Contact.renderAddressProperty', property)
|
||||
if(!this.detailTemplates['adr']) {
|
||||
console.log('No template for adr', this.detailTemplates);
|
||||
return;
|
||||
}
|
||||
if(typeof idx === 'undefined') {
|
||||
if(this.data && this.data.ADR && this.data.ADR.length > 0) {
|
||||
idx = this.data.ADR.length - 1;
|
||||
} else {
|
||||
idx = 0;
|
||||
}
|
||||
}
|
||||
var values = property ? {
|
||||
value: property.value.clean('').join(', '),
|
||||
checksum: property.checksum,
|
||||
@ -728,9 +737,36 @@ OC.Contacts = OC.Contacts || {};
|
||||
adr3: property.value[3] || '',
|
||||
adr4: property.value[4] || '',
|
||||
adr5: property.value[5] || '',
|
||||
adr6: property.value[6] || '',
|
||||
idx: idx,
|
||||
}
|
||||
: {value: '', checksum: 'new', adr0: '', adr1: '', adr2: '', adr3: '', adr4: '', adr5: ''};
|
||||
$elem = this.detailTemplates['adr'].octemplate(values);
|
||||
: {value:'', checksum:'new', adr0:'', adr1:'', adr2:'', adr3:'', adr4:'', adr5:'', adr6:'', idx: idx};
|
||||
var $elem = this.detailTemplates['adr'].octemplate(values);
|
||||
var self = this;
|
||||
$elem.find('.adr.display').on('click', function() {
|
||||
$(this).next('.listactions').hide();
|
||||
var $editor = $(this).siblings('.adr.edit').first();
|
||||
var $viewer = $(this);
|
||||
var bodyListener = function(e) {
|
||||
if($editor.find($(e.target)).length == 0) {
|
||||
console.log('this', $(this));
|
||||
$editor.toggle('blind');
|
||||
$viewer.slideDown(400, function() {
|
||||
var input = $editor.find('input').first();
|
||||
console.log('input', input);
|
||||
var val = self.valueFor(input);
|
||||
console.log('val', val);
|
||||
$(this).html(escapeHTML(self.valueFor($editor.find('input').first()).clean('').join(',')));
|
||||
$(this).next('.listactions').css('display', 'inline-block');
|
||||
$('body').unbind('click', bodyListener);
|
||||
});
|
||||
}
|
||||
}
|
||||
$viewer.slideUp();
|
||||
$editor.toggle('blind', function() {
|
||||
$('body').bind('click', bodyListener);
|
||||
});
|
||||
});
|
||||
return $elem;
|
||||
}
|
||||
|
||||
|
||||
@ -279,22 +279,37 @@
|
||||
</div>
|
||||
<div class="adr">
|
||||
<li data-element="adr" data-checksum="{checksum}" class="propertycontainer">
|
||||
<select class="rtl type parameter" data-parameter="TYPE" name="parameters[TYPE][]">
|
||||
<?php echo OCP\html_select_options($_['adr_types'], array()) ?>
|
||||
</select>
|
||||
<input type="checkbox" class="parameter tip" data-parameter="TYPE" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" />
|
||||
<span class="float adr">{value}</span>
|
||||
<span class="float adr display">{value}</span>
|
||||
<span class="listactions">
|
||||
<a class="action globe" title="<?php echo $l->t('View on map'); ?>"></a>
|
||||
<a class="action edit" title="<?php echo $l->t('Edit address details'); ?>"></a>
|
||||
<a class="action delete" title="<?php echo $l->t('Delete address'); ?>"></a>
|
||||
</span>
|
||||
<input type="hidden" id="adr_0" name="value[ADR][0]" value="{adr0}" />
|
||||
<input type="hidden" id="adr_1" name="value[ADR][1]" value="{adr1}" />
|
||||
<input type="hidden" id="adr_2" name="value[ADR][2]" value="{adr2}" />
|
||||
<input type="hidden" id="adr_3" name="value[ADR][3]" value="{adr3}" />
|
||||
<input type="hidden" id="adr_4" name="value[ADR][4]" value="{adr4}" />
|
||||
<input type="hidden" id="adr_5" name="value[ADR][5]" value="{adr5}" />
|
||||
<fieldset class="adr hidden edit ui-widget-content">
|
||||
<ul>
|
||||
<li>
|
||||
<select class="rtl type parameter" data-parameter="TYPE" name="parameters[TYPE][]">
|
||||
<?php echo OCP\html_select_options($_['adr_types'], array()) ?>
|
||||
</select>
|
||||
<input type="checkbox" id=="adr_pref_{idx}" class="parameter tip" data-parameter="TYPE" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" /><label for="adr_pref_{idx}"><?php echo $l->t('Preferred'); ?></label>
|
||||
</li>
|
||||
<li>
|
||||
<input class="value stradr" type="text" id="adr_2" name="value[2]" value="{adr2}" placeholder="<?php echo $l->t('1 Main Street'); ?>" />
|
||||
</li>
|
||||
<li>
|
||||
<input class="value zip" type="text" id="adr_5" name="value[5]" value="{adr5}" placeholder="<?php echo $l->t('12345'); ?>" />
|
||||
<input class="value city" type="text" id="adr_3" name="value[3]" value="{adr3}" placeholder="<?php echo $l->t('Your city'); ?>" />
|
||||
</li>
|
||||
<li>
|
||||
<input class="value region" type="text" id="adr_4" name="value[4]" value="{adr4}" placeholder="<?php echo $l->t('Some region'); ?>" />
|
||||
</li>
|
||||
<li>
|
||||
<input class="value country" type="text" id="adr_6" name="value[6]" value="{adr6}" placeholder="<?php echo $l->t('Your country'); ?>" />
|
||||
</li>
|
||||
</ul>
|
||||
<input class="value pobox" type="hidden" id="adr_0" name="value[0]" value="{adr0}" />
|
||||
<input class="value extadr" type="hidden" id="adr_1" name="value[1]" value="{adr1}" />
|
||||
</fieldset>
|
||||
</li>
|
||||
</div>
|
||||
<div class="impp">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user