Optimize the pop-up window interaction
physton
parent
82b358dfd8
commit
6f7438cc85
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition name="fadeDown">
|
<Transition name="fadeDown">
|
||||||
<div class="physton-prompt-blacklist" v-if="isOpen" @click="">
|
<div class="physton-prompt-blacklist" v-if="isOpen" @click="onCloseClick">
|
||||||
<div class="blacklist-main" @click.stop>
|
<div class="blacklist-main" @click.stop>
|
||||||
|
<div class="blacklist-popup-close" @click="onCloseClick">
|
||||||
|
<icon-svg name="close"/>
|
||||||
|
</div>
|
||||||
<div class="blacklist-body" @click.stop>
|
<div class="blacklist-body" @click.stop>
|
||||||
<div class="blacklist-desc">1. {{ getLang('blacklist_desc') }}</div>
|
<div class="blacklist-desc">1. {{ getLang('blacklist_desc') }}</div>
|
||||||
<div class="blacklist-group">
|
<div class="blacklist-group">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition name="fadeDown">
|
<Transition name="fadeDown">
|
||||||
<div class="physton-prompt-hotkey" v-if="isOpen" @click="">
|
<div class="physton-prompt-hotkey" v-if="isOpen" @click="onCloseClick">
|
||||||
<div class="hotkey-main" @click.stop>
|
<div class="hotkey-main" @click.stop>
|
||||||
|
<div class="hotkey-popup-close" @click="onCloseClick">
|
||||||
|
<icon-svg name="close"/>
|
||||||
|
</div>
|
||||||
<div class="hotkey-body" @click.stop>
|
<div class="hotkey-body" @click.stop>
|
||||||
<div class="hotkey-list">
|
<div class="hotkey-list">
|
||||||
<div class="hotkey-item" v-for="(hotkey) in hotkeys" :key="hotkey.name">
|
<div class="hotkey-item" v-for="(hotkey) in hotkeys" :key="hotkey.name">
|
||||||
|
|
|
||||||
|
|
@ -1,134 +1,137 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition name="fadeDown">
|
<Transition name="fadeDown">
|
||||||
<div class="physton-prompt-translate-setting" v-if="isOpen">
|
<div class="physton-prompt-translate-setting" v-if="isOpen" @click="onCloseClick">
|
||||||
<div class="translate-setting-main">
|
<div class="translate-setting-main" @click.stop>
|
||||||
<div class="translate-setting-content">
|
<div class="translate-setting-close" @click="onCloseClick">
|
||||||
<div class="setting-line">
|
<icon-svg name="close"/>
|
||||||
<div class="line-title">{{ getLang('translate_api') }}</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<select v-model="apiKey">
|
|
||||||
<optgroup v-for="typeGroup in supportApi" :key="typeGroup.type"
|
|
||||||
:label="getLang(typeGroup.type)">
|
|
||||||
<option v-for="item in typeGroup.children" :key="item.key" :value="item.key" :disabled="item.disabled">
|
|
||||||
{{ getItemName(item) }}
|
|
||||||
</option>
|
|
||||||
</optgroup>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="setting-line" v-if="apiItem && apiItem.type == 'translators'">
|
<div class="translate-setting-content" @click.stop>
|
||||||
<div class="line-title"></div>
|
<div class="setting-line">
|
||||||
<div class="line-content">
|
<div class="line-title">{{ getLang('translate_api') }}</div>
|
||||||
<span class="common-red">*{{ getLang('not_api_key_desc') }}</span>
|
<div class="line-content">
|
||||||
</div>
|
<select v-model="apiKey">
|
||||||
</div>
|
<optgroup v-for="typeGroup in supportApi" :key="typeGroup.type"
|
||||||
<div class="setting-line" v-if="apiItem.help">
|
:label="getLang(typeGroup.type)">
|
||||||
<div class="line-title"></div>
|
<option v-for="item in typeGroup.children" :key="item.key" :value="item.key" :disabled="item.disabled">
|
||||||
<div class="line-content">
|
{{ getItemName(item) }}
|
||||||
<div v-for="item in apiItem.help" class="help-list">
|
</option>
|
||||||
<div class="help-item">[?] <a :href="item.url" target="_blank">{{ item.title }}</a></div>
|
</optgroup>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line" v-for="config in configs">
|
|
||||||
<div class="line-title">{{ config.title }}</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<input type="text" v-if="config.type == 'input'" v-model="config.value" @change="onChangeConfigValue(config)">
|
|
||||||
<select v-if="config.type == 'select'" v-model="config.value">
|
|
||||||
<option v-for="option in config.options" :value="option">{{ option }}</option>
|
|
||||||
</select>
|
|
||||||
<div v-if="config.desc" v-html="config.desc"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line" v-if="apiItem.key === 'mbart50'">
|
|
||||||
<div class="line-title">{{ getLang('initialize') }}</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div class="hover-scale-120 test-btn" @click="onMbart50Initialize">
|
|
||||||
<icon-svg v-if="mbart50Loading" name="loading"/>
|
|
||||||
<template v-else>{{ getLang('initialize') }}</template>
|
|
||||||
</div>
|
|
||||||
<p class="common-red" v-html="getLang('download_model_desc')"></p>
|
|
||||||
<p class="common-red" v-html="getLang('download_model_desc2')"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line" v-if="apiItem.key === 'mbart50' && mbart50Message">
|
|
||||||
<div class="line-title"></div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div :class="[mbart50Success ? '' : 'common-red']">{{ mbart50Message }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line">
|
|
||||||
<div class="line-title">{{ getLang('translate_test') }}</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<textarea class="test-input" v-model="testText"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line">
|
|
||||||
<div class="line-title"></div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div class="hover-scale-120 test-btn" @click="onTestClick">
|
|
||||||
<icon-svg v-if="loading" name="loading"/>
|
|
||||||
<template v-else>{{getLang('test')}}</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line">
|
|
||||||
<div class="line-title"></div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div class="translate-error" v-if="!translateSuccess && errorMessage">{{ errorMessage }}</div>
|
|
||||||
<textarea class="test-input" v-if="translatedText" v-model="translatedText"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line">
|
|
||||||
<div class="line-title">{{ getLang('Keyword_group') }}</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div v-html="getLang('enhance_translation_use_Keyword_group_desc')"></div>
|
|
||||||
<label class="onlyCsvOnAuto">
|
|
||||||
<input class="hover-scale-120" type="checkbox" value="1" v-model="groupTagsTranslateValue">
|
|
||||||
<span>{{ getLang('enhance_translation_use_keyword_group') }}</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-line">
|
|
||||||
<div class="line-title">TagComplete</div>
|
|
||||||
<div class="line-content">
|
|
||||||
<div class="help-list">
|
|
||||||
<div class="help-item">[?] <a :href="globals.docs + '/TranslationApiConfiguration.html#tagcomplete-translation-enhancement'" target="_blank">[Wiki] TagComplete Translation enhancement</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-html="getLang('tagcomplete_translate_desc')"></div>
|
|
||||||
<div class="common-red" v-html="getLang('tagcomplete_translate_desc2')"></div>
|
|
||||||
<div class="line-row">
|
|
||||||
<select v-model="tagCompleteFileKey" @change="tagCompleteResults = []">
|
|
||||||
<option v-for="item in tagCompleteFiles" :value="item.key">{{ item.name }}</option>
|
|
||||||
</select>
|
</select>
|
||||||
<div class="refresh-btn hover-scale-120" v-tooltip="getLang('refresh')" @click="refreshCSVs">
|
</div>
|
||||||
<icon-svg v-if="tagCompleteFilesLoading" name="loading"/>
|
</div>
|
||||||
<icon-svg v-else name="refresh" />
|
<div class="setting-line" v-if="apiItem && apiItem.type == 'translators'">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<span class="common-red">*{{ getLang('not_api_key_desc') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line" v-if="apiItem.help">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div v-for="item in apiItem.help" class="help-list">
|
||||||
|
<div class="help-item">[?] <a :href="item.url" target="_blank">{{ item.title }}</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label class="onlyCsvOnAuto" :style="{display: tagCompleteFileKey ? 'flex': 'none'}">
|
|
||||||
<input class="hover-scale-120" type="checkbox" value="1" v-model="onlyCsvOnAutoValue">
|
|
||||||
<span>{{ getLang('only_csv_on_auto') }}</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="setting-line" v-for="config in configs">
|
||||||
<div class="setting-line" v-show="tagCompleteFileKey">
|
<div class="line-title">{{ config.title }}</div>
|
||||||
<div class="line-title"></div>
|
<div class="line-content">
|
||||||
<div class="line-content">
|
<input type="text" v-if="config.type == 'input'" v-model="config.value" @change="onChangeConfigValue(config)">
|
||||||
<div class="hover-scale-120 test-btn" @click="onTagCompleteTestClick">{{ getLang('test') }}</div>
|
<select v-if="config.type == 'select'" v-model="config.value">
|
||||||
<div ref="tagCompleteResults" v-show="tagCompleteResults.length > 0">
|
<option v-for="option in config.options" :value="option">{{ option }}</option>
|
||||||
<p v-for="text in tagCompleteResults" :key="text">{{ text }}</p>
|
</select>
|
||||||
|
<div v-if="config.desc" v-html="config.desc"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="setting-line" v-if="apiItem.key === 'mbart50'">
|
||||||
|
<div class="line-title">{{ getLang('initialize') }}</div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div class="hover-scale-120 test-btn" @click="onMbart50Initialize">
|
||||||
|
<icon-svg v-if="mbart50Loading" name="loading"/>
|
||||||
|
<template v-else>{{ getLang('initialize') }}</template>
|
||||||
|
</div>
|
||||||
|
<p class="common-red" v-html="getLang('download_model_desc')"></p>
|
||||||
|
<p class="common-red" v-html="getLang('download_model_desc2')"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line" v-if="apiItem.key === 'mbart50' && mbart50Message">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div :class="[mbart50Success ? '' : 'common-red']">{{ mbart50Message }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line">
|
||||||
|
<div class="line-title">{{ getLang('translate_test') }}</div>
|
||||||
|
<div class="line-content">
|
||||||
|
<textarea class="test-input" v-model="testText"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div class="hover-scale-120 test-btn" @click="onTestClick">
|
||||||
|
<icon-svg v-if="loading" name="loading"/>
|
||||||
|
<template v-else>{{getLang('test')}}</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div class="translate-error" v-if="!translateSuccess && errorMessage">{{ errorMessage }}</div>
|
||||||
|
<textarea class="test-input" v-if="translatedText" v-model="translatedText"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line">
|
||||||
|
<div class="line-title">{{ getLang('Keyword_group') }}</div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div v-html="getLang('enhance_translation_use_Keyword_group_desc')"></div>
|
||||||
|
<label class="onlyCsvOnAuto">
|
||||||
|
<input class="hover-scale-120" type="checkbox" value="1" v-model="groupTagsTranslateValue">
|
||||||
|
<span>{{ getLang('enhance_translation_use_keyword_group') }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line">
|
||||||
|
<div class="line-title">TagComplete</div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div class="help-list">
|
||||||
|
<div class="help-item">[?] <a :href="globals.docs + '/TranslationApiConfiguration.html#tagcomplete-translation-enhancement'" target="_blank">[Wiki] TagComplete Translation enhancement</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-html="getLang('tagcomplete_translate_desc')"></div>
|
||||||
|
<div class="common-red" v-html="getLang('tagcomplete_translate_desc2')"></div>
|
||||||
|
<div class="line-row">
|
||||||
|
<select v-model="tagCompleteFileKey" @change="tagCompleteResults = []">
|
||||||
|
<option v-for="item in tagCompleteFiles" :value="item.key">{{ item.name }}</option>
|
||||||
|
</select>
|
||||||
|
<div class="refresh-btn hover-scale-120" v-tooltip="getLang('refresh')" @click="refreshCSVs">
|
||||||
|
<icon-svg v-if="tagCompleteFilesLoading" name="loading"/>
|
||||||
|
<icon-svg v-else name="refresh" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label class="onlyCsvOnAuto" :style="{display: tagCompleteFileKey ? 'flex': 'none'}">
|
||||||
|
<input class="hover-scale-120" type="checkbox" value="1" v-model="onlyCsvOnAutoValue">
|
||||||
|
<span>{{ getLang('only_csv_on_auto') }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-line" v-show="tagCompleteFileKey">
|
||||||
|
<div class="line-title"></div>
|
||||||
|
<div class="line-content">
|
||||||
|
<div class="hover-scale-120 test-btn" @click="onTagCompleteTestClick">{{ getLang('test') }}</div>
|
||||||
|
<div ref="tagCompleteResults" v-show="tagCompleteResults.length > 0">
|
||||||
|
<p v-for="text in tagCompleteResults" :key="text">{{ text }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-btns">
|
||||||
|
<div class="translate-save hover-scale-120" @click="onSaveClick">{{ getLang('save') }}</div>
|
||||||
|
<div class="translate-close hover-scale-120" @click="onCloseClick">{{ getLang('close') }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting-btns">
|
|
||||||
<div class="translate-save hover-scale-120" @click="onSaveClick">{{ getLang('save') }}</div>
|
|
||||||
<div class="translate-close hover-scale-120" @click="onCloseClick">{{ getLang('close') }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</Transition>
|
</Transition>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -4150,6 +4150,10 @@
|
||||||
.blacklist-main {
|
.blacklist-main {
|
||||||
position: var(--ppb-blacklistMain-position);
|
position: var(--ppb-blacklistMain-position);
|
||||||
|
|
||||||
|
.blacklist-popup-close {
|
||||||
|
.common-popup-close();
|
||||||
|
}
|
||||||
|
|
||||||
.blacklist-body {
|
.blacklist-body {
|
||||||
display: var(--ppb-bm-blacklistBody-display);
|
display: var(--ppb-bm-blacklistBody-display);
|
||||||
flex-wrap: var(--ppb-bm-blacklistBody-flex-wrap);
|
flex-wrap: var(--ppb-bm-blacklistBody-flex-wrap);
|
||||||
|
|
@ -4233,6 +4237,10 @@
|
||||||
.hotkey-main {
|
.hotkey-main {
|
||||||
position: var(--pph-hotkeyMain-position);
|
position: var(--pph-hotkeyMain-position);
|
||||||
|
|
||||||
|
.hotkey-popup-close {
|
||||||
|
.common-popup-close();
|
||||||
|
}
|
||||||
|
|
||||||
.hotkey-body {
|
.hotkey-body {
|
||||||
display: var(--pph-hm-hotkeyBody-display);
|
display: var(--pph-hm-hotkeyBody-display);
|
||||||
flex-wrap: var(--pph-hm-hotkeyBody-flex-wrap);
|
flex-wrap: var(--pph-hm-hotkeyBody-flex-wrap);
|
||||||
|
|
@ -4461,21 +4469,25 @@
|
||||||
|
|
||||||
.translate-setting-main {
|
.translate-setting-main {
|
||||||
.common-popup-main();
|
.common-popup-main();
|
||||||
.common-popup-height();
|
|
||||||
|
.translate-setting-close {
|
||||||
|
.common-popup-close();
|
||||||
|
}
|
||||||
|
|
||||||
.translate-setting-content {
|
.translate-setting-content {
|
||||||
max-height: var(--ppts-tsm-translateSettingContent-max-height);
|
//max-height: var(--ppts-tsm-translateSettingContent-max-height);
|
||||||
overflow: var(--ppts-tsm-translateSettingContent-overflow);
|
//overflow: var(--ppts-tsm-translateSettingContent-overflow);
|
||||||
overflow-y: var(--ppts-tsm-translateSettingContent-overflow-y);
|
//overflow-y: var(--ppts-tsm-translateSettingContent-overflow-y);
|
||||||
padding: var(--ppts-tsm-translateSettingContent-padding);
|
padding: var(--ppts-tsm-translateSettingContent-padding);
|
||||||
border: var(--ppts-tsm-translateSettingContent-border);
|
border: var(--ppts-tsm-translateSettingContent-border);
|
||||||
border-radius: var(--ppts-tsm-translateSettingContent-border-radius);
|
border-radius: var(--ppts-tsm-translateSettingContent-border-radius);
|
||||||
|
.common-popup-height();
|
||||||
|
|
||||||
// 始终显示滚动条
|
// 始终显示滚动条
|
||||||
&::-webkit-scrollbar {
|
//&::-webkit-scrollbar {
|
||||||
width: var(--ppts-tsm-translateSettingContentWebkitScrollbar-width);
|
// width: var(--ppts-tsm-translateSettingContentWebkitScrollbar-width);
|
||||||
height: var(--ppts-tsm-translateSettingContentWebkitScrollbar-height);
|
// height: var(--ppts-tsm-translateSettingContentWebkitScrollbar-height);
|
||||||
}
|
//}
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-line {
|
.setting-line {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue