From e0a22a98bffee2ca9b5d89adf99ad498a9c41ea2 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Mon, 22 Aug 2016 14:32:43 +0530 Subject: [PATCH] Help feature (#1966) * [feature] help search modal * add symlinks for docs assets * update help links * [ui] fix help dropdown in mobile view * replaced {index} tags in help content, api for fetching help content * help links open in help modal * moved help content logic to py --- frappe/build.py | 21 ++- .../using-html-templates-in-javascript.md | 2 +- .../print-format-for-reports.md | 2 +- .../using-html-templates-in-javascript.md | 2 +- .../print-format-for-reports.md | 2 +- frappe/docs/user/index.md | 4 +- frappe/public/build.json | 1 + frappe/public/css/common.css | 6 + frappe/public/css/desk.css | 46 +++++ frappe/public/css/docs.css | 50 +++-- frappe/public/css/navbar.css | 44 ++++- frappe/public/css/website.css | 6 + frappe/public/js/frappe/misc/help_links.js | 51 +++++ .../public/js/frappe/ui/toolbar/navbar.html | 28 ++- frappe/public/js/frappe/ui/toolbar/toolbar.js | 175 ++++++++++++++++-- frappe/public/less/common.less | 8 + frappe/public/less/desk.less | 53 ++++++ frappe/public/less/docs.less | 7 - frappe/public/less/navbar.less | 46 ++++- frappe/templates/includes/navbar/navbar.html | 4 - frappe/utils/help.py | 130 ++++++++++++- 21 files changed, 622 insertions(+), 66 deletions(-) create mode 100644 frappe/public/js/frappe/misc/help_links.js diff --git a/frappe/build.py b/frappe/build.py index e300e19850..c110f516d9 100644 --- a/frappe/build.py +++ b/frappe/build.py @@ -57,14 +57,19 @@ def make_asset_dirs(make_copy=False): # symlink app/public > assets/app for app_name in frappe.get_all_apps(True): pymodule = frappe.get_module(app_name) - source = os.path.join(os.path.abspath(os.path.dirname(pymodule.__file__)), 'public') - target = os.path.join(assets_path, app_name) - - if not os.path.exists(target) and os.path.exists(source): - if make_copy: - shutil.copytree(os.path.abspath(source), target) - else: - os.symlink(os.path.abspath(source), target) + app_base_path = os.path.abspath(os.path.dirname(pymodule.__file__)) + + symlinks = [] + symlinks.append([os.path.join(app_base_path, 'public'), os.path.join(assets_path, app_name)]) + symlinks.append([os.path.join(app_base_path, 'docs'), os.path.join(assets_path, app_name + '_docs')]) + + for source, target in symlinks: + source = os.path.abspath(source) + if not os.path.exists(target) and os.path.exists(source): + if make_copy: + shutil.copytree(source, target) + else: + os.symlink(source, target) def build(no_compress=False, verbose=False): assets_path = os.path.join(frappe.local.sites_path, "assets") diff --git a/frappe/docs/user/en/guides/app-development/using-html-templates-in-javascript.md b/frappe/docs/user/en/guides/app-development/using-html-templates-in-javascript.md index e2e9123b76..e1728ae86f 100755 --- a/frappe/docs/user/en/guides/app-development/using-html-templates-in-javascript.md +++ b/frappe/docs/user/en/guides/app-development/using-html-templates-in-javascript.md @@ -1,6 +1,6 @@ Often while building javascript interfaces, there is a need to render DOM as an HTML template. Frappe Framework uses John Resig's Microtemplate script to render HTML templates in the Desk application. -> Note 1: In Frappe we use the Jinja-like `{%` tags to embed code rather than the standard `<%` +> Note 1: In Frappe we use the Jinja-like `{% raw %}{%{% endraw %}` tags to embed code rather than the standard `<%` > Note 2: Never use single quotes `'` inside the HTML template. diff --git a/frappe/docs/user/en/guides/reports-and-printing/print-format-for-reports.md b/frappe/docs/user/en/guides/reports-and-printing/print-format-for-reports.md index dd582169c0..b979654d86 100755 --- a/frappe/docs/user/en/guides/reports-and-printing/print-format-for-reports.md +++ b/frappe/docs/user/en/guides/reports-and-printing/print-format-for-reports.md @@ -65,6 +65,6 @@ Here is what the report looks like: 1. [Bootstrap Stylesheet](http://getbootstrap.com) is pre-loaded. 1. You can use all global functions like `fmt_money` and dateutil. 1. Translatable strings should be written as `__("text")` -1. You can create modules and import using `{% include "templates/includes/formats/common_format" %}` +1. You can create modules and import using `{% raw %}{% include "templates/includes/formats/common_format" %}{% endraw %}` \ No newline at end of file diff --git a/frappe/docs/user/fr/guides/app-development/using-html-templates-in-javascript.md b/frappe/docs/user/fr/guides/app-development/using-html-templates-in-javascript.md index 374b8d79fb..db4218151e 100644 --- a/frappe/docs/user/fr/guides/app-development/using-html-templates-in-javascript.md +++ b/frappe/docs/user/fr/guides/app-development/using-html-templates-in-javascript.md @@ -1,6 +1,6 @@ Often while building javascript interfaces, there is a need to render DOM as an HTML template. Frappe Framework uses John Resig's Microtemplate script to render HTML templates in the Desk application. -> Note 1: In Frappe we use the Jinja-like `{%` tags to embed code rather than the standard `<%` +> Note 1: In Frappe we use the Jinja-like `{% raw %}{%{% endraw %}` tags to embed code rather than the standard `<%` > Note 2: Never use single quotes `'` inside the HTML template. diff --git a/frappe/docs/user/fr/guides/reports-and-printing/print-format-for-reports.md b/frappe/docs/user/fr/guides/reports-and-printing/print-format-for-reports.md index dd582169c0..b979654d86 100644 --- a/frappe/docs/user/fr/guides/reports-and-printing/print-format-for-reports.md +++ b/frappe/docs/user/fr/guides/reports-and-printing/print-format-for-reports.md @@ -65,6 +65,6 @@ Here is what the report looks like: 1. [Bootstrap Stylesheet](http://getbootstrap.com) is pre-loaded. 1. You can use all global functions like `fmt_money` and dateutil. 1. Translatable strings should be written as `__("text")` -1. You can create modules and import using `{% include "templates/includes/formats/common_format" %}` +1. You can create modules and import using `{% raw %}{% include "templates/includes/formats/common_format" %}{% endraw %}` \ No newline at end of file diff --git a/frappe/docs/user/index.md b/frappe/docs/user/index.md index a95a166ace..9995e898f0 100644 --- a/frappe/docs/user/index.md +++ b/frappe/docs/user/index.md @@ -2,5 +2,5 @@ Select your language -1. [English](en) -1. [Français](fr) +1. [English]({{docs_base_url}}/user/en) +1. [Français]({{docs_base_url}}/user/fr) diff --git a/frappe/public/build.json b/frappe/public/build.json index 310f51abbb..861f060bb2 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -115,6 +115,7 @@ "public/js/frappe/misc/datetime.js", "public/js/frappe/misc/number_format.js", "public/js/frappe/misc/help.js", + "public/js/frappe/misc/help_links.js", "public/js/frappe/ui/upload.html", "public/js/frappe/upload.js", diff --git a/frappe/public/css/common.css b/frappe/public/css/common.css index d7221b50c1..8700c5572f 100644 --- a/frappe/public/css/common.css +++ b/frappe/public/css/common.css @@ -102,6 +102,12 @@ kbd { font-size: 12px; border-radius: 0px 0px 4px 4px; } +.dropdown-menu .dropdown-header { + padding: 3px 14px; + font-size: 11px; + font-weight: 200; + padding-top: 12px; +} .dropdown-menu .divider { margin: 0px; } diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 8d946d6d02..35ad3dccab 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -102,6 +102,12 @@ kbd { font-size: 12px; border-radius: 0px 0px 4px 4px; } +.dropdown-menu .dropdown-header { + padding: 3px 14px; + font-size: 11px; + font-weight: 200; + padding-top: 12px; +} .dropdown-menu .divider { margin: 0px; } @@ -582,3 +588,43 @@ fieldset[disabled] .form-control { .liked-by-popover li { margin: 15px 0px; } +.screenshot { + border: 1px solid #d1d8dd; + box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15); + margin: 8px 0px; + max-width: 100%; +} +.help-modal a { + color: #5E64FF; +} +.help-modal .modal-dialog { + width: 768px; +} +.help-modal .modal-body { + padding: 15px 27px; +} +.help-modal .parent-link { + line-height: 4em; +} +.help-modal .parent-link:before { + font-family: 'Octicons'; + content: '\f0a4'; +} +.help-modal .edit-container { + padding-bottom: 12px; +} +@media (max-width: 767px) { + .help-modal .modal-dialog { + width: auto; + } + .help-modal .modal-content { + height: auto !important; + } + .help-modal iframe { + height: auto; + width: 100%; + } +} +.search-result { + margin-bottom: 24px; +} diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css index e404d9fa2f..ab3d24f7a4 100644 --- a/frappe/public/css/docs.css +++ b/frappe/public/css/docs.css @@ -29,7 +29,7 @@ } @media (max-width: 991px) { .navbar-desk { - width: 40% !important; + width: 35% !important; } .navbar-desk ~ ul > li { float: left; @@ -48,7 +48,7 @@ } @media (max-width: 767px) { .navbar-desk { - width: 60% !important; + width: 50% !important; } } #search-modal .modal-dialog, @@ -76,9 +76,37 @@ .dropdown-navbar-new-comments .dropdown-menu { margin-top: 0; } +.dropdown-help .dropdown-menu { + width: 350px !important; + max-height: 440px; + overflow: scroll; +} +.dropdown-help .dropdown-menu .input-group { + width: 100%; + background-color: #f5f7fa; + padding: 8px 12px; +} +.dropdown-help .dropdown-menu input { + width: 100%; + padding: 5px 10px; + outline: none; + border-radius: 3px 0 0 3px; + border: 1px solid #d1d8dd; + opacity: 0.9; + line-height: 1.5; +} +.dropdown-help .dropdown-menu button { + border: 1px solid #d1d8dd; +} @media (max-width: 767px) { - .dropdown-navbar-new-comments.open .dropdown-menu, - .dropdown-navbar-user.open .dropdown-menu { + .dropdown-help .dropdown-menu { + position: fixed !important; + top: 40px; + width: 100% !important; + } +} +@media (max-width: 767px) { + .dropdown-mobile.open .dropdown-menu { position: absolute; border-top: 1px solid rgba(0, 0, 0, 0.14902); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); @@ -86,8 +114,7 @@ right: 0; left: auto; } - .dropdown-navbar-new-comments.open .dropdown-menu > li > a, - .dropdown-navbar-user.open .dropdown-menu > li > a { + .dropdown-mobile.open .dropdown-menu > li > a { padding: 12px; } } @@ -107,6 +134,11 @@ width: 300px; background-color: rgba(255, 255, 255, 0.9); } +@media (max-width: 991px) { + #navbar-search { + width: 250px; + } +} .navbar .navbar-search-icon { color: #6C7680; font-size: inherit; @@ -502,12 +534,6 @@ p { border: 1px solid #d1d8dd; border-radius: 15px; } -.screenshot { - border: 1px solid #d1d8dd; - box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15); - margin: 8px 0px; - max-width: 100%; -} hr { margin: 48px 0px 30px; } diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css index 60e906c106..6a732d8952 100644 --- a/frappe/public/css/navbar.css +++ b/frappe/public/css/navbar.css @@ -29,7 +29,7 @@ } @media (max-width: 991px) { .navbar-desk { - width: 40% !important; + width: 35% !important; } .navbar-desk ~ ul > li { float: left; @@ -48,7 +48,7 @@ } @media (max-width: 767px) { .navbar-desk { - width: 60% !important; + width: 50% !important; } } #search-modal .modal-dialog, @@ -76,9 +76,37 @@ .dropdown-navbar-new-comments .dropdown-menu { margin-top: 0; } +.dropdown-help .dropdown-menu { + width: 350px !important; + max-height: 440px; + overflow: scroll; +} +.dropdown-help .dropdown-menu .input-group { + width: 100%; + background-color: #f5f7fa; + padding: 8px 12px; +} +.dropdown-help .dropdown-menu input { + width: 100%; + padding: 5px 10px; + outline: none; + border-radius: 3px 0 0 3px; + border: 1px solid #d1d8dd; + opacity: 0.9; + line-height: 1.5; +} +.dropdown-help .dropdown-menu button { + border: 1px solid #d1d8dd; +} @media (max-width: 767px) { - .dropdown-navbar-new-comments.open .dropdown-menu, - .dropdown-navbar-user.open .dropdown-menu { + .dropdown-help .dropdown-menu { + position: fixed !important; + top: 40px; + width: 100% !important; + } +} +@media (max-width: 767px) { + .dropdown-mobile.open .dropdown-menu { position: absolute; border-top: 1px solid rgba(0, 0, 0, 0.14902); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); @@ -86,8 +114,7 @@ right: 0; left: auto; } - .dropdown-navbar-new-comments.open .dropdown-menu > li > a, - .dropdown-navbar-user.open .dropdown-menu > li > a { + .dropdown-mobile.open .dropdown-menu > li > a { padding: 12px; } } @@ -107,6 +134,11 @@ width: 300px; background-color: rgba(255, 255, 255, 0.9); } +@media (max-width: 991px) { + #navbar-search { + width: 250px; + } +} .navbar .navbar-search-icon { color: #6C7680; font-size: inherit; diff --git a/frappe/public/css/website.css b/frappe/public/css/website.css index 3ef2ccfc6b..f7b4759965 100644 --- a/frappe/public/css/website.css +++ b/frappe/public/css/website.css @@ -102,6 +102,12 @@ kbd { font-size: 12px; border-radius: 0px 0px 4px 4px; } +.dropdown-menu .dropdown-header { + padding: 3px 14px; + font-size: 11px; + font-weight: 200; + padding-top: 12px; +} .dropdown-menu .divider { margin: 0px; } diff --git a/frappe/public/js/frappe/misc/help_links.js b/frappe/public/js/frappe/misc/help_links.js new file mode 100644 index 0000000000..09fcadd213 --- /dev/null +++ b/frappe/public/js/frappe/misc/help_links.js @@ -0,0 +1,51 @@ +frappe.provide('frappe.help.help_links'); + +frappe.help.help_links['data-import-tool'] = [ + { label: 'Importing and Exporting Data', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/data/data-import-tool.html' }, +] + +frappe.help.help_links['modules/Setup'] = [ + { label: 'Users and Permissions', url: 'http://frappe.github.io/erpnext/user/manual/en/setting-up/users-and-permissions/' }, + { label: 'Settings', url: 'http://frappe.github.io/erpnext/user/manual/en/setting-up/settings/' }, + { label: 'Data Management', url: 'http://frappe.github.io/erpnext/user/manual/en/setting-up/data/' }, + { label: 'Email', url: 'http://frappe.github.io/erpnext/user/manual/en/setting-up/email/' }, + { label: 'Printing', url: 'http://frappe.github.io/erpnext/user/manual/en/setting-up/print/' }, +] + +frappe.help.help_links['List/User'] = [ + { label: 'Adding Users', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/users-and-permissions/adding-users' }, + { label: 'Rename User', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/articles/rename-user' }, +] + +frappe.help.help_links['permission-manager'] = [ + { label: 'Role Permissions Manager', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/users-and-permissions/role-based-permissions' }, +] + +frappe.help.help_links['user-permissions'] = [ + { label: 'User Permissions', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/users-and-permissions/user-permissions' }, +] + +frappe.help.help_links['Form/System Settings'] = [ + { label: 'System Settings', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/settings/system-settings' }, +] + +frappe.help.help_links['modules_setup'] = [ + { label: 'Show or Hide Desktop Icons', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/settings/module-settings' }, +] + +frappe.help.help_links['List/Email Account'] = [ + { label: 'Email Account', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/email/email-account' }, +] + +frappe.help.help_links['List/Email Alert'] = [ + { label: 'Email Alert', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/email/email-alerts' }, +] + +frappe.help.help_links['Form/Print Settings'] = [ + { label: 'Print Settings', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/print/print-settings' }, +] + +frappe.help.help_links['print-format-builder'] = [ + { label: 'Print Format Builder', url: 'https://frappe.github.io/erpnext/user/manual/en/setting-up/print/print-format-builder' }, +] + diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index 6d5f4862b1..886fa73776 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -14,7 +14,7 @@
  • - - + +