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

Tweak groups CSS. Close #212 and #211

Browse Source
This commit is contained in:
Thomas Tanghus 2013-09-24 15:33:18 +02:00
parent 67412f3679
commit 44a41c184c
2 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/contacts.css
View File

@ -77,37 +77,12 @@
} }
#app-navigation > ul > li.group.editing {
height: 40px;
}
#app-navigation a.unshare { #app-navigation a.unshare {
float: right; 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 { float: right; opacity: 0.4; margin: 0 .5em; }
#app-navigation img.shared:hover { opacity: 1; }*/ #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"] { #app-navigation input[type="text"] {
display: block; display: block;
width: 200px; width: 200px;
@ -115,6 +90,28 @@
margin: 5px 0 5px .3em; 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 { z-index: 100; }
#grouplist .oc-addnew-init { #grouplist .oc-addnew-init {
padding: 0 12px; padding: 0 12px;
@ -125,15 +122,9 @@
font-size: 180%; font-size: 180%;
padding-right: 2px; padding-right: 2px;
} }
#grouplist li .action:not(.starred):not(.checked):not(.favorite):not([class^="add-"]) { display: none; padding: 0; } #grouplist > li {
#grouplist li:not([data-type="shared"]):not(.editing):hover .action.numcontacts, height: 44px;
#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; }
/* First run */ /* First run */

20
js/groups.js
View File

@ -151,7 +151,7 @@ OC.Contacts = OC.Contacts || {};
*/ */
GroupList.prototype.findByName = function(name) { GroupList.prototype.findByName = function(name) {
var $elem = null; 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()) { if ($(this).data('rawname').toLowerCase() === name.toLowerCase()) {
$elem = $(this); $elem = $(this);
return false; //break out of loop return false; //break out of loop
@ -205,7 +205,7 @@ OC.Contacts = OC.Contacts || {};
if(jsondata.status === 'success') { if(jsondata.status === 'success') {
contacts.push(contactid); contacts.push(contactid);
$groupelem.data('contacts', contacts); $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')) { if(contacts.length > 0 && $groupelem.is(':hidden')) {
$groupelem.show(); $groupelem.show();
} }
@ -222,7 +222,7 @@ OC.Contacts = OC.Contacts || {};
contacts.splice(contacts.indexOf(contactid), 1); contacts.splice(contacts.indexOf(contactid), 1);
//console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id))); //console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id)));
$groupelem.data('contacts', contacts); $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')) { if(contacts.length === 0 && $groupelem.is(':visible')) {
$groupelem.hide(); $groupelem.hide();
} }
@ -285,7 +285,7 @@ OC.Contacts = OC.Contacts || {};
contacts = contacts.concat(ids).sort(); contacts = contacts.concat(ids).sort();
$groupelem.data('contacts', contacts); $groupelem.data('contacts', contacts);
var $numelem = $groupelem.find('.numcontacts'); var $numelem = $groupelem.find('.numcontacts');
$numelem.text(contacts.length).switchClass('', 'active', 200); $numelem.text(contacts.length > 0 && contacts.length || '').switchClass('', 'active', 200);
setTimeout(function() { setTimeout(function() {
$numelem.switchClass('active', '', 1000); $numelem.switchClass('active', '', 1000);
}, 2000); }, 2000);
@ -370,7 +370,7 @@ OC.Contacts = OC.Contacts || {};
$.each(ids, function(idx, id) { $.each(ids, function(idx, id) {
contacts.splice(contacts.indexOf(id), 1); 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))); //console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id)));
$groupelem.data('contacts', contacts); $groupelem.data('contacts', contacts);
if(doPost) { if(doPost) {
@ -605,7 +605,7 @@ OC.Contacts = OC.Contacts || {};
var $elem = (tmpl).octemplate({ var $elem = (tmpl).octemplate({
id: id, id: id,
type: 'category', type: 'category',
num: contacts.length, num: (contacts.length > 0 && contacts.length || ''),
name: escapeHTML(name) name: escapeHTML(name)
}); });
self.categories.push({id: id, name: name}); self.categories.push({id: id, name: name});
@ -653,7 +653,7 @@ OC.Contacts = OC.Contacts || {};
var tmpl = this.$groupListItemTemplate; var tmpl = this.$groupListItemTemplate;
if(!this.findById('all').length) { 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) { return $.when(this.storage.getGroupsForUser()).then(function(response) {
if (response && !response.error) { if (response && !response.error) {
@ -667,7 +667,7 @@ OC.Contacts = OC.Contacts || {};
$elem = $elem.length ? $elem : tmpl.octemplate({ $elem = $elem.length ? $elem : tmpl.octemplate({
id: 'fav', id: 'fav',
type: 'fav', type: 'fav',
num: contacts.length, num: contacts.length > 0 && contacts.length || '',
name: t('contacts', 'Favorites') name: t('contacts', 'Favorites')
}).appendTo($groupList); }).appendTo($groupList);
$elem.data('obj', self); $elem.data('obj', self);
@ -693,12 +693,12 @@ OC.Contacts = OC.Contacts || {};
var contacts = $.map(category.contacts, function(c) {return String(c);}); var contacts = $.map(category.contacts, function(c) {return String(c);});
var $elem = self.findById(category.id); var $elem = self.findById(category.id);
if($elem.length) { if($elem.length) {
$elem.find('.numcontacts').text(contacts.length); $elem.find('.numcontacts').text(contacts.length > 0 && contacts.length || '');
} else { } else {
$elem = $elem.length ? $elem : (tmpl).octemplate({ $elem = $elem.length ? $elem : (tmpl).octemplate({
id: category.id, id: category.id,
type: 'category', type: 'category',
num: contacts.length, num: contacts.length > 0 && contacts.length || '',
name: category.name name: category.name
}); });
self.categories.push({id: category.id, name: category.name}); self.categories.push({id: category.id, name: category.name});