mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-01 13:24:10 +01:00
First step at opening contact inline in the list. #93
This commit is contained in:
Thomas Tanghus
parent
7fc67fed85
commit
767d5add75
@ -145,8 +145,8 @@
|
||||
}
|
||||
#firstrun > div {
|
||||
position:relative;
|
||||
left:50%; top:30%;
|
||||
width: 50%;
|
||||
left:50%; top:40%;
|
||||
width: 80%;
|
||||
transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);
|
||||
color:white; font-weight:bold; text-align: center; color: #777;
|
||||
}
|
||||
@ -154,7 +154,6 @@
|
||||
#firstrun p { font-size:1.2em; text-align:center; }
|
||||
#firstrun #selections { font-size:0.8em; margin: 2em auto auto auto; clear: both; }
|
||||
|
||||
#contact { margin: 1em; }
|
||||
#contact textarea { min-height: 5em; width: 100%; margin: 0 !important; padding: 0 !important; outline: 0 !important;}
|
||||
#contact footer {
|
||||
padding: 5px;
|
||||
@ -166,6 +165,7 @@
|
||||
#contact footer > * {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
opacity: 1;
|
||||
}
|
||||
#contact footer > .delete {
|
||||
display: inline-block;
|
||||
@ -657,8 +657,15 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
#contactlist td {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
#contactlist > tbody > tr.contact { height: 3em; display: none; }
|
||||
#contactlist > tbody > tr.contact.active, #contactlist tr:hover { background-color: #eee; }
|
||||
/* Override default style for an open cpntact */
|
||||
tbody tr, tbody tr.hover {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
tbody tr.contact.active, tbody tr.contact:hover {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
#contactlist > tbody > tr { height: 3em; display: none; }
|
||||
#contactlist > tbody > tr.contact.active, #contactlist > tbody > tr.contact:hover { background-color: #eee; }
|
||||
#contactlist > tbody > tr > td {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
font-weight: normal;
|
||||
@ -668,7 +675,7 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#contactlist tr > td:not(.name) {
|
||||
#contactlist tr.contact > td:not(.name) {
|
||||
padding-left:10px;
|
||||
}
|
||||
#contactlist tr > td:not(.tel):not(.adr):not(.actions) {
|
||||
@ -696,7 +703,7 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
font-weight: bold; text-indent: 1.6em;
|
||||
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
|
||||
background-repeat:no-repeat !important;
|
||||
position:relative; background-position: 10px center !important;
|
||||
background-position: 10px center !important;
|
||||
}
|
||||
#contactlist tbody > tr > td a.mailto {
|
||||
position: absolute; float: right; clear: none;
|
||||
@ -716,12 +723,12 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
}
|
||||
#contact {
|
||||
background-color: white; color: #333333;
|
||||
border-radius: 3px; box-shadow: 0 0 10px #888888;
|
||||
/*border-radius: 3px; box-shadow: 0 0 10px #888888;
|
||||
padding: 10px;
|
||||
position: fixed !important;
|
||||
z-index: 101;
|
||||
top: 8em; left: 28em;
|
||||
width: 490px;
|
||||
width: 490px;*/
|
||||
}
|
||||
#contact .arrow {
|
||||
border-bottom: 20px solid white;
|
||||
|
||||
18
js/app.js
18
js/app.js
@ -1349,7 +1349,7 @@ OC.Contacts = OC.Contacts || {
|
||||
console.log('Contacts.openContact, Favorite', this.currentid, this.groups.isFavorite(this.currentid), this.groups);
|
||||
this.setAllChecked(false);
|
||||
//this.$contactList.hide();
|
||||
this.$contactList.addClass('dim');
|
||||
//this.$contactList.addClass('dim');
|
||||
console.assert(typeof this.currentid === 'string', 'Current ID not string');
|
||||
this.jumpToContact(this.currentid);
|
||||
// Properties that the contact doesn't know
|
||||
@ -1358,8 +1358,8 @@ OC.Contacts = OC.Contacts || {
|
||||
groups: this.groups.categories,
|
||||
currentgroup: {id:this.currentgroup, name:this.groups.nameById(this.currentgroup)}
|
||||
};
|
||||
var $contactelem = this.contacts.showContact(this.currentid, groupprops);
|
||||
if(!$contactelem) {
|
||||
var contact = this.contacts.findById(this.currentid);
|
||||
if(!contact) {
|
||||
console.warn('Error opening', this.currentid);
|
||||
this.$contactList.removeClass('dim');
|
||||
$(document).trigger('status.contacts.error', {
|
||||
@ -1368,6 +1368,9 @@ OC.Contacts = OC.Contacts || {
|
||||
this.currentid = null;
|
||||
return;
|
||||
}
|
||||
var $contactelem = contact.renderContact(groupprops);
|
||||
var $listElement = contact.getListItemElement();
|
||||
console.log('selected element', $listElement);
|
||||
var self = this;
|
||||
var adjustElems = function() {
|
||||
var $contact = $contactelem.find('#contact');
|
||||
@ -1379,10 +1382,11 @@ OC.Contacts = OC.Contacts || {
|
||||
});
|
||||
$contact.css({'min-width' : Math.round(minWidth), 'max-height': maxheight, 'overflow-y': 'auto', 'overflow-x': 'hidden'});
|
||||
};
|
||||
$(window).resize(adjustElems);
|
||||
//$contact.resizable({ minWidth: 400, minHeight: 400, maxHeight: maxheight});
|
||||
this.$rightContent.prepend($contactelem);
|
||||
adjustElems();
|
||||
//$(window).resize(adjustElems);
|
||||
//this.$rightContent.prepend($contactelem);
|
||||
$contactelem.insertAfter($listElement).show();
|
||||
$listElement.hide();
|
||||
//adjustElems();
|
||||
/*this.bodyListener = function(e) {
|
||||
if(!self.currentid) {
|
||||
return;
|
||||
|
||||
@ -687,6 +687,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
console.log('Contact.close', this);
|
||||
if(this.$fullelem) {
|
||||
this.$fullelem.remove();
|
||||
this.show();
|
||||
this.$fullelem = null;
|
||||
return true;
|
||||
} else {
|
||||
@ -2264,21 +2265,6 @@ OC.Contacts = OC.Contacts || {};
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Opens the contact with this id in edit mode
|
||||
* @param id the id of the contact
|
||||
* @returns A jquery object to be inserted in the DOM.
|
||||
*/
|
||||
ContactList.prototype.showContact = function(id, props) {
|
||||
var contact = this.findById(id);
|
||||
if(!contact) {
|
||||
return false;
|
||||
}
|
||||
this.currentContact = id;
|
||||
console.log('Contacts.showContact', id, contact, this.contacts);
|
||||
return contact.renderContact(props);
|
||||
};
|
||||
|
||||
/**
|
||||
* Insert a rendered contact list item into the list
|
||||
* @param contact jQuery object.
|
||||
|
||||
@ -196,7 +196,7 @@
|
||||
<script id="contactListItemTemplate" type="text/template">
|
||||
<tr class="contact" data-id="{id}" data-parent="{parent}" data-backend="{backend}">
|
||||
<td class="name thumbnail">
|
||||
<input type="checkbox" name="id" value="{id}" /><span class="nametext">{name}</span>
|
||||
<input type="checkbox" name="id" value="{id}" /><a href="#{id}" class="nametext">{name}</a>
|
||||
</td>
|
||||
<td class="email">
|
||||
<a href="mailto:{email}">{email}</a>
|
||||
@ -215,9 +215,9 @@
|
||||
</script>
|
||||
|
||||
<script id="contactFullTemplate" type="text/template">
|
||||
<form action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'index.php')); ?>" method="post" enctype="multipart/form-data">
|
||||
<tr><td colspan="6">
|
||||
<form action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'index.php')); ?>" method="post" enctype="multipart/form-data">
|
||||
<section id="contact" data-id="{id}">
|
||||
<span class="arrow"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<div id="photowrapper" class="propertycontainer" data-element="photo">
|
||||
@ -337,7 +337,8 @@
|
||||
<button class="delete action text float right tooltipped downwards" title="<?php p($l->t('Delete contact')); ?>"><?php p($l->t('Delete')); ?></button>
|
||||
</footer>
|
||||
</section>
|
||||
</form>
|
||||
</form>
|
||||
</td></tr>
|
||||
</script>
|
||||
|
||||
<script id="contactDetailsTemplate" class="hidden" type="text/template">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user