* added gutter shadow as horizontal scrolling indicator

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

View file

@ -1,6 +1,5 @@
@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
.ace_editor {
position: absolute;
overflow: hidden;
@ -29,12 +28,31 @@
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 {
position: absolute;
overflow : hidden;
height: 100%;
width: auto;
cursor: default;
z-index: 1000;
}
.ace_gutter.horscroll {
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
.ace_gutter-cell {

View file

@ -74,6 +74,10 @@ var VirtualRenderer = function(container, theme) {
this.$gutter = dom.createElement("div");
this.$gutter.className = "ace_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.className = "ace_scroller";
@ -117,6 +121,13 @@ var VirtualRenderer = function(container, theme) {
var scrollLeft = _self.scroller.scrollLeft;
_self.scrollLeft = scrollLeft;
_self.session.setScrollLeft(scrollLeft);
if (scrollLeft == 0) {
_self.$gutter.className = "ace_gutter";
}
else {
_self.$gutter.className = "ace_gutter horscroll";
}
});
this.cursorPos = {