HelpPage.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <Window @close="close">
  3. <template slot="header">
  4. Справка
  5. </template>
  6. <q-btn-toggle
  7. v-model="selectedTab"
  8. toggle-color="primary"
  9. no-caps
  10. :options="[
  11. {label: 'Общее', value: 'common'},
  12. {label: 'Клавиатура', value: 'hotkeys'},
  13. {label: 'Мышь/тачскрин', value: 'mouse'},
  14. {label: 'История версий', value: 'releases'},
  15. {label: 'Помочь проекту', value: 'donate'}
  16. ]"
  17. />
  18. <q-separator />
  19. <q-tab-panels class="fit" v-model="selectedTab">
  20. <q-tab-panel name="common">
  21. <CommonHelpPage></CommonHelpPage>
  22. </q-tab-panel>
  23. <q-tab-panel name="hotkeys">
  24. <HotkeysHelpPage></HotkeysHelpPage>
  25. </q-tab-panel>
  26. <q-tab-panel name="mouse">
  27. <MouseHelpPage></MouseHelpPage>
  28. </q-tab-panel>
  29. <q-tab-panel name="releases">
  30. <VersionHistoryPage></VersionHistoryPage>
  31. </q-tab-panel>
  32. <q-tab-panel name="donate">
  33. <DonateHelpPage></DonateHelpPage>
  34. </q-tab-panel>
  35. </q-tab-panels>
  36. </Window>
  37. </template>
  38. <script>
  39. //-----------------------------------------------------------------------------
  40. import Vue from 'vue';
  41. import Component from 'vue-class-component';
  42. import Window from '../../share/Window.vue';
  43. import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
  44. import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
  45. import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
  46. import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
  47. import VersionHistoryPage from './VersionHistoryPage/VersionHistoryPage.vue';
  48. export default @Component({
  49. components: {
  50. Window,
  51. CommonHelpPage,
  52. HotkeysHelpPage,
  53. MouseHelpPage,
  54. DonateHelpPage,
  55. VersionHistoryPage,
  56. },
  57. })
  58. class HelpPage extends Vue {
  59. selectedTab = 'common';
  60. close() {
  61. this.$emit('help-toggle');
  62. }
  63. activateDonateHelpPage() {
  64. this.selectedTab = 'donate';
  65. }
  66. activateVersionHistoryHelpPage() {
  67. this.selectedTab = 'releases';
  68. }
  69. keyHook(event) {
  70. if (event.type == 'keydown' && (event.code == 'Escape')) {
  71. this.close();
  72. }
  73. return true;
  74. }
  75. }
  76. //-----------------------------------------------------------------------------
  77. </script>
  78. <style scoped>
  79. </style>