Переход на quasar

This commit is contained in:
Book Pauk
2020-02-25 21:46:30 +07:00
parent efd4fbad70
commit 82ea416e67
3 changed files with 64 additions and 11 deletions

View File

@@ -474,7 +474,16 @@ class SettingsPage extends Vue {
try {
const result = await this.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
`<br><br>Введите новый ключ доступа:`, ' ', {
inputValidator: (str) => { if (str && utils.fromBase58(str).length == 32) return true; else return 'Неверный формат ключа'; },
inputValidator: (str) => {
try {
if (str && utils.fromBase58(str).length == 32) {
return true;
}
} catch (e) {
//
}
return 'Неверный формат ключа';
},
inputValue: (key && _.isString(key) ? key : null),
});
/*
@@ -547,10 +556,14 @@ class SettingsPage extends Vue {
width: 75px;
}
.label-2, .label-3, .label-4, .label-5, .label-6 {
.label-2, .label-3, .label-4, .label-5 {
width: 110px;
}
.label-6 {
width: 100px;
}
.label-1, .label-2, .label-3, .label-4, .label-5, .label-6 {
display: flex;
flex-direction: column;

View File

@@ -1,7 +1,7 @@
<!---------------------------------------------->
<div class="part-header">Подсказки, уведомления</div>
<div class="item row">
<div class="item row no-wrap">
<div class="label-6">Подсказка</div>
<q-checkbox size="xs" v-model="showClickMapPage" label="Показывать области управления кликом" :disable="!clickControl" >
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
@@ -20,7 +20,7 @@
</q-checkbox>
</div>
<div class="item row">
<div class="item row no-wrap">
<div class="label-6">Уведомление</div>
<q-checkbox size="xs" v-model="showServerStorageMessages" label="Показывать сообщения синхронизации">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">

View File

@@ -21,7 +21,7 @@
</div>
<div class="buttons row justify-end q-pa-md">
<q-btn class="q-px-md" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
<q-btn class="q-px-md" dense no-caps @click="okClick">OK</q-btn>
</div>
</div>
@@ -45,7 +45,7 @@
<div class="buttons row justify-end q-pa-md">
<q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
</div>
</div>
@@ -65,12 +65,13 @@
<div class="col q-mx-md">
<div v-html="message"></div>
<q-input ref="input" outlined dense v-model="inputValue"/>
<q-input ref="input" class="q-mt-xs" outlined dense v-model="inputValue"/>
<div class="error"><span v-show="error != ''">{{ error }}</span></div>
</div>
<div class="buttons row justify-end q-pa-md">
<q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
</div>
</div>
</q-dialog>
@@ -84,6 +85,11 @@ import Component from 'vue-class-component';
//import * as utils from '../../share/utils';
export default @Component({
watch: {
inputValue: function(newValue) {
this.validate(newValue);
},
}
})
class StdDialog extends Vue {
caption = '';
@@ -91,6 +97,7 @@ class StdDialog extends Vue {
active = false;
type = '';
inputValue = '';
error = '';
created() {
if (this.$root.addKeyHook) {
@@ -104,6 +111,9 @@ class StdDialog extends Vue {
this.ok = false;
this.type = '';
this.inputValidator = null;
this.inputValue = '';
this.error = '';
}
onHide() {
@@ -115,12 +125,35 @@ class StdDialog extends Vue {
onShow() {
if (this.type == 'prompt') {
this.enableValidator = true;
if (this.inputValue)
this.validate(this.inputValue);
this.$refs.input.focus();
}
}
validate(value) {
if (!this.enableValidator)
return false;
if (this.inputValidator) {
const result = this.inputValidator(value);
if (result !== true) {
this.error = result;
return false;
}
}
this.error = '';
return true;
}
okClick() {
if (this.type == 'prompt' && !this.validate(this.inputValue)) {
this.$refs.dialog.shake();
return;
}
this.ok = true;
this.$refs.dialog.hide();
}
alert(message, caption) {
@@ -159,6 +192,7 @@ class StdDialog extends Vue {
prompt(message, caption, opts) {
return new Promise((resolve) => {
this.enableValidator = false;
this.init(message, caption);
this.hideTrigger = () => {
@@ -170,8 +204,10 @@ class StdDialog extends Vue {
};
this.type = 'prompt';
this.inputValue = opts.inputValue || '';
this.inputValidator = opts.inputValidator || null;
if (opts) {
this.inputValidator = opts.inputValidator || null;
this.inputValue = opts.inputValue || '';
}
this.active = true;
});
}
@@ -179,7 +215,6 @@ class StdDialog extends Vue {
keyHook(event) {
if (this.active && event.code == 'Enter') {
this.okClick();
this.$refs.dialog.hide();
event.stopPropagation();
event.preventDefault();
}
@@ -206,4 +241,9 @@ class StdDialog extends Vue {
height: 60px;
}
.error {
height: 20px;
font-size: 80%;
color: red;
}
</style>