tour: add feedback button as an icon with a tooltip
This opens a new window to create an issue with a template text.
Change-Id: Ib073f6f01b959133832ab71a0bdfef77d84d12bb
Reviewed-on: https://go-review.googlesource.com/8904
Reviewed-by: Minux Ma <minux@golang.org>
Reviewed-by: Rob Pike <r@golang.org>
diff --git a/static/css/app.css b/static/css/app.css
index 99076b0..9eb6f33 100755
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1,5 +1,5 @@
/* Generic elements */
- html, body {
+html, body {
margin: 0;
padding: 0;
font-size: 16px;
@@ -10,7 +10,7 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none;
- -webkit-font-smoothing:antialiased;
+ -webkit-font-smoothing: antialiased;
}
* {
outline: none;
@@ -25,7 +25,7 @@
margin: 0;
}
pre, code {
- font-family:'Inconsolata', monospace;
+ font-family: 'Inconsolata', monospace;
border-radius: 4px;
color: #333;
background-color: #fafafa;
@@ -96,7 +96,7 @@
padding-left: 32px;
}
/* Navigation bars */
- .top-bar {
+.top-bar {
position: fixed;
left: 0;
right: 0;
@@ -110,13 +110,18 @@
}
.nav {
float: right;
- padding: 5px;
- height: 20px;
- width: 20px;
+ padding: 2px;
+ height: 25px;
+ width: 25px;
+ margin-left: 10px;
cursor: pointer;
+ fill: #375eab;
+}
+.nav:hover {
+ fill: #ffffff;
}
/* Module list */
- .page-header {
+.page-header {
font-size: 1.2em;
line-height: 32px;
margin: 32px 0;
@@ -149,7 +154,7 @@
padding-right: 48px;
}
/* Lesson viewer */
- .slide-content {
+.slide-content {
padding: 16px;
}
.module-bar {
@@ -191,10 +196,10 @@
background: #fff;
}
.menu-button[syntax-checkbox]:after {
- content:' off';
+ content: ' off';
}
.menu-button[syntax-checkbox].active:after {
- content:' on';
+ content: ' on';
}
#right-side a {
color: #375eab;
@@ -215,7 +220,7 @@
display: none;
}
.output > pre {
- font-family:'Inconsolata', monospace;
+ font-family: 'Inconsolata', monospace;
background: #fafafa;
margin: 0;
}
@@ -243,8 +248,7 @@
float: right;
}
/* CodeMirror */
-
- #file-editor {
+#file-editor {
background: #FFFFD8;
overflow: auto;
}
@@ -256,7 +260,7 @@
}
#file-editor .CodeMirror-lines, #file-editor .CodeMirror-gutters {
background: #FFFFD8;
- font-family:'Inconsolata', monospace;
+ font-family: 'Inconsolata', monospace;
line-height: 1.2em;
}
.CodeMirror-code > .line-error {
@@ -371,7 +375,7 @@
}
#file-menu {
position: absolute;
- top:0;
+ top: 0;
right: 0;
left: 0;
background: #fafafa;
@@ -431,7 +435,7 @@
}
}
/* Table of contents */
- .toc {
+.toc {
display: none;
position: fixed;
z-index: 200;
@@ -455,10 +459,10 @@
.click-catcher {
position: fixed;
z-index: -100;
- top:0;
+ top: 0;
bottom: 0;
- left:0;
- right: 10; /* avoid covering the TOC scroller */
+ left: 0;
+ right: 10; /* avoid covering the TOC scroller */
background: rgba(0, 0, 0, 0);
}
.toc * {
diff --git a/static/img/burger.png b/static/img/burger.png
deleted file mode 100644
index fb4fb71..0000000
--- a/static/img/burger.png
+++ /dev/null
Binary files differ
diff --git a/static/js/directives.js b/static/js/directives.js
index 4c2f5c1..cb44f96 100755
--- a/static/js/directives.js
+++ b/static/js/directives.js
@@ -136,12 +136,13 @@
}
]).
-directive('tableOfContentsButton', function() {
+directive('tableOfContentsButton', ['i18n', function(i18n) {
var speed = 250;
return {
restrict: 'A',
templateUrl: '/static/partials/toc-button.html',
link: function(scope, elm, attrs) {
+ scope.tocMessage = i18n.l('toc');
elm.on('click', function() {
var toc = $(attrs.tableOfContentsButton);
// hide all non active lessons before displaying the toc.
@@ -160,7 +161,7 @@
});
}
};
-}).
+}]).
// side bar with dynamic table of contents
directive('tableOfContents', ['$routeParams', 'toc',
@@ -196,4 +197,26 @@
}
};
}
-]);
\ No newline at end of file
+]).
+
+directive('feedbackButton', ['i18n', function(i18n) {
+ return {
+ restrict: 'A',
+ templateUrl: '/static/partials/feedback-button.html',
+ link: function(scope, elm, attrs) {
+ scope.feedbackMessage = i18n.l('submit-feedback');
+
+ elm.on('click', function() {
+ var context = window.location.pathname === '/list'
+ ? '/list'
+ : '/' + scope.params.lessonId + '/' + scope.params.pageNumber;
+ var title = i18n.l('issue-title');
+ var body = i18n.l('context') + ': '+ context + '\n\n'+ i18n.l('issue-message');
+ var url = 'https://' + i18n.l('github-repo') + '/issues/new'
+ + '?title=' + encodeURIComponent(title)
+ + '&body=' + encodeURIComponent(body);
+ window.open(url);
+ });
+ }
+ };
+}]);
\ No newline at end of file
diff --git a/static/js/values.js b/static/js/values.js
index 520f280..175298c 100644
--- a/static/js/values.js
+++ b/static/js/values.js
@@ -46,6 +46,13 @@
'next': 'Next',
'waiting': 'Waiting for remote server...',
'errcomm': 'Error communicating with remote server.',
+ 'submit-feedback': 'Send feedback about this page',
+
+ // GitHub issue template: update repo and messaging when translating.
+ 'github-repo': 'github.com/golang/go',
+ 'issue-title': 'tour: [short description of the issue]',
+ 'issue-message': 'Describe your feedback here, including code if necessary',
+ 'context': 'Context',
}).
// Config for codemirror plugin
diff --git a/static/partials/feedback-button.html b/static/partials/feedback-button.html
new file mode 100644
index 0000000..b32c5a5
--- /dev/null
+++ b/static/partials/feedback-button.html
@@ -0,0 +1,3 @@
+<span class="nav" title="{{feedbackMessage}}">
+ <svg id="feedback-button" viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"></path></g></svg>
+</span>
\ No newline at end of file
diff --git a/static/partials/toc-button.html b/static/partials/toc-button.html
index 5ee14ca..3e70742 100644
--- a/static/partials/toc-button.html
+++ b/static/partials/toc-button.html
@@ -1 +1,3 @@
-<img class="nav" src="/static/img/burger.png" alt="menu">
\ No newline at end of file
+<span class="nav" title="{{tocMessage}}">
+ <svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g></svg>
+</span>
\ No newline at end of file
diff --git a/template/index.tmpl b/template/index.tmpl
index 9b497b0..84cbe30 100755
--- a/template/index.tmpl
+++ b/template/index.tmpl
@@ -17,6 +17,7 @@
<div class="bar top-bar">
<a class="left logo" href="/list">A Tour of Go</a>
<div table-of-contents-button=".toc"></div>
+ <div feedback-button></div>
</div>
<div table-of-contents></div>
