rooty/OwncloudContactsOfficial
1
0
Fork 0
mirror of https://github.com/owncloudarchive/contacts.git synced 2025-01-30 19:52:17 +01:00
Code Issues Releases Activity

Contacts: Port to new apps styles.

Browse Source
This commit is contained in:
Thomas Tanghus 2013-04-30 20:00:33 +02:00
parent 56831dfa67
commit 7da675a1d5
4 changed files with 258 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
css/contacts.css
View File

@ -1,4 +1,5 @@
#content-wrapper { overflow: hidden; } /* Avoid double scroll bars */
/* General element settings */
#content li { cursor: default; }
#content input[type=checkbox] {
@ -63,12 +64,6 @@
/* Left content */
#leftcontent { position:absolute; top: 4em; bottom: 0; overflow-x:hidden; overflow-y: auto; padding: 0; margin: 0; }
#leftcontent a { display: inline-block; padding: 0; margin: 0; }
#leftcontent a.unshare {
float: right;
}
#shareWithList .cruds {
display: inline;
}
@ -77,75 +72,52 @@
border-bottom: 1px solid silver;
}
#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: 12px 10px 0px;
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;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
margin: auto 0 auto .3em;
#app-navigation a.unshare {
float: right;
}
#groupsheader {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
position: fixed;
padding: 0; margin:0;
top:3.5em;
height: 4em; width: 20em;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: none repeat scroll 0 0 #F8F8F8;
#app-navigation .utils {
bottom: 0;
position: absolute;
right: 0;
top: 0;
}
#app-navigation .utils > * {
float: right;
}
#app-navigation img.shared { float: right; opacity: 0.4; margin: 0 .5em; }
#app-navigation img.shared:hover { opacity: 1; }
#app-navigation li.editing .checked {
margin: 10px 0 0 -27px;
opacity: 1;
display: inline-block;
float: left;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size:contain;
width: 18px; height: 18px;
}
#app-navigation li.editing .checked.disabled { opacity: .5 }
#app-navigation input[type="text"] {
display: block;
width: 200px;
float: left;
margin: 5px 0 5px .3em;
}
/*#groupactions > button, .addcontact, .import-upload-button, .doImport {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #51A351 #419341 #387038;
border-image: none;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px #F8F8F8, 1px 1px 1px #AADDAA inset;
background-color: #5BB75B;
color: #fff;
border-right: medium none;
margin: .7em 2em;
}*/
#grouplist { z-index: 100; }
#grouplist h3 .action:not(.starred):not(.checked):not(.favorite) { 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 li .action:not(.starred):not(.checked):not(.favorite):not([class^="add-"]) { float: right; display: none; padding: 0; margin: auto; }
#grouplist li:not([data-type="shared"]):not(.editing):hover .action.numcontacts, #grouplist li:not([data-type="shared"]):not(.editing) .active.action.numcontacts { display: inline-block; }
.action.numcontacts { width: 6em; }
#grouplist h3.active[data-type="category"]:not(.editing):hover .action.delete { display: inline-block; }
#grouplist h3:not(.editing) .action.delete { width: 20px; height: 20px; }
#grouplist li.active[data-type="category"]:not(.editing):hover .action.delete { display: inline-block; }
#grouplist li:not(.editing) .action.delete { width: 20px; height: 20px; }
#grouplist .group span.numcontacts { width: 30px; text-align: right; margin-right: 10px !important; }
/* First run */
#firstrun { position: relative; top: 25%; left: 20%; right: 20%; width: 50%; font-weight:bold; text-align: center; color: #777; }
#firstrun h3 { font-size:1.5em; text-align: center; margin-bottom: 1em; }
#firstrun li { font-size:1.5em; text-align: center; margin-bottom: 1em; }
#firstrun p { font-size:1.2em; text-align:center; }
#firstrun #selections { font-size:0.8em; margin: 2em auto auto auto; clear: both; }
@ -213,6 +185,7 @@
background-size: 20px 16px;
background-origin: content-box;
background-repeat: no-repeat;
width: auto; height: auto;
}
/*.svg .add { background-image:url('%webroot%/core/img/actions/add.svg'); }*/
.svg .delete { background-image:url('%webroot%/core/img/actions/delete.svg'); }
@ -251,7 +224,7 @@
z-index: 0;
}
.ui-draggable { height: 3em; z-index: 1000; }
.ui-draggable { height: 3em; z-index: 1; }
.dragContact {
cursor: move;
background-repeat: no-repeat !important;
@ -373,9 +346,8 @@ dt[data-element="org"] { margin-top: 4px; }
.addressbooks-settings a.action:hover { opacity: 1; }
.addressbooks-settings td.active, .addressbooks-settings td.action { width: 20px; }
/*
#contacts-settings .settings {
/*width: 20px; height: 20px;
float: left;*/
height:1.4em;
background-repeat: no-repeat;
background-position:0px 0px;
@ -420,8 +392,9 @@ dt[data-element="org"] { margin-top: 4px; }
max-height: 250px;
overflow-y: auto;
}
*/
/* Single elements */
#file_upload_target, #import_upload_target, #crop_target { display:none; }
#file_upload_form, #file_upload_target, #import_upload_target, #crop_target { display:none; }
#import_upload_start {
height: 2.29em;
/*width: 2.5em;*/
@ -452,7 +425,6 @@ label[for="import_upload_start"] {
.doImport{ margin: auto; }
#toggle_all { position: absolute; bottom: .5em; left: .8em; }
input:not([type="checkbox"]).propertytype {
float: left; font-size: .8em;
max-width: 100px;
@ -520,36 +492,9 @@ input[type="checkbox"].propertytype { width: 10px; }
.svg .favorite.active, .favorite:hover { background-image:url('%appswebroot%/contacts/img/active_star.svg'); }
.svg .favorite.inactive { background-image:url('%appswebroot%/contacts/img/inactive_star.svg'); background-size:contain; }
/* Header */
#contactsheader {
position: fixed;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
padding: 0; margin:0;
top:3.5em; left:25em; right: 0; height: 4em;
border-bottom: 1px solid #DDDDDD; z-index: 50;
background-color: #fff;
#app-content {
padding-bottom: 50px;
}
#contactsheader div.actions {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
padding: 0 .5em 0 4em; margin: 0 auto;
height: 100%; width: 100%;
}
#groupsheader button, #contactsheader button, #contactsheader select { position: relative; float: left; min-width: 26px; height: 26px; margin: 13px; padding: .2em; clear: none; }
#contactsheader select { width:100px; }
#contactsheader .delete {
bottom: 1.4em;
right: 1em;
position: absolute;
background-image:url('%webroot%/core/img/actions/delete.svg');
}
.no-svg #contactsheader .delete { background-image:url('%webroot%/core/img/actions/delete.vg'); float: right;}
#contactsheader .list.add { margin-left: 5em; }
/* Right content layout */
#rightcontent, .rightcontent { position:absolute; top: 4em; left: 20em; right: 0; bottom: 0; overflow-x:hidden; overflow-y: auto; }
/* Contact layout */
@ -587,12 +532,36 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
.note { margin-left: 120px; }
#rightcontent footer { padding: 1em; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; clear: both; }
#rightcontent footer > { display: inline-block; }
/* contact list */
#contactsHeader {
display: none;
-moz-box-sizing: border-box;
left: 315px; right: 15px; top: 45px;
position: fixed;
height: 40px;
z-index: 2;
background: none repeat scroll 0 0 rgba(230, 230, 230, .8);
border-bottom: 0 none;
color: #000000;
font-weight: bold;
opacity: 1;
}
#contactsHeader .toggle {
margin: 10px 0 0 12px;
}
#contactsHeader .actions {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
display: block;
padding: 0 .5em; margin: 0 auto;
float: right;
}
#contactlist.multiselect {
top: 40px;
}
#contactlist { position: relative; top: 0; left: 0; right: 0; width: 100%; }
#contactlist tr { height: 3em; display: none; }
#contactlist tr.contact { height: 3em; display: none; }
#contactlist tr.active, #contactlist tr:hover { background-color: #eee; }
#contactlist tr > td { border-bottom: 1px solid #DDDDDD; font-weight: normal; text-align: left; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
#contactlist tr > td:hover { overflow: inherit; text-overflow: inherit; background-color: #fff; z-index: 200; }

60
js/app.js
View File

@ -173,7 +173,7 @@ OC.Contacts = OC.Contacts || {
OCCategories.type = 'contact';
this.bindEvents();
this.$toggleAll.show();
this.showActions(['add']);
this.hideActions();
},
loading:function(obj, state) {
$(obj).toggleClass('loading', state);
@ -190,7 +190,12 @@ OC.Contacts = OC.Contacts || {
//console.trace();
this.$headeractions.children().hide();
if(act && act.length > 0) {
this.$contactList.addClass('multiselect');
this.$contactListHeader.show();
this.$headeractions.children('.'+act.join(',.')).show();
} else {
this.$contactListHeader.hide();
this.$contactList.removeClass('multiselect');
}
},
showAction:function(act, show) {
@ -214,17 +219,18 @@ OC.Contacts = OC.Contacts || {
this.$contactDragItemTemplate = $('#contactDragItemTemplate');
this.$contactFullTemplate = $('#contactFullTemplate');
this.$contactDetailsTemplate = $('#contactDetailsTemplate');
this.$rightContent = $('#rightcontent');
this.$header = $('#contactsheader');
this.$headeractions = this.$header.find('div.actions');
this.$rightContent = $('#app-content');
this.$navigation = $('#app-navigation');
//this.$header = $('#contactsheader');
this.$groupList = $('#grouplist');
this.$contactList = $('#contactlist');
this.$contactListHeader = $('#contactlistheader');
this.$toggleAll = $('#toggle_all');
this.$contactListHeader = $('#contactsHeader');
this.$headeractions = this.$contactListHeader.find('.actions');
this.$toggleAll = this.$contactListHeader.find('.toggle');
this.$groups = this.$headeractions.find('.groups');
this.$ninjahelp = $('#ninjahelp');
this.$firstRun = $('#firstrun');
this.$settings = $('#contacts-settings');
this.$settings = $('#app-settings');
this.$importFileInput = $('#import_upload_start');
this.$importIntoSelect = $('#import_into');
},
@ -333,7 +339,7 @@ OC.Contacts = OC.Contacts || {
self.numcontacts = result.numcontacts;
self.loading(self.$rightContent, false);
self.groups.loadGroups(self.numcontacts, function() {
self.loading($('#leftcontent'), false);
self.loading(self.$navigation, false);
var id = $.QueryString['id']; // Keep for backwards compatible links.
self.currentid = parseInt(id);
if(!self.currentid) {
@ -439,7 +445,7 @@ OC.Contacts = OC.Contacts || {
self.closeContact(id);
self.contacts.delayedDelete(data);
self.$contactList.removeClass('dim');
self.showActions(['add']);
self.hideActions();
});
$(document).bind('request.contact.merge', function(e, data) {
@ -560,7 +566,7 @@ OC.Contacts = OC.Contacts || {
}
self.$contactList.show();
self.$toggleAll.show();
self.showActions(['add']);
self.hideActions();
if(result.type === 'category' || result.type === 'fav') {
self.contacts.showContacts(result.contacts);
} else if(result.type === 'shared') {
@ -633,14 +639,6 @@ OC.Contacts = OC.Contacts || {
self.uploadPhoto(this.files);
});
$('#groupsheader > .addgroup').on('click keydown',function(event) {
if(wrongKey(event)) {
return;
}
self.groups.editGroup();
//self.addGroup();
});
this.$ninjahelp.find('.close').on('click keydown',function(event) {
if(wrongKey(event)) {
return;
@ -657,7 +655,7 @@ OC.Contacts = OC.Contacts || {
if(isChecked) {
self.showActions(['add', 'download', 'groups', 'delete', 'favorite', 'merge']);
} else {
self.showActions(['add']);
self.hideActions();
}
});
@ -668,7 +666,7 @@ OC.Contacts = OC.Contacts || {
self.buildGroupSelect();
}
if(selected.length === 0) {
self.showActions(['add']);
self.hideActions();
} else if(selected.length === 1) {
self.showActions(['add', 'download', 'groups', 'delete', 'favorite']);
} else {
@ -688,7 +686,7 @@ OC.Contacts = OC.Contacts || {
self.setAllChecked(false);
self.$toggleAll.prop('checked', false);
if(!self.currentid) {
self.showActions(['add']);
self.hideActions();
}
if($opt.val() === 'add') { // Add new group
@ -1027,21 +1025,21 @@ OC.Contacts = OC.Contacts || {
self.$settings.find('.settings').click();
});
this.$firstRun.on('click keydown', '.addcontact', function(event) {
this.$firstRun.on('click keydown', '.add-contact', function(event) {
if(wrongKey(event)) {
return;
}
addContact();
});
this.$header.on('click keydown', '.add', function(event) {
this.$groupList.on('click keydown', '.add-contact', function(event) {
if(wrongKey(event)) {
return;
}
addContact();
});
this.$header.on('click keydown', '.delete', function(event) {
this.$contactListHeader.on('click keydown', '.delete', function(event) {
if(wrongKey(event)) {
return;
}
@ -1053,10 +1051,10 @@ OC.Contacts = OC.Contacts || {
} else {
self.contacts.delayedDelete(self.contacts.getSelectedContacts());
}
self.showActions(['add']);
self.hideActions();
});
this.$header.on('click keydown', '.download', function(event) {
this.$contactListHeader.on('click keydown', '.download', function(event) {
if(wrongKey(event)) {
return;
}
@ -1067,7 +1065,7 @@ OC.Contacts = OC.Contacts || {
+ '?selectedids=' + ids.join(',');
});
this.$header.on('click keydown', '.merge', function(event) {
this.$contactListHeader.on('click keydown', '.merge', function(event) {
if(wrongKey(event)) {
return;
}
@ -1075,7 +1073,7 @@ OC.Contacts = OC.Contacts || {
self.mergeSelectedContacts();
});
this.$header.on('click keydown', '.favorite', function(event) {
this.$contactListHeader.on('click keydown', '.favorite', function(event) {
if(wrongKey(event)) {
return;
}
@ -1085,7 +1083,7 @@ OC.Contacts = OC.Contacts || {
self.setAllChecked(false);
self.$toggleAll.prop('checked', false);
if(!self.currentid) {
self.showActions(['add']);
self.hideActions();
}
$.each(contacts, function(idx, contact) {
@ -1102,7 +1100,7 @@ OC.Contacts = OC.Contacts || {
}
});
self.showActions(['add']);
self.hideActions();
});
this.$contactList.on('mouseenter', 'td.email', function(event) {
@ -1520,7 +1518,7 @@ OC.Contacts = OC.Contacts || {
}
this.$contactList.removeClass('dim');
delete this.currentid;
this.showActions(['add']);
this.hideActions();
this.$groups.find('optgroup,option:not([value="-1"])').remove();
if(this.contacts.length === 0) {
$(document).trigger('status.nomorecontacts');

32
js/groups.js
View File

@ -21,19 +21,23 @@ OC.Contacts = OC.Contacts || {};
this.$groupList = groupList;
var self = this;
var numtypes = ['category', 'fav', 'all'];
this.$groupList.on('click', 'h3', function(event) {
this.$groupList.on('click', 'li', function(event) {
$('.tipsy').remove();
if(wrongKey(event)) {
return;
}
console.log($(event.target));
if($(event.target).is('.action.delete')) {
var id = $(event.target).parents('h3').first().data('id');
var id = $(event.target).parents('li').first().data('id');
self.deleteGroup(id, function(response) {
if(response.error) {
OC.notify({message:response.data.message});
}
});
} else if($(event.target).is('.add-group')) {
self.editGroup();
} else if($(event.target).is('.add-contact')) {
$.noop(); // handled elsewhere in app.js
} else {
self.selectGroup({element:$(this)});
}
@ -65,7 +69,7 @@ OC.Contacts = OC.Contacts || {};
return;
}
console.log('selectGroup', id, $elem);
this.$groupList.find('h3').removeClass('active');
this.$groupList.find('li').removeClass('active');
$elem.addClass('active');
if(id === 'new') {
return;
@ -98,7 +102,7 @@ OC.Contacts = OC.Contacts || {};
* @returns object The jQuery object.
*/
GroupList.prototype.findById = function(id) {
return this.$groupList.find('h3[data-id="' + id + '"]');
return this.$groupList.find('li[data-id="' + id + '"]');
};
/**
@ -327,7 +331,7 @@ OC.Contacts = OC.Contacts || {};
*/
GroupList.prototype.removeFromAll = function(contactid, alsospecial) {
var self = this;
var selector = alsospecial ? 'h3' : 'h3[data-type="category"]';
var selector = alsospecial ? 'li' : 'li[data-type="category"]';
$.each(this.$groupList.find(selector), function(i, group) {
self.removeFrom(contactid, $(this).data('id'));
});
@ -380,7 +384,7 @@ OC.Contacts = OC.Contacts || {};
*/
GroupList.prototype.deleteGroup = function(groupid, cb) {
var $elem = this.findById(groupid);
var $newelem = $elem.prev('h3');
var $newelem = $elem.prev('li');
var name = this.nameById(groupid);
var contacts = $elem.data('contacts');
var self = this;
@ -467,7 +471,7 @@ OC.Contacts = OC.Contacts || {};
self.$editelem.prepend($input).addClass('editing');
self.$editelem.data('contacts', []);
self.$editelem.data('rawname', '');
this.$groupList.find('h3.group[data-type="category"]').first().before(self.$editelem);
this.$groupList.find('li.group[data-type="category"]').first().before(self.$editelem);
this.selectGroup({element:self.$editelem});
$input.on('input', function(event) {
if($(this).val().length > 0) {
@ -534,7 +538,7 @@ OC.Contacts = OC.Contacts || {};
var name = params.name;
var contacts = []; // $.map(contacts, function(c) {return parseInt(c)});
var self = this, exists = false;
self.$groupList.find('h3[data-type="category"]').each(function() {
self.$groupList.find('li[data-type="category"]').each(function() {
if ($(this).data('rawname').toLowerCase() === name.toLowerCase()) {
exists = true;
return false; //break out of loop
@ -565,7 +569,7 @@ OC.Contacts = OC.Contacts || {};
$elem.data('rawname', name);
$elem.data('id', id);
var added = false;
self.$groupList.find('h3.group[data-type="category"]').each(function() {
self.$groupList.find('li.group[data-type="category"]').each(function() {
if ($(this).data('rawname').toLowerCase().localeCompare(name.toLowerCase()) > 0) {
$(this).before($elem);
added = true;
@ -573,7 +577,7 @@ OC.Contacts = OC.Contacts || {};
}
});
if(!added) {
$elem.insertAfter(self.$groupList.find('h3.group[data-type="category"]').last());
$elem.insertAfter(self.$groupList.find('li.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.')});
@ -659,7 +663,7 @@ OC.Contacts = OC.Contacts || {};
$elem.appendTo($groupList);
});
var elems = $groupList.find('h3[data-type="category"]').get();
var elems = $groupList.find('li[data-type="category"]').get();
elems.sort(function(a, b) {
return self.sortorder.indexOf(parseInt($(a).data('id'))) > self.sortorder.indexOf(parseInt($(b).data('id')));
@ -672,7 +676,7 @@ OC.Contacts = OC.Contacts || {};
// Shared addressbook
$.each(response.data.shared, function(c, shared) {
var sharedindicator = '<img class="shared svg" src="' + OC.imagePath('core', 'actions/shared') + '"'
+ 'title="' + t('contacts', 'Shared by {owner}', {owner:shared.userid}) + '" />';
+ 'title="' + t('contacts', 'Shared by {owner}', {owner:shared.owner}) + '" />';
var $elem = (tmpl).octemplate({
id: shared.id,
type: 'shared',
@ -686,11 +690,11 @@ OC.Contacts = OC.Contacts || {};
$elem.appendTo($groupList);
});
$groupList.sortable({
items: 'h3[data-type="category"]',
items: 'li[data-type="category"]',
stop: function() {
console.log('stop sorting', $(this));
var ids = [];
$.each($(this).children('h3[data-type="category"]'), function(i, elem) {
$.each($(this).children('li[data-type="category"]'), function(i, elem) {
ids.push($(elem).data('id'));
});
self.sortorder = ids;

266
templates/contacts.php
View File

@ -1,126 +1,140 @@
<form class="float" id="file_upload_form" action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'ajax/uploadphoto.php')); ?>" method="post" enctype="multipart/form-data" target="file_upload_target">
<input type="hidden" name="contactid" value="">
<input type="hidden" name="addressbookid" value="">
<input type="hidden" name="backend" value="">
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php p($_['uploadMaxFilesize']) ?>" id="max_upload">
<input type="hidden" class="max_human_file_size" value="(max <?php p($_['uploadMaxHumanFilesize']); ?>)">
<input id="contactphoto_fileupload" type="file" accept="image/*" name="imagefile" />
</form>
<iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
<div id="groupsheader">
<button class="addgroup icon-plus text"><?php p($l->t('New Group')); ?></button>
</div>
<div id="leftcontent" class="loading">
<nav id="grouplist">
</nav>
<div id="contacts-settings">
<h3 class="settings action text" tabindex="0" role="button" title="<?php p($l->t('Settings')); ?>"></h3>
<h2 data-id="addressbooks" tabindex="0" role="button"><?php p($l->t('Address books')); ?></h2>
<ul class="hidden addressbooklist">
</ul>
<button class="addaddressbook icon-plus text"><?php p($l->t('New')); ?></button>
<ul class="hidden">
<li><input class="addaddressbookinput" type="text" placeholder="<?php p($l->t('Display name')); ?>" /></li>
<li>
<button class="addaddressbookok"><?php p($l->t('OK')); ?></button>
<button class="addaddressbookcancel"><?php p($l->t('Cancel')); ?></button>
</li>
</ul>
<ul class="hidden">
<li><input class="addaddressbookinput" type="text" placeholder="<?php p($l->t('Display name')); ?>" /></li>
<li>
<button class="addaddressbookok"><?php p($l->t('OK')); ?></button>
<button class="addaddressbookcancel"><?php p($l->t('Cancel')); ?></button>
</li>
</ul>
<h2 data-id="import" tabindex="0" role="button"><?php p($l->t('Import')); ?></h2>
<ul class="hidden">
<li class="import-upload">
<form
id="import_upload_form"
data-upload-id="1"
action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'ajax/uploadimport.php')); ?>"
method="post" enctype="multipart/form-data"
target="import_upload_target_1">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php p($_['uploadMaxFilesize']) ?>" id="max_upload">
<label for="import_upload_start"><?php p($l->t('Select files to import')); ?>
<button class="import-upload-button" title="<?php p($l->t('Select files')); ?>"></button>
</label>
<input id="import_upload_start" type="file" accept="text/vcard,text/x-vcard,text/directory" multiple="multiple" name="file" />
</form>
<!-- iframe name="import_upload_target" id='import_upload_target' src=""></iframe -->
</li>
<li class="import-select hidden"><label><?php p($l->t('Import into:')); ?></label></li>
<li class="import-select hidden">
<select id="import_into" title="<?php p($l->t('Import into:')); ?>">
</select>
<button class="doImport"><?php p($l->t('OK')); ?></button>
</li>
<li>
<label id="import-status-text"></label>
<div id="import-progress"></div>
</li>
</ul>
</div>
</div>
<div id="contactsheader">
<input type="checkbox" id="toggle_all" title="<?php p($l->t('(De-)select all')); ?>" />
<div class="actions">
<button class="add svg icon-plus action text"><?php p($l->t('New Contact')); ?></button>
<button class="download svg action text"><?php p($l->t('Download Contact(s)')); ?></button>
<select class="groups svg action text button" name="groups">
<option value="-1" disabled="disabled" selected="selected"><?php p($l->t('Groups')); ?></option>
</select>
<button class="favorite action svg inactive control" title="<?php p($l->t('Favorite')); ?>"></button>
<button class="merge"><?php p($l->t('Merge selected')); ?></button>
<a class="delete action" title="<?php p($l->t('Delete Contact')); ?>"></a>
</div>
</div>
<div id="rightcontent" class="loading">
<table id="contactlist">
</table>
<div class="hidden popup" id="ninjahelp">
<a class="close" tabindex="0" role="button" title="<?php p($l->t('Close')); ?>"></a>
<h2><?php p($l->t('Keyboard shortcuts')); ?></h2>
<div class="help-section">
<h3><?php p($l->t('Navigation')); ?></h3>
<dl>
<dt>j/Down</dt>
<dd><?php p($l->t('Next contact in list')); ?></dd>
<dt>k/Up</dt>
<dd><?php p($l->t('Previous contact in list')); ?></dd>
<dt>o</dt>
<dd><?php p($l->t('Expand/collapse current addressbook')); ?></dd>
<dt>n/PageDown</dt>
<dd><?php p($l->t('Next addressbook')); ?></dd>
<dt>p/PageUp</dt>
<dd><?php p($l->t('Previous addressbook')); ?></dd>
</dl>
</div>
<div class="help-section">
<h3><?php p($l->t('Actions')); ?></h3>
<dl>
<dt>r</dt>
<dd><?php p($l->t('Refresh contacts list')); ?></dd>
<dt>a</dt>
<dd><?php p($l->t('Add new contact')); ?></dd>
<!-- dt>Shift-a</dt>
<dd><?php p($l->t('Add new addressbook')); ?></dd -->
<dt>Shift-Delete</dt>
<dd><?php p($l->t('Delete current contact')); ?></dd>
</dl>
<div id="app">
<div id="app-navigation" class="loading">
<ul id="grouplist">
<li>
<a role="button" class="add-group">
<i class="icon-plus"></i>
<?php p($l->t('New Group')); ?>
</a>
</li>
<li>
<a role="button" class="add-contact">
<i class="icon-plus"></i>
<?php p($l->t('New Contact')); ?>
</a>
</li>
</ul>
<div id="app-settings">
<div id="app-settings-header">
<button class="settings-button" tabindex="0"></button>
</div>
<div id="app-settings-content">
<h2 data-id="addressbooks" tabindex="0" role="button"><?php p($l->t('Address books')); ?></h2>
<ul class="hidden addressbooklist">
</ul>
<button class="addaddressbook icon-plus text"><?php p($l->t('New')); ?></button>
<ul class="hidden">
<li><input class="addaddressbookinput" type="text" placeholder="<?php p($l->t('Display name')); ?>" /></li>
<li>
<button class="addaddressbookok"><?php p($l->t('OK')); ?></button>
<button class="addaddressbookcancel"><?php p($l->t('Cancel')); ?></button>
</li>
</ul>
<ul class="hidden">
<li><input class="addaddressbookinput" type="text" placeholder="<?php p($l->t('Display name')); ?>" /></li>
<li>
<button class="addaddressbookok"><?php p($l->t('OK')); ?></button>
<button class="addaddressbookcancel"><?php p($l->t('Cancel')); ?></button>
</li>
</ul>
<h2 data-id="import" tabindex="0" role="button"><?php p($l->t('Import')); ?></h2>
<ul class="hidden">
<li class="import-upload">
<form
id="import_upload_form"
data-upload-id="1"
action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'ajax/uploadimport.php')); ?>"
method="post" enctype="multipart/form-data"
target="import_upload_target_1">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php p($_['uploadMaxFilesize']) ?>" id="max_upload">
<label for="import_upload_start"><?php p($l->t('Select files to import')); ?>
<button class="import-upload-button" title="<?php p($l->t('Select files')); ?>"></button>
</label>
<input id="import_upload_start" type="file" accept="text/vcard,text/x-vcard,text/directory" multiple="multiple" name="file" />
</form>
<!-- iframe name="import_upload_target" id='import_upload_target' src=""></iframe -->
</li>
<li class="import-select hidden"><label><?php p($l->t('Import into:')); ?></label></li>
<li class="import-select hidden">
<select id="import_into" title="<?php p($l->t('Import into:')); ?>">
</select>
<button class="doImport"><?php p($l->t('OK')); ?></button>
</li>
<li>
<label id="import-status-text"></label>
<div id="import-progress"></div>
</li>
</ul>
</div> <!-- app-settings-content -->
</div>
</div>
<div id="firstrun" class="hidden">
<?php print_unescaped($l->t('<h3>You have no contacts in your addressbook.</h3>'
. '<p>Add a new contact or import existing contacts from a VCF file.</p>')) ?>
<div id="selections">
<button class="addcontact icon-plus text"><?php p($l->t('Add contact')) ?></button>
<button class="import icon text"><?php p($l->t('Import')) ?></button>
<div id="app-content" class="loading">
<div id="contactsHeader">
<input type="checkbox" class="toggle" title="<?php p($l->t('(De-)select all')); ?>" />
<span class="actions">
<a class="download svg action text permanent"><?php p($l->t('Download Contact(s)')); ?></a>
<select class="groups svg action text permanent" name="groups">
<option value="-1" disabled="disabled" selected="selected"><?php p($l->t('Groups')); ?></option>
</select>
<a class="favorite action svg inactive control permanent" title="<?php p($l->t('Favorite')); ?>"></a>
<a class="merge"><?php p($l->t('Merge selected')); ?></a>
<a class="delete action permanent" title="<?php p($l->t('Delete Contact')); ?>"></a>
</span>
</div>
</div>
</div>
<table id="contactlist">
</table>
<div class="hidden popup" id="ninjahelp">
<a class="close" tabindex="0" role="button" title="<?php p($l->t('Close')); ?>"></a>
<h2><?php p($l->t('Keyboard shortcuts')); ?></h2>
<div class="help-section">
<h3><?php p($l->t('Navigation')); ?></h3>
<dl>
<dt>j/Down</dt>
<dd><?php p($l->t('Next contact in list')); ?></dd>
<dt>k/Up</dt>
<dd><?php p($l->t('Previous contact in list')); ?></dd>
<dt>o</dt>
<dd><?php p($l->t('Expand/collapse current addressbook')); ?></dd>
<dt>n/PageDown</dt>
<dd><?php p($l->t('Next addressbook')); ?></dd>
<dt>p/PageUp</dt>
<dd><?php p($l->t('Previous addressbook')); ?></dd>
</dl>
</div>
<div class="help-section">
<h3><?php p($l->t('Actions')); ?></h3>
<dl>
<dt>r</dt>
<dd><?php p($l->t('Refresh contacts list')); ?></dd>
<dt>a</dt>
<dd><?php p($l->t('Add new contact')); ?></dd>
<!-- dt>Shift-a</dt>
<dd><?php p($l->t('Add new addressbook')); ?></dd -->
<dt>Shift-Delete</dt>
<dd><?php p($l->t('Delete current contact')); ?></dd>
</dl>
</div>
</div>
<div id="firstrun" class="hidden">
<?php print_unescaped($l->t('<h3>You have no contacts in your addressbook.</h3>'
. '<p>Add a new contact or import existing contacts from a VCF file.</p>')) ?>
<div id="selections">
<button class="add-contact icon-plus text"><?php p($l->t('Add contact')) ?></button>
<button class="import icon text"><?php p($l->t('Import')) ?></button>
</div>
</div>
<form class="float" id="file_upload_form" action="<?php print_unescaped(OCP\Util::linkTo('contacts', 'ajax/uploadphoto.php')); ?>" method="post" enctype="multipart/form-data" target="file_upload_target">
<input type="hidden" name="contactid" value="">
<input type="hidden" name="addressbookid" value="">
<input type="hidden" name="backend" value="">
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php p($_['uploadMaxFilesize']) ?>" id="max_upload">
<input type="hidden" class="max_human_file_size" value="(max <?php p($_['uploadMaxHumanFilesize']); ?>)">
<input id="contactphoto_fileupload" type="file" accept="image/*" name="imagefile" />
</form>
<iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
</div> <!-- app-content -->
</div> <!-- app -->
<script id="cropBoxTemplate" type="text/template">
<form id="cropform"
class="coords"
@ -188,11 +202,13 @@
</script>
<script id="groupListItemTemplate" type="text/template">
<h3 class="group" data-type="{type}" data-id="{id}">
{name}
<a class="action delete tooltipped rightwards" title="<?php p($l->t('Delete group')); ?>"></a>
<span class="action numcontacts">{num}</span>
</h3>
<li class="group" data-type="{type}" data-id="{id}">
<a role="button">{name}</a>
<span class="utils">
<button class="action delete tooltipped rightwards" title="<?php p($l->t('Delete group')); ?>"></button>
<span class="action numcontacts">{num}</span>
</span>
</li>
</script>
<script id="contactFullTemplate" type="text/template">