Доработки реакции кнопок
This commit is contained in:
Book Pauk
@@ -2,41 +2,41 @@
|
|||||||
<el-container>
|
<el-container>
|
||||||
<el-header height='50px'>
|
<el-header height='50px'>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<el-tooltip content="Загрузить книгу" open-delay="1000" effect="light">
|
<el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" :class="buttonActiveClass('back')" @click="doBack"><i class="el-icon-back"></i></el-button>
|
<el-button class="tool-button" :class="buttonActiveClass('load')" @click="buttonClick('load')"><i class="el-icon-back"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<el-tooltip content="Действие назад" open-delay="1000" effect="light">
|
<el-tooltip content="Действие назад" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Действие вперед" open-delay="1000" effect="light">
|
<el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<div class="space"></div>
|
<div class="space"></div>
|
||||||
<el-tooltip content="На весь экран" open-delay="1000" effect="light">
|
<el-tooltip content="На весь экран" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
|
<el-button class="tool-button" :class="buttonActiveClass('fullscreen')" @click="buttonClick('fullscreen')"><i class="el-icon-rank"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Прокрутка книги" open-delay="1000" effect="light">
|
<el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Плавный скроллинг" open-delay="1000" effect="light">
|
<el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Найти в тексте" open-delay="1000" effect="light">
|
<el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Принудительно обновить книгу в обход кеша" open-delay="1000" effect="light">
|
<el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<div class="space"></div>
|
<div class="space"></div>
|
||||||
<el-tooltip content="История" open-delay="1000" effect="light">
|
<el-tooltip content="История" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-tooltip content="Настроить" open-delay="1000" effect="light">
|
<el-tooltip content="Настроить" :open-delay="1000" effect="light">
|
||||||
<el-button class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>
|
<el-button class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
@@ -54,18 +54,32 @@ import Component from 'vue-class-component';
|
|||||||
export default @Component({
|
export default @Component({
|
||||||
})
|
})
|
||||||
class Reader extends Vue {
|
class Reader extends Vue {
|
||||||
activeBack = false;
|
|
||||||
created() {
|
created() {
|
||||||
|
this.commit = this.$store.commit;
|
||||||
|
this.dispatch = this.$store.dispatch;
|
||||||
|
this.reader = this.$store.state.reader;
|
||||||
}
|
}
|
||||||
|
|
||||||
doBack() {
|
get loadActive() {
|
||||||
this.activeBack = !this.activeBack;
|
return this.reader.loadActive;
|
||||||
|
}
|
||||||
|
|
||||||
|
get fullScreenActive() {
|
||||||
|
return this.reader.fullScreenActive;
|
||||||
|
}
|
||||||
|
|
||||||
|
buttonClick(button) {
|
||||||
|
switch (button) {
|
||||||
|
case 'load': this.commit('reader/setLoadActive', !this.loadActive); break;
|
||||||
|
case 'fullscreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
buttonActiveClass(button) {
|
buttonActiveClass(button) {
|
||||||
const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true };
|
const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
|
||||||
switch (button) {
|
switch (button) {
|
||||||
case 'back': return (this.activeBack ? activeClass : {}); break;
|
case 'load': return (this.loadActive ? classActive : {});
|
||||||
|
case 'fullscreen': return (this.fullScreenActive ? classActive : {});
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
@@ -125,6 +139,9 @@ class Reader extends Vue {
|
|||||||
box-shadow: 0 0 0;
|
box-shadow: 0 0 0;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #8AB45F;
|
background-color: #8AB45F;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-button-active:hover {
|
.tool-button-active:hover {
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import createPersistedState from 'vuex-persistedstate';
|
|||||||
import root from './root.js';
|
import root from './root.js';
|
||||||
import uistate from './modules/uistate';
|
import uistate from './modules/uistate';
|
||||||
import config from './modules/config';
|
import config from './modules/config';
|
||||||
|
import reader from './modules/reader';
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex);
|
||||||
|
|
||||||
@@ -13,7 +14,8 @@ const debug = process.env.NODE_ENV !== 'production';
|
|||||||
export default new Vuex.Store(Object.assign({}, root, {
|
export default new Vuex.Store(Object.assign({}, root, {
|
||||||
modules: {
|
modules: {
|
||||||
uistate,
|
uistate,
|
||||||
config
|
config,
|
||||||
|
reader,
|
||||||
},
|
},
|
||||||
strict: debug,
|
strict: debug,
|
||||||
plugins: [createPersistedState()]
|
plugins: [createPersistedState()]
|
||||||
|
|||||||
Reference in New Issue
Block a user