mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-01-18 07:52:21 +01:00
Some design changes
This commit is contained in:
Jan ten Bokkel
parent
7d3de02f17
commit
0382cee171
@ -76,6 +76,12 @@
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
#app-navigation {
|
||||
width: 250px;
|
||||
}
|
||||
#app-settings {
|
||||
width: 249px;
|
||||
}
|
||||
|
||||
#app-navigation a.unshare {
|
||||
float: right;
|
||||
@ -85,9 +91,10 @@
|
||||
#app-navigation img.shared:hover { opacity: 1; }*/
|
||||
#app-navigation input[type="text"] {
|
||||
display: block;
|
||||
width: 200px;
|
||||
width: 200px !important;
|
||||
height: 34px !important;
|
||||
float: left;
|
||||
margin: 5px 0 5px .3em;
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
#app-navigation .utils {
|
||||
@ -96,6 +103,9 @@
|
||||
position: absolute;
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
#app-navigation .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
#app-navigation li > .utils > *:not(.numcontacts) {
|
||||
display: none;
|
||||
}
|
||||
@ -112,7 +122,10 @@
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
#grouplist { z-index: 100; }
|
||||
#grouplist {
|
||||
z-index: 100;
|
||||
margin-top: 44px;
|
||||
}
|
||||
#grouplist .oc-addnew-init {
|
||||
padding: 0 12px;
|
||||
}
|
||||
@ -125,6 +138,25 @@
|
||||
#grouplist > li {
|
||||
height: 44px;
|
||||
}
|
||||
#grouplist .open {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.hidden-on-load {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.new {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.new a {
|
||||
padding: 14px 10px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.actions {
|
||||
padding-left: 4px !important;
|
||||
}
|
||||
|
||||
/* First run */
|
||||
|
||||
@ -231,6 +263,7 @@ button.ui-multiselect { height: 25px; } /* No idea why this is needed? */
|
||||
.no-svg .mail { background-image:url('%webroot%/core/img/actions/mail.png'); }
|
||||
.no-svg .import, .no-svg .upload { background-image:url('%webroot%/core/img/actions/upload.png'); }
|
||||
.no-svg .export, .no-svg .download { background-image:url('%webroot%/core/img/actions/download.png'); }
|
||||
.no-svg .export, .no-svg .shared { background-image:url('%webroot%/core/img/actions/shared.png'); }
|
||||
.no-svg .globe { background-image:url('%webroot%/core/img/actions/public.png'); }
|
||||
.no-svg .settings { background-image:url('%webroot%/core/img/actions/settings.svg'); }
|
||||
.no-svg .starred { background-image:url('%appswebroot%/contacts/img/starred.png'); background-size: contain; }
|
||||
@ -251,6 +284,7 @@ button.ui-multiselect { height: 25px; } /* No idea why this is needed? */
|
||||
.svg .mail { background-image:url('%webroot%/core/img/actions/mail.svg'); }
|
||||
.svg .import,.svg .upload { background-image:url('%webroot%/core/img/actions/upload.svg'); }
|
||||
.svg .export,.svg .download { background-image:url('%webroot%/core/img/actions/download.svg'); }
|
||||
.svg .export,.svg .shared { background-image:url('%webroot%/core/img/actions/shared.svg'); }
|
||||
.svg .globe { background-image:url('%webroot%/core/img/actions/public.svg'); }
|
||||
.svg .settings { background-image:url('%webroot%/core/img/actions/settings.svg'); }
|
||||
.svg .starred { background-image:url('%appswebroot%/contacts/img/starred.svg'); background-size: contain; }
|
||||
@ -553,6 +587,7 @@ input[type="checkbox"].propertytype { width: 10px; }
|
||||
.svg .favorite.inactive { background-image:url('%appswebroot%/contacts/img/inactive_star.svg'); background-size:contain; }
|
||||
|
||||
#app-content {
|
||||
top: 44px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@ -595,21 +630,20 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
/* contact list */
|
||||
|
||||
#contactsHeader {
|
||||
top: 46px;
|
||||
position: fixed;
|
||||
height: 20px;
|
||||
background: none repeat scroll 0 0 rgba(230,230,230,.95);
|
||||
height: 51px;
|
||||
color: #999;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
line-height: 51px;
|
||||
}
|
||||
#contactsHeader > tr {
|
||||
}
|
||||
#contactsHeader > td {
|
||||
z-index: 300;
|
||||
border-bottom: 1px solid rgb(221, 221, 221);
|
||||
}
|
||||
#contactsHeader > td.actions {
|
||||
left: 600px; right: 15px; top: 45px;
|
||||
left: 600px; right: 15px;
|
||||
position: fixed;
|
||||
height: 20px;
|
||||
font-weight: bold;
|
||||
@ -628,6 +662,7 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
}
|
||||
#contactsHeader select {
|
||||
width: auto;
|
||||
height: 22px;
|
||||
font-size: 90%;
|
||||
padding: 0; margin: 0 10px;
|
||||
}
|
||||
@ -636,19 +671,24 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
|
||||
}
|
||||
#contactsHeader .action {
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
padding: 0 0px;
|
||||
}
|
||||
#contactsHeader .actions > .toggle {
|
||||
float: left;
|
||||
}
|
||||
#contactlist { }
|
||||
#contactlist {
|
||||
top: 44px;
|
||||
}
|
||||
#contactlist > tbody {
|
||||
position: relative;
|
||||
padding-bottom: 300px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
#contactlist { margin-top:20px; position: relative; width: 100%; }
|
||||
#contactlist {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
#contactlist td {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
@ -659,7 +699,7 @@ tbody tr, tbody tr.hover {
|
||||
tbody tr.contact.active, tbody tr.contact:hover {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
#contactlist > tbody > tr { height: 3em; display: none; }
|
||||
#contactlist > tbody > tr { height: 51px; display: none; }
|
||||
#contactlist > tbody > tr.contact.active, #contactlist > tbody > tr.contact:hover { background-color: #eee; }
|
||||
#contactlist > tbody > tr > td {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
@ -670,18 +710,16 @@ tbody tr.contact.active, tbody tr.contact:hover {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#contactlist tr.contact > td:not(.name) {
|
||||
padding-left:10px;
|
||||
#contactlist tr > td {
|
||||
max-width: 250px;
|
||||
min-width: 80px;
|
||||
}
|
||||
#contactlist tr > td:not(.tel):not(.adr):not(.actions) {
|
||||
max-width: 270px;
|
||||
min-width: 200px;
|
||||
#contactlist tr > td.adr {
|
||||
min-width: 80px;
|
||||
}
|
||||
#contactlist tr > td.tel {
|
||||
max-width: 180px;
|
||||
min-width: 180px;
|
||||
#contactlist tr > td.adr {
|
||||
min-width: 80px;
|
||||
}
|
||||
#contactlist tbody > tr > td.adr { width: 100%; max-width:300px; }
|
||||
#contactlist tbody > tr > td.name > input[type=checkbox]:first-child:not(.toggle) {
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
|
||||
-webkit-transition:opacity 200ms; -moz-transition:opacity 200ms; -o-transition:opacity 200ms; transition:opacity 200ms;
|
||||
@ -785,18 +823,15 @@ tbody tr.contact.active, tbody tr.contact:hover {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
@media screen and (max-width: 1400px) {
|
||||
#contactlist tr td.categories { display: none; }
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
#contactlist tr td.adr { display: none; }
|
||||
#contactlist tr td.tel { width:100%; }
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#contactlist tr td.adr { display: none; }
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
#contactlist tr td.tel { display: none; }
|
||||
#contactlist tr td.email { width:100%; }
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
#contactlist tr td.email { display: none; }
|
||||
#contactlist tr td.name { width:100%; max-width: auto;}
|
||||
}
|
||||
|
||||
@ -20,85 +20,26 @@
|
||||
*/
|
||||
|
||||
.oc-addnew {
|
||||
display: block !important;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
.oc-addnew li:first-child {
|
||||
display: block;
|
||||
}
|
||||
.oc-addnew li:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
.oc-addnew.open li:first-child {
|
||||
display: none;
|
||||
}
|
||||
.oc-addnew.open li:not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
.oc-addnew > li {
|
||||
}
|
||||
.oc-addnew > li > a.oc-addnew-init {
|
||||
}
|
||||
.oc-addnew > li > a.oc-addnew-init:before {
|
||||
content: '+';
|
||||
font-weight: bold;
|
||||
font-size: 180%;
|
||||
padding-right: 5px;
|
||||
|
||||
.oc-addnew li[display=list-item] {
|
||||
}
|
||||
|
||||
.oc-addnew input[type=text] {
|
||||
width: 120px !important;
|
||||
margin-top: 15px;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.oc-addnew select {
|
||||
width: 133px;
|
||||
margin-top: 1px !important;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.oc-addnew input,
|
||||
.oc-addnew select {
|
||||
margin: 0 0 5px 0;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0;
|
||||
width: 200px !important;
|
||||
margin: 0px !important;
|
||||
border-width: 0px;
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.oc-addnew button {
|
||||
margin: 5px 0;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
height: 30px !important;
|
||||
height: 34px !important;
|
||||
margin: 0px !important;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.oc-addnew .action-button {
|
||||
width: 30px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.oc-addnew .back-button {
|
||||
border-radius: 0;
|
||||
background-image: url('%webroot%/core/img/actions/delete.svg');
|
||||
}
|
||||
|
||||
.oc-addnew .new-button {
|
||||
border-radius: 0;
|
||||
background-image: url('%webroot%/core/img/add.svg');
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.oc-addnew .create-button {
|
||||
border-radius: 0;
|
||||
background-image: url('%appswebroot%/contacts/img/checkmark-gray.svg');
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
.oc-addnew button:hover {
|
||||
height: 34px !important;
|
||||
margin: 0px !important;
|
||||
border-width: 0px;
|
||||
}
|
||||
16
js/app.js
16
js/app.js
@ -233,6 +233,7 @@ OC.Contacts = OC.Contacts || {
|
||||
this.bindEvents();
|
||||
this.$toggleAll.show();
|
||||
this.hideActions();
|
||||
$('.hidden-on-load').removeClass('hidden-on-load');
|
||||
},
|
||||
loading:function(obj, state) {
|
||||
$(obj).toggleClass('loading', state);
|
||||
@ -250,12 +251,10 @@ OC.Contacts = OC.Contacts || {
|
||||
this.$headeractions.children().hide();
|
||||
if(act && act.length > 0) {
|
||||
this.$contactList.addClass('multiselect');
|
||||
this.$contactListHeader.find('.actions').show();
|
||||
this.$contactListHeader.find('.info').hide();
|
||||
this.$controls.find('.contact-actions').show();
|
||||
this.$headeractions.children('.'+act.join(',.')).show();
|
||||
} else {
|
||||
this.$contactListHeader.find('.actions').hide();
|
||||
this.$contactListHeader.find('.info').show();
|
||||
this.$controls.find('.contact-actions').hide();
|
||||
this.$contactList.removeClass('multiselect');
|
||||
}
|
||||
},
|
||||
@ -284,11 +283,12 @@ OC.Contacts = OC.Contacts || {
|
||||
this.$navigation = $('#app-navigation');
|
||||
//this.$header = $('#contactsheader');
|
||||
this.$groupList = $('#grouplist');
|
||||
this.$controls = $('#controls');
|
||||
this.$contactList = $('#contactlist');
|
||||
this.$contactListHeader = $('#contactsHeader');
|
||||
this.$sortOrder = this.$contactListHeader.find('.action.sort');
|
||||
this.$sortOrder.val(contacts_sortby||'fn');
|
||||
this.$headeractions = this.$contactListHeader.find('.actions');
|
||||
this.$headeractions = this.$controls.find('.contact-actions');
|
||||
this.$toggleAll = this.$contactListHeader.find('.toggle');
|
||||
this.$groups = this.$headeractions.find('.groups');
|
||||
this.$ninjahelp = $('#ninjahelp');
|
||||
@ -1039,14 +1039,14 @@ OC.Contacts = OC.Contacts || {
|
||||
addContact();
|
||||
});
|
||||
|
||||
this.$groupList.on('click keydown', '.add-contact', function(event) {
|
||||
this.$controls.on('click keydown', '.add-contact', function(event) {
|
||||
if(wrongKey(event)) {
|
||||
return;
|
||||
}
|
||||
addContact();
|
||||
});
|
||||
|
||||
this.$contactListHeader.on('click keydown', '.delete', function(event) {
|
||||
this.$controls.on('click keydown', '.delete', function(event) {
|
||||
if(wrongKey(event)) {
|
||||
return;
|
||||
}
|
||||
@ -1061,7 +1061,7 @@ OC.Contacts = OC.Contacts || {
|
||||
self.hideActions();
|
||||
});
|
||||
|
||||
this.$contactListHeader.on('click keydown', '.download', function(event) {
|
||||
this.$controls.on('click keydown', '.download', function(event) {
|
||||
if(wrongKey(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2281,7 +2281,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
revert: 'invalid',
|
||||
//containment: '#content',
|
||||
helper: function (e,ui) {
|
||||
return $(this).clone().appendTo('body').css('zIndex', 5).show();
|
||||
return true;
|
||||
},
|
||||
opacity: 0.8,
|
||||
scope: 'contacts'
|
||||
|
||||
@ -48,7 +48,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
}
|
||||
}
|
||||
});
|
||||
var $addInput = this.$groupList.find('.add-group');
|
||||
var $addInput = $('#controls').find('.add-group');
|
||||
$addInput.addnew({
|
||||
addText: t('core', 'Add'),
|
||||
ok: function(event, name) {
|
||||
@ -606,7 +606,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
var $elem = (tmpl).octemplate({
|
||||
id: id,
|
||||
type: 'category',
|
||||
num: (contacts.length > 0 && contacts.length || ''),
|
||||
num: 0+contacts.length,
|
||||
name: escapeHTML(name)
|
||||
});
|
||||
self.categories.push({id: id, name: name});
|
||||
@ -668,7 +668,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
$elem = $elem.length ? $elem : tmpl.octemplate({
|
||||
id: 'fav',
|
||||
type: 'fav',
|
||||
num: contacts.length > 0 && contacts.length || '',
|
||||
num: '(' + contacts.length + ')',
|
||||
name: t('contacts', 'Favorites')
|
||||
}).appendTo($groupList);
|
||||
$elem.data('obj', self);
|
||||
@ -699,7 +699,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
$elem = $elem.length ? $elem : (tmpl).octemplate({
|
||||
id: category.id,
|
||||
type: 'category',
|
||||
num: contacts.length > 0 && contacts.length || '',
|
||||
num: '(' + contacts.length + ')',
|
||||
name: category.name
|
||||
});
|
||||
self.categories.push({id: category.id, name: category.name});
|
||||
|
||||
@ -1,14 +1,33 @@
|
||||
<div id="app">
|
||||
|
||||
<div id="controls">
|
||||
<div class="actions creatable hidden-on-load">
|
||||
<div class="button new">
|
||||
<a class="add-contact"><?php p($l->t('New Contact')); ?></a>
|
||||
</div>
|
||||
<div class="button new">
|
||||
<input class="add-group hidden" type="text" tabindex="0" autofocus placeholder="<?php p($l->t('Group name')); ?>" title="<?php p($l->t('New Group')); ?>" />
|
||||
</div>
|
||||
<div class="button contact-actions">
|
||||
<a class="delete svg action text permanent"><?php p($l->t('Delete')); ?></a>
|
||||
</div>
|
||||
<div class="button contact-actions">
|
||||
<a class="download svg action text permanent"><?php p($l->t('Download')); ?></a>
|
||||
</div>
|
||||
<div class="button contact-actions" style="border:0;padding:0;margin:0;">
|
||||
<select class="groups 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 -->
|
||||
</div>
|
||||
<a class="shared svg action text permanent merge button contact-actions"><?php p($l->t('Merge selected')); ?></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="app-navigation" class="loading">
|
||||
<ul id="grouplist">
|
||||
<li class="special">
|
||||
<a role="button" class="add-contact">
|
||||
<?php p($l->t('New Contact')); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li class="special">
|
||||
<input class="add-group hidden" type="text" tabindex="0" autofocus placeholder="<?php p($l->t('Group name')); ?>" title="<?php p($l->t('New Group')); ?>" />
|
||||
</li>
|
||||
</ul>
|
||||
<div id="app-settings">
|
||||
<div id="app-settings-header">
|
||||
@ -41,26 +60,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content" class="loading">
|
||||
<!-- div id="contactsHeader">
|
||||
<input type="checkbox" class="toggle" title="<?php p($l->t('(De-)select all')); ?>" />
|
||||
<select class="action sort permanent" name="sort" title="<?php p($l->t('Sort order')); ?>">
|
||||
<option value="fn"><?php p($l->t('Display name')); ?></option>
|
||||
<option value="fl"><?php p($l->t('First- Lastname')); ?></option>
|
||||
<option value="lf"><?php p($l->t('Last-, Firstname')); ?></option>
|
||||
</select>
|
||||
<span class="actions">
|
||||
<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="action merge"><?php p($l->t('Merge selected')); ?></a>
|
||||
<a class="download svg action text permanent"><?php p($l->t('Download')); ?></a>
|
||||
<a class="delete action permanent" title="<?php p($l->t('Delete')); ?>"></a>
|
||||
</span>
|
||||
</div -->
|
||||
<table id="contactlist">
|
||||
<thead>
|
||||
<tr id="contactsHeader">
|
||||
<tr id="contactsHeader" class="hidden-on-load">
|
||||
<td class="name">
|
||||
<input type="checkbox" class="toggle" title="<?php p($l->t('(De-)select all')); ?>" />
|
||||
<select class="action sort permanent" name="sort" title="<?php p($l->t('Sort order')); ?>">
|
||||
@ -72,16 +74,7 @@
|
||||
<td class="info email">Email</td>
|
||||
<td class="info tel">Phone</td>
|
||||
<td class="info adr">Address</td>
|
||||
<td class="info categories"></td>
|
||||
<td colspan="4" class="actions">
|
||||
<a class="delete action permanent" title="<?php p($l->t('Delete')); ?>"></a>
|
||||
<a class="download svg action text permanent"><?php p($l->t('Download')); ?></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="action text permanent merge"><?php p($l->t('Merge selected')); ?></a>
|
||||
</td>
|
||||
<td class="info categories">Group</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user