deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Доработки реакции кнопок

Browse Source
This commit is contained in:
Book Pauk
2019-01-10 19:12:45 +07:00
parent 3f635d604f
commit c79c98f53d
2 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
client/components/Reader/Reader.vue
View File

@@ -2,41 +2,41 @@
<el-container>
<el-header height='50px'>
<div class="header">
<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-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>
<el-tooltip content="Действие назад" open-delay="1000" effect="light">
<el-button class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
<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="" ><i class="el-icon-arrow-right"></i></el-button>
<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" @click=""><i class="el-icon-rank"></i></el-button>
<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=""><i class="el-icon-d-arrow-right"></i></el-button>
<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=""><i class="el-icon-sort"></i></el-button>
<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=""><i class="el-icon-search"></i></el-button>
<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=""><i class="el-icon-refresh"></i></el-button>
<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=""><i class="el-icon-document"></i></el-button>
<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=""><i class="el-icon-setting"></i></el-button>
<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>
@@ -54,18 +54,32 @@ import Component from 'vue-class-component';
export default @Component({
})
class Reader extends Vue {
activeBack = false;
created() {
this.commit = this.$store.commit;
this.dispatch = this.$store.dispatch;
this.reader = this.$store.state.reader;
}
doBack() {
this.activeBack = !this.activeBack;
get loadActive() {
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) {
const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true };
const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
switch (button) {
case 'back': return (this.activeBack ? activeClass : {}); break;
case 'load': return (this.loadActive ? classActive : {});
case 'fullscreen': return (this.fullScreenActive ? classActive : {});
}
return {};
}
@@ -125,6 +139,9 @@ class Reader extends Vue {
box-shadow: 0 0 0;
color: white;
background-color: #8AB45F;
position: relative;
top: 1px;
left: 1px;
}
.tool-button-active:hover {

4
client/store/index.js
View File

@@ -5,6 +5,7 @@ import createPersistedState from 'vuex-persistedstate';
import root from './root.js';
import uistate from './modules/uistate';
import config from './modules/config';
import reader from './modules/reader';
Vue.use(Vuex);
@@ -13,7 +14,8 @@ const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store(Object.assign({}, root, {
modules: {
uistate,
config
config,
reader,
},
strict: debug,
plugins: [createPersistedState()]