Add ProTip for sidebar and scrolling keyboard shortcuts

assets/javascripts/app/app.coffee

@@ -133,6 +133,15 @@
     window.location = '/'
     return
 
+  showTip: (tip) ->
+    return if @isSingleDoc()
+    tips = @settings.get('tips') || []
+    if tips.indexOf(tip) is -1
+      tips.push(tip)
+      @settings.set('tips', tips)
+      new app.views.Tip(tip)
+    return
+
   showLoading: ->
     document.body.classList.remove '_noscript'
     document.body.classList.add '_loading'

assets/javascripts/app/shortcuts.coffee

@@ -15,6 +15,10 @@ class app.Shortcuts
     $.off document, 'keypress', @onKeypress
     return
 
+  showTip: ->
+    app.showTip('KeyNav')
+    @showTip = null
+
   onKeydown: (event) =>
     result = if event.ctrlKey or event.metaKey
       @handleKeydownSuperEvent event unless event.altKey or event.shiftKey
@@ -62,11 +66,13 @@ class app.Shortcuts
         @trigger 'left' unless event.target.value
       when 38
         @trigger 'up'
+        @showTip?()
         false
       when 39
         @trigger 'right' unless event.target.value
       when 40
         @trigger 'down'
+        @showTip?()
         false
 
   handleKeydownSuperEvent: (event) ->

assets/javascripts/templates/tip_tmpl.coffee

@@ -0,0 +1,10 @@
+app.templates.tipKeyNav = """
+  <p class="_notif-text">
+    <strong>ProTip</strong>
+    <span class="_notif-info">(click to dismiss)</span>
+  <p class="_notif-text">
+    Hit <code class="_label">&darr;</code> <code class="_label">&uarr;</code> <code class="_label">&larr;</code> <code class="_label">&rarr;</code> to navigate the sidebar.<br>
+    Hit <code class="_label">alt &darr;</code> <code class="_label">alt &uarr;</code> or <code class="_label">space</code> <code class="_label">shift space</code> to scroll the page.
+  <p class="_notif-text">
+    <a href="/help#shortcuts" class="_notif-link">See all keyboard shortcuts</a>
+"""

assets/javascripts/views/misc/tip.coffee

@@ -0,0 +1,11 @@
+#= require views/misc/notif
+
+class app.views.Tip extends app.views.Notif
+  @className: '_notif _notif-tip'
+
+  @defautOptions:
+    autoHide: false
+
+  render: ->
+    @html @tmpl("tip#{@type}")
+    return

assets/stylesheets/components/_notif.scss

@@ -5,7 +5,7 @@
   right: 1rem;
   width: 25rem;
   max-width: 90%;
-  padding: .75rem 1rem;
+  padding: .625rem 1rem;
   font-size: .75rem;
   color: $notifColor;
   background: $notifBackground;
@@ -25,6 +25,12 @@
 }
 
 ._notif-text { margin-bottom: 0; }
+._notif-text + ._notif-text { margin-top: .25rem; }
+
+._notif-info {
+  float: right;
+  color: $textColorLight;
+}
 
 ._notif-link,
 ._notif-link:hover {
@@ -91,3 +97,9 @@
   margin: .5em 0;
   padding-left: 1rem;
 }
+
+._notif-tip {
+  color: $textColor;
+  background: rgba($tipBackground, .95);
+  border: 1px solid $tipBorder;
+}

assets/stylesheets/global/_variables.scss

@@ -73,6 +73,9 @@ $notifBackground: rgba(#333, .85);
 $notifColor: #fff;
 $notifColorLight: #bbb;
 
+$tipBackground: #fffdcd;
+$tipBorder: #e7dca9;
+
 $mediumScreen: '(max-width: 800px)';
 
 $contentZ: 1;

assets/stylesheets/global/variables-dark.scss

@@ -73,6 +73,9 @@ $notifBackground: rgba(#000, .85);
 $notifColor: #fff;
 $notifColorLight: #bbb;
 
+$tipBackground: #3d4449;
+$tipBorder: #566166;
+
 $mediumScreen: '(max-width: 800px)';
 
 $contentZ: 1;