mirror of
https://github.com/marktext/marktext.git
synced 2025-05-02 15:21:33 +08:00
4bd22b6dc5
* dynamic change element-ui theme to our themeColor * add some ui components * add preference doc * add json schema file * update preference.json and schema.json * reset to old commit * rename preference file for rebase * rebase develop * add setting window * user electron-store to store preferences * add themes setting * add select component * add markdown pref * fix: bool and select init value * add font size setting * editor pref * add general preference * search preference * update menu after preference changed * update muya codes * prevent scale setting window * fix: titlebar undefined * update input style * remove window from windowManager after close setting window * remove old docs and preference.md * if a setting window is already created, no need to create another one, just move it to top * rename openFilesInNewWindow to openFileInNewWindow * change aidou runtime * change hideQuickInsertHint by setting page runtime * change autopair runtime * change codefont and codefontfamily dynamic * change default value of autoSave to false * update bulletListMarker * fix style error * add custom titlebar to settings window * add window shadow for Linux and Windows * fix Windows build * fix some typo error * update doc * add default menu and setting menu * fix update menu bug * fix typo * remove mac titlebarstyle * do not need to send titlebarstyle to renderer * fix typo * crash Mark Text if no initial preference.json file * update the path * add showCustomTitleBar prop * set empty settings menu on Linux/Windows + workaround
101 lines
1.8 KiB
Vue
101 lines
1.8 KiB
Vue
<template>
|
|
<section class="pref-range-item" :class="{'ag-underdevelop': disable}">
|
|
<div class="description">
|
|
<span>{{description}}: <span class="value">{{selectValue + (unit ? unit : '')}}</span></span>
|
|
<i class="el-icon-info" v-if="more"
|
|
@click="handleMoreClick"
|
|
></i>
|
|
</div>
|
|
<el-slider
|
|
v-model="selectValue"
|
|
@change="select"
|
|
:min="min"
|
|
:max="max"
|
|
:format-tooltip="value => value + (unit ? unit : '')"
|
|
:step="step">
|
|
</el-slider>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { shell } from 'electron'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
selectValue: this.value
|
|
}
|
|
},
|
|
props: {
|
|
description: String,
|
|
value: String | Number,
|
|
min: Number,
|
|
max: Number,
|
|
onChange: Function,
|
|
unit: String,
|
|
step: Number,
|
|
more: String,
|
|
disable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
value: function (value, oldValue) {
|
|
if (value !== oldValue) {
|
|
this.selectValue = value
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleMoreClick () {
|
|
if (typeof this.more === 'string') {
|
|
shell.openExternal(this.more)
|
|
}
|
|
},
|
|
select (value) {
|
|
this.onChange(value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.pref-range-item {
|
|
margin: 20px 0;
|
|
font-size: 14px;
|
|
color: var(--editorColor);
|
|
& .el-slider {
|
|
width: 300px;
|
|
}
|
|
& .el-slider__runway,
|
|
& .el-slider__bar {
|
|
height: 4px;
|
|
}
|
|
& .el-slider__button {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
& .el-slider__button-wrapper {
|
|
width: 20px;
|
|
height: 20px;
|
|
top: -9px;
|
|
}
|
|
}
|
|
.pref-select-item .description {
|
|
margin-bottom: 10px;
|
|
& .value {
|
|
color: var(--editorColor80);
|
|
}
|
|
& i {
|
|
cursor: pointer;
|
|
opacity: .7;
|
|
color: var(--iconColor);
|
|
}
|
|
& i:hover {
|
|
color: var(--themeColor);
|
|
}
|
|
}
|
|
</style>
|
|
|