From 44a41c184c13e924ca60e5979a31a110c0dd656a Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Tue, 24 Sep 2013 15:33:18 +0200 Subject: [PATCH] Tweak groups CSS. Close #212 and #211 --- css/contacts.css | 59 ++++++++++++++++++++---------------------------- js/groups.js | 20 ++++++++-------- 2 files changed, 35 insertions(+), 44 deletions(-) diff --git a/css/contacts.css b/css/contacts.css index 168e57cc..bef0a4d6 100644 --- a/css/contacts.css +++ b/css/contacts.css @@ -77,37 +77,12 @@ } -#app-navigation > ul > li.group.editing { - height: 40px; -} #app-navigation a.unshare { float: right; } -#app-navigation .utils { - bottom: 0; - position: absolute; - right: 0; - top: 0; -} -#app-navigation .utils > * { - float: right; - margin: 6px 2px; -} /*#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; @@ -115,6 +90,28 @@ margin: 5px 0 5px .3em; } +#app-navigation .utils { + bottom: 0; right: 0; + top: 0; + position: absolute; + padding: 0; margin: 0; +} +#app-navigation li > .utils > *:not(.numcontacts) { + display: none; +} +#app-navigation li > .utils > * { + line-height: 44px; + width: 44px; height: 44px; + background-size: auto; +} +#app-navigation li.active[data-type="category"] > .utils > * { + display: inline-block; + float: left; +} +#app-navigation li > .utils > .numcontacts { + padding-right: 5px; + text-align: right; +} #grouplist { z-index: 100; } #grouplist .oc-addnew-init { padding: 0 12px; @@ -125,15 +122,9 @@ font-size: 180%; padding-right: 2px; } -#grouplist li .action:not(.starred):not(.checked):not(.favorite):not([class^="add-"]) { display: none; padding: 0; } -#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 li.active[data-type="category"]:not(.editing):hover .action.delete { display: inline-block; width: 20px; height: 20px; } -#grouplist li.active[data-type="category"]:not(.editing):hover .action.edit { display: inline-block; width: 20px; height: 20px; } -/*#grouplist li:not(.editing) .action.delete { width: 20px; height: 20px; }*/ -#grouplist .group span.numcontacts { width: 30px; text-align: right; margin-right: 10px !important; } -#grouplist li.special { height: 40px; } +#grouplist > li { + height: 44px; +} /* First run */ diff --git a/js/groups.js b/js/groups.js index 2e166b7a..72e242c8 100644 --- a/js/groups.js +++ b/js/groups.js @@ -151,7 +151,7 @@ OC.Contacts = OC.Contacts || {}; */ GroupList.prototype.findByName = function(name) { var $elem = null; - self.$groupList.find('li[data-type="category"]').each(function() { + this.$groupList.find('li[data-type="category"]').each(function() { if ($(this).data('rawname').toLowerCase() === name.toLowerCase()) { $elem = $(this); return false; //break out of loop @@ -205,7 +205,7 @@ OC.Contacts = OC.Contacts || {}; if(jsondata.status === 'success') { contacts.push(contactid); $groupelem.data('contacts', contacts); - $groupelem.find('.numcontacts').text(contacts.length); + $groupelem.find('.numcontacts').text(contacts.length > 0 && contacts.length || ''); if(contacts.length > 0 && $groupelem.is(':hidden')) { $groupelem.show(); } @@ -222,7 +222,7 @@ OC.Contacts = OC.Contacts || {}; contacts.splice(contacts.indexOf(contactid), 1); //console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id))); $groupelem.data('contacts', contacts); - $groupelem.find('.numcontacts').text(contacts.length); + $groupelem.find('.numcontacts').text(contacts.length > 0 && contacts.length || ''); if(contacts.length === 0 && $groupelem.is(':visible')) { $groupelem.hide(); } @@ -285,7 +285,7 @@ OC.Contacts = OC.Contacts || {}; contacts = contacts.concat(ids).sort(); $groupelem.data('contacts', contacts); var $numelem = $groupelem.find('.numcontacts'); - $numelem.text(contacts.length).switchClass('', 'active', 200); + $numelem.text(contacts.length > 0 && contacts.length || '').switchClass('', 'active', 200); setTimeout(function() { $numelem.switchClass('active', '', 1000); }, 2000); @@ -370,7 +370,7 @@ OC.Contacts = OC.Contacts || {}; $.each(ids, function(idx, id) { contacts.splice(contacts.indexOf(id), 1); }); - $groupelem.find('.numcontacts').text(contacts.length); + $groupelem.find('.numcontacts').text(contacts.length > 0 && contacts.length || ''); //console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id))); $groupelem.data('contacts', contacts); if(doPost) { @@ -605,7 +605,7 @@ OC.Contacts = OC.Contacts || {}; var $elem = (tmpl).octemplate({ id: id, type: 'category', - num: contacts.length, + num: (contacts.length > 0 && contacts.length || ''), name: escapeHTML(name) }); self.categories.push({id: id, name: name}); @@ -653,7 +653,7 @@ OC.Contacts = OC.Contacts || {}; var tmpl = this.$groupListItemTemplate; if(!this.findById('all').length) { - tmpl.octemplate({id: 'all', type: 'all', num: 0, name: t('contacts', 'All')}).appendTo($groupList); + tmpl.octemplate({id: 'all', type: 'all', num: '', name: t('contacts', 'All')}).appendTo($groupList); } return $.when(this.storage.getGroupsForUser()).then(function(response) { if (response && !response.error) { @@ -667,7 +667,7 @@ OC.Contacts = OC.Contacts || {}; $elem = $elem.length ? $elem : tmpl.octemplate({ id: 'fav', type: 'fav', - num: contacts.length, + num: contacts.length > 0 && contacts.length || '', name: t('contacts', 'Favorites') }).appendTo($groupList); $elem.data('obj', self); @@ -693,12 +693,12 @@ OC.Contacts = OC.Contacts || {}; var contacts = $.map(category.contacts, function(c) {return String(c);}); var $elem = self.findById(category.id); if($elem.length) { - $elem.find('.numcontacts').text(contacts.length); + $elem.find('.numcontacts').text(contacts.length > 0 && contacts.length || ''); } else { $elem = $elem.length ? $elem : (tmpl).octemplate({ id: category.id, type: 'category', - num: contacts.length, + num: contacts.length > 0 && contacts.length || '', name: category.name }); self.categories.push({id: category.id, name: category.name});