tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

MINOR: fixed missing cancel icon

Browse Source
This commit is contained in:
Zauberfisch 2012-05-13 21:05:30 +02:00
parent 368081f63c
commit ad78d9a3d1
6 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/AssetUploadField.css
View File

@ -66,7 +66,8 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.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%); } .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%); }
.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; } .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; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel 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; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel 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; position: relative; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button .ui-icon { display: block; position: absolute; top: 0; left: 0; margin: 0; }
.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; } .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; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; } .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }

4
css/UploadField.css
View File

@ -26,7 +26,9 @@
.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-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-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, .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; } .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 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; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
.ss-uploadfield .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; } .ss-uploadfield .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; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201, 205, 206, 0.8); width: 100%; } .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201, 205, 206, 0.8); width: 100%; }

2
javascript/UploadField_downloadtemplate.js
View File

@ -8,7 +8,7 @@ window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
'<label class="ss-uploadfield-item-name">' + '<label class="ss-uploadfield-item-name">' +
'<span class="name" title="{%=file.name%}">{%=file.name%}</span> ' + '<span class="name" title="{%=file.name%}">{%=file.name%}</span> ' +
'{% if (!file.error) { %}' + '{% if (!file.error) { %}' +
'<div class="ss-uploadfield-item-status ui-state-success-text" title="' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</div>' + '<div class="ss-uploadfield-item-status ui-state-success-text" title=""></div>' +
'{% } else { %}' + '{% } else { %}' +
'<div class="ss-uploadfield-item-status ui-state-error-text" title="{%=o.options.errorMessages[file.error] || file.error%}">{%=o.options.errorMessages[file.error] || file.error%}</div>' + '<div class="ss-uploadfield-item-status ui-state-error-text" title="{%=o.options.errorMessages[file.error] || file.error%}">{%=o.options.errorMessages[file.error] || file.error%}</div>' +
'{% } %}' + '{% } %}' +

5
javascript/UploadField_uploadtemplate.js
View File

@ -17,13 +17,12 @@ window.tmpl.cache['ss-uploadfield-uploadtemplate'] = tmpl(
'{% if (!file.error) { %}' + '{% if (!file.error) { %}' +
'<div class="ss-uploadfield-item-progress"><div class="ss-uploadfield-item-progressbar"><div class="ss-uploadfield-item-progressbarvalue"></div></div></div>' + '<div class="ss-uploadfield-item-progress"><div class="ss-uploadfield-item-progressbar"><div class="ss-uploadfield-item-progressbarvalue"></div></div></div>' +
'{% if (!o.options.autoUpload) { %}' + '{% if (!o.options.autoUpload) { %}' +
'<div class="ss-uploadfield-item-start start"><button class="icon icon-16">' + ss.i18n._t('UploadField.START', 'Start') + '</button></div>' + '<div class="ss-uploadfield-item-start start"><button class="icon icon-16" data-icon="cross-circle" data-icon="navigation">' + ss.i18n._t('UploadField.START', 'Start') + '</button></div>' +
'{% } %}' + '{% } %}' +
'{% } %}' + '{% } %}' +
'<div class="ss-uploadfield-item-cancel cancel"><button class="icon icon-16">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' + '<div class="ss-uploadfield-item-cancel cancel"><button data-icon="cross-circle">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</li>' + '</li>' +
'{% } %}' '{% } %}'
); );

21
scss/AssetUploadField.scss
View File

@ -14,6 +14,7 @@
body.cms.ss-uploadfield-edit-iframe { body.cms.ss-uploadfield-edit-iframe {
padding: $grid-x*2; padding: $grid-x*2;
overflow: auto; overflow: auto;
span.readonly { span.readonly {
font-style:italic; font-style:italic;
color:lighten($color-text, 20%); color:lighten($color-text, 20%);
@ -33,7 +34,6 @@ body.cms.ss-uploadfield-edit-iframe {
padding: 0 0 7px; padding: 0 0 7px;
clear: both; clear: both;
} }
.field { .field {
border-bottom: 0; border-bottom: 0;
box-shadow:none; box-shadow:none;
@ -45,6 +45,7 @@ body.cms.ss-uploadfield-edit-iframe {
padding-bottom:5px; padding-bottom:5px;
height:50px; height:50px;
position:relative; position:relative;
.ss-ui-button { .ss-ui-button {
position:absolute; position:absolute;
bottom:0; bottom:0;
@ -54,12 +55,12 @@ body.cms.ss-uploadfield-edit-iframe {
@include box-shadow(none); @include box-shadow(none);
color: $color-text; color: $color-text;
@include ss-uploadfield-editButton; @include ss-uploadfield-editButton;
&.ss-uploadfield-item-edit-all { &.ss-uploadfield-item-edit-all {
@extend .ss-uploadfield-item-edit; @extend .ss-uploadfield-item-edit;
height:auto; height:auto;
} }
} }
.state{ .state{
font-size: 16px; font-size: 16px;
font-weight:bold; font-weight:bold;
@ -103,11 +104,13 @@ body.cms.ss-uploadfield-edit-iframe {
background-color: #c11f1d; background-color: #c11f1d;
padding-right:110px; padding-right:110px;
@include 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%)); @include 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%));
.ss-uploadfield-item-name { .ss-uploadfield-item-name {
width:100%; width:100%;
cursor:default; cursor:default;
background: darken($color-button-disabled,20%); //for browsers that don't support rgba background: darken($color-button-disabled,20%); //for browsers that don't support rgba
background: rgba(darken($color-button-disabled, 15%),0.9); background: rgba(darken($color-button-disabled, 15%),0.9);
.name { .name {
text-shadow: 0px 1px 0px rgba(#fff, 0.7); text-shadow: 0px 1px 0px rgba(#fff, 0.7);
} }
@ -145,6 +148,7 @@ body.cms.ss-uploadfield-edit-iframe {
//display:table, and table-layout:fixed allows us to use percentages with text-overflow //display:table, and table-layout:fixed allows us to use percentages with text-overflow
display:table; display:table;
table-layout:fixed; table-layout:fixed;
.name { .name {
text-shadow: 0px 1px 0px rgba(#fff, 0.5); text-shadow: 0px 1px 0px rgba(#fff, 0.5);
display:inline; display:inline;
@ -161,6 +165,7 @@ body.cms.ss-uploadfield-edit-iframe {
max-width:30%; max-width:30%;
@include hide-text-overflow; @include hide-text-overflow;
text-shadow: 0px 1px 0px rgba(#fff, 0.5); text-shadow: 0px 1px 0px rgba(#fff, 0.5);
&.ui-state-error-text { &.ui-state-error-text {
max-width:70%; max-width:70%;
position:absolute; position:absolute;
@ -176,7 +181,6 @@ body.cms.ss-uploadfield-edit-iframe {
} }
} }
} }
.ss-uploadfield-item-actions { .ss-uploadfield-item-actions {
position: absolute; position: absolute;
top: 0; top: 0;
@ -184,8 +188,6 @@ body.cms.ss-uploadfield-edit-iframe {
left: 0; left: 0;
z-index: 0; z-index: 0;
color: #f00; color: #f00;
} }
.ss-ui-button { .ss-ui-button {
background: none; background: none;
@ -238,6 +240,15 @@ body.cms.ss-uploadfield-edit-iframe {
height: 16px; height: 16px;
cursor: pointer; cursor: pointer;
@include single-box-shadow(none); @include single-box-shadow(none);
position: relative;
.ui-icon {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
} }
} }

13
scss/UploadField.scss
View File

@ -141,7 +141,20 @@
height: 16px; height: 16px;
cursor: pointer; cursor: pointer;
@include single-box-shadow(none); @include single-box-shadow(none);
background: none;
position: relative;
// background: sprite($sprites16, cross-circle) no-repeat; // background: sprite($sprites16, cross-circle) no-repeat;
span {
position: absolute;
left: 0;
top: 0;
margin: 0;
&.ui-button-text {
display: none;
}
}
} }
} }
.ss-uploadfield-item-start { .ss-uploadfield-item-start {