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

Merge pull request #246 from jviereck/master

Browse source 
Move demo's options to the right, improve textmate theme
This commit is contained in:
Fabian Jakobs 2011-05-16 02:47:46 -07:00
commit 2e6abeae8a
4 changed files with 72 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() { function onResize() {
container.style.width = (document.documentElement.clientWidth) + "px"; container.style.width = (document.documentElement.clientWidth - 180) + "px";
container.style.height = (document.documentElement.clientHeight - 60 - 22) + "px"; container.style.height = (document.documentElement.clientHeight - 22) + "px";
env.editor.resize(); env.editor.resize();
}; };

11
demo/styles.css
View file

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

98
index.html
View file

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

1
lib/ace/theme/textmate.js
View file

@ -50,6 +50,7 @@ define(function(require, exports, module) {
.ace-tm .ace_gutter {\ .ace-tm .ace_gutter {\
width: 50px;\ width: 50px;\
background: #e8e8e8;\ background: #e8e8e8;\
border-right: 1px solid rgb(159, 159, 159); \
color: #333;\ color: #333;\
overflow : hidden;\ overflow : hidden;\
}\ }\