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

Переход на quasar

Browse Source
This commit is contained in:
Book Pauk
2020-02-02 16:49:12 +07:00
parent 5e10cb2d16
commit a37dbe2c06
3 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/Reader/LoaderPage/LoaderPage.vue
View File

@@ -14,7 +14,7 @@
<div class="col-auto column justify-start items-center no-wrap overflow-hidden">
<q-input ref="input" class="full-width q-px-xs" style="max-width: 700px" outlined dense bg-color="white" v-model="bookUrl" placeholder="URL книги">
<template v-slot:append>
<q-btn round dense flat icon="done" @click="submitUrl"/>
<q-btn round dense flat icon="o_done" @click="submitUrl"/>
</template>
</q-input>

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

@@ -2,12 +2,13 @@
<q-page class="column no-wrap">
<div class="header" v-show="toolBarActive">
<div ref="buttons" class="row justify-between">
<el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
<el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
</el-tooltip>
<q-btn class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')">
<q-icon name="o_arrow_back" size="30px"/>
<q-tooltip :delay="1000" anchor="bottom right" content-style="font-size: 80%">Загрузить книгу</q-tooltip>
</q-btn>
<div>
<el-tooltip v-show="showToolButton['undoAction']" content="Действие назад" :open-delay="1000" effect="light">
<!--el-tooltip v-show="showToolButton['undoAction']" content="Действие назад" :open-delay="1000" effect="light">
<el-button ref="undoAction" class="tool-button" :class="buttonActiveClass('undoAction')" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
</el-tooltip>
<el-tooltip v-show="showToolButton['redoAction']" content="Действие вперед" :open-delay="1000" effect="light">
@@ -40,12 +41,17 @@
</el-tooltip>
<el-tooltip v-show="showToolButton['recentBooks']" content="Открыть недавние" :open-delay="1000" effect="light">
<el-button ref="recentBooks" class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')"><i class="el-icon-document"></i></el-button>
</el-tooltip>
</el-tooltip-->
</div>
<el-tooltip content="Настроить" :open-delay="1000" effect="light">
<q-btn class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')">
<q-icon name="o_settings" size="30px"/>
<q-tooltip :delay="1000" anchor="bottom left" content-style="font-size: 80%">Настроить</q-tooltip>
</q-btn>
<!--el-tooltip content="Настроить" :open-delay="1000" effect="light">
<el-button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
</el-tooltip>
</el-tooltip-->
</div>
</div>
@@ -732,7 +738,7 @@ class Reader extends Vue {
buttonClick(button) {
const activeClass = this.buttonActiveClass(button);
this.$refs[button].$el.blur();
//this.$refs[button].$el.blur();
if (activeClass['tool-button-disabled'])
return;
@@ -1159,7 +1165,7 @@ class Reader extends Vue {
}
.tool-button {
margin: 0 2px 0 2px;
margin: 0px 2px 0 2px;
padding: 0;
color: #3E843E;
background-color: #E6EDF4;
@@ -1202,10 +1208,6 @@ class Reader extends Vue {
background-color: gray;
}
i {
font-size: 200%;
}
.space {
width: 10px;
display: inline-block;

7
client/quasar.js
View File

@@ -21,8 +21,8 @@ import {QSlider} from 'quasar/src/components/slider';
//import {QTab} from 'quasar/src/components/tab';
import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
import {QSeparator} from 'quasar/src/components/separator';
import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
import {QTooltip} from 'quasar/src/components/tooltip';
const components = {
QLayout, QPageContainer, QPage, QDrawer,
@@ -38,6 +38,8 @@ const components = {
QTabPanel,
QSeparator,
QList, QItem, QItemSection, QItemLabel,
QTooltip,
};
//directives
@@ -56,7 +58,8 @@ const plugins = {
Vue.use(Quasar, { config, components, directives, plugins });
//icons
import '@quasar/extras/material-icons/material-icons.css';
//import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
//import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
//import fontawesomeV5 from 'quasar/icon-set/fontawesome-v5.js'
//Quasar.iconSet.set(fontawesomeV5);