1
0
mirror of https://github.com/owncloudarchive/contacts.git synced 2024-11-29 11:24:11 +01:00

Redesign add group/contact and add stub for slideup settings.

This commit is contained in:
Thomas Tanghus 2012-11-13 16:59:22 +01:00
parent ad452e0cf6
commit dc3adf4841
2 changed files with 49 additions and 6 deletions

View File

@ -40,6 +40,23 @@ option:last-child { border-bottom: 1px solid silver; }
#leftcontent h3 img.shared { float: right; opacity: 0.4; margin: 0 .5em; }
#leftcontent h3 img.shared:hover { opacity: 1; }
#groupactions { box-sizing: border-box; height: 4em; border-bottom: 1px solid #DDDDDD; }
#addactions > button, .addcontact {
-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; }
/* First run */
@ -159,6 +176,26 @@ dl.addresscard .action { float: right; }
.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: right; background:url('%webroot%/core/img/actions/settings.svg') no-repeat center; }
#contacts-settings.open {
height: auto;
}
#contacts-settings {
-moz-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #EEEEEE;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
bottom: 0;
height: 2.8em;
margin: 0;
overflow: visible;
padding: 0;
position: fixed;
width: 20em;
z-index: 2;
}
/* Single elements */
#file_upload_target, #import_upload_target, #crop_target { display:none; }
#toggle_all { position: absolute; bottom: .5em; left: .8em; }
@ -178,16 +215,13 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
.favorite.inactive { background:url('%appswebroot%/contacts/img/inactive_star.png') no-repeat center; }
/* Header */
#contactsheader { position: fixed; padding: 0; margin:0; top:3.5em; left: 32.5em; right: 0; height: 4em; border-bottom: 1px solid #DDDDDD; z-index: 50; }
#contactsheader { position: fixed; box-sizing: border-box; padding: 0; margin:0; top:3.5em; left: 32.5em; right: 0; height: 4em; border-bottom: 1px solid #DDDDDD; z-index: 50; }
#contactsheader div.actions { padding: 0 0.5em; margin: 0 auto; height: 100%; width: 90%; }
#contactsheader button, #contactsheader select { position: relative; float: left; min-width: 26px; height: 26px; margin: .7em; padding: .2em; clear: none; }
#contactsheader .back { }
#contactsheader .import { background:url('%webroot%/core/img/actions/upload.svg') no-repeat center; }
#contactsheader .newcontact { background:url('%appswebroot%/contacts/img/contact-new.svg') no-repeat center; }
#contactsheader .delete { background:url('%webroot%/core/img/actions/delete.svg') no-repeat center; }
#contactsheader .add { background:url('%webroot%/core/img/actions/add.svg') no-repeat center; }
#contactsheader .list.add { margin-left: 5em; }
#contactsheader .settings { background:url('%webroot%/core/img/actions/settings.svg') no-repeat center; position: absolute; top: .7em; right: 1em; margin: 0; }
/* Right content layout */

View File

@ -16,21 +16,30 @@
<iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
<div id="leftcontent" class="loading">
<div class="hidden" id="statusbar"></div>
<div id="groupactions">
<button class="addcontact"><?php echo $l->t('New Group'); ?></button>
</div>
<nav id="grouplist">
</nav>
<div id="contacts-settings">
<ul>
<li><button class="settings" title="<?php echo $l->t('Settings'); ?>"></button></li>
<li><button><?php echo $l->t('Import'); ?></button></li>
<li><button><?php echo $l->t('Export'); ?></button></li>
</ul>
</div>
</div>
<div id="contactsheader">
<input type="checkbox" id="toggle_all" title="<?php echo $l->t('(De-)select all'); ?>" />
<div class="actions">
<button class="addcontact"><?php echo $l->t('New Contact'); ?></button>
<button class="back control" title="<?php echo $l->t('Back'); ?>"><?php echo $l->t('Back'); ?></button>
<button class="add control" title="<?php echo $l->t('Add Contact'); ?>"></button>
<button class="download control" title="<?php echo $l->t('Download Contact'); ?>"></button>
<button class="delete control" title="<?php echo $l->t('Delete Contact'); ?>"></button>
<select class="groups control" name="groups">
<option value="-1" disabled="disabled" selected="selected"><?php echo $l->t('Groups'); ?></option>
</select>
</div>
<button class="settings control" title="<?php echo $l->t('Settings'); ?>"></button>
</div>
<div id="rightcontent" class="loading">
<table id="contactlist">