github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use cleaner scrolling system that doesn't involve hiding a scroll bar

Browse source
This commit is contained in:
James Allen 2016-11-17 10:24:48 +00:00
parent 70bf0be6dd
commit a87ed88a53
2 changed files with 11 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee
View file

@ -99,8 +99,11 @@ define [
# noticeable, but keeps it perfectly in step with Ace. # noticeable, but keeps it perfectly in step with Ace.
ace.require("ace/lib/event").addMouseWheelListener scroller[0], (e) -> ace.require("ace/lib/event").addMouseWheelListener scroller[0], (e) ->
deltaY = e.wheelY deltaY = e.wheelY
# console.log "mousewheel", deltaY old_top = parseInt(list.css("top"))
scroller.scrollTop(scroller.scrollTop() + deltaY * 4) top = Math.min(0, old_top - deltaY * 4)
console.log {old_top, top}
list.css(top: top)
scrollAce(-top)
e.preventDefault() e.preventDefault()
# Use these to avoid unnecessary updates. Scrolling one # Use these to avoid unnecessary updates. Scrolling one
@ -115,15 +118,15 @@ define [
else else
ignoreNextPanelEvent = true ignoreNextPanelEvent = true
list.height(height) list.height(height)
scroller.scrollTop(scrollTop) # console.log({height, scrollTop, top: height - scrollTop})
list.css(top: - scrollTop)
scrollAce = (e) -> scrollAce = (scrollTop) ->
if ignoreNextPanelEvent if ignoreNextPanelEvent
ignoreNextPanelEvent = false ignoreNextPanelEvent = false
else else
ignoreNextAceEvent = true ignoreNextAceEvent = true
scope.scrollBindings.reviewPanelEvents.emit "scroll", e.target.scrollTop scope.scrollBindings.reviewPanelEvents.emit "scroll", scrollTop
scroller.on "scroll", scrollAce
scope.scrollBindings.onAceScroll = scrollPanel scope.scrollBindings.onAceScroll = scrollPanel
} }

11
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -24,9 +24,6 @@
@review-panel-width : 230px; @review-panel-width : 230px;
@review-off-width : 22px; @review-off-width : 22px;
@rp-scroller-offset : 30px;
.triangle(@_, @width, @height, @color) { .triangle(@_, @width, @height, @color) {
position: absolute; position: absolute;
border-color: transparent; border-color: transparent;
@ -70,7 +67,6 @@
border-left: solid 1px @rp-border-grey; border-left: solid 1px @rp-border-grey;
font-size: @rp-base-font-size; font-size: @rp-base-font-size;
color: @rp-type-blue; color: @rp-type-blue;
overflow: hidden; // Stop inner hidden scroll bar showing
} }
.review-panel-toolbar { .review-panel-toolbar {
@ -88,10 +84,7 @@
} }
.rp-entry-list { .rp-entry-list {
// TODO: Use a more cross-browser method of hiding the scroll bar width: @review-off-width;
width: @review-off-width + @rp-scroller-offset;
padding-right: @rp-scroller-offset;
overflow-y: scroll;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -448,7 +441,7 @@
} }
.rp-entry-list { .rp-entry-list {
width: @review-panel-width + @rp-scroller-offset; width: @review-panel-width;
} }
.rp-entry { .rp-entry {