Definitive styles to the Grid Wizard feature for TinyMCE

This commit is contained in:
Gustavo Cruz
2012-12-06 12:16:39 -04:00
parent bc29b14328
commit 758528ba9a
3 changed files with 23 additions and 25 deletions

View File

@@ -17,7 +17,7 @@ and open the template in the editor.
body { body {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 45%; left: 35%;
margin-left: -70px; margin-left: -70px;
} }
.container { .container {
@@ -41,35 +41,33 @@ and open the template in the editor.
Chose a grid     Chose a grid    
</div> </div>
<div class="middle"> <div class="middle">
<div id="gridDropdown"> <select id="gridList">
<select id="gridList">
</select>
</select>
</div>
</div> </div>
</div> </div>
<br> <br>
<div class="row"> <div class="row">
<div class="middle"> <div class="left">
Prefix&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Prefix&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div> </div>
<div class="right"> <div class="middle">
<div id="prefixDropdown"> <select name="prefixList" id="prefixList">
<select name="prefixList" id="prefixList"> <option value="@#">@#</option>
<option value="@#">@#</option> <option value="@@">@@</option>
<option value="@@">@@</option> </select>
</select>
</div>
</div> </div>
</div> </div>
<br> <br>
<div class="row"> <div class="row">
<div class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="middle"> <div class="middle">
<input type="checkbox" id="borderCheckbox"> Border <input type="checkbox" id="borderCheckbox"> Border
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="middle"> <div class="middle">
<input type="checkbox" id="headersCheckbox"> Headers <input type="checkbox" id="headersCheckbox"> Headers
</div> </div>
@@ -82,10 +80,10 @@ and open the template in the editor.
</table> </table>
<br> <br>
<div align="center"> <div align="center">
<button id="addButton" style="width: 100px"> <button id="insert">
Add Add
</button> </button>
<button id="cancelButton" style="width: 100px"> <button id="cancel">
Cancel Cancel
</button> </button>
</div> </div>

View File

@@ -63,7 +63,7 @@ $(document).ready(function () {
} }
var insertFormatedGrid = function(){ var insertFormatedGrid = function(){
var gridName = $("#gridList").val(); var gridName = $("#gridList option:selected").text();
var tableCode = "<table>" var tableCode = "<table>"
var gridCode = "<!--"+gridName+"@>-->"; var gridCode = "<!--"+gridName+"@>-->";
var headerCode = "<tr>"; var headerCode = "<tr>";
@@ -81,19 +81,19 @@ $(document).ready(function () {
headerCode = ''; headerCode = '';
} }
gridCode += headerCode+fieldCode+"<!--@<"+gridName+"-->"; gridCode += headerCode+fieldCode+"<!--@<"+gridName+"-->";
tableCode += gridCode+"</table>" tableCode += gridCode+"</table>";
updateEditorContent (tableCode); updateEditorContent(tableCode);
} }
$('#gridList').change(function(){ $('#gridList').change(function(){
getGridFieldList($(this).val()); getGridFieldList($(this).val());
}); });
$('#addButton').click(function(){ $('#insert').click(function(){
insertFormatedGrid(); insertFormatedGrid();
}); });
$('#cancelButton').click(function(){ $('#cancel').click(function(){
closePluginPopup(); closePluginPopup();
}); });

View File

@@ -192,10 +192,10 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
theme_advanced_buttons3_add : "fullpage", theme_advanced_buttons3_add : "fullpage",
popup_css : "/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css", popup_css : "/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css",
handle_event_callback : function(e) { handle_event_callback : function(e) {
if(this.isDirty()) { if(this.isDirty()) {
this.save(); this.save();
} }
return true; return true;
} }
}); });
'; ';