tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-06-24 13:39:36 +02:00
Code Issues Projects Releases Wiki Activity

IMPROVEMENT: image alignment options. ticket #1877

Browse Source 
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@69557 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Saophalkun Ponlu 2008-12-19 13:36:59 +00:00
parent a495e561d3
commit 299f67cdb3
6 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/layout.css
View File

@ -467,6 +467,7 @@ iframe {
#contentPanel #Dimensions div.middleColumn {
background: none;
}
/* Image height and width inputs. We need to position them in the right places */
#contentPanel input#Form_EditorToolbarImageForm_Width,
#contentPanel input#Form_EditorToolbarFlashForm_Width {
@ -527,6 +528,38 @@ iframe {
#contentPanel #Flash a.selectedFlash img {
border: 2px solid #222;
}
/* IMAGE ALIGNMENT in the right panel */
#ImageAligmentStyle {
clear: both;
padding-top: 8px;
}
#ImageAligmentStyle label{
display: block;
color: #666666;
}
#ImageAligmentStyle a {
float: left;
display: block;
width: 38px;
height: 47px;
text-indent: -9999em;
margin-top: 5px;
margin-right: 8px;
outline: none;
}
#ImageAligmentStyle a:hover {
background-position: 0px -47px;
}
#ImageAligmentStyle a.selected {
background-position: 0px -94px;
}
a#ImageAligmentStyle_left { background-image: url(../images/imagealignment_left.gif); }
a#ImageAligmentStyle_leftAlone { background-image: url(../images/imagealignment_leftalone.gif); }
a#ImageAligmentStyle_right { background-image: url(../images/imagealignment_right.gif); }
a#ImageAligmentStyle_center { background-image: url(../images/imagealignment_center.gif); }
/* going to use this */
#BlankImage {
text-indent: -9000px;

BIN
images/imagealignment_center.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/imagealignment_left.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/imagealignment_leftalone.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/imagealignment_right.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

17
javascript/TinyMCEImageEnhancement.js
View File

@ -17,6 +17,12 @@ TinyMCEImageEnhancement.prototype = {
Event.observe($('FolderOk'),'click',this.onFolderOk.bind(this));
Event.observe($('FolderCancel'),'click',this.onFolderCancel.bind(this));
Event.observe($('UploadFiles'),'click',this.onUpload.bind(this));
// Image alignment/style changing link
Event.observe($('ImageAligmentStyle_left'),'click',this.onChangeImageAlignmentStyle.bind(this));
Event.observe($('ImageAligmentStyle_leftAlone'),'click',this.onChangeImageAlignmentStyle.bind(this));
Event.observe($('ImageAligmentStyle_right'),'click',this.onChangeImageAlignmentStyle.bind(this));
Event.observe($('ImageAligmentStyle_center'),'click',this.onChangeImageAlignmentStyle.bind(this));
},
/**
@ -41,6 +47,17 @@ TinyMCEImageEnhancement.prototype = {
}
}
},
onChangeImageAlignmentStyle: function(event) {
Event.stop(event);
id = event.target.id ;
jQuery(event.target).siblings().removeClass('selected');
jQuery(event.target).addClass('selected');
// get alignment from id, e.g. ImageAlignment_center -> center
aligment = id.split('_')[1];
$('Form_EditorToolbarImageForm_CSSClass').value = aligment;
},
/**
* Called when user clicks "add folder" anchor.