mirror of
https://github.com/marktext/marktext.git
synced 2025-05-03 05:40:39 +08:00
Fix preference scaling and improve UX (#2815)
This commit is contained in:
Felix Häusler
GitHub
parent
5e16fac82c
commit
e741d6c6a5
@ -19,6 +19,8 @@ export const editorWinOptions = Object.freeze({
|
||||
})
|
||||
|
||||
export const preferencesWinOptions = Object.freeze({
|
||||
minWidth: 450,
|
||||
minHeight: 350,
|
||||
width: 950,
|
||||
height: 650,
|
||||
webPreferences: {
|
||||
|
||||
@ -4,7 +4,7 @@ import { enable as remoteEnable } from '@electron/remote/main'
|
||||
import electronLocalshortcut from '@hfelix/electron-localshortcut'
|
||||
import BaseWindow, { WindowLifecycle, WindowType } from './base'
|
||||
import { centerWindowOptions } from './utils'
|
||||
import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx, isWindows } from '../config'
|
||||
import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx } from '../config'
|
||||
|
||||
class SettingWindow extends BaseWindow {
|
||||
/**
|
||||
@ -30,9 +30,7 @@ class SettingWindow extends BaseWindow {
|
||||
|
||||
// WORKAROUND: Electron has issues with different DPI per monitor when
|
||||
// setting a fixed window size.
|
||||
if (isWindows) {
|
||||
winOptions.resizable = true
|
||||
}
|
||||
winOptions.resizable = true
|
||||
|
||||
// Enable native or custom/frameless window and titlebar
|
||||
const { titleBarStyle, theme } = preferences.getAll()
|
||||
|
||||
@ -29,10 +29,17 @@ export default {
|
||||
margin: 20px 0;
|
||||
color: var(--editorColor);
|
||||
|
||||
& .pref-compound-head h6.title {
|
||||
font-weight: 400;
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
& .pref-compound-body {
|
||||
padding: 8px 16px 8px 16px;
|
||||
margin-top: -12px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border: 1px solid rgba(255, 255, 255, .03);
|
||||
}
|
||||
|
||||
& .description {
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
import { ENCODING_NAME_MAP } from 'common/encoding'
|
||||
|
||||
export const tabSizeOptions = [{
|
||||
label: '1',
|
||||
value: 1
|
||||
}, {
|
||||
label: '2',
|
||||
value: 2
|
||||
}, {
|
||||
label: '3',
|
||||
value: 3
|
||||
}, {
|
||||
label: '4',
|
||||
value: 4
|
||||
}]
|
||||
|
||||
export const endOfLineOptions = [{
|
||||
label: 'Default',
|
||||
value: 'default'
|
||||
|
||||
@ -1,132 +1,172 @@
|
||||
<template>
|
||||
<div class="pref-editor">
|
||||
<h4>Editor</h4>
|
||||
<range
|
||||
description="Font size in text editor"
|
||||
:value="fontSize"
|
||||
:min="12"
|
||||
:max="32"
|
||||
unit="px"
|
||||
:step="1"
|
||||
:onChange="value => onSelectChange('fontSize', value)"
|
||||
></range>
|
||||
<range
|
||||
description="Line height in text editor"
|
||||
:value="lineHeight"
|
||||
:min="1.2"
|
||||
:max="2.0"
|
||||
:step="0.1"
|
||||
:onChange="value => onSelectChange('lineHeight', value)"
|
||||
></range>
|
||||
<font-text-box
|
||||
description="Font for text editor"
|
||||
:value="editorFontFamily"
|
||||
:onChange="value => onSelectChange('editorFontFamily', value)"
|
||||
></font-text-box>
|
||||
<separator></separator>
|
||||
<range
|
||||
description="Font size in code blocks"
|
||||
:value="codeFontSize"
|
||||
:min="12"
|
||||
:max="28"
|
||||
unit="px"
|
||||
:step="1"
|
||||
:onChange="value => onSelectChange('codeFontSize', value)"
|
||||
></range>
|
||||
<font-text-box
|
||||
description="Font for code blocks"
|
||||
:onlyMonospace="true"
|
||||
:value="codeFontFamily"
|
||||
:onChange="value => onSelectChange('codeFontFamily', value)"
|
||||
></font-text-box>
|
||||
<!-- FIXME: Disabled due to #1648. -->
|
||||
<bool
|
||||
v-show="false"
|
||||
description="Show line numbers in code blocks"
|
||||
:bool="codeBlockLineNumbers"
|
||||
:onChange="value => onSelectChange('codeBlockLineNumbers', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Remove leading and trailing empty lines in code blocks"
|
||||
:bool="trimUnnecessaryCodeBlockEmptyLines"
|
||||
:onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<bool
|
||||
description="Automatically close brackets when writing"
|
||||
:bool="autoPairBracket"
|
||||
:onChange="value => onSelectChange('autoPairBracket', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Automatically complete markdown syntax"
|
||||
:bool="autoPairMarkdownSyntax"
|
||||
:onChange="value => onSelectChange('autoPairMarkdownSyntax', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Automatically close quotation marks"
|
||||
:bool="autoPairQuote"
|
||||
:onChange="value => onSelectChange('autoPairQuote', value)"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<cur-select
|
||||
description="Line separator type"
|
||||
:value="endOfLine"
|
||||
:options="endOfLineOptions"
|
||||
:onChange="value => onSelectChange('endOfLine', value)"
|
||||
></cur-select>
|
||||
<separator></separator>
|
||||
<cur-select
|
||||
description="Default encoding"
|
||||
:value="defaultEncoding"
|
||||
:options="defaultEncodingOptions"
|
||||
:onChange="value => onSelectChange('defaultEncoding', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Automatically detect file encoding"
|
||||
:bool="autoGuessEncoding"
|
||||
:onChange="value => onSelectChange('autoGuessEncoding', value)"
|
||||
></bool>
|
||||
<cur-select
|
||||
description="Handling of trailing newline characters"
|
||||
:value="trimTrailingNewline"
|
||||
:options="trimTrailingNewlineOptions"
|
||||
:onChange="value => onSelectChange('trimTrailingNewline', value)"
|
||||
></cur-select>
|
||||
<separator></separator>
|
||||
<cur-select
|
||||
description="Text direction"
|
||||
:value="textDirection"
|
||||
:options="textDirectionOptions"
|
||||
:onChange="value => onSelectChange('textDirection', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Hide hint for selecting type of new paragraph"
|
||||
:bool="hideQuickInsertHint"
|
||||
:onChange="value => onSelectChange('hideQuickInsertHint', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Hide popup when cursor is over link"
|
||||
:bool="hideLinkPopup"
|
||||
:onChange="value => onSelectChange('hideLinkPopup', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Whether to automatically check any related tasks"
|
||||
:bool="autoCheck"
|
||||
:onChange="value => onSelectChange('autoCheck', value)"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<text-box
|
||||
description="Maximum width of text editor"
|
||||
notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
|
||||
:input="editorLineWidth"
|
||||
:regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
|
||||
:onChange="value => onSelectChange('editorLineWidth', value)"
|
||||
></text-box>
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Text editor settings:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<range
|
||||
description="Font size"
|
||||
:value="fontSize"
|
||||
:min="12"
|
||||
:max="32"
|
||||
unit="px"
|
||||
:step="1"
|
||||
:onChange="value => onSelectChange('fontSize', value)"
|
||||
></range>
|
||||
<range
|
||||
description="Line height"
|
||||
:value="lineHeight"
|
||||
:min="1.2"
|
||||
:max="2.0"
|
||||
:step="0.1"
|
||||
:onChange="value => onSelectChange('lineHeight', value)"
|
||||
></range>
|
||||
<font-text-box
|
||||
description="Font family"
|
||||
:value="editorFontFamily"
|
||||
:onChange="value => onSelectChange('editorFontFamily', value)"
|
||||
></font-text-box>
|
||||
<text-box
|
||||
description="Maximum width of text editor"
|
||||
notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
|
||||
:input="editorLineWidth"
|
||||
:regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
|
||||
:onChange="value => onSelectChange('editorLineWidth', value)"
|
||||
></text-box>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Code block settings:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<range
|
||||
description="Font size"
|
||||
:value="codeFontSize"
|
||||
:min="12"
|
||||
:max="28"
|
||||
unit="px"
|
||||
:step="1"
|
||||
:onChange="value => onSelectChange('codeFontSize', value)"
|
||||
></range>
|
||||
<font-text-box
|
||||
description="Font family"
|
||||
:onlyMonospace="true"
|
||||
:value="codeFontFamily"
|
||||
:onChange="value => onSelectChange('codeFontFamily', value)"
|
||||
></font-text-box>
|
||||
<!-- FIXME: Disabled due to #1648. -->
|
||||
<bool
|
||||
v-show="false"
|
||||
description="Show line numbers"
|
||||
:bool="codeBlockLineNumbers"
|
||||
:onChange="value => onSelectChange('codeBlockLineNumbers', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Remove leading and trailing empty lines"
|
||||
:bool="trimUnnecessaryCodeBlockEmptyLines"
|
||||
:onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Writing behavior:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Automatically close brackets when writing"
|
||||
:bool="autoPairBracket"
|
||||
:onChange="value => onSelectChange('autoPairBracket', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Automatically complete markdown syntax"
|
||||
:bool="autoPairMarkdownSyntax"
|
||||
:onChange="value => onSelectChange('autoPairMarkdownSyntax', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Automatically close quotation marks"
|
||||
:bool="autoPairQuote"
|
||||
:onChange="value => onSelectChange('autoPairQuote', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">File representation:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="Preferred tab width"
|
||||
:value="tabSize"
|
||||
:options="tabSizeOptions"
|
||||
:onChange="value => onSelectChange('tabSize', value)"
|
||||
></cur-select>
|
||||
<cur-select
|
||||
description="Line separator type"
|
||||
:value="endOfLine"
|
||||
:options="endOfLineOptions"
|
||||
:onChange="value => onSelectChange('endOfLine', value)"
|
||||
></cur-select>
|
||||
<cur-select
|
||||
description="Default encoding"
|
||||
:value="defaultEncoding"
|
||||
:options="defaultEncodingOptions"
|
||||
:onChange="value => onSelectChange('defaultEncoding', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Automatically detect file encoding"
|
||||
:bool="autoGuessEncoding"
|
||||
:onChange="value => onSelectChange('autoGuessEncoding', value)"
|
||||
></bool>
|
||||
<cur-select
|
||||
description="Handling of trailing newline characters"
|
||||
:value="trimTrailingNewline"
|
||||
:options="trimTrailingNewlineOptions"
|
||||
:onChange="value => onSelectChange('trimTrailingNewline', value)"
|
||||
></cur-select>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Misc:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="Text direction"
|
||||
:value="textDirection"
|
||||
:options="textDirectionOptions"
|
||||
:onChange="value => onSelectChange('textDirection', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Hide hint for selecting type of new paragraph"
|
||||
:bool="hideQuickInsertHint"
|
||||
:onChange="value => onSelectChange('hideQuickInsertHint', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Hide popup when cursor is over link"
|
||||
:bool="hideLinkPopup"
|
||||
:onChange="value => onSelectChange('hideLinkPopup', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Whether to automatically check any related tasks"
|
||||
:bool="autoCheck"
|
||||
:onChange="value => onSelectChange('autoCheck', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Compound from '../common/compound'
|
||||
import FontTextBox from '../common/fontTextBox'
|
||||
import Range from '../common/range'
|
||||
import CurSelect from '../common/select'
|
||||
@ -134,6 +174,7 @@ import Bool from '../common/bool'
|
||||
import Separator from '../common/separator'
|
||||
import TextBox from '../common/textBox'
|
||||
import {
|
||||
tabSizeOptions,
|
||||
endOfLineOptions,
|
||||
textDirectionOptions,
|
||||
trimTrailingNewlineOptions,
|
||||
@ -142,6 +183,7 @@ import {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Compound,
|
||||
FontTextBox,
|
||||
Range,
|
||||
CurSelect,
|
||||
@ -150,6 +192,7 @@ export default {
|
||||
TextBox
|
||||
},
|
||||
data () {
|
||||
this.tabSizeOptions = tabSizeOptions
|
||||
this.endOfLineOptions = endOfLineOptions
|
||||
this.textDirectionOptions = textDirectionOptions
|
||||
this.trimTrailingNewlineOptions = trimTrailingNewlineOptions
|
||||
@ -164,6 +207,7 @@ export default {
|
||||
autoPairBracket: state => state.preferences.autoPairBracket,
|
||||
autoPairMarkdownSyntax: state => state.preferences.autoPairMarkdownSyntax,
|
||||
autoPairQuote: state => state.preferences.autoPairQuote,
|
||||
tabSize: state => state.preferences.tabSize,
|
||||
endOfLine: state => state.preferences.endOfLine,
|
||||
textDirection: state => state.preferences.textDirection,
|
||||
codeFontSize: state => state.preferences.codeFontSize,
|
||||
|
||||
@ -2,87 +2,119 @@
|
||||
<div class="pref-general">
|
||||
<h4>General</h4>
|
||||
<compound>
|
||||
<template #head>
|
||||
<bool
|
||||
description="Automatically save document changes"
|
||||
:bool="autoSave"
|
||||
:onChange="value => onSelectChange('autoSave', value)"
|
||||
></bool>
|
||||
</template>
|
||||
<template #children>
|
||||
<range
|
||||
description="Delay following document edit before automatically saving"
|
||||
:value="autoSaveDelay"
|
||||
:min="1000"
|
||||
:max="10000"
|
||||
unit="ms"
|
||||
:step="100"
|
||||
:onChange="value => onSelectChange('autoSaveDelay', value)"
|
||||
></range>
|
||||
</template>
|
||||
<template #head>
|
||||
<h6 class="title">Auto Save:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Automatically save document changes"
|
||||
:bool="autoSave"
|
||||
:onChange="value => onSelectChange('autoSave', value)"
|
||||
></bool>
|
||||
<range
|
||||
description="Delay following document edit before automatically saving"
|
||||
:value="autoSaveDelay"
|
||||
:min="1000"
|
||||
:max="10000"
|
||||
unit="ms"
|
||||
:step="100"
|
||||
:onChange="value => onSelectChange('autoSaveDelay', value)"
|
||||
></range>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Window:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
v-if="!isOsx"
|
||||
description="Title bar style"
|
||||
notes="Requires restart."
|
||||
:value="titleBarStyle"
|
||||
:options="titleBarStyleOptions"
|
||||
:onChange="value => onSelectChange('titleBarStyle', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Hide scrollbars"
|
||||
:bool="hideScrollbar"
|
||||
:onChange="value => onSelectChange('hideScrollbar', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Open files in new window"
|
||||
:bool="openFilesInNewWindow"
|
||||
:onChange="value => onSelectChange('openFilesInNewWindow', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Open folders in new window"
|
||||
:bool="openFolderInNewWindow"
|
||||
:onChange="value => onSelectChange('openFolderInNewWindow', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Sidebar:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Wrap text in table of contents"
|
||||
:bool="wordWrapInToc"
|
||||
:onChange="value => onSelectChange('wordWrapInToc', value)"
|
||||
></bool>
|
||||
|
||||
<!-- TODO: The description is very bad and the entry isn't used by the editor. -->
|
||||
<cur-select
|
||||
description="Sort field for files in open folders"
|
||||
:value="fileSortBy"
|
||||
:options="fileSortByOptions"
|
||||
:onChange="value => onSelectChange('fileSortBy', value)"
|
||||
:disable="true"
|
||||
></cur-select>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Action on startup:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<section class="startup-action-ctrl">
|
||||
<el-radio-group v-model="startUpAction">
|
||||
<!--
|
||||
Hide "lastState" for now (#2064).
|
||||
<el-radio class="ag-underdevelop" label="lastState">Restore last editor session</el-radio>
|
||||
-->
|
||||
<el-radio label="folder" style="margin-bottom: 10px;">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
|
||||
<el-button size="small" @click="selectDefaultDirectoryToOpen">Select Folder</el-button>
|
||||
<el-radio label="blank">Open a blank page</el-radio>
|
||||
</el-radio-group>
|
||||
</section>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Misc:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="User interface language"
|
||||
:value="language"
|
||||
:options="languageOptions"
|
||||
:onChange="value => onSelectChange('language', value)"
|
||||
:disable="true"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Enable Aidou"
|
||||
:bool="aidou"
|
||||
:onChange="value => onSelectChange('aidou', value)"
|
||||
more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
<cur-select
|
||||
v-if="!isOsx"
|
||||
description="Title bar style"
|
||||
notes="Requires restart."
|
||||
:value="titleBarStyle"
|
||||
:options="titleBarStyleOptions"
|
||||
:onChange="value => onSelectChange('titleBarStyle', value)"
|
||||
></cur-select>
|
||||
<separator></separator>
|
||||
<bool
|
||||
description="Open files in new window"
|
||||
:bool="openFilesInNewWindow"
|
||||
:onChange="value => onSelectChange('openFilesInNewWindow', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Open folders in new window"
|
||||
:bool="openFolderInNewWindow"
|
||||
:onChange="value => onSelectChange('openFolderInNewWindow', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Hide scrollbars"
|
||||
:bool="hideScrollbar"
|
||||
:onChange="value => onSelectChange('hideScrollbar', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Wrap text in table of contents"
|
||||
:bool="wordWrapInToc"
|
||||
:onChange="value => onSelectChange('wordWrapInToc', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Use Aidou"
|
||||
:bool="aidou"
|
||||
:onChange="value => onSelectChange('aidou', value)"
|
||||
more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<cur-select
|
||||
description="Sort field for files in open folders"
|
||||
:value="fileSortBy"
|
||||
:options="fileSortByOptions"
|
||||
:onChange="value => onSelectChange('fileSortBy', value)"
|
||||
:disable="true"
|
||||
></cur-select>
|
||||
<section class="startup-action-ctrl">
|
||||
<div>Action on startup</div>
|
||||
<el-radio-group v-model="startUpAction">
|
||||
<!--
|
||||
Hide "lastState" for now (#2064).
|
||||
<el-radio class="ag-underdevelop" label="lastState">Open the last window state</el-radio>
|
||||
-->
|
||||
<el-radio label="folder">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
|
||||
<el-button size="small" @click="selectDefaultDirectoryToOpen">Select Folder</el-button>
|
||||
<el-radio label="blank">Open a blank page</el-radio>
|
||||
</el-radio-group>
|
||||
</section>
|
||||
<cur-select
|
||||
description="Language for user interface"
|
||||
:value="language"
|
||||
:options="languageOptions"
|
||||
:onChange="value => onSelectChange('language', value)"
|
||||
:disable="true"
|
||||
></cur-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -156,7 +188,6 @@ export default {
|
||||
& .startup-action-ctrl {
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
margin: 20px 0;
|
||||
color: var(--editorColor);
|
||||
& .el-button--small {
|
||||
margin-left: 25px;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<el-radio-group v-model="imageInsertAction">
|
||||
<el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio>
|
||||
<el-radio label="folder">Move to designated local folder</el-radio>
|
||||
<el-radio label="folder">Copy to designated relative assets or local folder</el-radio>
|
||||
<el-radio label="path">Keep original location</el-radio>
|
||||
</el-radio-group>
|
||||
</section>
|
||||
@ -21,20 +21,27 @@
|
||||
<el-button size="mini" @click="modifyImageFolderPath">Modify</el-button>
|
||||
<el-button size="mini" @click="openImageFolder">Open Folder</el-button>
|
||||
</div>
|
||||
<bool
|
||||
description="Prefer relative assets folder"
|
||||
more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
|
||||
:bool="imagePreferRelativeDirectory"
|
||||
:onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
|
||||
></bool>
|
||||
<text-box
|
||||
description="Relative image folder name"
|
||||
:input="imageRelativeDirectoryName"
|
||||
:regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
|
||||
:defaultValue="relativeDirectoryNamePlaceholder"
|
||||
:onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
|
||||
></text-box>
|
||||
</section>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<bool
|
||||
description="Prefer relative assets folder"
|
||||
more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
|
||||
:bool="imagePreferRelativeDirectory"
|
||||
:onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
|
||||
></bool>
|
||||
</template>
|
||||
<template #children>
|
||||
<text-box
|
||||
description="Relative image folder name"
|
||||
:input="imageRelativeDirectoryName"
|
||||
:regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
|
||||
:defaultValue="relativeDirectoryNamePlaceholder"
|
||||
:onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
|
||||
></text-box>
|
||||
</template>
|
||||
</compound>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -42,12 +49,14 @@
|
||||
import { mapState } from 'vuex'
|
||||
import { shell } from 'electron'
|
||||
import Bool from '../common/bool'
|
||||
import Compound from '../common/compound'
|
||||
import Separator from '../common/separator'
|
||||
import TextBox from '../common/textBox'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Bool,
|
||||
Compound,
|
||||
Separator,
|
||||
TextBox
|
||||
},
|
||||
|
||||
@ -25,20 +25,6 @@ export const preferHeadingStyleOptions = [{
|
||||
value: 'setext'
|
||||
}]
|
||||
|
||||
export const tabSizeOptions = [{
|
||||
label: '1',
|
||||
value: 1
|
||||
}, {
|
||||
label: '2',
|
||||
value: 2
|
||||
}, {
|
||||
label: '3',
|
||||
value: 3
|
||||
}, {
|
||||
label: '4',
|
||||
value: 4
|
||||
}]
|
||||
|
||||
export const listIndentationOptions = [{
|
||||
label: 'DocFX style',
|
||||
value: 'dfm'
|
||||
|
||||
@ -1,100 +1,127 @@
|
||||
<template>
|
||||
<div class="pref-markdown">
|
||||
<h4>Markdown</h4>
|
||||
<bool
|
||||
description="Prefer loose list items"
|
||||
:bool="preferLooseListItem"
|
||||
:onChange="value => onSelectChange('preferLooseListItem', value)"
|
||||
more="https://spec.commonmark.org/0.29/#loose"
|
||||
></bool>
|
||||
<cus-select
|
||||
description="Preferred marker for bullet lists"
|
||||
:value="bulletListMarker"
|
||||
:options="bulletListMarkerOptions"
|
||||
:onChange="value => onSelectChange('bulletListMarker', value)"
|
||||
more="https://spec.commonmark.org/0.29/#bullet-list-marker"
|
||||
></cus-select>
|
||||
<cus-select
|
||||
description="Preferred marker for ordered lists"
|
||||
:value="orderListDelimiter"
|
||||
:options="orderListDelimiterOptions"
|
||||
:onChange="value => onSelectChange('orderListDelimiter', value)"
|
||||
more="https://spec.commonmark.org/0.29/#ordered-list"
|
||||
></cus-select>
|
||||
<cus-select
|
||||
description="Preferred heading style"
|
||||
:value="preferHeadingStyle"
|
||||
:options="preferHeadingStyleOptions"
|
||||
:onChange="value => onSelectChange('preferHeadingStyle', value)"
|
||||
:disable="true"
|
||||
></cus-select>
|
||||
<cus-select
|
||||
description="Preferred tab width"
|
||||
:value="tabSize"
|
||||
:options="tabSizeOptions"
|
||||
:onChange="value => onSelectChange('tabSize', value)"
|
||||
></cus-select>
|
||||
<cus-select
|
||||
description="Preferred list indentation"
|
||||
:value="listIndentation"
|
||||
:options="listIndentationOptions"
|
||||
:onChange="value => onSelectChange('listIndentation', value)"
|
||||
></cus-select>
|
||||
<separator></separator>
|
||||
<h5>Markdown extensions</h5>
|
||||
<cus-select
|
||||
description="Format for front matter"
|
||||
:value="frontmatterType"
|
||||
:options="frontmatterTypeOptions"
|
||||
:onChange="value => onSelectChange('frontmatterType', value)"
|
||||
></cus-select>
|
||||
<bool
|
||||
description="Use Pandoc-style superscript and subscript"
|
||||
:bool="superSubScript"
|
||||
:onChange="value => onSelectChange('superSubScript', value)"
|
||||
more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
|
||||
></bool>
|
||||
<bool
|
||||
description="Use Pandoc-style footnotes"
|
||||
notes="Requires restart."
|
||||
:bool="footnote"
|
||||
:onChange="value => onSelectChange('footnote', value)"
|
||||
more="https://pandoc.org/MANUAL.html#footnotes"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<h5>Compatibility</h5>
|
||||
<bool
|
||||
description="Enable HTML rendering"
|
||||
:bool="isHtmlEnabled"
|
||||
:onChange="value => onSelectChange('isHtmlEnabled', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Enable GitLab compatibility mode"
|
||||
:bool="isGitlabCompatibilityEnabled"
|
||||
:onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<h5>Diagram theme</h5>
|
||||
<cus-select
|
||||
description="Sequence diagram theme"
|
||||
:value="sequenceTheme"
|
||||
:options="sequenceThemeOptions"
|
||||
:onChange="value => onSelectChange('sequenceTheme', value)"
|
||||
more="https://bramp.github.io/js-sequence-diagrams/"
|
||||
></cus-select>
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Lists:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Prefer loose list items"
|
||||
:bool="preferLooseListItem"
|
||||
:onChange="value => onSelectChange('preferLooseListItem', value)"
|
||||
more="https://spec.commonmark.org/0.29/#loose"
|
||||
></bool>
|
||||
<cur-select
|
||||
description="Preferred marker for bullet lists"
|
||||
:value="bulletListMarker"
|
||||
:options="bulletListMarkerOptions"
|
||||
:onChange="value => onSelectChange('bulletListMarker', value)"
|
||||
more="https://spec.commonmark.org/0.29/#bullet-list-marker"
|
||||
></cur-select>
|
||||
<cur-select
|
||||
description="Preferred marker for ordered lists"
|
||||
:value="orderListDelimiter"
|
||||
:options="orderListDelimiterOptions"
|
||||
:onChange="value => onSelectChange('orderListDelimiter', value)"
|
||||
more="https://spec.commonmark.org/0.29/#ordered-list"
|
||||
></cur-select>
|
||||
<cur-select
|
||||
description="Preferred list indentation"
|
||||
:value="listIndentation"
|
||||
:options="listIndentationOptions"
|
||||
:onChange="value => onSelectChange('listIndentation', value)"
|
||||
></cur-select>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Markdown extensions:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="Front matter format"
|
||||
:value="frontmatterType"
|
||||
:options="frontmatterTypeOptions"
|
||||
:onChange="value => onSelectChange('frontmatterType', value)"
|
||||
></cur-select>
|
||||
<bool
|
||||
description="Enable Pandoc-style superscript and subscript"
|
||||
:bool="superSubScript"
|
||||
:onChange="value => onSelectChange('superSubScript', value)"
|
||||
more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
|
||||
></bool>
|
||||
<bool
|
||||
description="Enable Pandoc-style footnotes"
|
||||
notes="Requires restart."
|
||||
:bool="footnote"
|
||||
:onChange="value => onSelectChange('footnote', value)"
|
||||
more="https://pandoc.org/MANUAL.html#footnotes"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Compatibility:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Enable HTML rendering"
|
||||
:bool="isHtmlEnabled"
|
||||
:onChange="value => onSelectChange('isHtmlEnabled', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Enable GitLab compatibility mode"
|
||||
:bool="isGitlabCompatibilityEnabled"
|
||||
:onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Diagrams:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="Sequence diagram theme"
|
||||
:value="sequenceTheme"
|
||||
:options="sequenceThemeOptions"
|
||||
:onChange="value => onSelectChange('sequenceTheme', value)"
|
||||
more="https://bramp.github.io/js-sequence-diagrams/"
|
||||
></cur-select>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<compound>
|
||||
<template #head>
|
||||
<h6 class="title">Misc:</h6>
|
||||
</template>
|
||||
<template #children>
|
||||
<cur-select
|
||||
description="Preferred heading style"
|
||||
:value="preferHeadingStyle"
|
||||
:options="preferHeadingStyleOptions"
|
||||
:onChange="value => onSelectChange('preferHeadingStyle', value)"
|
||||
:disable="true"
|
||||
></cur-select>
|
||||
</template>
|
||||
</compound>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Compound from '../common/compound'
|
||||
import Separator from '../common/separator'
|
||||
import { mapState } from 'vuex'
|
||||
import Bool from '../common/bool'
|
||||
import CusSelect from '../common/select'
|
||||
import CurSelect from '../common/select'
|
||||
import {
|
||||
bulletListMarkerOptions,
|
||||
orderListDelimiterOptions,
|
||||
preferHeadingStyleOptions,
|
||||
tabSizeOptions,
|
||||
listIndentationOptions,
|
||||
frontmatterTypeOptions,
|
||||
sequenceThemeOptions
|
||||
@ -102,15 +129,15 @@ import {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Compound,
|
||||
Separator,
|
||||
Bool,
|
||||
CusSelect
|
||||
CurSelect
|
||||
},
|
||||
data () {
|
||||
this.bulletListMarkerOptions = bulletListMarkerOptions
|
||||
this.orderListDelimiterOptions = orderListDelimiterOptions
|
||||
this.preferHeadingStyleOptions = preferHeadingStyleOptions
|
||||
this.tabSizeOptions = tabSizeOptions
|
||||
this.listIndentationOptions = listIndentationOptions
|
||||
this.frontmatterTypeOptions = frontmatterTypeOptions
|
||||
this.sequenceThemeOptions = sequenceThemeOptions
|
||||
@ -122,7 +149,6 @@ export default {
|
||||
bulletListMarker: state => state.preferences.bulletListMarker,
|
||||
orderListDelimiter: state => state.preferences.orderListDelimiter,
|
||||
preferHeadingStyle: state => state.preferences.preferHeadingStyle,
|
||||
tabSize: state => state.preferences.tabSize,
|
||||
listIndentation: state => state.preferences.listIndentation,
|
||||
frontmatterType: state => state.preferences.frontmatterType,
|
||||
superSubScript: state => state.preferences.superSubScript,
|
||||
|
||||
@ -74,9 +74,12 @@ export default {
|
||||
})
|
||||
},
|
||||
handleCategoryItemClick (item) {
|
||||
this.$router.push({
|
||||
path: item.path
|
||||
})
|
||||
const { currentCategory } = this
|
||||
if (item.name.toLowerCase() !== currentCategory) {
|
||||
this.$router.push({
|
||||
path: item.path
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@ -88,6 +91,8 @@ export default {
|
||||
<style>
|
||||
.pref-sidebar {
|
||||
-webkit-app-region: drag;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--sideBarBgColor);
|
||||
width: var(--prefSideBarWidth);
|
||||
height: 100vh;
|
||||
@ -96,13 +101,13 @@ export default {
|
||||
& h3 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: var(--sideBarColor);
|
||||
}
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.search-wrapper {
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 0 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.el-autocomplete {
|
||||
@ -144,6 +149,7 @@ export default {
|
||||
}
|
||||
.category {
|
||||
-webkit-app-region: no-drag;
|
||||
overflow-y: auto;
|
||||
& .item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
@ -1,34 +1,40 @@
|
||||
<template>
|
||||
<div class="pref-spellchecker">
|
||||
<h4>Spelling</h4>
|
||||
<bool
|
||||
description="Enable spell checker"
|
||||
notes="Feature is experimental."
|
||||
:bool="spellcheckerEnabled"
|
||||
:onChange="handleSpellcheckerEnabled"
|
||||
></bool>
|
||||
<separator></separator>
|
||||
<bool
|
||||
description="Use Hunspell instead of system spell checker on macOS and Windows 10"
|
||||
notes="Requires restart."
|
||||
:bool="spellcheckerIsHunspell"
|
||||
:disable="!isOsSpellcheckerSupported || !spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerIsHunspell', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Hide marks for spelling errors"
|
||||
:bool="spellcheckerNoUnderline"
|
||||
:disable="!spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerNoUnderline', value)"
|
||||
></bool>
|
||||
<bool
|
||||
v-show="isOsx && !spellcheckerIsHunspell"
|
||||
description="Automatically detect document language (requires showing marks for spelling errors)"
|
||||
:bool="spellcheckerAutoDetectLanguage"
|
||||
:disable="!spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
|
||||
></bool>
|
||||
<compound>
|
||||
<template #head>
|
||||
<bool
|
||||
description="Enable spell checker"
|
||||
:bool="spellcheckerEnabled"
|
||||
:onChange="handleSpellcheckerEnabled"
|
||||
></bool>
|
||||
</template>
|
||||
<template #children>
|
||||
<bool
|
||||
description="Use Hunspell instead of system spell checker on macOS and Windows 10"
|
||||
notes="Requires restart."
|
||||
:bool="spellcheckerIsHunspell"
|
||||
:disable="!isOsSpellcheckerSupported || !spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerIsHunspell', value)"
|
||||
></bool>
|
||||
<bool
|
||||
description="Hide marks for spelling errors"
|
||||
:bool="spellcheckerNoUnderline"
|
||||
:disable="!spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerNoUnderline', value)"
|
||||
></bool>
|
||||
<bool
|
||||
v-show="isOsx && !spellcheckerIsHunspell"
|
||||
description="Automatically detect document language (requires showing marks for spelling errors)"
|
||||
:bool="spellcheckerAutoDetectLanguage"
|
||||
:disable="!spellcheckerEnabled"
|
||||
:onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
|
||||
></bool>
|
||||
</template>
|
||||
</compound>
|
||||
|
||||
<separator></separator>
|
||||
|
||||
<cur-select
|
||||
description="Default language for spell checker"
|
||||
:value="spellcheckerLanguage"
|
||||
@ -48,7 +54,9 @@
|
||||
>
|
||||
Additional languages may be added through "Language" in your "Time & language" settings.
|
||||
</div>
|
||||
|
||||
<div v-if="isHunspellSelected && spellcheckerEnabled">
|
||||
<h6 class="title">Hunspell settings:</h6>
|
||||
<div class="description">Installed Hunspell dictionaries</div>
|
||||
<el-table
|
||||
:data="availableDictionaries"
|
||||
@ -95,6 +103,7 @@
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Compound from '../common/compound'
|
||||
import CurSelect from '../common/select'
|
||||
import Bool from '../common/bool'
|
||||
import Separator from '../common/separator'
|
||||
@ -106,6 +115,7 @@ import { downloadHunspellDictionary, deleteHunspellDictionary } from '@/spellche
|
||||
export default {
|
||||
components: {
|
||||
Bool,
|
||||
Compound,
|
||||
CurSelect,
|
||||
Separator
|
||||
},
|
||||
@ -293,6 +303,10 @@ export default {
|
||||
color: var(--iconColor);
|
||||
font-size: 14px;
|
||||
}
|
||||
& h6.title {
|
||||
font-weight: 400;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
.el-table, .el-table__expanded-cell {
|
||||
background: var(--editorBgColor);
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
:options="autoSwitchThemeOptions"
|
||||
:onChange="value => onSelectChange('autoSwitchTheme', value)"
|
||||
></cur-select>
|
||||
<separator></separator>
|
||||
<section class="import-themes ag-underdevelop">
|
||||
<separator v-show="false"></separator>
|
||||
<section v-show="false" class="import-themes ag-underdevelop">
|
||||
<div>
|
||||
<span>Open the themes folder</span>
|
||||
<el-button size="small">Open Folder</el-button>
|
||||
@ -79,9 +79,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pref-theme {
|
||||
}
|
||||
.offcial-themes {
|
||||
margin-top: 12px;
|
||||
& .theme {
|
||||
cursor: pointer;
|
||||
width: 248px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user