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

* added gutter shadow as horizontal scrolling indicator

Browse source
This commit is contained in:
Ruben Daniels 2012-04-08 11:49:45 +02:00
commit f7be320575
2 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
lib/ace/css/editor.css
View file

@ -1,6 +1,5 @@
@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono); @import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
.ace_editor { .ace_editor {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
@ -29,12 +28,31 @@
z-index: 4; z-index: 4;
} }
.ace_corner{
position : absolute;
left : 41px;
top : -5px;
border-radius : 6px 0 0 0;
border-color : #e8e8e8;
border-width : 1px 0 0 1px;
border-style : solid;
box-shadow : 4px 4px 0px #e8e8e8 inset;
width : 10px;
height : 10px;
z-index : 10000;
}
.ace_gutter { .ace_gutter {
position: absolute; position: absolute;
overflow : hidden; overflow : hidden;
height: 100%; height: 100%;
width: auto; width: auto;
cursor: default; cursor: default;
z-index: 1000;
}
.ace_gutter.horscroll {
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
} }
.ace_gutter-cell { .ace_gutter-cell {

11
lib/ace/virtual_renderer.js
View file

@ -74,6 +74,10 @@ var VirtualRenderer = function(container, theme) {
this.$gutter = dom.createElement("div"); this.$gutter = dom.createElement("div");
this.$gutter.className = "ace_gutter"; this.$gutter.className = "ace_gutter";
this.container.appendChild(this.$gutter); this.container.appendChild(this.$gutter);
this.$corner = dom.createElement("div");
this.$corner.className = "ace_corner";
this.container.appendChild(this.$corner);
this.scroller = dom.createElement("div"); this.scroller = dom.createElement("div");
this.scroller.className = "ace_scroller"; this.scroller.className = "ace_scroller";
@ -117,6 +121,13 @@ var VirtualRenderer = function(container, theme) {
var scrollLeft = _self.scroller.scrollLeft; var scrollLeft = _self.scroller.scrollLeft;
_self.scrollLeft = scrollLeft; _self.scrollLeft = scrollLeft;
_self.session.setScrollLeft(scrollLeft); _self.session.setScrollLeft(scrollLeft);
if (scrollLeft == 0) {
_self.$gutter.className = "ace_gutter";
}
else {
_self.$gutter.className = "ace_gutter horscroll";
}
}); });
this.cursorPos = { this.cursorPos = {