forked from openhab/openhab-webui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add intergrated Help Features (openhab#2088)
Closes openhab#2058. This converts the developer sidebar into a multipurpose dock. It keeps the previous developer sidebar as the `Tools` panel and adds a `Help` panel. The new `Help` panel contains 4 different sections: 1) A context dependent section that will show basic help for the administrative page currently viewed. These pages give basic definitions, some simple tips and links to the relevant full documentation. 2) An add-on section that lists all the currently installed add-ons and provides direct links to their documentation pages. 3) A FAQ section for simple answers to common questions with internal links to help guide the users, some external links to relevant resources, and links to documentation pages providing more details about the question. 4) A Quick-Start section that guides a new user with click-by-click instructions for everything from binding installation to adding a widget to a MainUI page with links to the detailed Getting Started Tutorial for each step. This section is opened by default when an administrator opens a new MainUI instance with no configured overview page (i.e., most likely a new user). All of the main setting list pages and the overview page now have a help icon in the navbar that toggles the help dock. FAQ and Quick-Start data are stored in separate JSON formatted files for ease of addition and maintenance. ------ Also-by: Florian Hotze <[email protected]> Signed-off-by: Justin Georgi <[email protected]>
- Loading branch information
1 parent
dfbdcf2
commit b4128cb
Showing
26 changed files
with
916 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <template> | ||
| <f7-page class="developer-dock"> | ||
| <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" style="width: 100%" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'" /> | ||
| <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 5px; margin-bottom: 5px"> | ||
| <f7-button :active="dockView === 'tools'" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools'})"> | ||
| Tools | ||
| </f7-button> | ||
| <f7-button :active="dockView === 'help'" @click="$f7.emit('selectDeveloperDock',{'dock': 'help'})"> | ||
| Help | ||
| </f7-button> | ||
| </f7-segmented> | ||
| <f7-segmented v-if="dockView === 'tools'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0"> | ||
| <f7-button :active="activeToolTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'pin'})" /> | ||
| <f7-button :active="activeToolTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'events'})" /> | ||
| <f7-button :active="activeToolTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'scripting'})" /> | ||
| <f7-button :active="activeToolTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'tools'})" /> | ||
| </f7-segmented> | ||
| <f7-segmented v-if="dockView === 'help'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0"> | ||
| <f7-button :active="activeHelpTab === 'current'" icon-f7="doc_richtext" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'current'})" /> | ||
| <f7-button :active="activeHelpTab === 'binding'" icon-f7="bag_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'binding'})" /> | ||
| <f7-button :active="activeHelpTab === 'faq'" icon-f7="question_diamond_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'faq'})" /> | ||
| <f7-button :active="activeHelpTab === 'quick'" icon-f7="cursor_rays" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'quick'})" /> | ||
| </f7-segmented> | ||
| <developer-sidebar v-if="dockView === 'tools'" :activeToolTab="activeToolTab" /> | ||
| <help-sidebar v-if="dockView === 'help'" :activeHelpTab="activeHelpTab" /> | ||
| </f7-page> | ||
| </template> | ||
|
|
||
| <style lang="stylus"> | ||
| .panel-right.panel-in-breakpoint:before | ||
| position absolute | ||
| left 0 | ||
| top 0 | ||
| height 100% | ||
| width 1px | ||
| background rgba(0,0,0,0.1) | ||
| content '' | ||
| z-index 6000 | ||
| .developer-dock | ||
| scrollbar-width none /* Firefox */ | ||
| -ms-overflow-style none /* IE 10+ */ | ||
| </style> | ||
|
|
||
| <script> | ||
| import DeveloperSidebar from './developer-sidebar.vue' | ||
| import HelpSidebar from './help-sidebar.vue' | ||
| export default { | ||
| components: { | ||
| DeveloperSidebar, | ||
| HelpSidebar | ||
| }, | ||
| props: ['dock', 'helpTab', 'toolTab'], | ||
| computed: { | ||
| dockView () { | ||
| return this.dock | ||
| }, | ||
| activeHelpTab () { | ||
| return (this.helpTab || 'current') | ||
| }, | ||
| activeToolTab () { | ||
| return (this.toolTab || 'pin') | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.