From a9e2986121b827784ac398a1f3219b174556ce2a Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 19 Apr 2010 15:42:10 +0200 Subject: [PATCH] clean up CSS and make it more IE6 friendly --- css/editor.css | 83 ++-------------------------------------- css/tm.css | 86 ++++++++++++++++++++++++++++++++++++++++++ demo/editor.html | 18 +++++++-- src/Editor.js | 15 ++++---- src/VirtualRenderer.js | 18 +++++++++ 5 files changed, 130 insertions(+), 90 deletions(-) create mode 100644 css/tm.css diff --git a/css/editor.css b/css/editor.css index 79d7ac30..3676c327 100644 --- a/css/editor.css +++ b/css/editor.css @@ -1,116 +1,45 @@ .editor { position: absolute; - border: 2px solid rgb(159, 159, 159); overflow: hidden; } -.editor.focus { - border: 2px solid #327fbd;; -} - .scroller { position: absolute; - left: 50px; - right: 0; - bottom: 0; - top: 0; overflow-x: scroll; overflow-y: hidden; } .gutter { position: absolute; - width: 50px; - top: 0px; - bottom: 0px; overflow-x: scroll; overflow-y: hidden; - - background: rgb(227, 227, 227); - border-right: 1px solid rgb(159, 159, 159); - color: rgb(136, 136, 136); - font-family: Monaco, "Courier New"; - font-size: 12px; - - -webkit-box-sizing: border-box; - box-sizing: border-box; } .layer { position: absolute; overflow: hidden; white-space: nowrap; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.gutter-layer { - right: 0; - text-align: right; - padding-right: 10px; - -webkit-box-sizing: border-box; - box-sizing: border-box; } .text-layer { z-index: 2; font-family: Monaco, "Courier New", monospace; - font-size: 12px; cursor: text; } +.cursor-layer { + z-index: 3; +} + .cursor { z-index: 3; position: absolute; - width: 2px; - background: black; } .line { white-space: nowrap; } -.line .keyword { - color: blue; -} - -.line .buildin-constant { - color: rgb(88, 72, 246); -} - -.line .library-constant { - color: rgb(6, 150, 14); -} - -.line .buildin-function { - color: rgb(60, 76, 114); -} - -.line .string { - color: rgb(3, 106, 7); -} - -.line .comment { - font-style: italic; - color: rgb(76, 136, 107); -} - -.line .doc-comment { - color: rgb(0, 102, 255); -} - -.line .doc-comment-tag { - color: rgb(128, 159, 191); -} - -.line .number { - color: rgb(0, 0, 205); -} - -.line .xml_pe { - color: rgb(104, 104, 91); -} - .marker-layer { z-index: 1; } @@ -118,18 +47,14 @@ .marker-layer .selection { position: absolute; z-index: 2; - background: rgb(181, 213, 255); } .marker-layer .bracket { position: absolute; z-index: 3; - margin: -1px 0 0 -1px; - border: 1px solid rgb(192, 192, 192); } .marker-layer .active_line { position: absolute; z-index: 1; - background: rgb(232, 242, 254); } \ No newline at end of file diff --git a/css/tm.css b/css/tm.css new file mode 100644 index 00000000..b9d8dfd2 --- /dev/null +++ b/css/tm.css @@ -0,0 +1,86 @@ +.editor { + border: 2px solid rgb(159, 159, 159); +} + +.editor.focus { + border: 2px solid #327fbd;; +} + +.gutter { + width: 40px; + background: rgb(227, 227, 227); + border-right: 1px solid rgb(159, 159, 159); + color: rgb(136, 136, 136); + font-family: Monaco, "Courier New"; + font-size: 12px; +} + +.gutter-layer { + right: 10px; + text-align: right; +} + +.text-layer { + font-family: Monaco, "Courier New", monospace; + font-size: 12px; + cursor: text; +} + +.cursor { + width: 2px; + background: black; +} + +.line .keyword { + color: blue; +} + +.line .buildin-constant { + color: rgb(88, 72, 246); +} + +.line .library-constant { + color: rgb(6, 150, 14); +} + +.line .buildin-function { + color: rgb(60, 76, 114); +} + +.line .string { + color: rgb(3, 106, 7); +} + +.line .comment { + font-style: italic; + color: rgb(76, 136, 107); +} + +.line .doc-comment { + color: rgb(0, 102, 255); +} + +.line .doc-comment-tag { + color: rgb(128, 159, 191); +} + +.line .number { + color: rgb(0, 0, 205); +} + +.line .xml_pe { + color: rgb(104, 104, 91); +} + +.marker-layer .selection { + background: rgb(181, 213, 255); +} + +.marker-layer .bracket { + margin: -1px 0 0 -1px; + border: 1px solid rgb(192, 192, 192); +} + +.marker-layer .active_line { + background: rgb(232, 242, 254); +} \ No newline at end of file diff --git a/demo/editor.html b/demo/editor.html index 7b5e060e..0a05bf0f 100644 --- a/demo/editor.html +++ b/demo/editor.html @@ -9,16 +9,20 @@ + @@ -124,10 +129,15 @@ var editor = new ace.Editor( getMode() ); -window.onresize = function() { - editor.resize(); +function onResize() { + container.style.width = (document.documentElement.clientWidth - 4) + "px"; + container.style.height = (document.documentElement.clientHeight - 30 - 4) + "px"; + editor.resize(); }; +window.onresize = onResize; +onResize(); + ace.addListener(container, "dragover", function(e) { return ace.preventDefault(e); }); diff --git a/src/Editor.js b/src/Editor.js index 044293b9..496375c3 100644 --- a/src/Editor.js +++ b/src/Editor.js @@ -82,10 +82,8 @@ ace.Editor.prototype.setMode = function(mode) { }; -ace.Editor.prototype.resize = function() -{ - this.renderer.scrollToY(this.renderer.getScrollTop()); - this.renderer.draw(); +ace.Editor.prototype.resize = function() { + this.renderer.onResize(); }; ace.Editor.prototype._highlightBrackets = function() { @@ -190,7 +188,10 @@ ace.Editor.prototype.onSelectionChange = function() { ace.Editor.prototype.onMouseDown = function(e) { this.textInput.focus(); - var pos = this.renderer.screenToTextCoordinates(e.pageX, e.pageY); + var pageX = ace.getDocumentX(e); + var pageY = ace.getDocumentY(e); + + var pos = this.renderer.screenToTextCoordinates(pageX, pageY); this.moveCursorToPosition(pos); this.selection.setSelectionAnchor(pos.row, pos.column); this.renderer.scrollCursorIntoView(); @@ -199,8 +200,8 @@ ace.Editor.prototype.onMouseDown = function(e) { var mousePageX, mousePageY; var onMouseSelection = function(e) { - mousePageX = e.pageX; - mousePageY = e.pageY; + mousePageX = ace.getDocumentX(e); + mousePageY = ace.getDocumentY(e); }; var onMouseSelectionEnd = function() { diff --git a/src/VirtualRenderer.js b/src/VirtualRenderer.js index 7f9b6cd9..0c421b1c 100644 --- a/src/VirtualRenderer.js +++ b/src/VirtualRenderer.js @@ -31,6 +31,8 @@ ace.VirtualRenderer = function(container) { row : 0, column : 0 }; + + this.onResize(); }; ace.VirtualRenderer.prototype.setDocument = function(doc) { @@ -56,6 +58,22 @@ ace.VirtualRenderer.prototype.getLastVisibleRow = function() { return this.layerConfig.lastRow || 0; }; +ace.VirtualRenderer.prototype.onResize = function() +{ + var height = ace.getInnerHeight(this.container); + this.gutter.style.height = height + "px"; + this.scroller.style.height = height + "px"; + + var width = ace.getInnerWidth(this.container); + var gutterWidth = this.gutter.offsetWidth; + this.scroller.style.left = gutterWidth + "px"; + this.scroller.style.width = Math.max(0, width - gutterWidth) + "px"; + + if (this.doc) { + this.scrollToY(this.getScrollTop()); + } +}; + ace.VirtualRenderer.prototype.updateLines = function(firstRow, lastRow) { var layerConfig = this.layerConfig;