From 767d5add7500e45d9c6cc89478e7e3efe1341b4c Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Wed, 11 Sep 2013 05:50:00 +0200 Subject: [PATCH] First step at opening contact inline in the list. #93 --- css/contacts.css | 27 +++++++++++++++++---------- js/app.js | 18 +++++++++++------- js/contacts.js | 16 +--------------- templates/contacts.php | 9 +++++---- 4 files changed, 34 insertions(+), 36 deletions(-) diff --git a/css/contacts.css b/css/contacts.css index 7236d875..2372e5df 100644 --- a/css/contacts.css +++ b/css/contacts.css @@ -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,14 +723,14 @@ 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 { +#contact .arrow { border-bottom: 20px solid white; border-left: 20px solid transparent; border-right: 20px solid transparent; diff --git a/js/app.js b/js/app.js index 734b2ffe..603660d6 100644 --- a/js/app.js +++ b/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; diff --git a/js/contacts.js b/js/contacts.js index 44cffca4..b5b4924f 100644 --- a/js/contacts.js +++ b/js/contacts.js @@ -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. diff --git a/templates/contacts.php b/templates/contacts.php index e708fdb4..564f3bf1 100644 --- a/templates/contacts.php +++ b/templates/contacts.php @@ -196,7 +196,7 @@