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

Merge pull request #440 from Zauberfisch/sapphire

Browse Source 
---

fixed missing cancel icon in UploadField cancel button
This commit is contained in:
Ingo Schommer 2012-05-14 15:15:51 +02:00
commit ce3b2fc3af
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-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 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 iframe { width: 100%; }
.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-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; }
.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-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%; }

2
javascript/UploadField_downloadtemplate.js
View File

@ -8,7 +8,7 @@ window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
'<label class="ss-uploadfield-item-name">' +
'<span class="name" title="{%=file.name%}">{%=file.name%}</span> ' +
'{% 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 { %}' +
'<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) { %}' +
'<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) { %}' +
'<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="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>' +
'</li>' +
'{% } %}'
);

27
scss/AssetUploadField.scss
View File

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