Unified · Split
| @@ -133,6 +133,15 @@ · 132 unmodified lines | |||
| 133 | window.location = '/' | 133 | window.location = '/' |
| 134 | return | 134 | return |
| 135 | 135 | ||
| 136 | showTip: (tip) -> | ||
| 137 | return if @isSingleDoc() | ||
| 138 | tips = @settings.get('tips') || [] | ||
| 139 | if tips.indexOf(tip) is -1 | ||
| 140 | tips.push(tip) | ||
| 141 | @settings.set('tips', tips) | ||
| 142 | new app.views.Tip(tip) | ||
| 143 | return | ||
| 144 | |||
| 136 | showLoading: -> | 145 | showLoading: -> |
| 137 | document.body.classList.remove '_noscript' | 146 | document.body.classList.remove '_noscript' |
| 138 | document.body.classList.add '_loading' | 147 | document.body.classList.add '_loading' |
| @@ -15,6 +15,10 @@ class app.Shortcuts · 14 unmodified lines | |||
| 15 | $.off document, 'keypress', @onKeypress | 15 | $.off document, 'keypress', @onKeypress |
| 16 | return | 16 | return |
| 17 | 17 | ||
| 18 | showTip: -> | ||
| 19 | app.showTip('KeyNav') | ||
| 20 | @showTip = null | ||
| 21 | |||
| 18 | onKeydown: (event) => | 22 | onKeydown: (event) => |
| 19 | result = if event.ctrlKey or event.metaKey | 23 | result = if event.ctrlKey or event.metaKey |
| 20 | @handleKeydownSuperEvent event unless event.altKey or event.shiftKey | 24 | @handleKeydownSuperEvent event unless event.altKey or event.shiftKey |
| @@ -62,11 +66,13 @@ class app.Shortcuts · 41 unmodified lines | |||
| 62 | @trigger 'left' unless event.target.value | 66 | @trigger 'left' unless event.target.value |
| 63 | when 38 | 67 | when 38 |
| 64 | @trigger 'up' | 68 | @trigger 'up' |
| 69 | @showTip?() | ||
| 65 | false | 70 | false |
| 66 | when 39 | 71 | when 39 |
| 67 | @trigger 'right' unless event.target.value | 72 | @trigger 'right' unless event.target.value |
| 68 | when 40 | 73 | when 40 |
| 69 | @trigger 'down' | 74 | @trigger 'down' |
| 75 | @showTip?() | ||
| 70 | false | 76 | false |
| 71 | 77 | ||
| 72 | handleKeydownSuperEvent: (event) -> | 78 | handleKeydownSuperEvent: (event) -> |
| @@ -0,0 +1,10 @@ | |||
| 1 | app.templates.tipKeyNav = """ | ||
| 2 | <p class="_notif-text"> | ||
| 3 | <strong>ProTip</strong> | ||
| 4 | <span class="_notif-info">(click to dismiss)</span> | ||
| 5 | <p class="_notif-text"> | ||
| 6 | Hit <code class="_label">↓</code> <code class="_label">↑</code> <code class="_label">←</code> <code class="_label">→</code> to navigate the sidebar.<br> | ||
| 7 | Hit <code class="_label">alt ↓</code> <code class="_label">alt ↑</code> or <code class="_label">space</code> <code class="_label">shift space</code> to scroll the page. | ||
| 8 | <p class="_notif-text"> | ||
| 9 | <a href="/help#shortcuts" class="_notif-link">See all keyboard shortcuts</a> | ||
| 10 | """ | ||
| @@ -0,0 +1,11 @@ | |||
| 1 | #= require views/misc/notif | ||
| 2 | |||
| 3 | class app.views.Tip extends app.views.Notif | ||
| 4 | @className: '_notif _notif-tip' | ||
| 5 | |||
| 6 | @defautOptions: | ||
| 7 | autoHide: false | ||
| 8 | |||
| 9 | render: -> | ||
| 10 | @html @tmpl("tip#{@type}") | ||
| 11 | return | ||
| @@ -5,7 +5,7 @@ · 4 unmodified lines | |||
| 5 | right: 1rem; | 5 | right: 1rem; |
| 6 | width: 25rem; | 6 | width: 25rem; |
| 7 | max-width: 90%; | 7 | max-width: 90%; |
| 8 | padding: .75rem 1rem; | 8 | padding: .625rem 1rem; |
| 9 | font-size: .75rem; | 9 | font-size: .75rem; |
| 10 | color: $notifColor; | 10 | color: $notifColor; |
| 11 | background: $notifBackground; | 11 | background: $notifBackground; |
| @@ -25,6 +25,12 @@ · 13 unmodified lines | |||
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | ._notif-text { margin-bottom: 0; } | 27 | ._notif-text { margin-bottom: 0; } |
| 28 | ._notif-text + ._notif-text { margin-top: .25rem; } | ||
| 29 | |||
| 30 | ._notif-info { | ||
| 31 | float: right; | ||
| 32 | color: $textColorLight; | ||
| 33 | } | ||
| 28 | 34 | ||
| 29 | ._notif-link, | 35 | ._notif-link, |
| 30 | ._notif-link:hover { | 36 | ._notif-link:hover { |
| @@ -91,3 +97,9 @@ · 60 unmodified lines | |||
| 91 | margin: .5em 0; | 97 | margin: .5em 0; |
| 92 | padding-left: 1rem; | 98 | padding-left: 1rem; |
| 93 | } | 99 | } |
| 100 | |||
| 101 | ._notif-tip { | ||
| 102 | color: $textColor; | ||
| 103 | background: rgba($tipBackground, .95); | ||
| 104 | border: 1px solid $tipBorder; | ||
| 105 | } | ||
| @@ -73,6 +73,9 @@ $notifBackground: rgba(#333, .85); · 72 unmodified lines | |||
| 73 | $notifColor: #fff; | 73 | $notifColor: #fff; |
| 74 | $notifColorLight: #bbb; | 74 | $notifColorLight: #bbb; |
| 75 | 75 | ||
| 76 | $tipBackground: #fffdcd; | ||
| 77 | $tipBorder: #e7dca9; | ||
| 78 | |||
| 76 | $mediumScreen: '(max-width: 800px)'; | 79 | $mediumScreen: '(max-width: 800px)'; |
| 77 | 80 | ||
| 78 | $contentZ: 1; | 81 | $contentZ: 1; |
| @@ -73,6 +73,9 @@ $notifBackground: rgba(#000, .85); · 72 unmodified lines | |||
| 73 | $notifColor: #fff; | 73 | $notifColor: #fff; |
| 74 | $notifColorLight: #bbb; | 74 | $notifColorLight: #bbb; |
| 75 | 75 | ||
| 76 | $tipBackground: #3d4449; | ||
| 77 | $tipBorder: #566166; | ||
| 78 | |||
| 76 | $mediumScreen: '(max-width: 800px)'; | 79 | $mediumScreen: '(max-width: 800px)'; |
| 77 | 80 | ||
| 78 | $contentZ: 1; | 81 | $contentZ: 1; |