Merge pull request #61 from jerone/features/scroll-gutter

Show gutter shadow on vertical scrolling
atom-community · Jun 8, 2015 · d8a6dde · d8a6dde
2 parents 9c9d884 + 67e2d89
commit d8a6dde
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/lib/tool-bar-view.coffee b/lib/tool-bar-view.coffee
@@ -19,13 +19,15 @@ module.exports = class ToolBarView extends View
     newElement = atom.views.getView newItem
     nextElement = atom.views.getView nextItem
     @.element.insertBefore newElement, nextElement
+    @drawGutter()
     nextItem
 
   removeItem: (item) ->
     index = @items.indexOf item
     @items.splice index, 1
     element = atom.views.getView item
     @.element.removeChild element
+    @drawGutter()
 
   initialize: ->
     @subscriptions = new CompositeDisposable
@@ -56,12 +58,16 @@ module.exports = class ToolBarView extends View
     if atom.config.get 'tool-bar.visible'
       @show()
 
+    @.element.addEventListener 'scroll', @drawGutter
+    window.addEventListener 'resize', @drawGutter
+
   serialize: ->
 
   destroy: ->
     @subscriptions.dispose()
     @detach() if @panel?
     @panel.destroy() if @panel?
+    window.removeEventListener 'resize', @drawGutter
 
   updateSize: (size) ->
     @removeClass 'tool-bar-16px tool-bar-24px tool-bar-32px'
@@ -84,13 +90,26 @@ module.exports = class ToolBarView extends View
 
     @updateMenu position
 
+    @drawGutter()
+
   updateMenu: (position) ->
     packagesMenu = _.find(atom.menu.template, ({label}) -> label is 'Packages' or label is '&Packages')
     toolBarMenu = _.find(packagesMenu.submenu, ({label}) -> label is 'Tool Bar' or label is '&Tool Bar') if packagesMenu
     positionsMenu = _.find(toolBarMenu.submenu, ({label}) -> label is 'Position' or label is '&Position') if toolBarMenu
     positionMenu = _.find(positionsMenu.submenu, ({label}) -> label is position) if positionsMenu
     positionMenu?.checked = true
 
+  drawGutter: =>
+    @removeClass 'gutter-top gutter-bottom'
+    visibleHeight = @height()
+    scrollHeight = @.element.scrollHeight
+    hiddenHeight = scrollHeight - visibleHeight
+    if visibleHeight < scrollHeight
+      if @scrollTop() > 0
+        @addClass 'gutter-top'
+      if @scrollTop() < hiddenHeight
+        @addClass 'gutter-bottom'
+
   hide: ->
     @detach() if @panel?
     @panel.destroy() if @panel?

diff --git a/styles/tool-bar.less b/styles/tool-bar.less
@@ -78,6 +78,24 @@
       &::-webkit-scrollbar {
         display: none;
       }
+
+      &.gutter-top::before,
+      &.gutter-bottom::after {
+        content: "";
+        height: 100%;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+      }
+      &.gutter-top::before {
+        box-shadow: inset 0px 20px 25px -20px rgb(0, 0, 0);
+      }
+      &.gutter-bottom::after {
+        box-shadow: inset 0px -20px 25px -20px rgb(0, 0, 0);
+      }
     }
 
     .tool-bar-btn {