Skip to content
This repository
Browse code

BUGFIXES: File Uploads

* Add arrows back to edit-all toggle button
* Don't show dimensions if the item being inserted doesn't have them.
* Set pop-up windows to be a percentage of the window height for better
use of space
* Fix broken fieldholdersmall styling within files edit
* Add placeholder if no preview
*Take out minFileSize so upload will work on Android phones
  • Loading branch information...
commit 7523f98e04132e8493ae3cd262674ecc02b28cf3 1 parent 05cbb36
Naomi Guyer authored June 08, 2012 chillu committed June 08, 2012
34  admin/css/screen.css
@@ -82,15 +82,15 @@ If more variables exist in the future, consider creating a variables file.*/
82 82
 .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -176px; }
83 83
 
84 84
 .icon { text-indent: -9999px; border: none; outline: none; }
85  
-.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-sb373738c7b.png'); }
86  
-.icon.icon-24.icon-assetadmin { background-position: 0 -136px; }
87  
-.icon.icon-24.icon-cmsmain { background-position: 0 -64px; }
88  
-.icon.icon-24.icon-cmspagescontroller { background-position: 0 -208px; }
89  
-.icon.icon-24.icon-cmssettingscontroller { background-position: 0 -16px; }
90  
-.icon.icon-24.icon-securityadmin { background-position: 0 -40px; }
91  
-.icon.icon-24.icon-reportadmin { background-position: 0 -88px; }
92  
-.icon.icon-24.icon-commentadmin { background-position: 0 -184px; }
93  
-.icon.icon-24.icon-help { background-position: 0 -112px; }
  85
+.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-sedfac01ed1.png'); }
  86
+.icon.icon-24.icon-assetadmin { background-position: 0 -120px; }
  87
+.icon.icon-24.icon-cmsmain { background-position: 0 -48px; }
  88
+.icon.icon-24.icon-cmspagescontroller { background-position: 0 -192px; }
  89
+.icon.icon-24.icon-cmssettingscontroller { background-position: 0 0; }
  90
+.icon.icon-24.icon-securityadmin { background-position: 0 -24px; }
  91
+.icon.icon-24.icon-reportadmin { background-position: 0 -72px; }
  92
+.icon.icon-24.icon-commentadmin { background-position: 0 -168px; }
  93
+.icon.icon-24.icon-help { background-position: 0 -96px; }
94 94
 .icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-sb173d358c2.png'); }
95 95
 .icon.icon-16.icon-assetadmin { background-position: 0 -80px; }
96 96
 .icon.icon-16.icon-cmsmain { background-position: 0 -16px; }
@@ -141,7 +141,7 @@ form.nostyle label.left { float: none; display: inherit; width: auto; padding: 0
141 141
 form.nostyle .middleColumn { margin-left: 0; }
142 142
 form.nostyle input.text, form.nostyle textarea, form.nostyle select, form.nostyle .TreeDropdownField { width: auto; max-width: auto; }
143 143
 
144  
-.field { display: block; padding: 10px 0; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; }
  144
+.field { display: block; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); padding: 0 0 7px 0; margin: 0 0 8px 0; *zoom: 1; }
145 145
 .field:last-child { border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
146 146
 .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
147 147
 .field.nolabel .middleColumn { margin-left: 0; }
@@ -375,7 +375,7 @@ body.cms { overflow: hidden; }
375 375
 .cms-content-tools .cms-panel-content #LastEditedTo input.hasDatepicker { max-width: 160px; }
376 376
 .cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; }
377 377
 .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: -ms-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); }
378  
-.cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
  378
+.cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
379 379
 .cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; }
380 380
 .cms-content-tools h3 { font-size: 13px; }
381 381
 .cms-content-tools h4 { font-size: 12px; margin: 5px 0; }
@@ -595,10 +595,12 @@ form.import-form label.left { width: 250px; }
595 595
 .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .TreeDropdownField .treedropdownfield-toggle-panel-link { border-left: none; background: none; background-image: none; }
596 596
 
597 597
 /** -------------------------------------------- Buttons for FileUpload -------------------------------------------- */
598  
-.toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -217px no-repeat; }
599  
-.fileOverview .toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; }
600  
-.toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -905px no-repeat; }
601  
-.fileOverview .toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
  598
+.ss-uploadfield-item-edit-all .ui-button-text { padding-right: 0; }
  599
+
  600
+.toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -217px no-repeat; }
  601
+.fileOverview .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; }
  602
+.toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -905px no-repeat; }
  603
+.fileOverview .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
602 604
 
603 605
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
604 606
 .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
@@ -720,7 +722,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
720 722
 .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; }
721 723
 .cms-logo .version { display: none; }
722 724
 .cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url("../images/logo_small.png") no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; }
723  
-.cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; padding-top: 1px; }
  725
+.cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; padding-top: 1px; }
724 726
 
725 727
 .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
726 728
 .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites-32x32-sb47394f892.png') 0 -76px no-repeat; text-indent: -9999em; }
BIN  admin/images/btn-icon-s734caa4881.png
1  admin/scss/_forms.scss
@@ -16,7 +16,6 @@ form.nostyle {
16 16
 
17 17
 .field {
18 18
 	display: block;
19  
-	padding: 10px 0;
20 19
 	border-bottom: 1px solid $color-shadow-light;
21 20
     @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
22 21
 
38  admin/scss/_style.scss
@@ -1489,8 +1489,8 @@ body.cms-dialog {
1489 1489
 	// Emulate .field bottom border styling without applying .field class,
1490 1490
 	// as it messes up the nested .field element styling (blocklevel labels)
1491 1491
 	border-bottom: 1px solid $color-shadow-light;
1492  
-  @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
1493  
-  margin-bottom: $grid-x;
  1492
+  	@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
  1493
+  	margin-bottom: $grid-x;
1494 1494
 
1495 1495
 	// Preview might not always be available
1496 1496
 	.cms-file-info-preview {
@@ -1730,22 +1730,30 @@ form.import-form {
1730 1730
 /** --------------------------------------------
1731 1731
  * Buttons for FileUpload
1732 1732
  * -------------------------------------------- */
1733  
-.toggle-details{	
1734  
-	.toggle-details-icon {
1735  
-		background: sprite($sprites32, menu-arrow-down) no-repeat;
1736  
-		.fileOverview &{
1737  
-			background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
1738  
-			
1739  
-		}
  1733
+.ss-uploadfield-item-edit-all .ui-button-text{
  1734
+	padding-right:0;
  1735
+}
1740 1736
 
1741  
-		&.opened {					
1742  
-			background: sprite($sprites32, menu-arrow-up) no-repeat;	
1743  
-			.fileOverview &{
1744  
-				background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;			
1745  
-			}		
1746  
-		}
  1737
+ 
  1738
+	
  1739
+.toggle-details-icon {
  1740
+	background: sprite($sprites32, menu-arrow-down) no-repeat;
  1741
+	.fileOverview &{
  1742
+		background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
  1743
+		display:inline-block;
  1744
+		width:8px;
  1745
+		height:8px;
  1746
+		padding-left:5px;		
  1747
+	}
  1748
+
  1749
+	&.opened {					
  1750
+		background: sprite($sprites32, menu-arrow-up) no-repeat;	
  1751
+		.fileOverview &{
  1752
+			background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;			
  1753
+		}		
1747 1754
 	}
1748 1755
 }
1749 1756
 
1750 1757
 
1751 1758
 
  1759
+
43  css/AssetUploadField.css
@@ -4,47 +4,50 @@
4 4
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
5 5
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
6 6
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
7  
-#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
  7
+#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
8 8
 
9 9
 body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
10 10
 body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
  11
+body.cms.ss-uploadfield-edit-iframe .fieldholder-small, .composite.ss-assetuploadfield .details fieldset .fieldholder-small { margin-top: -8px; }
  12
+body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
11 13
 
12  
-.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
  14
+.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
13 15
 .ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
14 16
 .ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; margin-bottom: 5px; padding-bottom: 5px; height: 50px; position: relative; }
15  
-.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; background: none; border: 0; right: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #444444; }
16  
-.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { height: auto; }
  17
+.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
  18
+.ss-assetuploadfield .fileOverview .ss-ui-button:hover { color: #1e7cba; }
17 19
 .ss-assetuploadfield .fileOverview .state { font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 5px; }
18 20
 .ss-assetuploadfield .fileOverview .details { color: #6a6a6a; }
19 21
 .ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
20  
-.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; }
  22
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
21 23
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
  24
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview .no-preview { display: block; height: 100%; width: 100%; background: url("../images/icons/document.png") 2px 0px no-repeat; }
22 25
 .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%); }
23 26
 .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; 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%); }
24 27
 .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); }
25 28
 .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); }
26 29
 .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%); }
27  
-.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; }
28  
-.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; }
29  
-.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); }
  30
+.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); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
  31
+.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; }
  32
+.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); }
30 33
 .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; }
31 34
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
32 35
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
33 36
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
34  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
  37
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
35 38
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-delete { display: none; }
36  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel { -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 3px; cursor: pointer; opacity: 0.9; }
  39
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 3px; cursor: pointer; opacity: 0.9; }
37 40
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel:hover { opacity: 1; }
38 41
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel .ui-icon { display: block; margin: 0; position: realtive; top: 4px; }
39  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
40  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
41  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
42  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
43  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
44  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
  42
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
  43
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover { background: none; opacity: 1; }
  44
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details { opacity: 1; }
  45
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
  46
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
  47
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
45 48
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button .ui-icon { display: none; }
46 49
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
47  
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
  50
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
48 51
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
49 52
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
50 53
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
@@ -52,12 +55,12 @@ body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfiel
52 55
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }
53 56
 .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 15px 0px 0 20px; }
54 57
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { min-width: 250px; height: 30px; font-size: 14px; }
55  
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
  58
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
56 59
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
57 60
 .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; }
58 61
 .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { font-size: 18px; margin-top: 0; }
59  
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -o-border-radius: 13px; -ms-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -o-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
60  
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
  62
+.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.3) 0 0 3px 2px inset; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
  63
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
61 64
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
62 65
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; }
63 66
 .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 3px; height: 56px; width: 277px; overflow: hidden; }
16  css/GridField.css
@@ -29,8 +29,8 @@
29 29
 .cms table.ss-gridfield-table thead { color: #323e46; background: transparent; }
30 30
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
31 31
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup .fieldgroup-field { padding: 0; }
32  
-.cms table.ss-gridfield-table thead tr:first-child th:first-child { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; }
33  
-.cms table.ss-gridfield-table thead tr:first-child th:last-child { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px; }
  32
+.cms table.ss-gridfield-table thead tr:first-child th:first-child { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; border-top-left-radius: 5px; }
  33
+.cms table.ss-gridfield-table thead tr:first-child th:last-child { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; border-top-right-radius: 5px; }
34 34
 .cms table.ss-gridfield-table tbody { background: #FFF; }
35 35
 .cms table.ss-gridfield-table tbody tr { cursor: pointer; }
36 36
 .cms table.ss-gridfield-table tbody td { width: auto; white-space: nowrap; }
@@ -39,7 +39,7 @@
39 39
 .cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; border-right: none; text-indent: -9999em; padding: 0; }
40 40
 .cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 3px -4px; display: block; }
41 41
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #1556b2; }
42  
-.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
  42
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; border-radius: 2px / 2px; }
43 43
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
44 44
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
45 45
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.deletedonlive { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; }
@@ -76,13 +76,13 @@
76 76
 .cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
77 77
 .cms table.ss-gridfield-table tr th.extra { position: relative; background: #637276; background: rgba(0, 0, 0, 0.7); padding: 5px; border-top: rgba(0, 0, 0, 0.2); }
78 78
 .cms table.ss-gridfield-table tr th.extra input { height: 28px; }
79  
-.cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
80  
-.cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; }
81  
-.cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px; }
  79
+.cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; border-radius: 2px / 2px; }
  80
+.cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; border-top-left-radius: 5px; }
  81
+.cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; border-top-right-radius: 5px; }
82 82
 .cms table.ss-gridfield-table tr th button#action_gridfield_relationadd:hover { color: #444 !important; /* Not sure why IE think it needs this */ }
83 83
 .cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
84 84
 .cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
85  
-.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 2px 8px 2px 0; text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
  85
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 2px 8px 2px 0; text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0; color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
86 86
 .cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -34px; }
87 87
 .cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-desc { background-position: right -72px; }
88 88
 .cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-asc { background-position: right -116px; }
@@ -106,7 +106,7 @@
106 106
 .cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
107 107
 .cms table.ss-gridfield-table tr th span.non-sortable { display: block; }
108 108
 .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 8px 8px; color: #666666; }
109  
-.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -o-border-bottom-left-radius: 5px; -ms-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -o-border-bottom-right-radius: 5px; -ms-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk4YWFiNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #98aab6)); background-image: -webkit-linear-gradient(#b0bec7, #98aab6); background-image: -moz-linear-gradient(#b0bec7, #98aab6); background-image: -o-linear-gradient(#b0bec7, #98aab6); background-image: -ms-linear-gradient(#b0bec7, #98aab6); background-image: linear-gradient(#b0bec7, #98aab6); padding: 4px 12px; }
  109
+.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -ms-border-bottom-left-radius: 5px; -o-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -ms-border-bottom-right-radius: 5px; -o-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk4YWFiNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #98aab6)); background-image: -webkit-linear-gradient(#b0bec7, #98aab6); background-image: -moz-linear-gradient(#b0bec7, #98aab6); background-image: -o-linear-gradient(#b0bec7, #98aab6); background-image: -ms-linear-gradient(#b0bec7, #98aab6); background-image: linear-gradient(#b0bec7, #98aab6); padding: 4px 12px; }
110 110
 .cms table.ss-gridfield-table tr td.bottom-all .datagrid-footer-message { text-align: center; padding-top: 6px; color: white; }
111 111
 .cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination { padding-top: 1px; position: absolute; left: 50%; margin-left: -116px; z-index: 5; }
112 112
 .cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination .pagination-page-number { color: white; text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0; }
17  css/UploadField.css
@@ -9,20 +9,27 @@
9 9
 .htmleditorfield-dialog .cms-content-header h3 { padding: 0 8px; margin: 10px; }
10 10
 .htmleditorfield-dialog .ui-tabs { position: static; }
11 11
 .htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav { float: right; position: absolute; top: 0; right: 40px; }
12  
-.htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px; padding-top: 10px; height: 28px; overflow: hidden; font-weight: bold; }
  12
+.htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; padding-top: 10px; height: 28px; overflow: hidden; font-weight: bold; }
13 13
 .htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li a { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
14 14
 .htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li.ui-state-active { background: #f0f3f4 url("../admin/images/textures/bg_cms_main_content.png") repeat left top; }
15 15
 .htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li.ui-state-active a { color: #444444; text-shadow: none; }
16 16
 .htmleditorfield-dialog .ui-tabs .ui-tabs-panel { padding: 0; }
17 17
 .htmleditorfield-dialog .ss-insert-media, .htmleditorfield-dialog .Actions { padding: 8px 16px; }
  18
+.htmleditorfield-dialog .details .file-url { display: block; width: 450px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
  19
+.htmleditorfield-dialog .details .cms-file-info .field { border: none; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  20
+.htmleditorfield-dialog .details .field { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
  21
+.htmleditorfield-dialog .details .field.last { border-bottom: none; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); margin-bottom: 0; }
  22
+.htmleditorfield-dialog .details .img-detail-group { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px 0; }
  23
+.htmleditorfield-dialog .details .img-detail-group .extraLabel { display: block; position: relative; top: -8px; margin-left: 184px; color: #ccc; color: rgba(0, 0, 0, 0.5); font-style: italic; padding: 0; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); }
  24
+.htmleditorfield-dialog .details .img-detail-group .field { border-bottom: none; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
18 25
 
19 26
 .ss-uploadfield .clear { clear: both; }
20 27
 .ss-insert-media .ss-uploadfield { margin-top: 20px; }
21 28
 .ss-insert-media .ss-uploadfield h4 { float: left; }
22  
-.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
  29
+.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
23 30
 .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
24 31
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
25  
-.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
  32
+.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
26 33
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info { margin: 0 0 0 100px; }
27 34
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
28 35
 .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
@@ -38,11 +45,11 @@
38 45
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
39 46
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; }
40 47
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
41  
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
  48
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
42 49
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
43 50
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
44 51
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
45  
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: none; position: relative; }
  52
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; position: relative; }
46 53
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span { position: absolute; left: 0; top: 0; margin: 0; }
47 54
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span.ui-button-text, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span.ui-button-text { display: none; }
48 55
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
88  forms/HtmlEditorField.php
@@ -427,7 +427,6 @@ function MediaForm() {
427 427
 			new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.ADJUSTDETAILSDIMENSIONS', 'Details &amp; dimensions')) . '</h4>'),
428 428
 			$editComposite = new CompositeField(
429 429
 				new LiteralField('contentEdit', '<div class="content-edit ss-uploadfield-files files"></div>')
430  
-
431 430
 			)
432 431
 		);
433 432
 
@@ -485,6 +484,7 @@ function MediaForm() {
485 484
 	 * View of a single file, either on the filesystem or on the web.
486 485
 	 */
487 486
 	public function viewfile($request) {
  487
+
488 488
 		// TODO Would be cleaner to consistently pass URL for both local and remote files,
489 489
 		// but GridField doesn't allow for this kind of metadata customization at the moment.
490 490
 		if($url = $request->getVar('FileURL')) {
@@ -569,6 +569,14 @@ protected function getFieldsForOembed($url, $file) {
569 569
 			"<img id='thumbnailImage' class='thumbnail-preview' src='{$thumbnailURL}?r=" . rand(1,100000)  . "' alt='{$file->Name}' />\n"
570 570
 		);
571 571
 
  572
+		if($file->Width != null){
  573
+			$dimensionsField = new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
  574
+				$widthField = new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), $file->Width),
  575
+				$heightField = new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), $file->Height)
  576
+			);
  577
+		}
  578
+
  579
+		
572 580
 		$fields = new FieldList(
573 581
 			$filePreview = CompositeField::create(
574 582
 				CompositeField::create(
@@ -578,13 +586,13 @@ protected function getFieldsForOembed($url, $file) {
578 586
 					CompositeField::create(
579 587
 						new ReadonlyField("FileType", _t('AssetTableField.TYPE','File type') . ':', $file->Type),
580 588
 						$urlField = new ReadonlyField('ClickableURL', _t('AssetTableField.URL','URL'),
581  
-							sprintf('<a href="%s" target="_blank">%s</a>', $url, $url)
  589
+							sprintf('<a href="%s" target="_blank" class="file">%s</a>', $url, $url)
582 590
 						)
583 591
 					)
584 592
 				)->setName("FilePreviewData")->addExtraClass('cms-file-info-data')
585 593
 			)->setName("FilePreview")->addExtraClass('cms-file-info'),
586 594
 			new TextField('CaptionText', _t('HtmlEditorField.CAPTIONTEXT', 'Caption text')),
587  
-			new DropdownField(
  595
+			$alignment = new DropdownField(
588 596
 				'CSSClass',
589 597
 				_t('HtmlEditorField.CSSCLASS', 'Alignment / style'),
590 598
 				array(
@@ -594,15 +602,18 @@ protected function getFieldsForOembed($url, $file) {
594 602
 					'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'),
595 603
 				)
596 604
 			),
597  
-			$dimensionsField = new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
598  
-				$widthField = new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), $file->Width),
599  
-				$heightField = new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), $file->Height)
600  
-			)
  605
+			$dimensionsField
601 606
 		);
  607
+		$urlField->addExtraClass('text-wrap');
602 608
 		$urlField->dontEscape = true;
603  
-		$dimensionsField->addExtraClass('dimensions');
604  
-		$widthField->setMaxLength(5);
605  
-		$heightField->setMaxLength(5);
  609
+		if($dimensionsField){
  610
+			$dimensionsField->addExtraClass('dimensions last');
  611
+			$widthField->setMaxLength(5);
  612
+			$heightField->setMaxLength(5);
  613
+		}else{
  614
+			$alignment->addExtraClass('last');
  615
+		}
  616
+
606 617
 
607 618
 		if($file->Type == 'photo') {
608 619
 			$filePreview->FieldList()->insertBefore(new TextField(
@@ -656,6 +667,13 @@ protected function getFieldsForImage($url, $file) {
656 667
 			"<img id='thumbnailImage' class='thumbnail-preview' src='{$thumbnailURL}?r=" . rand(1,100000)  . "' alt='{$file->Name}' />\n"
657 668
 		);
658 669
 
  670
+		if($file->Width != null){
  671
+			$dimensionsField = new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
  672
+				$widthField = new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), $file->Width),
  673
+				$heightField = new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), $file->Height)
  674
+			);
  675
+		}
  676
+
659 677
 		$fields = new FieldList(
660 678
 			$filePreview = CompositeField::create(
661 679
 				CompositeField::create(
@@ -665,26 +683,32 @@ protected function getFieldsForImage($url, $file) {
665 683
 					CompositeField::create(
666 684
 						new ReadonlyField("FileType", _t('AssetTableField.TYPE','File type') . ':', $file->FileType),
667 685
 						new ReadonlyField("Size", _t('AssetTableField.SIZE','File size') . ':', $file->getSize()),
668  
-						$urlField = new ReadonlyField('ClickableURL', _t('AssetTableField.URL','URL'),
669  
-							sprintf('<a href="%s" target="_blank">%s</a>', $file->Link(), $file->RelativeLink())
  686
+						$urlField = new ReadonlyField('ClickableURL', _t('AssetTableField.URL','URL'), 
  687
+							sprintf('<a href="%s" target="_blank" class="file-url">%s</a>', $file->Link(), $file->RelativeLink())
670 688
 						),
671 689
 						new DateField_Disabled("Created", _t('AssetTableField.CREATED','First uploaded') . ':', $file->Created),
672 690
 						new DateField_Disabled("LastEdited", _t('AssetTableField.LASTEDIT','Last changed') . ':', $file->LastEdited)
673 691
 					)
674 692
 				)->setName("FilePreviewData")->addExtraClass('cms-file-info-data')
675  
-			)->setName("FilePreview")->addExtraClass('cms-file-info'),
676  
-			new TextField(
677  
-				'AltText', 
678  
-				_t('HtmlEditorField.IMAGEALTTEXT', 'Alternative text (alt) - shown if image cannot be displayed'), 
679  
-				$file->Title, 
680  
-				80
681  
-			),
682  
-			new TextField(
683  
-				'Title', 
684  
-				_t('HtmlEditorField.IMAGETITLE', 'Title text (tooltip) - for additional information about the image')
685  
-			),
  693
+			)->setName("FilePreview")->addExtraClass('cms-file-info'),			
  694
+			CompositeField::create(
  695
+				new TextField(
  696
+					'AltText', 
  697
+					_t('HtmlEditorField.IMAGEALT', 'Alternative text (alt)'),  
  698
+					$file->Title, 
  699
+					80
  700
+				),
  701
+				new LiteralField('extraAlt', '<div class="middleColumn extraLabel">' . _t('HtmlEditorField.IMAGEALTTEXTDESC', 'Shown to screen readers or if image can not be displayed') . '</div>')
  702
+			) -> addExtraClass('img-detail-group first'),
  703
+			CompositeField::create(
  704
+				new TextField(
  705
+					'Title', 
  706
+					_t('HtmlEditorField.IMAGETITLETEXT', 'Title text (tooltip)')
  707
+				),
  708
+				new LiteralField('extraTitle', '<div class="middleColumn extraLabel">' . _t('HtmlEditorField.IMAGETITLETEXTDESC', 'For additional information about the image') . '</div>')
  709
+			)-> addExtraClass('img-detail-group'),
686 710
 			new TextField('CaptionText', _t('HtmlEditorField.CAPTIONTEXT', 'Caption text')),
687  
-			new DropdownField(
  711
+			$alignment = new DropdownField(
688 712
 				'CSSClass',
689 713
 				_t('HtmlEditorField.CSSCLASS', 'Alignment / style'),
690 714
 				array(
@@ -694,15 +718,17 @@ protected function getFieldsForImage($url, $file) {
694 718
 					'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'),
695 719
 				)
696 720
 			),
697  
-			$dimensionsField = new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
698  
-				$widthField = new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), $file->Width),
699  
-				$heightField = new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), $file->Height)
700  
-			)
  721
+			$dimensionsField			
701 722
 		);
702 723
 		$urlField->dontEscape = true;
703  
-		$dimensionsField->addExtraClass('dimensions');
704  
-		$widthField->setMaxLength(5);
705  
-		$heightField->setMaxLength(5);
  724
+		if($dimensionsField){
  725
+			$dimensionsField->addExtraClass('dimensions last');			
  726
+			$widthField->setMaxLength(5);
  727
+			$heightField->setMaxLength(5);
  728
+		}else{
  729
+			$alignment->addExtraClass('last');
  730
+		}
  731
+		
706 732
 
707 733
 		$this->extend('updateFieldsForImage', $fields, $url, $file);
708 734
 
BIN  images/icons/document.png
14  javascript/HtmlEditorField.js
@@ -309,7 +309,11 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
309 309
 		$('.htmleditorfield-dialog').entwine({
310 310
 			onmatch: function() {
311 311
 				// Create jQuery dialog
312  
-				this.dialog({autoOpen: true, bgiframe: true, modal: true, height: 500, width: '80%', ghost: true});
  312
+
  313
+				var height = $(window).height() * 0.8; 
  314
+				var width = $(window).width() * 0.8; 
  315
+
  316
+				this.dialog({autoOpen: true, bgiframe: true, modal: true, height: height, width: width, ghost: true});
313 317
 
314 318
 				this._super();
315 319
 			},
@@ -676,7 +680,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
676 680
 				var updateExisting = Boolean(this.find('.ss-htmleditorfield-file').length);
677 681
 				this.find('.overview .action-delete')[updateExisting ? 'hide' : 'show']();
678 682
 			},
679  
-			onsubmit: function() {
  683
+			onsubmit: function() {				
680 684
 				var self = this, ed = this.getEditor();
681 685
 
682 686
 				// HACK: See ondialogopen()
@@ -690,7 +694,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
690 694
 
691 695
 				return false;
692 696
 			},
693  
-			updateFromEditor: function() {
  697
+			updateFromEditor: function() {			
694 698
 				var self = this, ed = this.getEditor(), node = $(ed.getSelectedNode());
695 699
 				// TODO Depends on managed mime type
696 700
 				if(node.is('img')) {
@@ -714,7 +718,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
714 718
 				if(header) header[(hasItems) ? 'show' : 'hide']();
715 719
 
716 720
 				// Disable "insert" button if no files are selected
717  
-				this.find('.Actions :submit')
  721
+				 this.find('.Actions :submit')
718 722
 					.button(hasItems ? 'enable' : 'disable')
719 723
 					.toggleClass('ui-state-disabled', !hasItems); 
720 724
 					
@@ -728,7 +732,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
728 732
 				this.find('.htmleditorfield-mediaform-heading.update')[updateExisting ? 'show' : 'hide']();
729 733
 				this.find('.Actions .media-update')[updateExisting ? 'show' : 'hide']();
730 734
 			},
731  
-			resetFields: function() {
  735
+			resetFields: function() {				
732 736
 				var ed = this.getEditor(), node = $(ed.getSelectedNode());
733 737
 
734 738
 				// HACK: See ondialogopen()
21  scss/AssetUploadField.scss
@@ -22,6 +22,12 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
22 22
 		color:lighten($color-text, 20%);
23 23
 		text-shadow: 0px 1px 0px #fff;
24 24
 	}
  25
+	.fieldholder-small{
  26
+		margin-top:-8px;
  27
+		label{
  28
+			margin-left:0;
  29
+		}
  30
+	}
25 31
 }
26 32
 
27 33
 
@@ -48,16 +54,14 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
48 54
 		.ss-ui-button {
49 55
 			position:absolute;
50 56
 			bottom:0;
  57
+			padding:0;
51 58
 			background: none;
52 59
 			border: 0;
53 60
 			right:0;
54 61
 			@include box-shadow(none);
55 62
 			color: $color-text;		
56  
-
57  
-
58  
-			&.ss-uploadfield-item-edit-all {
59  
-				@extend .ss-uploadfield-item-edit; 
60  
-				height:auto;
  63
+			&:hover{
  64
+				color: #1e7cba;	
61 65
 			}
62 66
 		}
63 67
 		.state{
@@ -91,6 +95,12 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
91 95
 			width: 40px;
92 96
 			overflow: hidden;
93 97
 			z-index: 1;
  98
+			.no-preview{		
  99
+				display:block;
  100
+				height:100%;
  101
+				width:100%;
  102
+				background:url('../images/icons/document.png') 2px 0px no-repeat;
  103
+			}
94 104
 		}
95 105
 		.ss-uploadfield-item-info {
96 106
 			position: relative;
@@ -138,7 +148,6 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
138 148
 			background:$color-button-disabled; //for browsers that don't support rgba
139 149
 			background: rgba(#fff, 0.8);
140 150
 			@include border-radius(3px);
141  
-			display: block;
142 151
 			line-height: 24px;
143 152
 			height: 22px;
144 153
 			padding: 0 5px;
47  scss/UploadField.scss
@@ -55,6 +55,51 @@
55 55
 	.ss-insert-media, .Actions{
56 56
 		padding:$grid-y $grid-x*2 ;
57 57
 	}
  58
+	.details{
  59
+
  60
+		.file-url{
  61
+			display:block;
  62
+			width:450px;
  63
+			@include hide-text-overflow;
  64
+		}
  65
+
  66
+
  67
+		.cms-file-info{
  68
+			.field{
  69
+				border:none;
  70
+				@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
  71
+			}
  72
+		}
  73
+		.field{
  74
+			border-bottom: 1px solid $color-shadow-light;
  75
+    		@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
  76
+    		&.last{				
  77
+				border-bottom:none;
  78
+				@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
  79
+				margin-bottom:0;
  80
+			}	
  81
+		}
  82
+		.img-detail-group{
  83
+			border-bottom: 1px solid $color-shadow-light;
  84
+    		@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
  85
+    		margin: 0 0 8px 0;
  86
+    		.extraLabel{
  87
+				display:block;
  88
+				position:relative;
  89
+				top: 0 - $grid-y;
  90
+				margin-left:176px + $grid-y; //width of main label
  91
+				color: #ccc;
  92
+				color: rgba(#000, 0.5);
  93
+				font-style:italic;
  94
+				padding:0;
  95
+				@include text-shadow(1px 1px 0 rgba($color-text-shadow, 0.7));
  96
+			}					
  97
+			.field{
  98
+				border-bottom:none;
  99
+				@include box-shadow(0 0 0 rgba(0, 0, 0, 0));
  100
+			}
  101
+		}
  102
+	}
58 103
 }
59 104
 
60 105
 .ss-uploadfield {
@@ -251,6 +296,8 @@
251 296
 				border-top: 1px solid $color-light-separator;
252 297
 				width: 100%;
253 298
 			}
  299
+
  300
+
254 301
 		}		
255 302
 	}
256 303
 	.ss-uploadfield-addfile {
17  templates/Includes/HtmlEditorField_viewfile.ss
... ...
@@ -1,13 +1,25 @@
1 1
 <div class="ss-uploadfield-item $appCategory ss-htmleditorfield-file template-upload" data-id="$File.ID" data-url="$URL">
  2
+	
  3
+	
2 4
 	<div class="ss-uploadfield-item-preview">
3  
-		<span>$Preview.SetRatioSize(30, 40)</span>
  5
+		<% if $Width %>
  6
+			<span>$Preview.SetRatioSize(30, 40)</span>
  7
+		<% else %>
  8
+		<span class="no-preview"></span>
  9
+		<% end_if %>
4 10
 	</div>
  11
+	
5 12
 	<div class="ss-uploadfield-item-info">
6 13
 		<label class="ss-uploadfield-item-name">
7 14
 			<span class="name" title="$Name">
8 15
 				$Name
9 16
 			</span>
10  
-			<div class="ss-uploadfield-item-status ui-state-success-text" title="<% _t('UploadField.Dimensions', 'Dimensions') %>">Dimensions: $Width x $Height</div>
  17
+			<% if $Width %>
  18
+			<div class="ss-uploadfield-item-status ui-state-success-text" title="<% _t('UploadField.Dimensions', 'Dimensions') %>">
  19
+				{$Width} x {$Height} (px)
  20
+			</div>
  21
+			<% end_if %>
  22
+
11 23
 			<div class="clear"><!-- --></div> 
12 24
 		</label>
13 25
 		<div class="ss-uploadfield-item-actions">	
@@ -34,4 +46,3 @@
34 46
 		</fieldset>
35 47
 	</div>
36 48
 </div>
37  
-
2  thirdparty/jquery-fileupload/jquery.fileupload-ui.js
@@ -31,7 +31,7 @@
31 31
             // The maximum allowed file size:
32 32
             maxFileSize: undefined,
33 33
             // The minimum allowed file size:
34  
-            minFileSize: 1,
  34
+            minFileSize: 0,
35 35
             // The regular expression for allowed file types, matches
36 36
             // against either file type or file name:
37 37
             acceptFileTypes:  /.+$/i,

0 notes on commit 7523f98

Please sign in to comment.
Something went wrong with that request. Please try again.