[PATCH] Add help to user menu

Add a link to the help to the Kimchi user menu. Include text for the word "Help" in the translation files. The implementation assumes that the help file name matches the tab hash id, and does a simple mapping from one to the other. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- po/en_US.po | 3 +++ po/kimchi.pot | 3 +++ po/pt_BR.po | 3 +++ po/zh_CN.po | 3 +++ ui/css/theme-default/topbar.css | 3 ++- ui/js/src/kimchi.main.js | 18 ++++++++++++++++++ ui/pages/kimchi-ui.html.tmpl | 5 ++++- 7 files changed, 36 insertions(+), 2 deletions(-) diff --git a/po/en_US.po b/po/en_US.po index 8ac59c7..d68d8a4 100644 --- a/po/en_US.po +++ b/po/en_US.po @@ -304,6 +304,9 @@ msgstr "This is not a valid Server Name or IP. please, modify it." msgid "Log out" msgstr "Log out" +msgid "Help" +msgstr "" + msgid "Log In" msgstr "Log In" diff --git a/po/kimchi.pot b/po/kimchi.pot index f7b33ee..1a748ce 100755 --- a/po/kimchi.pot +++ b/po/kimchi.pot @@ -296,6 +296,9 @@ msgstr "" msgid "Log out" msgstr "" +msgid "Help" +msgstr "" + msgid "Log In" msgstr "" diff --git a/po/pt_BR.po b/po/pt_BR.po index 0d924e3..7e521e6 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -322,6 +322,9 @@ msgstr "" msgid "Log out" msgstr "Sair" +msgid "Help" +msgstr "" + msgid "Log In" msgstr "Entrar" diff --git a/po/zh_CN.po b/po/zh_CN.po index 361c11a..5cc93cd 100644 --- a/po/zh_CN.po +++ b/po/zh_CN.po @@ -312,6 +312,9 @@ msgstr "这不是一个有效的服务器名或IP,请修改" msgid "Log out" msgstr "登出" +msgid "Help" +msgstr "" + msgid "Log In" msgstr "登录" diff --git a/ui/css/theme-default/topbar.css b/ui/css/theme-default/topbar.css index c273c70..1988a6e 100644 --- a/ui/css/theme-default/topbar.css +++ b/ui/css/theme-default/topbar.css @@ -160,11 +160,12 @@ white-space: nowrap; } -#btn-logout { +.user-menu-item { color: black; font-size: 14px; } + a#btn-logout:hover { text-decoration: underline; } diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js index 5387495..960c27b 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -135,6 +135,8 @@ kimchi.main = function() { }); // Perform logging out via Ajax request. + + $('#btn-logout').on('click', function() { kimchi.logout(function() { updatePage(); @@ -142,6 +144,8 @@ kimchi.main = function() { kimchi.message.error(err.responseJSON.reason); }); }); + + $('#btn-help').on('click', kimchi.getHelp); }; // Load i18n translation strings first and then render the page. @@ -219,3 +223,17 @@ kimchi.getTabHtml = function(url) { }); return tabsHtml; }; + +kimchi.getHelp = function(e) { + var url=window.location.hash; + url = url.replace("#tabs","/help"); + if (url == "/help") + url=url+"/index.html" + else + url=url+".html"; + + $(this).closest('.popable').click(); + window.open(url, "Kimchi Help"); + e.preventDefault(); + e.stopPropagation(); +}; diff --git a/ui/pages/kimchi-ui.html.tmpl b/ui/pages/kimchi-ui.html.tmpl index eebe886..24e0372 100644 --- a/ui/pages/kimchi-ui.html.tmpl +++ b/ui/pages/kimchi-ui.html.tmpl @@ -78,7 +78,10 @@ <span id="user-name"></span> <span class="arrow"></span> <div class="action-panel popover right-side"> - <a id="btn-logout" href="javascript: void(0);">$_("Log out")</a> + <a id="btn-help" class="user-menu-item" href="javascript:void(0);">$_("Help")</a> + <br/> + <hr/> + <a id="btn-logout" class="user-menu-item" href="javascript: void(0);">$_("Log out")</a> </div> </div> </li> -- 1.8.1.4

Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 02/21/2014 07:57 PM, Adam King wrote:
Add a link to the help to the Kimchi user menu. Include text for the word "Help" in the translation files. The implementation assumes that the help file name matches the tab hash id, and does a simple mapping from one to the other.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- po/en_US.po | 3 +++ po/kimchi.pot | 3 +++ po/pt_BR.po | 3 +++ po/zh_CN.po | 3 +++ ui/css/theme-default/topbar.css | 3 ++- ui/js/src/kimchi.main.js | 18 ++++++++++++++++++ ui/pages/kimchi-ui.html.tmpl | 5 ++++- 7 files changed, 36 insertions(+), 2 deletions(-)
diff --git a/po/en_US.po b/po/en_US.po index 8ac59c7..d68d8a4 100644 --- a/po/en_US.po +++ b/po/en_US.po @@ -304,6 +304,9 @@ msgstr "This is not a valid Server Name or IP. please, modify it." msgid "Log out" msgstr "Log out"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "Log In"
diff --git a/po/kimchi.pot b/po/kimchi.pot index f7b33ee..1a748ce 100755 --- a/po/kimchi.pot +++ b/po/kimchi.pot @@ -296,6 +296,9 @@ msgstr "" msgid "Log out" msgstr ""
+msgid "Help" +msgstr "" + msgid "Log In" msgstr ""
diff --git a/po/pt_BR.po b/po/pt_BR.po index 0d924e3..7e521e6 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -322,6 +322,9 @@ msgstr "" msgid "Log out" msgstr "Sair"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "Entrar"
diff --git a/po/zh_CN.po b/po/zh_CN.po index 361c11a..5cc93cd 100644 --- a/po/zh_CN.po +++ b/po/zh_CN.po @@ -312,6 +312,9 @@ msgstr "这不是一个有效的服务器名或IP,请修改" msgid "Log out" msgstr "登出"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "登录"
diff --git a/ui/css/theme-default/topbar.css b/ui/css/theme-default/topbar.css index c273c70..1988a6e 100644 --- a/ui/css/theme-default/topbar.css +++ b/ui/css/theme-default/topbar.css @@ -160,11 +160,12 @@ white-space: nowrap; }
-#btn-logout { +.user-menu-item { color: black; font-size: 14px; }
+ a#btn-logout:hover { text-decoration: underline; } diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js index 5387495..960c27b 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -135,6 +135,8 @@ kimchi.main = function() { });
// Perform logging out via Ajax request. + + $('#btn-logout').on('click', function() { kimchi.logout(function() { updatePage(); @@ -142,6 +144,8 @@ kimchi.main = function() { kimchi.message.error(err.responseJSON.reason); }); }); + + $('#btn-help').on('click', kimchi.getHelp); };
// Load i18n translation strings first and then render the page. @@ -219,3 +223,17 @@ kimchi.getTabHtml = function(url) { }); return tabsHtml; }; + +kimchi.getHelp = function(e) { + var url=window.location.hash; + url = url.replace("#tabs","/help"); + if (url == "/help") + url=url+"/index.html" + else + url=url+".html"; + + $(this).closest('.popable').click(); + window.open(url, "Kimchi Help"); + e.preventDefault(); + e.stopPropagation(); +}; diff --git a/ui/pages/kimchi-ui.html.tmpl b/ui/pages/kimchi-ui.html.tmpl index eebe886..24e0372 100644 --- a/ui/pages/kimchi-ui.html.tmpl +++ b/ui/pages/kimchi-ui.html.tmpl @@ -78,7 +78,10 @@ <span id="user-name"></span> <span class="arrow"></span> <div class="action-panel popover right-side"> - <a id="btn-logout" href="javascript: void(0);">$_("Log out")</a> + <a id="btn-help" class="user-menu-item" href="javascript:void(0);">$_("Help")</a> + <br/> + <hr/> + <a id="btn-logout" class="user-menu-item" href="javascript: void(0);">$_("Log out")</a> </div> </div> </li>

Just one question. Why not add the Help link static on right side of the same frame used by the feature tabs? IMO, is more effective see the link statically there, then click on user arrow to see and then click on help. -- Reviewed-by: Paulo Vital <pvital@linux.vnet.ibm.com> Tested-by: Paulo Vital <pvital@linux.vnet.ibm.com> On Fri, 2014-02-21 at 17:57 -0500, Adam King wrote:
Add a link to the help to the Kimchi user menu. Include text for the word "Help" in the translation files. The implementation assumes that the help file name matches the tab hash id, and does a simple mapping from one to the other.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- po/en_US.po | 3 +++ po/kimchi.pot | 3 +++ po/pt_BR.po | 3 +++ po/zh_CN.po | 3 +++ ui/css/theme-default/topbar.css | 3 ++- ui/js/src/kimchi.main.js | 18 ++++++++++++++++++ ui/pages/kimchi-ui.html.tmpl | 5 ++++- 7 files changed, 36 insertions(+), 2 deletions(-)
diff --git a/po/en_US.po b/po/en_US.po index 8ac59c7..d68d8a4 100644 --- a/po/en_US.po +++ b/po/en_US.po @@ -304,6 +304,9 @@ msgstr "This is not a valid Server Name or IP. please, modify it." msgid "Log out" msgstr "Log out"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "Log In"
diff --git a/po/kimchi.pot b/po/kimchi.pot index f7b33ee..1a748ce 100755 --- a/po/kimchi.pot +++ b/po/kimchi.pot @@ -296,6 +296,9 @@ msgstr "" msgid "Log out" msgstr ""
+msgid "Help" +msgstr "" + msgid "Log In" msgstr ""
diff --git a/po/pt_BR.po b/po/pt_BR.po index 0d924e3..7e521e6 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -322,6 +322,9 @@ msgstr "" msgid "Log out" msgstr "Sair"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "Entrar"
diff --git a/po/zh_CN.po b/po/zh_CN.po index 361c11a..5cc93cd 100644 --- a/po/zh_CN.po +++ b/po/zh_CN.po @@ -312,6 +312,9 @@ msgstr "这不是一个有效的服务器名或IP,请修改" msgid "Log out" msgstr "登出"
+msgid "Help" +msgstr "" + msgid "Log In" msgstr "登录"
diff --git a/ui/css/theme-default/topbar.css b/ui/css/theme-default/topbar.css index c273c70..1988a6e 100644 --- a/ui/css/theme-default/topbar.css +++ b/ui/css/theme-default/topbar.css @@ -160,11 +160,12 @@ white-space: nowrap; }
-#btn-logout { +.user-menu-item { color: black; font-size: 14px; }
+ a#btn-logout:hover { text-decoration: underline; } diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js index 5387495..960c27b 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -135,6 +135,8 @@ kimchi.main = function() { });
// Perform logging out via Ajax request. + + $('#btn-logout').on('click', function() { kimchi.logout(function() { updatePage(); @@ -142,6 +144,8 @@ kimchi.main = function() { kimchi.message.error(err.responseJSON.reason); }); }); + + $('#btn-help').on('click', kimchi.getHelp); };
// Load i18n translation strings first and then render the page. @@ -219,3 +223,17 @@ kimchi.getTabHtml = function(url) { }); return tabsHtml; }; + +kimchi.getHelp = function(e) { + var url=window.location.hash; + url = url.replace("#tabs","/help"); + if (url == "/help") + url=url+"/index.html" + else + url=url+".html"; + + $(this).closest('.popable').click(); + window.open(url, "Kimchi Help"); + e.preventDefault(); + e.stopPropagation(); +}; diff --git a/ui/pages/kimchi-ui.html.tmpl b/ui/pages/kimchi-ui.html.tmpl index eebe886..24e0372 100644 --- a/ui/pages/kimchi-ui.html.tmpl +++ b/ui/pages/kimchi-ui.html.tmpl @@ -78,7 +78,10 @@ <span id="user-name"></span> <span class="arrow"></span> <div class="action-panel popover right-side"> - <a id="btn-logout" href="javascript: void(0);">$_("Log out")</a> + <a id="btn-help" class="user-menu-item" href="javascript:void(0);">$_("Help")</a> + <br/> + <hr/> + <a id="btn-logout" class="user-menu-item" href="javascript: void(0);">$_("Log out")</a> </div> </div> </li>

On 2/24/2014 8:54 AM, Paulo Ricardo Paz Vital wrote:
Just one question. Why not add the Help link static on right side of the same frame used by the feature tabs? IMO, is more effective see the link statically there, then click on user arrow to see and then click on help.
I had a slight bias to putting the help in the menu because: - Help is something that is used infrequently and I didn't want to spend screen real estate on it - I have the feeling we'll eventually want to add more items to the top menu, and this was a good opportunity for me to get into that code and see how it works. I also wanted to get a functional help link into the UI quickly so we can put the help in front of more people. I sent what I have working rather than spend a lot of time experimenting with different designs. I am ok to revisit to see of alternative designs show incremental improvement, but I would suggest we start with this and iterate later. -- Adam King <rak@linux.vnet.ibm.com> IBM C&SI
participants (3)
-
Adam King
-
Aline Manera
-
Paulo Ricardo Paz Vital