Рефакторинг, store-модуль reader, начало верстки LoaderPage
This commit is contained in:
Book Pauk
51
client/components/Reader/LoaderPage/LoaderPage.vue
Normal file
51
client/components/Reader/LoaderPage/LoaderPage.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="part">
|
||||
|
||||
</div>
|
||||
<div class="part">
|
||||
|
||||
</div>
|
||||
<div class="part bottom">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//-----------------------------------------------------------------------------
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
|
||||
export default @Component({
|
||||
})
|
||||
class LoaderPage extends Vue {
|
||||
created() {
|
||||
}
|
||||
|
||||
}
|
||||
//-----------------------------------------------------------------------------
|
||||
// justify-content: space-between;
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.part {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,47 +1,50 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header height='50px'>
|
||||
<div class="header">
|
||||
<el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" :class="buttonActiveClass('load')" @click="buttonClick('load')"><i class="el-icon-back"></i></el-button>
|
||||
</el-tooltip>
|
||||
<div class="header">
|
||||
<el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<div>
|
||||
<el-tooltip content="Действие назад" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
|
||||
</el-tooltip>
|
||||
<div class="space"></div>
|
||||
<el-tooltip content="На весь экран" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" :class="buttonActiveClass('fullscreen')" @click="buttonClick('fullscreen')"><i class="el-icon-rank"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>
|
||||
</el-tooltip>
|
||||
<div class="space"></div>
|
||||
<el-tooltip content="История" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
|
||||
<div>
|
||||
<el-tooltip content="Действие назад" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
|
||||
</el-tooltip>
|
||||
<div class="space"></div>
|
||||
<el-tooltip content="На весь экран" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" :class="buttonActiveClass('fullscreen')" @click="buttonClick('fullscreen')"><i class="el-icon-rank"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>
|
||||
</el-tooltip>
|
||||
<div class="space"></div>
|
||||
<el-tooltip content="История" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<el-tooltip content="Настроить" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<el-tooltip content="Настроить" :open-delay="1000" effect="light">
|
||||
<el-button class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<keep-alive>
|
||||
<component :is="componentActive"></component>
|
||||
</keep-alive>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -50,8 +53,12 @@
|
||||
//-----------------------------------------------------------------------------
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import LoaderPage from './LoaderPage/LoaderPage.vue';
|
||||
|
||||
export default @Component({
|
||||
components: {
|
||||
LoaderPage
|
||||
},
|
||||
})
|
||||
class Reader extends Vue {
|
||||
created() {
|
||||
@@ -60,8 +67,8 @@ class Reader extends Vue {
|
||||
this.reader = this.$store.state.reader;
|
||||
}
|
||||
|
||||
get loadActive() {
|
||||
return this.reader.loadActive;
|
||||
get loaderActive() {
|
||||
return this.reader.loaderActive;
|
||||
}
|
||||
|
||||
get fullScreenActive() {
|
||||
@@ -70,7 +77,7 @@ class Reader extends Vue {
|
||||
|
||||
buttonClick(button) {
|
||||
switch (button) {
|
||||
case 'load': this.commit('reader/setLoadActive', !this.loadActive); break;
|
||||
case 'loader': this.commit('reader/setLoaderActive', !this.loaderActive); break;
|
||||
case 'fullscreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break;
|
||||
}
|
||||
}
|
||||
@@ -78,11 +85,21 @@ class Reader extends Vue {
|
||||
buttonActiveClass(button) {
|
||||
const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
|
||||
switch (button) {
|
||||
case 'load': return (this.loadActive ? classActive : {});
|
||||
case 'loader': return (this.loaderActive ? classActive : {});
|
||||
case 'fullscreen': return (this.fullScreenActive ? classActive : {});
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
get componentActive() {
|
||||
let result = '';
|
||||
|
||||
if (!result) {
|
||||
this.commit('reader/setLoaderActive', true);
|
||||
result = 'LoaderPage';
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
//-----------------------------------------------------------------------------
|
||||
//, .tool-button:focus, .tool-button:active, .tool-button:hover
|
||||
@@ -111,6 +128,7 @@ class Reader extends Vue {
|
||||
}
|
||||
|
||||
.el-main {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #EBE2C9;
|
||||
|
||||
29
client/store/modules/reader.js
Normal file
29
client/store/modules/reader.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// initial state
|
||||
const state = {
|
||||
loaderActive: false,
|
||||
fullScreenActive: false,
|
||||
};
|
||||
|
||||
// getters
|
||||
const getters = {};
|
||||
|
||||
// actions
|
||||
const actions = {};
|
||||
|
||||
// mutations
|
||||
const mutations = {
|
||||
setLoaderActive(state, value) {
|
||||
state.loaderActive = value;
|
||||
},
|
||||
setFullScreenActive(state, value) {
|
||||
state.fullScreenActive = value;
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
};
|
||||
Reference in New Issue
Block a user