mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Merge pull request #436 from adrexia/sapphire
--- Add title text to all status messages Make room for the error message details by expanding the name area in the file details Fix up changes status to work with selects http://open.silverstripe.org/ticket/7295
This commit is contained in:
Ingo Schommer
commit
3fe743aa51
@ -41,14 +41,14 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
|
||||
.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; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
|
||||
.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%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; 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%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 110px; 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%); }
|
||||
.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); }
|
||||
.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); }
|
||||
.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%); }
|
||||
.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; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
|
||||
.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; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { 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); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
|
||||
.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); }
|
||||
.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; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
|
||||
|
||||
@ -288,12 +288,26 @@
|
||||
var disabled;
|
||||
var iframe = editform.find('iframe');
|
||||
var inputs = iframe.contents().find('.ss-uploadfield-edit-iframe input');
|
||||
var ulSelects =iframe.contents().find('.ss-uploadfield-edit-iframe .chzn-drop ul.chzn-results');
|
||||
|
||||
for(var i=0;i<inputs.length;i++){
|
||||
$(inputs[i]).change(function(){
|
||||
editform.removeClass('edited');
|
||||
editform.addClass('edited');
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
for(var i=0;i<ulSelects.length;i++){
|
||||
var current= $(ulSelects[i]).find('li.result-selected');
|
||||
$(ulSelects[i]).children('li').click(function(){
|
||||
if(this !== current[0]){
|
||||
editform.removeClass('edited');
|
||||
editform.addClass('edited');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (editform.hasClass('loading')) {
|
||||
// TODO Display loading indication, and register an event to toggle edit form
|
||||
} else {
|
||||
@ -339,11 +353,13 @@
|
||||
toggleEditForm: function() {
|
||||
var itemInfo = this.prev('.ss-uploadfield-item-info'), status = itemInfo.find('.ss-uploadfield-item-status');
|
||||
var iframe = this.find('iframe').contents(), saved=iframe.find('#Form_EditForm_error');
|
||||
|
||||
var text="";
|
||||
|
||||
if(this.height() === 0) {
|
||||
text = "Editing...";
|
||||
this.fitHeight();
|
||||
itemInfo.find('.toggle-details-icon').addClass('opened');
|
||||
status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text').text("Editing...");
|
||||
status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text');
|
||||
iframe.find('#Form_EditForm_action_doEdit').click(function(){
|
||||
itemInfo.find('label .name').text(iframe.find('#Name input').val());
|
||||
});
|
||||
@ -352,22 +368,26 @@
|
||||
}
|
||||
|
||||
} else {
|
||||
this.height(0);
|
||||
this.height(0);
|
||||
itemInfo.find('.toggle-details-icon').removeClass('opened');
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
|
||||
if(!this.hasClass('edited')){
|
||||
status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.NOCHANGES', 'No Changes'));
|
||||
text = ss.i18n._t('UploadField.NOCHANGES', 'No Changes')
|
||||
status.addClass('ui-state-success-text');
|
||||
}else{
|
||||
if(saved.hasClass('good')){
|
||||
text = ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Saved')
|
||||
this.removeClass('edited').parent('.ss-uploadfield-item').removeClass('ui-state-warning');
|
||||
status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Saved'));
|
||||
status.addClass('ui-state-success-text');
|
||||
}else{
|
||||
text = ss.i18n._t('UploadField.UNSAVEDCHANGES', 'Unsaved Changes')
|
||||
this.parent('.ss-uploadfield-item').addClass('ui-state-warning');
|
||||
status.addClass('ui-state-warning-text').text(ss.i18n._t('UploadField.UNSAVEDCHANGES', 'Unsaved Changes'));
|
||||
}
|
||||
status.addClass('ui-state-warning-text');
|
||||
}
|
||||
}
|
||||
saved.removeClass('good').hide();
|
||||
}
|
||||
status.attr('title',text).text(text);
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-editform iframe').entwine({
|
||||
|
||||
@ -6,11 +6,11 @@ window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
|
||||
'</span></div>' +
|
||||
'<div class="ss-uploadfield-item-info">' +
|
||||
'<label class="ss-uploadfield-item-name">' +
|
||||
'<span class="name">{%=file.name%}</span> ' +
|
||||
'<span class="name" title="{%=file.name%}">{%=file.name%}</span> ' +
|
||||
'{% if (!file.error) { %}' +
|
||||
'<div class="ss-uploadfield-item-status ui-state-success-text">Uploaded</div>' +
|
||||
'<div class="ss-uploadfield-item-status ui-state-success-text" title="Uploaded">Uploaded</div>' +
|
||||
'{% } else { %}' +
|
||||
'<div class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error].substring(0,25) || file.error.substring(0,25)%}</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>' +
|
||||
'{% } %}' +
|
||||
'<div class="clear"><!-- --></div>' +
|
||||
'</label>' +
|
||||
|
||||
@ -4,11 +4,12 @@ window.tmpl.cache['ss-uploadfield-uploadtemplate'] = tmpl(
|
||||
'<div class="ss-uploadfield-item-preview preview"><span></span></div>' +
|
||||
'<div class="ss-uploadfield-item-info">' +
|
||||
'<label class="ss-uploadfield-item-name">' +
|
||||
'<span class="name">{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}</span> ' +
|
||||
'<span class="name" title="{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}">' +
|
||||
'{% if (file.name) { %}{%=file.name%}{% } else { %}' + ss.i18n._t('UploadField.NOFILENAME', 'Untitled') + '{% } %}</span> ' +
|
||||
'{% if (!file.error) { %}' +
|
||||
'<div class="ss-uploadfield-item-status">0%</div>' +
|
||||
'{% } else { %}' +
|
||||
'<div class="ss-uploadfield-item-status ui-state-error-text">{%=o.options.errorMessages[file.error].substring(0,25) || file.error.substring(0,25)%}</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>' +
|
||||
'{% } %}' +
|
||||
'<div class="clear"><!-- --></div>' +
|
||||
'</label>' +
|
||||
|
||||
@ -101,8 +101,10 @@ body.cms.ss-uploadfield-edit-iframe {
|
||||
}
|
||||
.ui-state-error .ss-uploadfield-item-info {
|
||||
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{
|
||||
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);
|
||||
@ -153,12 +155,16 @@ body.cms.ss-uploadfield-edit-iframe {
|
||||
@include hide-text-overflow;
|
||||
}
|
||||
.ss-uploadfield-item-status {
|
||||
position:relative;
|
||||
float: right;
|
||||
padding: 0 0 0 5px;
|
||||
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;
|
||||
right:5px;
|
||||
text-shadow: 0px 1px 0px rgba(#fff, 0.6);
|
||||
color: darken($color-button-destructive, 10%);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user