jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move options from the top to the left side in the demo.

Browse source
This commit is contained in:
Julian Viereck 2011-05-15 13:44:36 +02:00
commit 71364a8497
3 changed files with 71 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

4
demo/demo.js
View file

@ -336,8 +336,8 @@ exports.launch = function(env) {
}
function onResize() {
container.style.width = (document.documentElement.clientWidth) + "px";
container.style.height = (document.documentElement.clientHeight - 60 - 22) + "px";
container.style.width = (document.documentElement.clientWidth - 180) + "px";
container.style.height = (document.documentElement.clientHeight - 22) + "px";
env.editor.resize();
};

11
demo/styles.css
View file

@ -17,18 +17,21 @@ body {
#editor {
position: absolute;
top: 60px;
left: 0px;
top: 0px;
left: 180px;
bottom: 0px;
right: 0px;
background: white;
}
#controls {
width: 100%;
padding: 5px;
}
#cockpitInput {
position: absolute;
width: 100%;
left: 180px;
right: 0px;
bottom: 0;
border: none; outline: none;

98
index.html
View file

@ -10,29 +10,36 @@
</head>
<body>
<table id="controls">
<tr>
<td align="right">
<tr>
<td >
<img src="demo/logo.png">
</td>
</tr>
<tr>
<td >
<label for="doc">Document:</label>
<select id="doc" size="1">
<option value="js">JavaScript Document</option>
<option value="plain">Text Document</option>
<option value="svg">SVG Document</option>
<option value="html">HTML Document</option>
<option value="css">CSS Document</option>
<option value="coffee">CoffeeScript Document</option>
<option value="python">Python Document</option>
<option value="ruby">Ruby Document</option>
<option value="perl">Perl Document</option>
<option value="php">PHP Document</option>
<option value="java">Java Document</option>
<option value="csharp">C# Document</option>
<option value="c_cpp">C++ Document</option>
<option value="svg">SVG Document</option>
<option value="ocaml">OCaml Document</option>
<option value="textile">Textile Document</option>
<option value="js">JavaScript</option>
<option value="plain">Plain Text</option>
<option value="svg">SVG</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="coffee">CoffeeScript</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="perl">Perl</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="c_cpp">C++</option>
<option value="svg">SVG</option>
<option value="ocaml">OCaml</option>
<option value="textile">Textile</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="theme">Theme:</label>
<select id="theme" size="1">
<option value="ace/theme/textmate">TextMate</option>
@ -53,7 +60,9 @@
<option value="ace/theme/solarized_light">Solarized Light</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="fontsize">Font Size:</label>
<select id="fontsize" size="1">
<option value="10px">10px</option>
@ -65,28 +74,33 @@
<option value="24px">24px</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="select_style">Full Line Selection</label>
<input type="checkbox" name="select_style" id="select_style" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="highlight_active">Highlight Active Line</label>
<input type="checkbox" name="highlight_active" id="highlight_active" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="show_hidden">Show Invisibles</label>
<input type="checkbox" name="show_hidden" id="show_hidden" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="show_hscroll">Persistent HScroll</label>
<input type="checkbox" name="show_hscroll" id="show_hscroll">
</td>
<td align="right" rowspan="2">
<img src="demo/logo.png">
</td>
</tr>
<tr>
<td align="right">
</tr>
<tr>
<td >
<label for="mode">Mode:</label>
<select id="mode" size="1">
<option value="text">Plain Text</option>
@ -107,7 +121,9 @@
<option value="textile">Textile</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="keybinding">Key Binding:</label>
<select id="keybinding" size="1">
<option value="ace">Ace</option>
@ -116,7 +132,9 @@
<option value="custom">Custom</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="soft_wrap">Soft Wrap:</label>
<select id="soft_wrap" size="1">
<option value="off">Off</option>
@ -125,19 +143,27 @@
<option value="free">Free</option>
</select>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="show_gutter">Show Gutter</label>
<input type="checkbox" id="show_gutter" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="show_print_margin">Show Print Margin</label>
<input type="checkbox" id="show_print_margin" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="soft_tab">Use Soft Tab:</label>
<input type="checkbox" id="soft_tab" checked>
</td>
<td align="right">
</tr>
<tr>
<td >
<label for="highlight_selected_word">Highlight selected word</label>
<input type="checkbox" id="highlight_selected_word" checked>
</td>