mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Contacts: Improve NOTE UI. Cleanup markup.

This commit is contained in:
Thomas Tanghus 2012-05-04 15:47:19 +02:00
parent 907fa9d85b
commit 248eae2d0f
4 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/contacts/css/contacts.css
View File

@ -25,9 +25,10 @@
.categories { float: left; width: 16em; } .categories { float: left; width: 16em; }
#card input[type="text"],input[type="email"],input[type="tel"],input[type="date"], select, textarea { background-color: #fefefe; border: 0 !important; -webkit-appearance:none !important; -moz-appearance:none !important; -webkit-box-sizing:none !important; -moz-box-sizing:none !important; box-sizing:none !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; float: left; } #card input[type="text"],input[type="email"],input[type="tel"],input[type="date"], select, textarea { background-color: #fefefe; border: 0 !important; -webkit-appearance:none !important; -moz-appearance:none !important; -webkit-box-sizing:none !important; -moz-box-sizing:none !important; box-sizing:none !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; float: left; }
#card input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,input[type="email"]:hover,input[type="tel"]:hover,input[type="date"]:hover,input[type="date"],input[type="date"]:hover,input[type="date"]:active,input[type="date"]:active,input[type="date"]:active,input[type="email"]:active,input[type="tel"]:active, select:hover, select:focus, select:active { border: 0 !important; -webkit-appearance:textfield; -moz-appearance:textfield; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; float: left; } #card input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,input[type="email"]:hover,input[type="tel"]:hover,input[type="date"]:hover,input[type="date"],input[type="date"]:hover,input[type="date"]:active,input[type="date"]:active,input[type="date"]:active,input[type="email"]:active,input[type="tel"]:active, select:hover, select:focus, select:active { border: 0 !important; -webkit-appearance:textfield; -moz-appearance:textfield; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; float: left; }
textarea:focus, textarea:hover { background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; float: left; } textarea:focus, textarea:hover { background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; float: left; }
input[type="text"]:invalid,input[type="email"]:invalid,input[type="tel"]:invalid,input[type="date"]:invalid, textarea:invalid { color: #bbb !important; } input[type="text"]:invalid,input[type="email"]:invalid,input[type="tel"]:invalid,input[type="date"]:invalid, textarea:invalid { color: #bbb !important; }
textarea { min-height: 4em; } textarea { width: 80%; min-height: 5em; margin: 0 !important; padding: 0 !important; outline: 0 !important;}
dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; } dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; }
.form dt { display: table-cell; clear: left; float: left; width: 7em; margin: 0; padding: 0.8em 0.5em 0 0; text-align:right; text-overflow:ellipsis; o-text-overflow: ellipsis; vertical-align: text-bottom; color: #bbb;/* white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap;*/ } .form dt { display: table-cell; clear: left; float: left; width: 7em; margin: 0; padding: 0.8em 0.5em 0 0; text-align:right; text-overflow:ellipsis; o-text-overflow: ellipsis; vertical-align: text-bottom; color: #bbb;/* white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap;*/ }
.form dd { display: table-cell; clear: right; float: left; margin: 0; padding: 0px; white-space: nowrap; vertical-align: text-bottom; } .form dd { display: table-cell; clear: right; float: left; margin: 0; padding: 0px; white-space: nowrap; vertical-align: text-bottom; }
@ -62,10 +63,8 @@ dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; }
#identityprops { /*position: absolute; top: 2.5em; left: 0px;*/ } #identityprops { /*position: absolute; top: 2.5em; left: 0px;*/ }
/*#contact_photo { max-width: 250px; }*/ /*#contact_photo { max-width: 250px; }*/
#contact_identity { min-width: 30em; } #contact_identity { min-width: 30em; }
#note { min-width: 200px; }
.contactsection { position: relative; float: left; /*max-width: 40em;*/ padding: 0.5em; height: auto: border: thin solid lightgray;/* -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background-color: #f8f8f8;*/ } .contactsection { position: relative; float: left; /*max-width: 40em;*/ padding: 0.5em; height: auto: border: thin solid lightgray;/* -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background-color: #f8f8f8;*/ }
/*.contactpart legend { width:auto; padding:.3em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; } */
#cropbox { margin: auto; } #cropbox { margin: auto; }
#contacts_details_photo { border-radius: 0.5em; border: thin solid #bbb; margin: 0.3em; background: url('%webroot%/core/img/loading.gif') no-repeat center center; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; } #contacts_details_photo { border-radius: 0.5em; border: thin solid #bbb; margin: 0.3em; background: url('%webroot%/core/img/loading.gif') no-repeat center center; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; }
#contacts_details_photo:hover { background: #fff; cursor: default; } #contacts_details_photo:hover { background: #fff; cursor: default; }
@ -91,8 +90,8 @@ dl.addresscard .action { float: right; }
#adr_zipcode {} #adr_zipcode {}
#adr_country {} #adr_country {}
#file_upload_form { width: 0; height: 0; }
#file_upload_target, #import_upload_target, #crop_target { display:none; } #file_upload_target, #import_upload_target, #crop_target { display:none; }
#file_upload_start, #import_upload_start { opacity:0; filter:alpha(opacity=0); z-index:1; /*position:absolute; left:0; top:0;*/ width:0; height:0;} #file_upload_start, #import_upload_start { opacity:0; filter:alpha(opacity=0); z-index:1; /*position:absolute; left:0; top:0;*/ width:0; height:0;}
input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; } input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; }
.big { font-weight:bold; font-size:1.2em; } .big { font-weight:bold; font-size:1.2em; }

1
apps/contacts/index.php
View File

@ -48,6 +48,7 @@ $maxUploadFilesize = min($maxUploadFilesize ,$freeSpace);
OCP\Util::addscript('','jquery.multiselect'); OCP\Util::addscript('','jquery.multiselect');
OCP\Util::addscript('','oc-vcategories'); OCP\Util::addscript('','oc-vcategories');
OCP\Util::addscript('contacts','contacts'); OCP\Util::addscript('contacts','contacts');
OCP\Util::addscript('contacts','expanding');
OCP\Util::addscript('contacts','jquery.combobox'); OCP\Util::addscript('contacts','jquery.combobox');
OCP\Util::addscript('contacts','jquery.inview'); OCP\Util::addscript('contacts','jquery.inview');
OCP\Util::addscript('contacts','jquery.Jcrop'); OCP\Util::addscript('contacts','jquery.Jcrop');

11
apps/contacts/js/contacts.js
View File

@ -149,6 +149,7 @@ Contacts={
click: function() { $(this).dialog('close'); } click: function() { $(this).dialog('close'); }
} }
] ); ] );
$('#categories').multiple_autocomplete({source: categories}); $('#categories').multiple_autocomplete({source: categories});
$('#contacts_deletecard').tipsy({gravity: 'ne'}); $('#contacts_deletecard').tipsy({gravity: 'ne'});
$('#contacts_downloadcard').tipsy({gravity: 'ne'}); $('#contacts_downloadcard').tipsy({gravity: 'ne'});
@ -333,13 +334,20 @@ Contacts={
Contacts.UI.loadListHandlers(); Contacts.UI.loadListHandlers();
if(this.data.NOTE) { if(this.data.NOTE) {
$('#note').data('checksum', this.data.NOTE[0]['checksum']); $('#note').data('checksum', this.data.NOTE[0]['checksum']);
$('#note').find('textarea').val(this.data.NOTE[0]['value']); var note = $('#note').find('textarea');
var txt = this.data.NOTE[0]['value'];
var nheight = txt.split('\n').length > 4 ? txt.split('\n').length+2 : 5;
note.css('min-height', nheight+'em');
note.attr('rows', nheight);
note.val(txt);
$('#note').show(); $('#note').show();
note.expandingTextarea();
$('#contacts_propertymenu a[data-type="NOTE"]').parent().hide(); $('#contacts_propertymenu a[data-type="NOTE"]').parent().hide();
} else { } else {
$('#note').data('checksum', ''); $('#note').data('checksum', '');
$('#note').find('textarea').val(''); $('#note').find('textarea').val('');
$('#note').hide(); $('#note').hide();
$('#contacts_propertymenu a[data-type="NOTE"]').parent().show();
} }
}, },
loadSingleProperties:function() { loadSingleProperties:function() {
@ -572,6 +580,7 @@ Contacts={
case 'NOTE': case 'NOTE':
$('#note').show(); $('#note').show();
$('#contacts_propertymenu a[data-type="'+type+'"]').parent().hide(); $('#contacts_propertymenu a[data-type="'+type+'"]').parent().hide();
$('#note').find('textarea').expandingTextarea();
$('#note').find('textarea').focus(); $('#note').find('textarea').focus();
break; break;
case 'EMAIL': case 'EMAIL':

29
apps/contacts/templates/part.contact.php
View File

@ -2,6 +2,12 @@
$id = isset($_['id']) ? $_['id'] : ''; $id = isset($_['id']) ? $_['id'] : '';
?> ?>
<div id="card"> <div id="card">
<form class="float" id="file_upload_form" action="<?php echo OCP\Util::linkTo('contacts', 'ajax/uploadphoto.php'); ?>" method="post" enctype="multipart/form-data" target="file_upload_target">
<input type="hidden" name="id" value="<?php echo $_['id'] ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_['uploadMaxFilesize'] ?>" id="max_upload">
<input type="hidden" class="max_human_file_size" value="(max <?php echo $_['uploadMaxHumanFilesize']; ?>)">
<input id="file_upload_start" type="file" accept="image/*" name="imagefile" />
</form>
<div id="actionbar"> <div id="actionbar">
<button title="<?php echo $l->t('Add field'); ?>" class="svg action" id="contacts_propertymenu_button"></button> <button title="<?php echo $l->t('Add field'); ?>" class="svg action" id="contacts_propertymenu_button"></button>
<div id="contacts_propertymenu" class="hidden"> <div id="contacts_propertymenu" class="hidden">
@ -23,16 +29,9 @@ $id = isset($_['id']) ? $_['id'] : '';
<div id="contact_photo" class="contactsection"> <div id="contact_photo" class="contactsection">
<form class="float" id="file_upload_form" action="<?php echo OCP\Util::linkTo('contacts', 'ajax/uploadphoto.php'); ?>" method="post" enctype="multipart/form-data" target="file_upload_target">
<div class="tip propertycontainer" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Drop photo to upload'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)" data-element="PHOTO">
<progress id="contacts_details_photo_progress" class="hidden" value="0" max="100">0 %</progress>
</div>
<input type="hidden" name="id" value="<?php echo $_['id'] ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_['uploadMaxFilesize'] ?>" id="max_upload">
<input type="hidden" class="max_human_file_size" value="(max <?php echo $_['uploadMaxHumanFilesize']; ?>)">
<input id="file_upload_start" type="file" accept="image/*" name="imagefile" />
<iframe name="file_upload_target" id='file_upload_target' src=""></iframe> <iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
</form> <div class="tip propertycontainer" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Drop photo to upload'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)" data-element="PHOTO">
</div>
</div> <!-- contact_photo --> </div> <!-- contact_photo -->
<div id="contact_identity" class="contactsection"> <div id="contact_identity" class="contactsection">
@ -65,7 +64,6 @@ $id = isset($_['id']) ? $_['id'] : '';
<form method="post"> <form method="post">
<!-- email addresses --> <!-- email addresses -->
<div id="emails"> <div id="emails">
<fieldset class="contactpart">
<ul id="emaillist" class="propertylist"> <ul id="emaillist" class="propertylist">
<li class="template hidden" data-element="EMAIL"> <li class="template hidden" data-element="EMAIL">
<input type="checkbox" class="contacts_property tip" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" /> <input type="checkbox" class="contacts_property tip" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" />
@ -80,7 +78,6 @@ $id = isset($_['id']) ? $_['id'] : '';
<!-- Phone numbers --> <!-- Phone numbers -->
<div id="phones"> <div id="phones">
<fieldset class="contactpart">
<ul id="phonelist" class="propertylist"> <ul id="phonelist" class="propertylist">
<li class="template hidden" data-element="TEL"> <li class="template hidden" data-element="TEL">
<input type="checkbox" class="contacts_property tip" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" /> <input type="checkbox" class="contacts_property tip" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" />
@ -94,7 +91,6 @@ $id = isset($_['id']) ? $_['id'] : '';
<!-- Addresses --> <!-- Addresses -->
<div id="addresses" class="hidden"> <div id="addresses" class="hidden">
<fieldset class="contactpart">
<div id="addressdisplay"> <div id="addressdisplay">
<dl class="addresscard template hidden" data-element="ADR"><dt> <dl class="addresscard template hidden" data-element="ADR"><dt>
<input class="adr contacts_property" name="value" type="hidden" value="" /> <input class="adr contacts_property" name="value" type="hidden" value="" />
@ -102,18 +98,19 @@ $id = isset($_['id']) ? $_['id'] : '';
<span class="adr_type_label"></span><a class="action globe" title="<?php echo $l->t('View on map'); ?>"></a><a class="action edit" title="<?php echo $l->t('Edit address details'); ?>"></a><a role="button" class="action delete" title="Delete address"></a> <span class="adr_type_label"></span><a class="action globe" title="<?php echo $l->t('View on map'); ?>"></a><a class="action edit" title="<?php echo $l->t('Edit address details'); ?>"></a><a role="button" class="action delete" title="Delete address"></a>
</dt><dd><ul class="addresslist"></ul></dd></dl> </dt><dd><ul class="addresslist"></ul></dd></dl>
</fieldset>
</div> <!-- addressdisplay --> </div> <!-- addressdisplay -->
</div> <!-- Addresses --> </div> <!-- Addresses -->
</form> </form>
</div> <!-- contact_communication --> </div> <!-- contact_communication -->
<div id="contact_note" class="contactsection"> <div id="contact_note" class="contactsection">
<form class="float" method="post"> <form class="float" method="post">
<fieldset id="note" class="formfloat propertycontainer contactpart" data-element="NOTE"> <div id="note" class="propertycontainer" data-element="NOTE">
<textarea class="contacts_property note" name="value" cols="60" rows="15" required="required" placeholder="<?php echo $l->t('Add notes here.'); ?>"></textarea> <textarea class="contacts_property" name="value" required="required" placeholder="<?php echo $l->t('Add notes here.'); ?>" cols="60" wrap="hard"></textarea>
</fieldset> </div>
</form> </form>
</div> <!-- contact_note --> </div> <!-- contact_note -->
</div> <!-- card --> </div> <!-- card -->
<div id="edit_photo_dialog" title="Edit photo"> <div id="edit_photo_dialog" title="Edit photo">
<div id="edit_photo_dialog_img"></div> <div id="edit_photo_dialog_img"></div>