HelpPage.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <div ref="main" class="main" @click="close">
  3. <div class="mainWindow" @click.stop>
  4. <Window @close="close">
  5. <template slot="header">
  6. Справка
  7. </template>
  8. <el-tabs type="border-card" v-model="selectedTab">
  9. <el-tab-pane class="tab" label="Общее">
  10. <CommonHelpPage></CommonHelpPage>
  11. </el-tab-pane>
  12. <el-tab-pane label="Клавиатура">
  13. <HotkeysHelpPage></HotkeysHelpPage>
  14. </el-tab-pane>
  15. <el-tab-pane label="Мышь/тачпад">
  16. <MouseHelpPage></MouseHelpPage>
  17. </el-tab-pane>
  18. <el-tab-pane label="История версий" name="releases">
  19. <VersionHistoryPage></VersionHistoryPage>
  20. </el-tab-pane>
  21. <el-tab-pane label="Помочь проекту" name="donate">
  22. <DonateHelpPage></DonateHelpPage>
  23. </el-tab-pane>
  24. </el-tabs>
  25. </Window>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. //-----------------------------------------------------------------------------
  31. import Vue from 'vue';
  32. import Component from 'vue-class-component';
  33. import Window from '../../share/Window.vue';
  34. import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
  35. import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
  36. import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
  37. import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
  38. import VersionHistoryPage from './VersionHistoryPage/VersionHistoryPage.vue';
  39. export default @Component({
  40. components: {
  41. Window,
  42. CommonHelpPage,
  43. HotkeysHelpPage,
  44. MouseHelpPage,
  45. DonateHelpPage,
  46. VersionHistoryPage,
  47. },
  48. })
  49. class HelpPage extends Vue {
  50. selectedTab = null;
  51. close() {
  52. this.$emit('help-toggle');
  53. }
  54. activateDonateHelpPage() {
  55. this.selectedTab = 'donate';
  56. }
  57. activateVersionHistoryHelpPage() {
  58. this.selectedTab = 'releases';
  59. }
  60. keyHook(event) {
  61. if (event.type == 'keydown' && (event.code == 'Escape')) {
  62. this.close();
  63. }
  64. return true;
  65. }
  66. }
  67. //-----------------------------------------------------------------------------
  68. </script>
  69. <style scoped>
  70. .main {
  71. position: absolute;
  72. width: 100%;
  73. height: 100%;
  74. z-index: 40;
  75. display: flex;
  76. flex-direction: column;
  77. justify-content: center;
  78. align-items: center;
  79. }
  80. .mainWindow {
  81. width: 100%;
  82. height: 100%;
  83. display: flex;
  84. }
  85. .el-tabs {
  86. flex: 1;
  87. display: flex;
  88. flex-direction: column;
  89. overflow: hidden;
  90. }
  91. .el-tab-pane {
  92. flex: 1;
  93. display: flex;
  94. overflow: hidden;
  95. }
  96. </style>