mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-01 13:24:10 +01:00
Contacts: Inline group add.
This commit is contained in:
Thomas Tanghus
parent
de7502604b
commit
4a589de7bc
@ -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; }
|
||||
|
||||
102
js/app.js
102
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 = $('<input type="text" class="active" /><a class="action checked disabled" />');
|
||||
$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 = $('<input type="text" class="active" value="' + name + '" /><a class="action checked disabled />');
|
||||
$elem.prepend($input).addClass('editing');
|
||||
$input.focus();
|
||||
|
||||
} else {
|
||||
throw { name: 'WrongParameterType', message: 'GroupList.editGroup only accept integers.'}
|
||||
}
|
||||
}
|
||||
|
||||
GroupList.prototype.addGroup = function(params, cb) {
|
||||
console.log('GroupList.addGroup', params.name);
|
||||
var name = params.name;
|
||||
contacts = []; // $.map(contacts, function(c) {return parseInt(c)});
|
||||
var self = this, exists = false;
|
||||
self.$groupList.find('h3[data-type="category"]').each(function() {
|
||||
@ -462,12 +538,14 @@ GroupList.prototype.addGroup = function(name, cb) {
|
||||
$.post(OC.filePath('contacts', 'ajax', 'categories/add.php'), {category: name}, function(jsondata) {
|
||||
if (jsondata && jsondata.status == 'success') {
|
||||
var tmpl = self.$groupListItemTemplate;
|
||||
var $elem = (tmpl).octemplate({
|
||||
id: jsondata.data.id,
|
||||
type: 'category',
|
||||
num: contacts.length,
|
||||
name: name,
|
||||
})
|
||||
var $elem = params.element
|
||||
? params.element
|
||||
: (tmpl).octemplate({
|
||||
id: jsondata.data.id,
|
||||
type: 'category',
|
||||
num: contacts.length,
|
||||
name: name,
|
||||
})
|
||||
self.categories.push({id: jsondata.data.id, name: name});
|
||||
$elem.data('obj', self);
|
||||
$elem.data('contacts', contacts);
|
||||
@ -484,6 +562,9 @@ GroupList.prototype.addGroup = function(name, cb) {
|
||||
if(!added) {
|
||||
$elem.insertAfter(self.$groupList.find('h3.group[data-type="category"]').last());
|
||||
}
|
||||
self.selectGroup({element:$elem});
|
||||
$elem.tipsy({trigger:'manual', gravity:'w', fallback: t('contacts', 'You can drag groups to\narrange them as you like.')});
|
||||
$elem.tipsy('show');
|
||||
if(typeof cb === 'function') {
|
||||
cb({status:'success', id:parseInt(jsondata.data.id), name:name});
|
||||
}
|
||||
@ -972,7 +1053,8 @@ OC.Contacts = OC.Contacts || {
|
||||
if(wrongKey(event)) {
|
||||
return;
|
||||
}
|
||||
self.addGroup();
|
||||
self.Groups.editGroup();
|
||||
//self.addGroup();
|
||||
});
|
||||
|
||||
this.$ninjahelp.find('.close').on('click keydown',function(event) {
|
||||
@ -1644,7 +1726,7 @@ OC.Contacts = OC.Contacts || {
|
||||
buttons: {
|
||||
'Ok':function() {
|
||||
self.Groups.addGroup(
|
||||
$dlg.find('input:text').val(),
|
||||
{name:$dlg.find('input:text').val()},
|
||||
function(response) {
|
||||
if(typeof cb === 'function') {
|
||||
cb(response);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user