Permalink
Browse files

ENHANCEMENT: File/Image UI fixes

* Replaced cancel/delete button in files area
* Consolidated Image upload styles with AssetUpload styles
* Changed name of step 2 in image upload
* Made image editing hidden by default, so multiple files can be seen,
and added ability top open and close
* Tweaked styles in on page upload field (status colour and file name
width)
  • Loading branch information...
1 parent 7968013 commit 28e43bdc8880704364b76c09b7b008a4132a8abf @adrexia adrexia committed with sminnee May 22, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1450,61 +1450,7 @@ body.cms-dialog {
.ss-uploadfield-editandorganize {
display: none;
- }
-
- // TODO Consolidate with .assetuploadfield and .ss-uploadfield styles
- .ss-htmleditorfield-file {
- border: 1px solid lighten($color-medium-separator, 20%);
- @include border-radius(5px);
- @include background-clip(padding-box);
- background: #E2E2E2;
- margin-bottom: $grid-x*2;
-
- &.loading {
- width: 100%;
- height: 100px;
- background-image: url(../images/spinner.gif);
- background-position: 50% 50%;
- background-repeat: no-repeat;
- }
-
- .overview {
- background-color: #5db4df;
- @include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%));
-
- .thumbnail {
- display: inline-block;
- vertical-align: middle;
- padding: $grid-x/2;
-
- img {
- max-height: $grid-x*3;
- }
- }
-
- .title {
- display: inline-block;
- vertical-align: middle;
- background: #fff;
- border: 1px solid lighten($color-medium-separator, 20%);
- @include border-radius(5px);
- margin-left: $grid-x*2;
- padding: $grid-x/2;
- }
-
- .action-delete {
- float:right;
- padding:$grid-x;
- background:none;
- border:none;
- }
- }
-
- .details {
- padding: $grid-x*2;
- }
- }
-
+ }
}
/** --------------------------------------------
@@ -1633,7 +1579,7 @@ form.small {
span.btn-icon-download-csv {
height:17px; //exact height of icon
}
- span.ui-button-text {
+ .ui-button-text {
padding-left:26px; //to accomodate wider export icon
}
}
@@ -1804,7 +1750,7 @@ form.import-form {
/** --------------------------------------------
* Buttons for FileUpload
* -------------------------------------------- */
-span.toggle-details{
+.toggle-details{
.toggle-details-icon {
background: sprite($sprites32, menu-arrow-down) no-repeat;
.fileOverview &{
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -425,18 +425,28 @@ function MediaForm() {
$allFields = new CompositeField(
$tabSet,
- new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
+ new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.ADJUSTDETAILSDIMENSIONS', 'Details &amp; dimensions')) . '</h4>'),
$editComposite = new CompositeField(
- new LiteralField('contentEdit', '<div class="content-edit"></div>')
- )
+ new LiteralField('contentEdit', '<div class="content-edit ss-uploadfield-files files"></div>')
+
+ )
);
- $fields = new FieldList(
+ $allFields -> addExtraClass('ss-insert-media');
+
@halkyon

halkyon May 28, 2012

Owner

Don't put spaces around "->", we don't do this anywhere else in the framework.
Spaces around concatenation, e.g. "$var . $var2" is fine, though.

I'll fix this up this time, but it's a warning for the future. :P

+ $headings = new CompositeField(
new LiteralField(
'Heading',
sprintf('<h3 class="htmleditorfield-mediaform-heading insert">%s</h3>', _t('HtmlEditorField.INSERTMEDIA', 'Insert Media')).
sprintf('<h3 class="htmleditorfield-mediaform-heading update">%s</h3>', _t('HtmlEditorField.UpdateMEDIA', 'Update Media'))
- ),
+ )
+ );
+
+ $headings->addExtraClass('cms-content-header');
+ $editComposite->addExtraClass('ss-assetuploadfield');
+
+ $fields = new FieldList(
+ $headings,
$allFields
);
@@ -676,22 +676,21 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
var updateExisting = Boolean(this.find('.ss-htmleditorfield-file').length);
this.find('.overview .action-delete')[updateExisting ? 'hide' : 'show']();
},
- onsubmit: function() {
+ onsubmit: function() {
var self = this, ed = this.getEditor();
// HACK: See ondialogopen()
// jQuery(ed.getContainer()).show();
-
-
- this.find('.ss-htmleditorfield-file').each(function(el) {
+
+ this.find('.ss-htmleditorfield-file').each(function() {
$(this).insertHTML();
});
ed.repaint();
this.getDialog().close();
return false;
},
- updateFromEditor: function() {
+ updateFromEditor: function() {
var self = this, ed = this.getEditor(), node = $(ed.getSelectedNode());
// TODO Depends on managed mime type
if(node.is('img')) {
@@ -705,6 +704,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
},
redraw: function() {
this._super();
+
var ed = this.getEditor(), node = $(ed.getSelectedNode()),
hasItems = Boolean(this.find('.ss-htmleditorfield-file').length),
editingSelected = node.is('img'),
@@ -714,9 +714,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
if(header) header[(hasItems) ? 'show' : 'hide']();
// Disable "insert" button if no files are selected
- this.find('.Actions :submit')
+ this.find('.Actions :submit')
.button(hasItems ? 'enable' : 'disable')
- .toggleClass('ui-state-disabled', !hasItems);
+ .toggleClass('ui-state-disabled', !hasItems);
+
// Hide file selection and step labels when editing an existing file
this.find('#MediaFormInsertImageTabs,.header-edit')[editingSelected ? 'hide' : 'show']();
@@ -727,7 +728,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
this.find('.htmleditorfield-mediaform-heading.update')[updateExisting ? 'show' : 'hide']();
this.find('.Actions .media-update')[updateExisting ? 'show' : 'hide']();
},
- resetFields: function() {
+ resetFields: function() {
var ed = this.getEditor(), node = $(ed.getSelectedNode());
// HACK: See ondialogopen()
@@ -794,7 +795,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
//get the uploaded file ID when this event triggers, signaling the upload has compeleted successfully
editFieldIDs.push($(this).data('id'));
});
- var uploadedFiles = $('ul.ss-uploadfield-files').children('li.ss-uploadfield-item');
+ var uploadedFiles = $('.ss-uploadfield-files').children('.ss-uploadfield-item');
uploadedFiles.each(function(){
var uploadedID = $(this).data('fileid');
if ($.inArray(uploadedID, editFieldIDs) == -1) {
@@ -848,8 +849,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
* Insert updated HTML content into the rich text editor
*/
insertHTML: function() {
- var form = this.closest('form'), ed = form.getEditor();
-
+
+ var ed = this.getEditor();
@halkyon

halkyon May 28, 2012

Owner

This has broken the media insertion :( ... what's the reason to change this to this.getEditor()? it's undefined at this point.

What was already there works fine.

+
// Workaround for browsers losing focus, similar to tinyMCEPopup.restoreSelection
ed.moveToBookmark(window._ss_htmleditorfield_bookmark);
window._ss_htmleditorfield_bookmark = null;
@@ -926,7 +928,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
extraData = this.getExtraData(),
// imgEl = $('<img id="_ss_tmp_img" />');
imgEl = $('<img />').attr(attrs);
-
+
if(extraData.CaptionText) {
el = $('<div style="width: ' + attrs['width'] + 'px;" class="captionImage ' + attrs['class'] + '"><p class="caption">' + extraData.CaptionText + '</p></div>').prepend(imgEl);
} else {
@@ -938,8 +940,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
* Logic similar to TinyMCE 'advimage' plugin, insertAndClose() method.
*/
insertHTML: function() {
- var form = this.closest('form'), ed = form.getEditor(),
- node = $(ed.getSelectedNode()), captionNode = node.closest('.captionImage');
+ var form = this.closest('.cms').find('.cms-container textarea.htmleditor'), ed = form.getEditor(),
@halkyon

halkyon May 28, 2012

Owner

I don't see why this change is required.

+ node = $(ed.getSelectedNode()), captionNode = node.closest('.captionImage');
// Workaround for browsers losing focus, similar to tinyMCEPopup.restoreSelection.
// TODO In TinyMCE core this is restricted to IE, but leaving it our also
@@ -1088,16 +1090,66 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
/**
* Deselect item and remove the 'edit' view
*/
- $('form.htmleditorfield-mediaform .ss-htmleditorfield-file .action-delete').entwine({
+ $('form.htmleditorfield-mediaform .ss-uploadfield-item .ss-uploadfield-item-cancel').entwine({
onclick: function(e) {
- var form = this.closest('form'), file = this.closest('.ss-htmleditorfield-file');
+ var form = this.closest('form'), file = this.closest('ss-uploadfield-item');
form.find('.ss-gridfield-item[data-id=' + file.data('id') + ']').removeClass('ui-selected');
- this.closest('.ss-htmleditorfield-file').remove();
+ this.closest('.ss-uploadfield-item').remove();
form.redraw();
e.preventDefault();
}
});
+ $('div.ss-assetuploadfield .ss-uploadfield-item-edit, div.ss-assetuploadfield .ss-uploadfield-item-name').entwine({
+ onclick: function(e) {
+ var editForm = this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform');
+
+ // Mark the row as changed if any of its form fields are edited
+ editForm.ready(function() {
+ editForm.find(':input').bind('change', function(e){
+ editForm.removeClass('edited'); //so edited class is only there once
+ editForm.addClass('edited');
+ });
+ });
+
+ editForm.parent('.ss-uploadfield-item').removeClass('ui-state-warning');
+
+ editForm.toggleEditForm();
+
+ e.preventDefault(); // Avoid a form submit
+
+ return false; // Avoid duplication from button
+ }
+ });
+
+ $('div.ss-assetuploadfield .ss-uploadfield-item-editform').entwine({
+ toggleEditForm: function() {
+ var itemInfo = this.prev('.ss-uploadfield-item-info'), status = itemInfo.find('.ss-uploadfield-item-status');
+ var text="";
+
+ if(this.height() === 0) {
+ text = ss.i18n._t('UploadField.Editing', "Editing ...");
+ this.height('auto');
+ itemInfo.find('.toggle-details-icon').addClass('opened');
+ status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text');
+ } else {
+ this.height(0);
+ itemInfo.find('.toggle-details-icon').removeClass('opened');
+ if(!this.hasClass('edited')){
+ text = ss.i18n._t('UploadField.NOCHANGES', 'No Changes')
+ status.addClass('ui-state-success-text');
+ }else{
+ text = ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Made')
+ this.removeClass('edited');
+ status.addClass('ui-state-success-text');
+ }
+
+ }
+ status.attr('title',text).text(text);
+ }
+ });
+
+
$('form.htmleditorfield-mediaform #ParentID .TreeDropdownField').entwine({
onmatch: function() {
this._super();
@@ -38,7 +38,6 @@
//Fixes case where someone uploads a single erroring file
if(data.files.length == 1 && data.files[0].error !== null){
- $('.ss-uploadfield-editandorganize').show();
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UploadField.UPLOADFAIL', 'Sorry your upload failed'));
}else{
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress'));//.show();
@@ -20,7 +20,7 @@ window.tmpl.cache['ss-uploadfield-uploadtemplate'] = tmpl(
'<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 data-icon="cross-circle">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' +
+ '<div class="ss-uploadfield-item-cancel cancel"><button data-icon="deleteLight" class="ss-uploadfield-item-cancel" title="' + ss.i18n._t('UploadField.CANCELREMOVE', 'Cancel/Remove') + '">' + ss.i18n._t('UploadField.CANCEL', 'Cancel') + '</button></div>' +
'</div>' +
'</div>' +
'</li>' +
Oops, something went wrong.

0 comments on commit 28e43bd

Please sign in to comment.