Переход на quasar

This commit is contained in:
Book Pauk
2020-02-02 14:24:43 +07:00
parent 3a89e61bd8
commit 5f99067e56
13 changed files with 40 additions and 90 deletions

View File

@@ -1,8 +1,9 @@
<template> <template>
<el-container> <q-layout view="lhr lpr lfr">
<el-aside v-if="showAsideBar" :width="asideWidth"> <q-drawer v-model="showAsideBar" :width="asideWidth">
<div class="app-name"><span v-html="appName"></span></div> <div class="app-name"><span v-html="appName"></span></div>
<el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button> <q-btn class="el-button-collapse" @click="toggleCollapse"></q-btn>
<el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router> <el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router>
<el-menu-item index="/cardindex"> <el-menu-item index="/cardindex">
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
@@ -33,14 +34,14 @@
<span :class="itemTitleClass('/help')" slot="title">{{ this.itemRuText['/help'] }}</span> <span :class="itemTitleClass('/help')" slot="title">{{ this.itemRuText['/help'] }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-aside> </q-drawer>
<el-main v-if="showMain" :style="{padding: (isReaderActive ? 0 : '5px')}"> <q-page-container>
<keep-alive> <keep-alive>
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</el-main> </q-page-container>
</el-container> </q-layout>
</template> </template>
<script> <script>
@@ -137,9 +138,9 @@ class App extends Vue {
get asideWidth() { get asideWidth() {
if (this.uistate.asideBarCollapse) { if (this.uistate.asideBarCollapse) {
return '64px'; return 64;
} else { } else {
return '170px'; return 170;
} }
} }
@@ -197,10 +198,6 @@ class App extends Vue {
return this.rootRoute == '/reader'; return this.rootRoute == '/reader';
} }
get showMain() {
return (this.showAsideBar || this.isReaderActive);
}
redirectIfNeeded() { redirectIfNeeded() {
if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) { if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) {
//старый url //старый url
@@ -228,52 +225,6 @@ class App extends Vue {
line-height: 140%; line-height: 140%;
font-weight: bold; font-weight: bold;
} }
.bold-font {
font-weight: bold;
}
.el-container {
height: 100%;
}
.el-aside {
line-height: 1;
background-color: #ccc;
color: #000;
}
.el-main {
padding: 0;
background-color: #E6EDF4;
color: #000;
}
.el-menu-vertical:not(.el-menu--collapse) {
background-color: inherit;
color: inherit;
text-align: left;
width: 100%;
border: 0;
}
.el-menu--collapse {
background-color: inherit;
color: inherit;
border: 0;
}
.el-button-collapse, .el-button-collapse:focus, .el-button-collapse:active, .el-button-collapse:hover {
background-color: inherit;
color: inherit;
margin-top: 5px;
width: 100%;
height: 64px;
border: 0;
}
.el-menu-item {
font-size: 85%;
}
</style> </style>
<style> <style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <div>
Раздел Book в разработке Раздел Book в разработке
</el-container> </div>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <div>
Раздел Card в разработке Раздел Card в разработке
</el-container> </div>
</template> </template>
<script> <script>

View File

@@ -1,15 +1,9 @@
<template> <template>
<el-container direction="vertical"> <q-page>
<el-tabs type="border-card" style="height: 100%;" v-model="selectedTab"> <keep-alive>
<el-tab-pane label="Поиск"></el-tab-pane> <router-view></router-view>
<el-tab-pane label="Автор"></el-tab-pane> </keep-alive>
<el-tab-pane label="Книга"></el-tab-pane> </q-page>
<el-tab-pane label="История"></el-tab-pane>
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-tabs>
</el-container>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <div>
Раздел History в разработке Раздел History в разработке
</el-container> </div>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <div>
Раздел Search в разработке Раздел Search в разработке
</el-container> </div>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <q-page>
Раздел Help в разработке Раздел Help в разработке
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <q-page>
Раздел Income в разработке Раздел Income в разработке
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <q-page>
Страница не найдена Страница не найдена
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -1,5 +1,5 @@
<template> <template>
<el-container> <q-page>
<el-header v-show="toolBarActive" height='50px'> <el-header v-show="toolBarActive" height='50px'>
<div ref="header" class="header"> <div ref="header" class="header">
<el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light"> <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
@@ -138,7 +138,7 @@
</el-dialog> </el-dialog>
</el-main> </el-main>
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <q-page>
Раздел Settings в разработке Раздел Settings в разработке
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-container> <q-page>
Раздел Sources в разработке Раздел Sources в разработке
</el-container> </q-page>
</template> </template>
<script> <script>

View File

@@ -4,6 +4,10 @@ import 'quasar/dist/quasar.css';
import Quasar from 'quasar/src/vue-plugin.js' import Quasar from 'quasar/src/vue-plugin.js'
//components //components
import {QLayout} from 'quasar/src/components/layout';
import {QPageContainer, QPage} from 'quasar/src/components/page';
import {QDrawer} from 'quasar/src/components/drawer';
import {QCircularProgress} from 'quasar/src/components/circular-progress'; import {QCircularProgress} from 'quasar/src/components/circular-progress';
import {QInput} from 'quasar/src/components/input'; import {QInput} from 'quasar/src/components/input';
import {QBtn} from 'quasar/src/components/btn'; import {QBtn} from 'quasar/src/components/btn';
@@ -22,6 +26,7 @@ import AppFullscreen from 'quasar/src/plugins/AppFullscreen';
const config = {}; const config = {};
const components = { const components = {
QLayout, QPageContainer, QPage, QDrawer,
QCircularProgress, QCircularProgress,
QInput, QInput,
QBtn, QBtn,