diff --git a/mcserver-manager/src/main/resources/components.js b/mcserver-manager/src/main/resources/components.js index 70bb06f..5e9e803 100644 --- a/mcserver-manager/src/main/resources/components.js +++ b/mcserver-manager/src/main/resources/components.js @@ -81,10 +81,17 @@ var ScrollingContent = React.createClass({ this.ownHeight = this.refs.content.clientHeight; this.scrollRatio = this.ownHeight / this.totalHeight; if (isNaN(this.scrollRatio)) this.scrollRatio = 0; + this.refs.scroll.style.height = this.scrollRatio * 100 + "%"; + this.refs.scroll.style.top = (this.refs.content.scrollTop / this.totalHeight) * 100 + "%"; }, + toggleSelect: function (value, event) { return value; }, handleScrollMouseDown: function (event) { this.lastPageY = event.pageY; + document.body.classList.add('scroll-grabbed'); + this.refs.scroll.classList.add('scroll-grabbed'); + + document.onselectstart = this.toggleSelect.bind(null, false); document.addEventListener('mousemove', this.handleScrollMouseMove); document.addEventListener('mouseup', this.handleScrollMouseUp); }, @@ -99,6 +106,10 @@ var ScrollingContent = React.createClass({ }); }, handleScrollMouseUp: function (event) { + document.body.classList.remove('scroll-grabbed'); + this.refs.scroll.classList.remove('scroll-grabbed'); + + document.onselectstart = this.toggleSelect.bind(null, true); document.removeEventListener('mousemove', this.handleScrollMouseMove); document.removeEventListener('mouseup', this.handleScrollMouseUp); }, diff --git a/mcserver-manager/src/main/resources/moduleStyle.css b/mcserver-manager/src/main/resources/moduleStyle.css index b3f7b82..063e814 100644 --- a/mcserver-manager/src/main/resources/moduleStyle.css +++ b/mcserver-manager/src/main/resources/moduleStyle.css @@ -36,6 +36,12 @@ right: 0; } +.scroll-grabbed, +.scroll-grabbed * { + cursor: -webkit-grabbing !important; + cursor: -moz-grabbing !important; +} + #webconsole input { background-color: #1e1e1e; background-image: url('data:image/svg+xml;utf-8,>');