From 561e629c164a8869808b754ca4d8ef0735a47763 Mon Sep 17 00:00:00 2001
From: Kirk Mayo <kirk@silverstripe.com>
Date: Wed, 19 Dec 2012 14:40:22 +1300
Subject: [PATCH] NEW Show the allowed extensions as a toggle tip as per trac
 7993

NEW Added a behat test for showing extension trac 7993
---
 css/AssetUploadField.css                  |  5 ++---
 javascript/AssetUploadField.js            | 13 +++++++++++++
 lang/en.yml                               |  1 +
 scss/AssetUploadField.scss                |  9 +++++++--
 templates/AssetUploadField.ss             |  6 ++++--
 tests/behat/features/manage-files.feature |  7 ++++++-
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css
index 9b997cff3..4881de652 100644
--- a/css/AssetUploadField.css
+++ b/css/AssetUploadField.css
@@ -11,6 +11,7 @@
 Used in side panels and action tabs
 */
 .ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
+.ss-uploadfield-view-allowed-extensions .toggle { font-style: normal; font-size: 11px; }
 
 #AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
 
@@ -68,9 +69,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }
 .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 15px 0px 0 20px; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { font-size: 16px; line-height: 30px; padding: 5px 16px; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { /*position: relative;
-overflow: hidden;
-display: block;*/ }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { /*position: relative; */ overflow: hidden; display: block; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; }
 .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { font-size: 18px; margin-top: 0; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; -moz-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 360px; float: left; }
diff --git a/javascript/AssetUploadField.js b/javascript/AssetUploadField.js
index 93dddde1f..a63c3a130 100644
--- a/javascript/AssetUploadField.js
+++ b/javascript/AssetUploadField.js
@@ -16,4 +16,17 @@
 			this.find('.ss-uploadfield-editandorganize').show();
 		}
 	});
+	$('.ss-uploadfield-view-allowed-extensions').entwine({
+		onmatch: function() {
+			this.find('.description .toggle-content').hide();
+			this._super();
+		}
+	});
+
+	$('.ss-uploadfield-view-allowed-extensions .toggle').entwine({
+		onclick: function(e) {
+			jQuery(this).closest('.description').find('.toggle-content').toggle();
+			return false;
+		}
+	});
 }(jQuery));
diff --git a/lang/en.yml b/lang/en.yml
index 4ff7b99a4..d2512ee63 100644
--- a/lang/en.yml
+++ b/lang/en.yml
@@ -1,6 +1,7 @@
 en:
   AssetAdmin:
     ALLOWEDEXTS: 'Allowed extensions'
+    SHOWALLOWEDEXTS: 'Show allowed extensions'
     NEWFOLDER: NewFolder
   AssetTableField:
     CREATED: 'First uploaded'
diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss
index a96b24c6a..dedb5b80b 100644
--- a/scss/AssetUploadField.scss
+++ b/scss/AssetUploadField.scss
@@ -12,6 +12,11 @@
 	clear:both;
 	max-width:750px;
 	display:block;
+
+	.toggle {
+		font-style: normal;
+		font-size: $font-base-size;
+	}
 }
 
 #AssetUploadField {
@@ -273,9 +278,9 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
 			}
 		}
 		.ss-uploadfield-fromcomputer {
-			/*position: relative;
+			/*position: relative; */
 			overflow: hidden;
-			display: block;*/
+			display: block;
 		}
 		.ss-uploadfield-item-uploador {
 			float: left;
diff --git a/templates/AssetUploadField.ss b/templates/AssetUploadField.ss
index 4a596696c..9abddc6b9 100644
--- a/templates/AssetUploadField.ss
+++ b/templates/AssetUploadField.ss
@@ -28,9 +28,11 @@
 	</div>
 	
 	<span class="ss-uploadfield-view-allowed-extensions"> 
+		<span class="description">
 
-		<em><% _t('AssetAdmin.ALLOWEDEXTS', 'Allowed extensions') %></em>
-		$Extensions
+			<a href="#" class="toggle"><% _t('AssetAdmin.SHOWALLOWEDEXTS', 'Show allowed extensions') %></a>
+			<p class="toggle-content">$Extensions</p>
+		</span>	
 	</span>	
 
 	<div class="clear"><!-- --></div>
diff --git a/tests/behat/features/manage-files.feature b/tests/behat/features/manage-files.feature
index a0c09985d..23996cebd 100644
--- a/tests/behat/features/manage-files.feature
+++ b/tests/behat/features/manage-files.feature
@@ -81,4 +81,9 @@ Feature: Manage files
     # /show/0 is to ensure that we are on top level folder
     And I go to "/admin/assets/show/0"
     And I click on "folder2" in the "Files" table
-    And the "folder2" table should contain "file1"
\ No newline at end of file
+    And the "folder2" table should contain "file1"
+
+  Scenario: I can see allowed extensions help
+    When I go to "/admin/assets/add"
+    And I follow "Show allowed extensions"
+    Then I should see "png,"
\ No newline at end of file