Add ProTip for sidebar and scrolling keyboard shortcuts

Thibaut committed 11 years ago

Commit d0d47e21 parent 6ce3aa27 files · +55 −1Browse files

Unified · Split

7 files

@@ -133,6 +133,15 @@ · 132 unmodified lines
133	133	window.location = '/'
134	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	145	showLoading: ->
137	146	document.body.classList.remove '_noscript'
138	147	document.body.classList.add '_loading'

@@ -15,6 +15,10 @@ class app.Shortcuts · 14 unmodified lines
15	15	$.off document, 'keypress', @onKeypress
16	16	return
17	17
	18	+ showTip: ->
	19	+ app.showTip('KeyNav')
	20	+ @showTip = null
	21	+
18	22	onKeydown: (event) =>
19	23	result = if event.ctrlKey or event.metaKey
20	24	@handleKeydownSuperEvent event unless event.altKey or event.shiftKey
@@ -62,11 +66,13 @@ class app.Shortcuts · 41 unmodified lines
62	66	@trigger 'left' unless event.target.value
63	67	when 38
64	68	@trigger 'up'
	69	+ @showTip?()
65	70	false
66	71	when 39
67	72	@trigger 'right' unless event.target.value
68	73	when 40
69	74	@trigger 'down'
	75	+ @showTip?()
70	76	false
71	77
72	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	5	right: 1rem;
6	6	width: 25rem;
7	7	max-width: 90%;
8		− padding: .75rem 1rem;
	8	+ padding: .625rem 1rem;
9	9	font-size: .75rem;
10	10	color: $notifColor;
11	11	background: $notifBackground;
@@ -25,6 +25,12 @@ · 13 unmodified lines
25	25	}
26	26
27	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	35	._notif-link,
30	36	._notif-link:hover {
@@ -91,3 +97,9 @@ · 60 unmodified lines
91	97	margin: .5em 0;
92	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	73	$notifColor: #fff;
74	74	$notifColorLight: #bbb;
75	75
	76	+$tipBackground: #fffdcd;
	77	+$tipBorder: #e7dca9;
	78	+
76	79	$mediumScreen: '(max-width: 800px)';
77	80
78	81	$contentZ: 1;

@@ -73,6 +73,9 @@ $notifBackground: rgba(#000, .85); · 72 unmodified lines
73	73	$notifColor: #fff;
74	74	$notifColorLight: #bbb;
75	75
	76	+$tipBackground: #3d4449;
	77	+$tipBorder: #566166;
	78	+
76	79	$mediumScreen: '(max-width: 800px)';
77	80
78	81	$contentZ: 1;

Keyboard shortcuts