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-04 12:20:12 +07:00
parent c886015d92
commit cb443157da
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,15 +8,19 @@
<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"
placeholder="что ищем" placeholder="что ищем"
:value="needle" @input="needle = $event.target.value"/> :value="needle" @input="needle = $event.target.value"/-->
<q-input ref="input" class="col" outlined dense
placeholder="что ищем"
v-model="needle"
/>
<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"> <q-btn-group v-show="!initStep" class="button-group row no-wrap">
<el-button @click="showNext"><i class="el-icon-arrow-down"></i></el-button> <q-btn class="button" dense stretch @click="showNext"><q-icon class="icon" name="o_expand_more" dense size="30px"/></q-btn>
<el-button @click="showPrev"><i class="el-icon-arrow-up"></i></el-button> <q-btn class="button" dense stretch @click="showPrev"><q-icon class="icon" name="o_expand_less" dense size="30px"/></q-btn>
</el-button-group> </q-btn-group>
</div> </div>
</Window> </Window>
</template> </template>
@@ -39,7 +43,9 @@ export default @Component({
}, },
foundText: function(newValue) { foundText: function(newValue) {
this.$refs.input.style.paddingRight = (10 + newValue.length*12) + 'px'; const el = this.$refs.input.$el.querySelector('label div div div input');
if (el)
el.style.paddingRight = newValue.length*12 + 'px';
}, },
}, },
}) })
@@ -194,17 +200,18 @@ class SearchPage extends Vue {
} }
.button-group { .button-group {
width: 150px; width: 120px;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 37px;
} }
.el-button { .button {
padding: 9px 17px 9px 17px; padding: 9px 17px 9px 17px;
width: 55px; width: 60px;
} }
i { .icon {
font-size: 20px; top: -8px;
} }
</style> </style>

2
client/quasar.js
View File

@@ -14,6 +14,7 @@ const config = {};
import {QCircularProgress} from 'quasar/src/components/circular-progress'; import {QCircularProgress} from 'quasar/src/components/circular-progress';
import {QInput} from 'quasar/src/components/input'; import {QInput} from 'quasar/src/components/input';
import {QBtn} from 'quasar/src/components/btn'; import {QBtn} from 'quasar/src/components/btn';
import {QBtnGroup} from 'quasar/src/components/btn-group';
import {QBtnToggle} from 'quasar/src/components/btn-toggle'; import {QBtnToggle} from 'quasar/src/components/btn-toggle';
import {QIcon} from 'quasar/src/components/icon'; import {QIcon} from 'quasar/src/components/icon';
import {QSlider} from 'quasar/src/components/slider'; import {QSlider} from 'quasar/src/components/slider';
@@ -32,6 +33,7 @@ const components = {
QCircularProgress, QCircularProgress,
QInput, QInput,
QBtn, QBtn,
QBtnGroup,
QBtnToggle, QBtnToggle,
QIcon, QIcon,
QSlider, QSlider,