Merge pull request #412 from adrexia/sapphire

---

The two bug fixes impact on the file area, but have wider reach.

BUGFIX: Colour Adjustments
Change the constructive button colour to match the colour used in the designs, and fix up calculations to produce the correct button colour.

BUGFIX: IE Colours
Replace hard coded colours in IE with variables, and refactor code so that shared IE7 and IE8 fixes are in one place.

ENHANCEMENT: UI Changes to FileUpload Area (TRAC-7219)
1. Add arrows to edit dropdowns
2. Adjust lightened fields so they dont look like input boxes, and fix rgba colours
3. Add ability to click file names to edit
4. Add feedback when edit button is hovered
5. Add feedback if a file has been opened for editing and shut again (saved changes, unsaved changes, unchanged)
6. Add ability to open and close all files to edit them all at once
7. Add overall feedback for file uploads, and fix NaN error
8. Fix up area to match design
9. Fix error messages so they fit in the provided space
10. Fix case where a single uploaded file errors

admin/css/ie7.css

@@ -1,9 +1,41 @@
-html { overflow: hidden; }
-
+/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
+/** ----------------------------------------------- Colours ------------------------------------------------ */
+/** ----------------------------------------------- Textures ----------------------------------------------- */
+/** ----------------------------------------------- Typography.  ------------------------------------------------ */
+/** ----------------------------------------------- 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 ------------------------------------------------ */
+/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
 .cms .ss-ui-button { background-color: #e6e6e6; }
 .cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
-.cms .ss-ui-button.ss-ui-action-constructive { background-color: #669933; }
-.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #73ac39; }
+.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
+.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
+
+.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
+
+.ss-gridfield-button-filter.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; }
+.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background-color: #2e7ead; background-position: -15px 7px; filter: none; }
+.ss-gridfield-button-filter.ss-ui-button.hover-alike { background-color: #338DC1; background-position: -16px 6px; filter: none; }
+
+.ss-gridfield-button-reset.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; }
+.ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; }
+.ss-gridfield-button-reset.ss-ui-button.filtered:active { background: #e60000 url(../images/filter-icons.png) no-repeat 9px -16px; filter: none; }
+
+.cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; }
+.cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; }
+.cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; }
+.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; }
+.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; }
+
+.cms .ss-gridfield table.ss-gridfield-table tbody td button { border: 0; background: none; }
+
+.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; }
+
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; }
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; }
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; }
+
+html { overflow: hidden; }
 
 .field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
 
@@ -12,42 +44,27 @@ html { overflow: hidden; }
 
 .ss-ui-button.cms-page-add-button { float: left; }
 
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon/add.png") 0px 0px no-repeat; }
-
 .cms-tree-view-modes div { float: left; }
 .cms-tree-view-modes span { float: left; padding-top: 5px; }
 
 .cms-panel-content .cms-tree li { width: 200px; overflow: hidden; float: left; display: inline; }
 
-.cms-content-toolbar { border-bottom: 1px solid #c9cdce; padding-bottom: 5px; }
-
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
+.cms-content-toolbar { padding-bottom: 5px; }
 
 .jstree li a .ui-icon { text-indent: 0px !important; }
 
 .cms table.ss-gridfield-table tbody td { width: auto; }
 .cms table.ss-gridfield-table tr th.extra span input { height: 23px; }
 
-.ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; }
-.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background: #2e7ead url(../images/filter-icons.png) no-repeat -15px 7px; filter: none; }
-.ss-gridfield-button-filter.ss-ui-button.hover-alike { background: #338dc1 url(../images/filter-icons.png) no-repeat -16px 6px; filter: none; }
+.ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; }
 
-.ss-gridfield-button-reset.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; }
-.ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; }
-.ss-gridfield-button-reset.ss-ui-button.filtered:active { background: #e60000 url(../images/filter-icons.png) no-repeat 9px -16px; filter: none; }
+.ss-gridfield-button-reset.ss-ui-button { margin: -1px -5px; }
 
-.cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; }
-.cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; }
-.cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; }
-.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; }
-.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; }
-
-.cms .ss-gridfield table.ss-gridfield-table tbody td button { width: 40px; border: 0; background: none; }
+.cms .ss-gridfield table.ss-gridfield-table tbody td button { width: 40px; }
 .cms .ss-gridfield table.ss-gridfield-table tbody td button.gridfield-button-delete { display: block; float: left; }
 .cms .ss-gridfield table.ss-gridfield-table tbody td button.gridfield-button-unlink { display: block; float: left; }
 .cms .ss-gridfield table.ss-gridfield-table tbody td a.edit-link { display: block; float: left; }
 
-.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; }
 .cms .cms-content .cms-content-fields .field.dropdown .middleColumn { max-width: 512px; }
 
 .pagination-page-number { position: relative; bottom: 10px; right: 10px; }
@@ -60,9 +77,6 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; }
 
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { overflow: hidden; }
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form input { width: 160px; }
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; }
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; }
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; }
 
 .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; }
 .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 4px -4px; display: block; }

admin/css/ie8.css

@@ -1,24 +1,21 @@
+/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
+/** ----------------------------------------------- Colours ------------------------------------------------ */
+/** ----------------------------------------------- Textures ----------------------------------------------- */
+/** ----------------------------------------------- Typography.  ------------------------------------------------ */
+/** ----------------------------------------------- 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 ------------------------------------------------ */
+/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
 .cms .ss-ui-button { background-color: #e6e6e6; }
 .cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
-.cms .ss-ui-button.ss-ui-action-constructive { background-color: #669933; }
-.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #73ac39; }
-
-.cms-panel .cms-panel-content-collapsed { width: 40px; }
-.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; }
-
-.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { margin-right: 1px; }
+.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
+.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
 
 .cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
 
-.cms-content-tools .cms-panel-content .dropdown select { width: 152px; }
-
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon/add.png") 0px 0px no-repeat; }
-
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
 
 .ss-gridfield-button-filter.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; }
-.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background: #2e7ead url(../images/filter-icons.png) no-repeat -15px 7px; filter: none; }
-.ss-gridfield-button-filter.ss-ui-button.hover-alike { background: #338dc1 url(../images/filter-icons.png) no-repeat -16px 6px; filter: none; }
+.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background-color: #2e7ead; background-position: -15px 7px; filter: none; }
+.ss-gridfield-button-filter.ss-ui-button.hover-alike { background-color: #338DC1; background-position: -16px 6px; filter: none; }
 
 .ss-gridfield-button-reset.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; }
 .ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; }
@@ -27,13 +24,20 @@
 .cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; }
 .cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; }
 .cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; }
-.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; }
+.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; }
 .cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; }
 
-.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; }
-
 .cms .ss-gridfield table.ss-gridfield-table tbody td button { border: 0; background: none; }
 
+.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; }
+
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; }
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; }
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; }
+
+.cms-panel .cms-panel-content-collapsed { width: 40px; }
+.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; }
+
+.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { margin-right: 1px; }
+
+.cms-content-tools .cms-panel-content .dropdown select { width: 152px; }