From 7da675a1d511db58d4def37779e3f7a4a05203e3 Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Tue, 30 Apr 2013 20:00:33 +0200 Subject: [PATCH] Contacts: Port to new apps styles. --- css/contacts.css | 171 +++++++++++--------------- js/app.js | 60 +++++----- js/groups.js | 32 ++--- templates/contacts.php | 266 ++++++++++++++++++++++------------------- 4 files changed, 258 insertions(+), 271 deletions(-) diff --git a/css/contacts.css b/css/contacts.css index 7e314d2d..081248a0 100644 --- a/css/contacts.css +++ b/css/contacts.css @@ -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; } diff --git a/js/app.js b/js/app.js index 89e22d93..521e277e 100644 --- a/js/app.js +++ b/js/app.js @@ -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'); diff --git a/js/groups.js b/js/groups.js index 696bf615..076214a3 100644 --- a/js/groups.js +++ b/js/groups.js @@ -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 = ''; + + '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; diff --git a/templates/contacts.php b/templates/contacts.php index bb02b5cd..1d190397 100644 --- a/templates/contacts.php +++ b/templates/contacts.php @@ -1,126 +1,140 @@ -
- - - - - - - -
- -
- -
-
- -
-

-

t('Address books')); ?>

- - - - -

t('Import')); ?>

- -
-
-
- -
- - - - - - -
-
-
- -
-