From 248eae2d0ff7227c1df5db5b875f6756c31e579b Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Fri, 4 May 2012 15:47:19 +0200 Subject: Contacts: Improve NOTE UI. Cleanup markup. --- apps/contacts/css/contacts.css | 7 +++---- apps/contacts/index.php | 1 + apps/contacts/js/contacts.js | 11 ++++++++++- apps/contacts/templates/part.contact.php | 31 ++++++++++++++----------------- 4 files changed, 28 insertions(+), 22 deletions(-) (limited to 'apps') diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css index 4b09e810bb6..03047f5a935 100644 --- a/apps/contacts/css/contacts.css +++ b/apps/contacts/css/contacts.css @@ -25,9 +25,10 @@ .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"]: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; } 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; } .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; } @@ -62,10 +63,8 @@ dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; } #identityprops { /*position: absolute; top: 2.5em; left: 0px;*/ } /*#contact_photo { max-width: 250px; }*/ #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;*/ } -/*.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; } #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; } @@ -91,8 +90,8 @@ dl.addresscard .action { float: right; } #adr_zipcode {} #adr_country {} +#file_upload_form { width: 0; height: 0; } #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;} input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; } .big { font-weight:bold; font-size:1.2em; } diff --git a/apps/contacts/index.php b/apps/contacts/index.php index 814a8927f32..69e7d57309f 100755 --- a/apps/contacts/index.php +++ b/apps/contacts/index.php @@ -48,6 +48,7 @@ $maxUploadFilesize = min($maxUploadFilesize ,$freeSpace); OCP\Util::addscript('','jquery.multiselect'); OCP\Util::addscript('','oc-vcategories'); OCP\Util::addscript('contacts','contacts'); +OCP\Util::addscript('contacts','expanding'); OCP\Util::addscript('contacts','jquery.combobox'); OCP\Util::addscript('contacts','jquery.inview'); OCP\Util::addscript('contacts','jquery.Jcrop'); diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js index 739724f3f1d..d8622bf9015 100644 --- a/apps/contacts/js/contacts.js +++ b/apps/contacts/js/contacts.js @@ -149,6 +149,7 @@ Contacts={ click: function() { $(this).dialog('close'); } } ] ); + $('#categories').multiple_autocomplete({source: categories}); $('#contacts_deletecard').tipsy({gravity: 'ne'}); $('#contacts_downloadcard').tipsy({gravity: 'ne'}); @@ -333,13 +334,20 @@ Contacts={ Contacts.UI.loadListHandlers(); if(this.data.NOTE) { $('#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.expandingTextarea(); $('#contacts_propertymenu a[data-type="NOTE"]').parent().hide(); } else { $('#note').data('checksum', ''); $('#note').find('textarea').val(''); $('#note').hide(); + $('#contacts_propertymenu a[data-type="NOTE"]').parent().show(); } }, loadSingleProperties:function() { @@ -572,6 +580,7 @@ Contacts={ case 'NOTE': $('#note').show(); $('#contacts_propertymenu a[data-type="'+type+'"]').parent().hide(); + $('#note').find('textarea').expandingTextarea(); $('#note').find('textarea').focus(); break; case 'EMAIL': diff --git a/apps/contacts/templates/part.contact.php b/apps/contacts/templates/part.contact.php index 8bc0457ed4e..a549369059b 100755 --- a/apps/contacts/templates/part.contact.php +++ b/apps/contacts/templates/part.contact.php @@ -2,6 +2,12 @@ $id = isset($_['id']) ? $_['id'] : ''; ?>
+
+ + + + +