From 4a589de7bcc086ddbde6edad542feefc6a4546ac Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Fri, 7 Dec 2012 14:47:28 +0100 Subject: [PATCH] Contacts: Inline group add. --- css/contacts.css | 44 ++++++++++++++++---- js/app.js | 102 ++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 128 insertions(+), 18 deletions(-) diff --git a/css/contacts.css b/css/contacts.css index 09dd3809..8a7f19d5 100644 --- a/css/contacts.css +++ b/css/contacts.css @@ -40,12 +40,38 @@ #leftcontent { top: 3.5em !important; padding: 0; margin: 0; } #leftcontent a { display: inline-block; } -#leftcontent h3 { cursor: pointer; -moz-transition: background 300ms ease 0s; background: none no-repeat scroll 1em center #eee; border-bottom: 1px solid #ddd; border-top: 1px solid #fff; display: block; max-width: 100%; padding: 0.5em 0.8em; color: #666; text-shadow: 0 1px 0 #f8f8f8; font-size: 1.2em; } -#leftcontent h3:hover,#leftcontent h3:active,#leftcontent h3.active { background-color: #DBDBDB; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #D4D4D4; color: #333333; font-weight: bold; } +#leftcontent h3 { + cursor: pointer; + -moz-transition: background 300ms ease 0s; + background: none no-repeat scroll 1em center #eee; + border-bottom: 1px solid #ddd; border-top: 1px solid #fff; + display: block; + max-width: 100%; + height: 2em; + padding: 0.5em 0.8em; + color: #666; + text-shadow: 0 1px 0 #f8f8f8; + font-size: 1.2em; +} +#leftcontent h3:hover,#leftcontent h3:active,#leftcontent h3.active { + background-color: #DBDBDB; + border-bottom: 1px solid #CCCCCC; border-top: 1px solid #D4D4D4; + color: #333333; font-weight: bold; +} #leftcontent h3 img.shared { float: right; opacity: 0.4; margin: 0 .5em; } #leftcontent h3 img.shared:hover { opacity: 1; } +#leftcontent h3.editing .checked { margin-left: -25px; opacity: 1; display: inline-block; float: left; } +#leftcontent h3.editing .checked.disabled { opacity: .5 } +#leftcontent h3 input[type="text"] { + display: block; + width: 100%; + font-size: .8em; + float: left; + -moz-box-sizing: border-box; box-sizing: border-box; + margin: auto 0 auto .3em; +} -#groupactions { box-sizing: border-box; height: 4em; border-bottom: 1px solid #DDDDDD; } +#groupactions { -moz-box-sizing: border-box; box-sizing: border-box; height: 4em; border-bottom: 1px solid #DDDDDD; } #groupactions > button, .addcontact, .import-upload-button, .doImport { -moz-border-bottom-colors: none; -moz-border-left-colors: none; @@ -63,10 +89,10 @@ } #grouplist { z-index: 100; } -#grouplist h3 .action { float: right; display: none; padding: 0; margin: auto; } -#grouplist h3:not([data-type="shared"]):hover .action.numcontacts, #grouplist h3:not([data-type="shared"]) .active.action.numcontacts { display: inline-block; } -#grouplist h3[data-type="category"]:hover .action.delete { display: inline-block; } -#grouplist h3 .action.delete { width: 20px; height: 20px; } +#grouplist h3 .action:not(.starred) { float: right; display: none; padding: 0; margin: auto; } +#grouplist h3:not([data-type="shared"]):not(.editing):hover .action.numcontacts, #grouplist h3:not([data-type="shared"]):not(.editing) .active.action.numcontacts { display: inline-block; } +#grouplist h3[data-type="category"]:not(.editing):hover .action.delete { display: inline-block; } +#grouplist h3:not(.editing) .action.delete { width: 20px; height: 20px; } /* First run */ @@ -109,7 +135,9 @@ dl.form { display: inline-block; width: auto; margin: 0; padding: 0; cursor: nor .download { background:url('%webroot%/core/img/actions/download.svg') no-repeat center; } .cloud { background:url('%webroot%/core/img/places/picture.svg') no-repeat center; } .globe { background:url('%webroot%/core/img/actions/public.svg') no-repeat center; } -.starred { display: inline-block; height: 22px; width: 22px; padding: 0; margin: 0; background:url('%appswebroot%/contacts/img/starred.png') no-repeat center; } +.starred { background:url('%appswebroot%/contacts/img/starred.png') no-repeat center; } +.checked { background:url('%appswebroot%/contacts/img/checkmark-green.png') no-repeat center; } +.checked.disabled { background:url('%appswebroot%/contacts/img/checkmark-gray.png') no-repeat center; cursor: default; } .transparent{ opacity: 0.6; } .float { float: left; display: inline-block; width: auto; } .break { clear: both; } diff --git a/js/app.js b/js/app.js index 73e43a4b..034ed767 100644 --- a/js/app.js +++ b/js/app.js @@ -196,6 +196,9 @@ GroupList.prototype.selectGroup = function(params) { console.log('selectGroup', id, $elem); this.$groupList.find('h3').removeClass('active'); $elem.addClass('active'); + if(id === 'new') { + return; + } this.lastgroup = id; $(document).trigger('status.group.selected', { id: this.lastgroup, @@ -443,8 +446,81 @@ GroupList.prototype.deleteGroup = function(groupid, cb) { }); } -GroupList.prototype.addGroup = function(name, cb) { - console.log('GroupList.addGroup', name); +GroupList.prototype.editGroup = function(id) { + var self = this; + // NOTE: Currently this only works for adding, not renaming + var saveChanges = function($elem, $input) { + console.log('saveChanges', $input.val()); + var name = $input.val().trim(); + if(name.length === 0) { + return false; + } + $input.prop('disabled', true); + $elem.data('name', ''); + self.addGroup({name:name, element:$elem}, function(response) { + if(response.status === 'success') { + $elem.prepend(name).removeClass('editing').attr('data-id', response.id); + $input.next('.checked').remove() + $input.remove() + } else { + $input.prop('disabled', false); + OC.notify({message:response.message}); + } + }); + } + + if(typeof id === 'undefined') { + // Add new group + var tmpl = this.$groupListItemTemplate; + var $elem = (tmpl).octemplate({ + id: 'new', + type: 'category', + num: 0, + name: '', + }); + var $input = $(''); + $elem.prepend($input).addClass('editing'); + $elem.data('contacts', []); + this.$groupList.find('h3.group[data-type="category"]').first().before($elem); + this.selectGroup({element:$elem}); + $input.on('input', function(event) { + if($(this).val().length > 0) { + $(this).next('.checked').removeClass('disabled'); + } else { + $(this).next('.checked').addClass('disabled'); + } + }); + $input.on('keypress', function(event) { + if(event.keyCode === 13) { + saveChanges($elem, $(this)); + } + }); + $input.next('.checked').on('click keydown', function(event) { + console.log('clicked', event); + if(wrongKey(event)) { + return; + } + saveChanges($elem, $input); + }); + $input.focus(); + } else if(utils.isUInt(id)) { + var $elem = this.findById(id); + var $text = $elem.contents().filter(function(){ return(this.nodeType == 3); }); + var name = $text.text(); + console.log('Group name', $text, name); + $text.remove(); + var $input = $('