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

@@ -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;
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { /*position: relative; */ overflow: hidden; display: block; }
-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; }

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));

lang/en.yml

@@ -1,6 +1,7 @@
 en:
   AssetAdmin:
     ALLOWEDEXTS: 'Allowed extensions'
+    SHOWALLOWEDEXTS: 'Show allowed extensions'
     NEWFOLDER: NewFolder
   AssetTableField:
     CREATED: 'First uploaded'

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;

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>
+			<a href="#" class="toggle"><% _t('AssetAdmin.SHOWALLOWEDEXTS', 'Show allowed extensions') %></a>
-		$Extensions
+			<p class="toggle-content">$Extensions</p>
+		</span>	
 	</span>	
 
 	<div class="clear"><!-- --></div>

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"
+    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,"