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-08-28 17:30:29 +07:00
parent 4f87508834
commit de13cfb555
2 changed files with 25 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/components/Reader/SearchPage/SearchPage.vue
View File

@@ -1,28 +1,24 @@
<template> <template>
<div ref="main" class="main" @click="close"> <Window ref="window" height="125px" max-width="600px" :top-shift="-50" @close="close">
<div class="mainWindow" @click.stop> <template slot="header">
<Window @close="close"> {{ header }}
<template slot="header"> </template>
{{ header }}
</template>
<div class="content"> <div class="content">
<span v-show="initStep">{{ initPercentage }}%</span> <span v-show="initStep">{{ initPercentage }}%</span>
<div v-show="!initStep" class="input"> <div v-show="!initStep" class="input">
<input ref="input" class="el-input__inner" <input ref="input" class="el-input__inner"
placeholder="что ищем" placeholder="что ищем"
:value="needle" @input="needle = $event.target.value"/> :value="needle" @input="needle = $event.target.value"/>
<div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div> <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
</div> </div>
<el-button-group v-show="!initStep" class="button-group"> <el-button-group v-show="!initStep" class="button-group">
<el-button @click="showNext"><i class="el-icon-arrow-down"></i></el-button> <el-button @click="showNext"><i class="el-icon-arrow-down"></i></el-button>
<el-button @click="showPrev"><i class="el-icon-arrow-up"></i></el-button> <el-button @click="showPrev"><i class="el-icon-arrow-up"></i></el-button>
</el-button-group> </el-button-group>
</div>
</Window>
</div> </div>
</div> </Window>
</template> </template>
<script> <script>
@@ -61,6 +57,8 @@ class SearchPage extends Vue {
} }
async init(parsed) { async init(parsed) {
this.$refs.window.init();
if (this.parsed != parsed) { if (this.parsed != parsed) {
this.initStep = true; this.initStep = true;
this.stopInit = false; this.stopInit = false;
@@ -178,32 +176,13 @@ class SearchPage extends Vue {
</script> </script>
<style scoped> <style scoped>
.main {
position: absolute;
width: 100%;
height: 100%;
z-index: 40;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainWindow {
width: 100%;
max-width: 500px;
height: 125px;
display: flex;
position: relative;
top: -50px;
}
.content { .content {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
min-width: 430px;
} }
.input { .input {

6
client/components/share/Window.vue
View File

@@ -22,6 +22,8 @@ export default @Component({
props: { props: {
height: { type: String, default: '100%' }, height: { type: String, default: '100%' },
width: { type: String, default: '100%' }, width: { type: String, default: '100%' },
maxWidth: { type: String, default: '' },
topShift: { type: Number, default: 0 },
} }
}) })
class Window extends Vue { class Window extends Vue {
@@ -29,9 +31,11 @@ class Window extends Vue {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.windowBox.style.height = this.height; this.$refs.windowBox.style.height = this.height;
this.$refs.windowBox.style.width = this.width; this.$refs.windowBox.style.width = this.width;
if (this.maxWidth)
this.$refs.windowBox.style.maxWidth = this.maxWidth;
const left = (this.$refs.main.offsetWidth - this.$refs.windowBox.offsetWidth)/2; const left = (this.$refs.main.offsetWidth - this.$refs.windowBox.offsetWidth)/2;
const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2; const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2 + this.topShift;
this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px'; this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px';
this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px'; this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px';
}); });