diff --git a/admin/images/btn-icon-sf47938c650.png b/admin/images/btn-icon-sf47938c650.png deleted file mode 100644 index 1852ea85c..000000000 Binary files a/admin/images/btn-icon-sf47938c650.png and /dev/null differ diff --git a/admin/images/btn-icon/delete.png b/admin/images/btn-icon/delete.png new file mode 100644 index 000000000..20d6f5ea0 Binary files /dev/null and b/admin/images/btn-icon/delete.png differ diff --git a/admin/images/btn-icon/deleteLight.png b/admin/images/btn-icon/deleteLight.png new file mode 100644 index 000000000..0d90f195d Binary files /dev/null and b/admin/images/btn-icon/deleteLight.png differ diff --git a/admin/images/menu-icons/16x16-s170d9d69bb.png b/admin/images/menu-icons/16x16-s170d9d69bb.png new file mode 100644 index 000000000..9a31d371d Binary files /dev/null and b/admin/images/menu-icons/16x16-s170d9d69bb.png differ diff --git a/admin/images/menu-icons/16x16-sb173d358c2.png b/admin/images/menu-icons/16x16-sb173d358c2.png deleted file mode 100644 index a4b26e9ff..000000000 Binary files a/admin/images/menu-icons/16x16-sb173d358c2.png and /dev/null differ diff --git a/admin/images/menu-icons/24x24-s546fcae8fd.png b/admin/images/menu-icons/24x24-s546fcae8fd.png new file mode 100644 index 000000000..ba9f5cd0d Binary files /dev/null and b/admin/images/menu-icons/24x24-s546fcae8fd.png differ diff --git a/admin/images/menu-icons/24x24-sedfac01ed1.png b/admin/images/menu-icons/24x24-sedfac01ed1.png deleted file mode 100644 index 85c8d4b33..000000000 Binary files a/admin/images/menu-icons/24x24-sedfac01ed1.png and /dev/null differ diff --git a/admin/images/sprites-32x32-sa4e142f7f0.png b/admin/images/sprites-32x32-sa4e142f7f0.png new file mode 100644 index 000000000..c4e8604f9 Binary files /dev/null and b/admin/images/sprites-32x32-sa4e142f7f0.png differ diff --git a/admin/images/sprites-32x32-sb47394f892.png b/admin/images/sprites-32x32-sb47394f892.png deleted file mode 100644 index 433db0dec..000000000 Binary files a/admin/images/sprites-32x32-sb47394f892.png and /dev/null differ diff --git a/css/UploadField.css b/css/UploadField.css index 74903d33b..f498ad498 100644 --- a/css/UploadField.css +++ b/css/UploadField.css @@ -4,17 +4,33 @@ /** ----------------------------------------------- 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 ------------------------------------------------ */ +.htmleditorfield-dialog.ui-dialog-content { padding: 0; position: relative; } +.htmleditorfield-dialog .cms-content-header { padding: 0; width: 100%; height: 40px; } +.htmleditorfield-dialog .cms-content-header h3 { padding: 0 8px; margin: 10px; } +.htmleditorfield-dialog .ui-tabs { position: static; } +.htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav { float: right; position: absolute; top: 0; right: 40px; } +.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; } +.htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li a { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } +.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; } +.htmleditorfield-dialog .ui-tabs ul.ui-tabs-nav li.ui-state-active a { color: #444444; text-shadow: none; } +.htmleditorfield-dialog .ui-tabs .ui-tabs-panel { padding: 0; } +.htmleditorfield-dialog .ss-insert-media, .htmleditorfield-dialog .Actions { padding: 8px 16px; } + .ss-uploadfield .clear { clear: both; } -.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); } +.ss-insert-media .ss-uploadfield { margin-top: 20px; } +.ss-insert-media .ss-uploadfield h4 { float: left; } +.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); } .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; } -.ss-uploadfield .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; } -.ss-uploadfield .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; } -.ss-uploadfield .ss-uploadfield-item-info { margin: 0 0 0 100px; } -.ss-uploadfield .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; } -.ss-uploadfield .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; } -.ss-uploadfield .ss-uploadfield-item-name span { font-size: 11px; color: #848484; } -.ss-uploadfield .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; } -.ss-uploadfield .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; } +.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; } +.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; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info { margin: 0 0 0 100px; } +.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; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { font-size: 11px; color: #848484; width: 290px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; display: inline; float: left; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; width: 100px; text-align: right; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; } .ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 0 0; } .ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; } .ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; overflow: auto; position: relative; } @@ -22,11 +38,11 @@ .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; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; } -.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; } +.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; } .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%); } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; } -.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; } +.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; } .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; } .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; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; } diff --git a/scss/UploadField.scss b/scss/UploadField.scss index 4b618207c..fd320ddfb 100644 --- a/scss/UploadField.scss +++ b/scss/UploadField.scss @@ -2,12 +2,76 @@ // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons) @import "../admin/scss/themes/default.scss"; +@import "../admin/scss/_mixins"; +.htmleditorfield-dialog{ + &.ui-dialog-content{ + padding:0; + position:relative; + } + + .cms-content-header{ + padding:0; + width:100%; + height: 40px; + h3{ + padding: 0 8px; + margin: 10px; + } + } + .ui-tabs{ + position:static; + ul.ui-tabs-nav{ + float:right; + position:absolute; + top:0; + right: 40px; + li{ + @include background-image( + linear-gradient(#B0BEC7, #8CA1AE) + ); + @include border-radius(0px); + padding-top: 10px; + height: 28px; + overflow:hidden; + font-weight:bold; + a{ + color:#fff; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + } + &.ui-state-active{ + background: #F0F3F4 url("../admin/images/textures/bg_cms_main_content.png") repeat left top; + a{ + color:$color-text; + text-shadow: none; + } + } + } + } + .ui-tabs-panel{ + padding:0; + } + } + .ss-insert-media, .Actions{ + padding:$grid-y $grid-x*2 ; + } +} .ss-uploadfield { + .clear { clear: both; } + + .ss-insert-media &{ + margin-top:20px; + + h4{ + float:left; + } + + } + .middleColumn { // TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy) // so we should move this style into the cms and black candy files @@ -22,48 +86,60 @@ margin: 0; padding: 15px; overflow: auto; - } - .ss-uploadfield-item-preview { - height: 60px; - line-height: 60px; - width: 80px; - text-align: center; - font-weight: bold; - float: left; - overflow: hidden; - &.ss-uploadfield-dropzone { - @include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset); - border: 2px dashed $color-medium-separator; - background: $color-light-separator; - display: none; - } - } - .ss-uploadfield-item-info { - margin: 0 0 0 100px; - } - .ss-uploadfield-item-name { - display: block; - line-height: 13px; - height: 26px; - margin: 0; - text-align: left; - - b { - font-weight: bold; - padding: 0 5px 0 0; - } - span { - font-size: $font-base-size - 1; - color: lighten($color-text, 25%); - } - } - .ss-uploadfield-item-status { - float: right; - padding: 0 0 0 5px; - - &.ui-state-error-text { - color: $color-button-destructive; + + .ss-uploadfield-item-preview { + height: 60px; + line-height: 60px; + width: 80px; + text-align: center; font-weight: bold; + float: left; + overflow: hidden; + &.ss-uploadfield-dropzone { + @include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset); + border: 2px dashed $color-medium-separator; + background: $color-light-separator; + display: none; + } + } + .ss-uploadfield-item-info { + margin: 0 0 0 100px; + + .ss-uploadfield-item-name { + display: block; + line-height: 13px; + height: 26px; + margin: 0; + text-align: left; + b { + font-weight: bold; + padding: 0 5px 0 0; + } + .name { + font-size: $font-base-size - 1; + color: lighten($color-text, 25%); + width:290px; //Ensures the title doesn't interfer with the status message + @include hide-text-overflow; + display:inline; + float:left; + } + .ss-uploadfield-item-status { + float: right; + padding: 0 0 0 5px; + width:100px; //Allocates the status message enough room to be useful. Will wrap if it is longer + text-align:right; + &.ui-state-error-text { + color: $color-button-destructive; + font-weight: bold; + } + &.ui-state-warning-text { + color: darken($color-warning, 10%); + } + &.ui-state-success-text { + color: $color-button-constructive; + } + } + } } } .ss-ui-button { @@ -146,14 +222,14 @@ // background: sprite($sprites16, cross-circle) no-repeat; span { - position: absolute; - left: 0; - top: 0; - margin: 0; + position: absolute; + left: 0; + top: 0; + margin: 0; - &.ui-button-text { - display: none; - } + &.ui-button-text { + display: none; + } } } } diff --git a/templates/AssetUploadField.ss b/templates/AssetUploadField.ss index c6052496b..6d7dc0746 100644 --- a/templates/AssetUploadField.ss +++ b/templates/AssetUploadField.ss @@ -9,7 +9,7 @@
@@ -37,14 +37,15 @@
<% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress') %>
-
<% _t('AssetUploadField.TOTAL', 'Total') %>: <% _t('AssetUploadField.FILES', 'Files') %>
+
<% _t('AssetUploadField.TOTAL', 'Total') %>: + <% _t('AssetUploadField.FILES', 'Files') %> + +
diff --git a/templates/HtmlEditorField_UploadField.ss b/templates/HtmlEditorField_UploadField.ss index e4258eae2..9f6a0d043 100644 --- a/templates/HtmlEditorField_UploadField.ss +++ b/templates/HtmlEditorField_UploadField.ss @@ -1,4 +1,4 @@ -
+

@@ -9,7 +9,7 @@
@@ -20,7 +20,6 @@
- <% _t('AssetUploadField.DROPAREA', 'Drop Area') %> <% _t('AssetUploadField.DRAGFILESHERE', 'Drag files here') %>