From 9844328a060a391f2a496cf63a1213979dfe420d Mon Sep 17 00:00:00 2001
From: Naomi Guyer <adrexia@gmail.com>
Date: Fri, 11 May 2012 14:43:17 +1200
Subject: [PATCH] BUGFIX: Fix error notification on files (fixes: 7295)

Add title text to all status messages
Make room for the error message details by expanding the name area in
the file details
Fix up changes status to work with selects
---
 css/AssetUploadField.css                   |  8 ++---
 javascript/UploadField.js                  | 36 +++++++++++++++++-----
 javascript/UploadField_downloadtemplate.js |  6 ++--
 javascript/UploadField_uploadtemplate.js   |  5 +--
 scss/AssetUploadField.scss                 |  6 ++++
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css
index d449edeb8..e4ee40657 100644
--- a/css/AssetUploadField.css
+++ b/css/AssetUploadField.css
@@ -41,14 +41,14 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
-.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
-.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
+.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 110px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
 .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
 .ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
diff --git a/javascript/UploadField.js b/javascript/UploadField.js
index 8d247aff5..7f244f79b 100644
--- a/javascript/UploadField.js
+++ b/javascript/UploadField.js
@@ -288,12 +288,26 @@
 				var disabled;
 				var iframe = editform.find('iframe');
 				var inputs = iframe.contents().find('.ss-uploadfield-edit-iframe input');
+				var ulSelects =iframe.contents().find('.ss-uploadfield-edit-iframe .chzn-drop ul.chzn-results');
 				
 				for(var i=0;i<inputs.length;i++){
 					$(inputs[i]).change(function(){
+						editform.removeClass('edited'); 
 						editform.addClass('edited'); 
 					});
-				}				
+
+				}	 
+				for(var i=0;i<ulSelects.length;i++){
+					var current= $(ulSelects[i]).find('li.result-selected');
+					$(ulSelects[i]).children('li').click(function(){
+						if(this !== current[0]){
+							editform.removeClass('edited'); 
+							editform.addClass('edited'); 
+						}
+					});
+				}	
+
+
 				if (editform.hasClass('loading')) {
 					// TODO Display loading indication, and register an event to toggle edit form 
 				} else {
@@ -339,11 +353,13 @@
 			toggleEditForm: function() {
 				var itemInfo = this.prev('.ss-uploadfield-item-info'), status = itemInfo.find('.ss-uploadfield-item-status');
 				var iframe = this.find('iframe').contents(), saved=iframe.find('#Form_EditForm_error');
-				
+				var text="";
+
 				if(this.height() === 0) {
+					text = "Editing...";
 					this.fitHeight();
 					itemInfo.find('.toggle-details-icon').addClass('opened');					
-					status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text').text("Editing...");
+					status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text');
 					iframe.find('#Form_EditForm_action_doEdit').click(function(){
 						itemInfo.find('label .name').text(iframe.find('#Name input').val());
 					});	
@@ -352,22 +368,26 @@
 					}
 
 				} else {
-					this.height(0);
+					this.height(0);					
 					itemInfo.find('.toggle-details-icon').removeClass('opened');
 					$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
 					if(!this.hasClass('edited')){
-						status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.NOCHANGES', 'No Changes'));
+						text = ss.i18n._t('UploadField.NOCHANGES', 'No Changes')
+						status.addClass('ui-state-success-text');
 					}else{
 						if(saved.hasClass('good')){
+							text = ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Saved')
 							this.removeClass('edited').parent('.ss-uploadfield-item').removeClass('ui-state-warning');
-							status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Saved'));								
+							status.addClass('ui-state-success-text');						
 						}else{
+							text = ss.i18n._t('UploadField.UNSAVEDCHANGES', 'Unsaved Changes')
 							this.parent('.ss-uploadfield-item').addClass('ui-state-warning');
-							status.addClass('ui-state-warning-text').text(ss.i18n._t('UploadField.UNSAVEDCHANGES', 'Unsaved Changes'));
-						}
+							status.addClass('ui-state-warning-text');
+						}							
 					}
 					saved.removeClass('good').hide();
 				}
+				status.attr('title',text).text(text);	
 			}
 		});
 		$('div.ss-upload .ss-uploadfield-item-editform iframe').entwine({
diff --git a/javascript/UploadField_downloadtemplate.js b/javascript/UploadField_downloadtemplate.js
index 86472f818..543f1323c 100644
--- a/javascript/UploadField_downloadtemplate.js
+++ b/javascript/UploadField_downloadtemplate.js
@@ -6,11 +6,11 @@ window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
 			'</span></div>' +
 			'<div class="ss-uploadfield-item-info">' +
 				'<label class="ss-uploadfield-item-name">' + 
-					'<span class="name">{%=file.name%}</span> ' + 
+					'<span class="name" title="{%=file.name%}">{%=file.name%}</span> ' + 
 					'{% if (!file.error) { %}' +
-						'<div class="ss-uploadfield-item-status ui-state-success-text">Uploaded</div>' +						
+						'<div class="ss-uploadfield-item-status ui-state-success-text" title="Uploaded">Uploaded</div>' +						
 					'{% } else {  %}' +
-							'<div class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error].substring(0,25) || file.error.substring(0,25)%}</div>' + 
+							'<div class="ss-uploadfield-item-status ui-state-error-text" title="{%=o.options.errorMessages[file.error] || file.error%}">{%=o.options.errorMessages[file.error] || file.error%}</div>' + 
 					'{% } %}' + 
 					'<div class="clear"><!-- --></div>' + 
 				'</label>' +
diff --git a/javascript/UploadField_uploadtemplate.js b/javascript/UploadField_uploadtemplate.js
index 6b5b8a76f..17afd9f34 100644
--- a/javascript/UploadField_uploadtemplate.js
+++ b/javascript/UploadField_uploadtemplate.js
@@ -4,11 +4,12 @@ window.tmpl.cache['ss-uploadfield-uploadtemplate'] = tmpl(
 			'<div class="ss-uploadfield-item-preview preview"><span></span></div>' +
 			'<div class="ss-uploadfield-item-info">' +
 				'<label class="ss-uploadfield-item-name">' + 
-					'<span class="name">{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}</span> ' + 
+					'<span class="name" title="{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}">' +
+					'{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}</span> ' + 
 					'{% if (!file.error) { %}' +
 						'<div class="ss-uploadfield-item-status">0%</div>' +						
 					'{% } else {  %}' +
-						'<div class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error].substring(0,25) || file.error.substring(0,25)%}</div>' + 
+						'<div class="ss-uploadfield-item-status ui-state-error-text" title="{%=o.options.errorMessages[file.error] || file.error%}">{%=o.options.errorMessages[file.error] || file.error%}</div>' + 
 					'{% } %}' + 
 					'<div class="clear"><!-- --></div>' + 
 				'</label>' +
diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss
index 1c97ab3b1..7bca9f7a8 100644
--- a/scss/AssetUploadField.scss
+++ b/scss/AssetUploadField.scss
@@ -101,8 +101,10 @@ body.cms.ss-uploadfield-edit-iframe {
 		}
 		.ui-state-error .ss-uploadfield-item-info {
 			background-color: #c11f1d;
+			padding-right:110px;
 			@include background-image(linear-gradient(top,  #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
 			.ss-uploadfield-item-name{
+				width:100%;				
 				cursor:default;
 				background: darken($color-button-disabled,20%); //for browsers that don't support rgba
 				background: rgba(darken($color-button-disabled, 15%),0.9);
@@ -153,12 +155,16 @@ body.cms.ss-uploadfield-edit-iframe {
 				@include hide-text-overflow;
 			}
 			.ss-uploadfield-item-status {
+				position:relative;
 				float: right;
 				padding: 0 0 0 5px;
 				max-width:30%;
 				@include hide-text-overflow;
 				text-shadow: 0px 1px 0px rgba(#fff, 0.5);
 				&.ui-state-error-text {
+					max-width:70%;
+					position:absolute;
+					right:5px;
 					text-shadow: 0px 1px 0px rgba(#fff, 0.6);
 					color: darken($color-button-destructive, 10%);
 				}