github/marktext
5
0
Fork 0
mirror of https://github.com/marktext/marktext.git synced 2025-05-03 20:01:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix preference scaling and improve UX (#2815)

Browse Source
This commit is contained in:
Felix Häusler 2022-01-02 20:58:14 +01:00 committed by GitHub
parent 5e16fac82c
commit e741d6c6a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 492 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/config.js
View File

@ -19,6 +19,8 @@ export const editorWinOptions = Object.freeze({
}) })
export const preferencesWinOptions = Object.freeze({ export const preferencesWinOptions = Object.freeze({
minWidth: 450,
minHeight: 350,
width: 950, width: 950,
height: 650, height: 650,
webPreferences: { webPreferences: {

6
src/main/windows/setting.js
View File

@ -4,7 +4,7 @@ import { enable as remoteEnable } from '@electron/remote/main'
import electronLocalshortcut from '@hfelix/electron-localshortcut' import electronLocalshortcut from '@hfelix/electron-localshortcut'
import BaseWindow, { WindowLifecycle, WindowType } from './base' import BaseWindow, { WindowLifecycle, WindowType } from './base'
import { centerWindowOptions } from './utils' 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 { class SettingWindow extends BaseWindow {
/** /**
@ -30,9 +30,7 @@ class SettingWindow extends BaseWindow {
// WORKAROUND: Electron has issues with different DPI per monitor when // WORKAROUND: Electron has issues with different DPI per monitor when
// setting a fixed window size. // setting a fixed window size.
if (isWindows) { winOptions.resizable = true
winOptions.resizable = true
}
// Enable native or custom/frameless window and titlebar // Enable native or custom/frameless window and titlebar
const { titleBarStyle, theme } = preferences.getAll() const { titleBarStyle, theme } = preferences.getAll()

7
src/renderer/prefComponents/common/compound/index.vue
View File

@ -29,10 +29,17 @@ export default {
margin: 20px 0; margin: 20px 0;
color: var(--editorColor); color: var(--editorColor);
& .pref-compound-head h6.title {
font-weight: 400;
font-size: 1.1em;
padding-bottom: 6px;
}
& .pref-compound-body { & .pref-compound-body {
padding: 8px 16px 8px 16px; padding: 8px 16px 8px 16px;
margin-top: -12px; margin-top: -12px;
background: rgba(0, 0, 0, .04); background: rgba(0, 0, 0, .04);
border: 1px solid rgba(255, 255, 255, .03);
} }
& .description { & .description {

14
src/renderer/prefComponents/editor/config.js
View File

@ -1,5 +1,19 @@
import { ENCODING_NAME_MAP } from 'common/encoding' 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 = [{ export const endOfLineOptions = [{
label: 'Default', label: 'Default',
value: 'default' value: 'default'

286
src/renderer/prefComponents/editor/index.vue
View File

@ -1,132 +1,172 @@
<template> <template>
<div class="pref-editor"> <div class="pref-editor">
<h4>Editor</h4> <h4>Editor</h4>
<range <compound>
description="Font size in text editor" <template #head>
:value="fontSize" <h6 class="title">Text editor settings:</h6>
:min="12" </template>
:max="32" <template #children>
unit="px" <range
:step="1" description="Font size"
:onChange="value => onSelectChange('fontSize', value)" :value="fontSize"
></range> :min="12"
<range :max="32"
description="Line height in text editor" unit="px"
:value="lineHeight" :step="1"
:min="1.2" :onChange="value => onSelectChange('fontSize', value)"
:max="2.0" ></range>
:step="0.1" <range
:onChange="value => onSelectChange('lineHeight', value)" description="Line height"
></range> :value="lineHeight"
<font-text-box :min="1.2"
description="Font for text editor" :max="2.0"
:value="editorFontFamily" :step="0.1"
:onChange="value => onSelectChange('editorFontFamily', value)" :onChange="value => onSelectChange('lineHeight', value)"
></font-text-box> ></range>
<separator></separator> <font-text-box
<range description="Font family"
description="Font size in code blocks" :value="editorFontFamily"
:value="codeFontSize" :onChange="value => onSelectChange('editorFontFamily', value)"
:min="12" ></font-text-box>
:max="28" <text-box
unit="px" description="Maximum width of text editor"
:step="1" 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."
:onChange="value => onSelectChange('codeFontSize', value)" :input="editorLineWidth"
></range> :regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
<font-text-box :onChange="value => onSelectChange('editorLineWidth', value)"
description="Font for code blocks" ></text-box>
:onlyMonospace="true" </template>
:value="codeFontFamily" </compound>
:onChange="value => onSelectChange('codeFontFamily', value)"
></font-text-box> <compound>
<!-- FIXME: Disabled due to #1648. --> <template #head>
<bool <h6 class="title">Code block settings:</h6>
v-show="false" </template>
description="Show line numbers in code blocks" <template #children>
:bool="codeBlockLineNumbers" <range
:onChange="value => onSelectChange('codeBlockLineNumbers', value)" description="Font size"
></bool> :value="codeFontSize"
<bool :min="12"
description="Remove leading and trailing empty lines in code blocks" :max="28"
:bool="trimUnnecessaryCodeBlockEmptyLines" unit="px"
:onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)" :step="1"
></bool> :onChange="value => onSelectChange('codeFontSize', value)"
<separator></separator> ></range>
<bool <font-text-box
description="Automatically close brackets when writing" description="Font family"
:bool="autoPairBracket" :onlyMonospace="true"
:onChange="value => onSelectChange('autoPairBracket', value)" :value="codeFontFamily"
></bool> :onChange="value => onSelectChange('codeFontFamily', value)"
<bool ></font-text-box>
description="Automatically complete markdown syntax" <!-- FIXME: Disabled due to #1648. -->
:bool="autoPairMarkdownSyntax" <bool
:onChange="value => onSelectChange('autoPairMarkdownSyntax', value)" v-show="false"
></bool> description="Show line numbers"
<bool :bool="codeBlockLineNumbers"
description="Automatically close quotation marks" :onChange="value => onSelectChange('codeBlockLineNumbers', value)"
:bool="autoPairQuote" ></bool>
:onChange="value => onSelectChange('autoPairQuote', value)" <bool
></bool> description="Remove leading and trailing empty lines"
<separator></separator> :bool="trimUnnecessaryCodeBlockEmptyLines"
<cur-select :onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
description="Line separator type" ></bool>
:value="endOfLine" </template>
:options="endOfLineOptions" </compound>
:onChange="value => onSelectChange('endOfLine', value)"
></cur-select> <compound>
<separator></separator> <template #head>
<cur-select <h6 class="title">Writing behavior:</h6>
description="Default encoding" </template>
:value="defaultEncoding" <template #children>
:options="defaultEncodingOptions" <bool
:onChange="value => onSelectChange('defaultEncoding', value)" description="Automatically close brackets when writing"
></cur-select> :bool="autoPairBracket"
<bool :onChange="value => onSelectChange('autoPairBracket', value)"
description="Automatically detect file encoding" ></bool>
:bool="autoGuessEncoding" <bool
:onChange="value => onSelectChange('autoGuessEncoding', value)" description="Automatically complete markdown syntax"
></bool> :bool="autoPairMarkdownSyntax"
<cur-select :onChange="value => onSelectChange('autoPairMarkdownSyntax', value)"
description="Handling of trailing newline characters" ></bool>
:value="trimTrailingNewline" <bool
:options="trimTrailingNewlineOptions" description="Automatically close quotation marks"
:onChange="value => onSelectChange('trimTrailingNewline', value)" :bool="autoPairQuote"
></cur-select> :onChange="value => onSelectChange('autoPairQuote', value)"
<separator></separator> ></bool>
<cur-select </template>
description="Text direction" </compound>
:value="textDirection"
:options="textDirectionOptions" <compound>
:onChange="value => onSelectChange('textDirection', value)" <template #head>
></cur-select> <h6 class="title">File representation:</h6>
<bool </template>
description="Hide hint for selecting type of new paragraph" <template #children>
:bool="hideQuickInsertHint" <cur-select
:onChange="value => onSelectChange('hideQuickInsertHint', value)" description="Preferred tab width"
></bool> :value="tabSize"
<bool :options="tabSizeOptions"
description="Hide popup when cursor is over link" :onChange="value => onSelectChange('tabSize', value)"
:bool="hideLinkPopup" ></cur-select>
:onChange="value => onSelectChange('hideLinkPopup', value)" <cur-select
></bool> description="Line separator type"
<bool :value="endOfLine"
description="Whether to automatically check any related tasks" :options="endOfLineOptions"
:bool="autoCheck" :onChange="value => onSelectChange('endOfLine', value)"
:onChange="value => onSelectChange('autoCheck', value)" ></cur-select>
></bool> <cur-select
<separator></separator> description="Default encoding"
<text-box :value="defaultEncoding"
description="Maximum width of text editor" :options="defaultEncodingOptions"
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." :onChange="value => onSelectChange('defaultEncoding', value)"
:input="editorLineWidth" ></cur-select>
:regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/" <bool
:onChange="value => onSelectChange('editorLineWidth', value)" description="Automatically detect file encoding"
></text-box> :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> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Compound from '../common/compound'
import FontTextBox from '../common/fontTextBox' import FontTextBox from '../common/fontTextBox'
import Range from '../common/range' import Range from '../common/range'
import CurSelect from '../common/select' import CurSelect from '../common/select'
@ -134,6 +174,7 @@ import Bool from '../common/bool'
import Separator from '../common/separator' import Separator from '../common/separator'
import TextBox from '../common/textBox' import TextBox from '../common/textBox'
import { import {
tabSizeOptions,
endOfLineOptions, endOfLineOptions,
textDirectionOptions, textDirectionOptions,
trimTrailingNewlineOptions, trimTrailingNewlineOptions,
@ -142,6 +183,7 @@ import {
export default { export default {
components: { components: {
Compound,
FontTextBox, FontTextBox,
Range, Range,
CurSelect, CurSelect,
@ -150,6 +192,7 @@ export default {
TextBox TextBox
}, },
data () { data () {
this.tabSizeOptions = tabSizeOptions
this.endOfLineOptions = endOfLineOptions this.endOfLineOptions = endOfLineOptions
this.textDirectionOptions = textDirectionOptions this.textDirectionOptions = textDirectionOptions
this.trimTrailingNewlineOptions = trimTrailingNewlineOptions this.trimTrailingNewlineOptions = trimTrailingNewlineOptions
@ -164,6 +207,7 @@ export default {
autoPairBracket: state => state.preferences.autoPairBracket, autoPairBracket: state => state.preferences.autoPairBracket,
autoPairMarkdownSyntax: state => state.preferences.autoPairMarkdownSyntax, autoPairMarkdownSyntax: state => state.preferences.autoPairMarkdownSyntax,
autoPairQuote: state => state.preferences.autoPairQuote, autoPairQuote: state => state.preferences.autoPairQuote,
tabSize: state => state.preferences.tabSize,
endOfLine: state => state.preferences.endOfLine, endOfLine: state => state.preferences.endOfLine,
textDirection: state => state.preferences.textDirection, textDirection: state => state.preferences.textDirection,
codeFontSize: state => state.preferences.codeFontSize, codeFontSize: state => state.preferences.codeFontSize,

193
src/renderer/prefComponents/general/index.vue
View File

@ -2,87 +2,119 @@
<div class="pref-general"> <div class="pref-general">
<h4>General</h4> <h4>General</h4>
<compound> <compound>
<template #head> <template #head>
<bool <h6 class="title">Auto Save:</h6>
description="Automatically save document changes" </template>
:bool="autoSave" <template #children>
:onChange="value => onSelectChange('autoSave', value)" <bool
></bool> description="Automatically save document changes"
</template> :bool="autoSave"
<template #children> :onChange="value => onSelectChange('autoSave', value)"
<range ></bool>
description="Delay following document edit before automatically saving" <range
:value="autoSaveDelay" description="Delay following document edit before automatically saving"
:min="1000" :value="autoSaveDelay"
:max="10000" :min="1000"
unit="ms" :max="10000"
:step="100" unit="ms"
:onChange="value => onSelectChange('autoSaveDelay', value)" :step="100"
></range> :onChange="value => onSelectChange('autoSaveDelay', value)"
</template> ></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> </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> </div>
</template> </template>
@ -156,7 +188,6 @@ export default {
& .startup-action-ctrl { & .startup-action-ctrl {
font-size: 14px; font-size: 14px;
user-select: none; user-select: none;
margin: 20px 0;
color: var(--editorColor); color: var(--editorColor);
& .el-button--small { & .el-button--small {
margin-left: 25px; margin-left: 25px;

37
src/renderer/prefComponents/image/index.vue
View File

@ -9,7 +9,7 @@
</div> </div>
<el-radio-group v-model="imageInsertAction"> <el-radio-group v-model="imageInsertAction">
<el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio> <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 label="path">Keep original location</el-radio>
</el-radio-group> </el-radio-group>
</section> </section>
@ -21,20 +21,27 @@
<el-button size="mini" @click="modifyImageFolderPath">Modify</el-button> <el-button size="mini" @click="modifyImageFolderPath">Modify</el-button>
<el-button size="mini" @click="openImageFolder">Open Folder</el-button> <el-button size="mini" @click="openImageFolder">Open Folder</el-button>
</div> </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> </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> </div>
</template> </template>
@ -42,12 +49,14 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { shell } from 'electron' import { shell } from 'electron'
import Bool from '../common/bool' import Bool from '../common/bool'
import Compound from '../common/compound'
import Separator from '../common/separator' import Separator from '../common/separator'
import TextBox from '../common/textBox' import TextBox from '../common/textBox'
export default { export default {
components: { components: {
Bool, Bool,
Compound,
Separator, Separator,
TextBox TextBox
}, },

14
src/renderer/prefComponents/markdown/config.js
View File

@ -25,20 +25,6 @@ export const preferHeadingStyleOptions = [{
value: 'setext' value: 'setext'
}] }]
export const tabSizeOptions = [{
label: '1',
value: 1
}, {
label: '2',
value: 2
}, {
label: '3',
value: 3
}, {
label: '4',
value: 4
}]
export const listIndentationOptions = [{ export const listIndentationOptions = [{
label: 'DocFX style', label: 'DocFX style',
value: 'dfm' value: 'dfm'

198
src/renderer/prefComponents/markdown/index.vue
View File

@ -1,100 +1,127 @@
<template> <template>
<div class="pref-markdown"> <div class="pref-markdown">
<h4>Markdown</h4> <h4>Markdown</h4>
<bool <compound>
description="Prefer loose list items" <template #head>
:bool="preferLooseListItem" <h6 class="title">Lists:</h6>
:onChange="value => onSelectChange('preferLooseListItem', value)" </template>
more="https://spec.commonmark.org/0.29/#loose" <template #children>
></bool> <bool
<cus-select description="Prefer loose list items"
description="Preferred marker for bullet lists" :bool="preferLooseListItem"
:value="bulletListMarker" :onChange="value => onSelectChange('preferLooseListItem', value)"
:options="bulletListMarkerOptions" more="https://spec.commonmark.org/0.29/#loose"
:onChange="value => onSelectChange('bulletListMarker', value)" ></bool>
more="https://spec.commonmark.org/0.29/#bullet-list-marker" <cur-select
></cus-select> description="Preferred marker for bullet lists"
<cus-select :value="bulletListMarker"
description="Preferred marker for ordered lists" :options="bulletListMarkerOptions"
:value="orderListDelimiter" :onChange="value => onSelectChange('bulletListMarker', value)"
:options="orderListDelimiterOptions" more="https://spec.commonmark.org/0.29/#bullet-list-marker"
:onChange="value => onSelectChange('orderListDelimiter', value)" ></cur-select>
more="https://spec.commonmark.org/0.29/#ordered-list" <cur-select
></cus-select> description="Preferred marker for ordered lists"
<cus-select :value="orderListDelimiter"
description="Preferred heading style" :options="orderListDelimiterOptions"
:value="preferHeadingStyle" :onChange="value => onSelectChange('orderListDelimiter', value)"
:options="preferHeadingStyleOptions" more="https://spec.commonmark.org/0.29/#ordered-list"
:onChange="value => onSelectChange('preferHeadingStyle', value)" ></cur-select>
:disable="true" <cur-select
></cus-select> description="Preferred list indentation"
<cus-select :value="listIndentation"
description="Preferred tab width" :options="listIndentationOptions"
:value="tabSize" :onChange="value => onSelectChange('listIndentation', value)"
:options="tabSizeOptions" ></cur-select>
:onChange="value => onSelectChange('tabSize', value)" </template>
></cus-select> </compound>
<cus-select
description="Preferred list indentation" <compound>
:value="listIndentation" <template #head>
:options="listIndentationOptions" <h6 class="title">Markdown extensions:</h6>
:onChange="value => onSelectChange('listIndentation', value)" </template>
></cus-select> <template #children>
<separator></separator> <cur-select
<h5>Markdown extensions</h5> description="Front matter format"
<cus-select :value="frontmatterType"
description="Format for front matter" :options="frontmatterTypeOptions"
:value="frontmatterType" :onChange="value => onSelectChange('frontmatterType', value)"
:options="frontmatterTypeOptions" ></cur-select>
:onChange="value => onSelectChange('frontmatterType', value)" <bool
></cus-select> description="Enable Pandoc-style superscript and subscript"
<bool :bool="superSubScript"
description="Use Pandoc-style superscript and subscript" :onChange="value => onSelectChange('superSubScript', value)"
:bool="superSubScript" more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
:onChange="value => onSelectChange('superSubScript', value)" ></bool>
more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts" <bool
></bool> description="Enable Pandoc-style footnotes"
<bool notes="Requires restart."
description="Use Pandoc-style footnotes" :bool="footnote"
notes="Requires restart." :onChange="value => onSelectChange('footnote', value)"
:bool="footnote" more="https://pandoc.org/MANUAL.html#footnotes"
:onChange="value => onSelectChange('footnote', value)" ></bool>
more="https://pandoc.org/MANUAL.html#footnotes" </template>
></bool> </compound>
<separator></separator>
<h5>Compatibility</h5> <compound>
<bool <template #head>
description="Enable HTML rendering" <h6 class="title">Compatibility:</h6>
:bool="isHtmlEnabled" </template>
:onChange="value => onSelectChange('isHtmlEnabled', value)" <template #children>
></bool> <bool
<bool description="Enable HTML rendering"
description="Enable GitLab compatibility mode" :bool="isHtmlEnabled"
:bool="isGitlabCompatibilityEnabled" :onChange="value => onSelectChange('isHtmlEnabled', value)"
:onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)" ></bool>
></bool> <bool
<separator></separator> description="Enable GitLab compatibility mode"
<h5>Diagram theme</h5> :bool="isGitlabCompatibilityEnabled"
<cus-select :onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
description="Sequence diagram theme" ></bool>
:value="sequenceTheme" </template>
:options="sequenceThemeOptions" </compound>
:onChange="value => onSelectChange('sequenceTheme', value)"
more="https://bramp.github.io/js-sequence-diagrams/" <compound>
></cus-select> <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> </div>
</template> </template>
<script> <script>
import Compound from '../common/compound'
import Separator from '../common/separator' import Separator from '../common/separator'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Bool from '../common/bool' import Bool from '../common/bool'
import CusSelect from '../common/select' import CurSelect from '../common/select'
import { import {
bulletListMarkerOptions, bulletListMarkerOptions,
orderListDelimiterOptions, orderListDelimiterOptions,
preferHeadingStyleOptions, preferHeadingStyleOptions,
tabSizeOptions,
listIndentationOptions, listIndentationOptions,
frontmatterTypeOptions, frontmatterTypeOptions,
sequenceThemeOptions sequenceThemeOptions
@ -102,15 +129,15 @@ import {
export default { export default {
components: { components: {
Compound,
Separator, Separator,
Bool, Bool,
CusSelect CurSelect
}, },
data () { data () {
this.bulletListMarkerOptions = bulletListMarkerOptions this.bulletListMarkerOptions = bulletListMarkerOptions
this.orderListDelimiterOptions = orderListDelimiterOptions this.orderListDelimiterOptions = orderListDelimiterOptions
this.preferHeadingStyleOptions = preferHeadingStyleOptions this.preferHeadingStyleOptions = preferHeadingStyleOptions
this.tabSizeOptions = tabSizeOptions
this.listIndentationOptions = listIndentationOptions this.listIndentationOptions = listIndentationOptions
this.frontmatterTypeOptions = frontmatterTypeOptions this.frontmatterTypeOptions = frontmatterTypeOptions
this.sequenceThemeOptions = sequenceThemeOptions this.sequenceThemeOptions = sequenceThemeOptions
@ -122,7 +149,6 @@ export default {
bulletListMarker: state => state.preferences.bulletListMarker, bulletListMarker: state => state.preferences.bulletListMarker,
orderListDelimiter: state => state.preferences.orderListDelimiter, orderListDelimiter: state => state.preferences.orderListDelimiter,
preferHeadingStyle: state => state.preferences.preferHeadingStyle, preferHeadingStyle: state => state.preferences.preferHeadingStyle,
tabSize: state => state.preferences.tabSize,
listIndentation: state => state.preferences.listIndentation, listIndentation: state => state.preferences.listIndentation,
frontmatterType: state => state.preferences.frontmatterType, frontmatterType: state => state.preferences.frontmatterType,
superSubScript: state => state.preferences.superSubScript, superSubScript: state => state.preferences.superSubScript,

16
src/renderer/prefComponents/sideBar/index.vue
View File

@ -74,9 +74,12 @@ export default {
}) })
}, },
handleCategoryItemClick (item) { handleCategoryItemClick (item) {
this.$router.push({ const { currentCategory } = this
path: item.path if (item.name.toLowerCase() !== currentCategory) {
}) this.$router.push({
path: item.path
})
}
} }
}, },
mounted () { mounted () {
@ -88,6 +91,8 @@ export default {
<style> <style>
.pref-sidebar { .pref-sidebar {
-webkit-app-region: drag; -webkit-app-region: drag;
display: flex;
flex-direction: column;
background: var(--sideBarBgColor); background: var(--sideBarBgColor);
width: var(--prefSideBarWidth); width: var(--prefSideBarWidth);
height: 100vh; height: 100vh;
@ -96,13 +101,13 @@ export default {
& h3 { & h3 {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
text-align: center;
color: var(--sideBarColor); color: var(--sideBarColor);
} }
padding-left: 30px;
padding-right: 30px;
} }
.search-wrapper { .search-wrapper {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
padding: 0 20px;
margin: 30px 0; margin: 30px 0;
} }
.el-autocomplete { .el-autocomplete {
@ -144,6 +149,7 @@ export default {
} }
.category { .category {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
overflow-y: auto;
& .item { & .item {
width: 100%; width: 100%;
height: 50px; height: 50px;

68
src/renderer/prefComponents/spellchecker/index.vue
View File

@ -1,34 +1,40 @@
<template> <template>
<div class="pref-spellchecker"> <div class="pref-spellchecker">
<h4>Spelling</h4> <h4>Spelling</h4>
<bool <compound>
description="Enable spell checker" <template #head>
notes="Feature is experimental." <bool
:bool="spellcheckerEnabled" description="Enable spell checker"
:onChange="handleSpellcheckerEnabled" :bool="spellcheckerEnabled"
></bool> :onChange="handleSpellcheckerEnabled"
<separator></separator> ></bool>
<bool </template>
description="Use Hunspell instead of system spell checker on macOS and Windows 10" <template #children>
notes="Requires restart." <bool
:bool="spellcheckerIsHunspell" description="Use Hunspell instead of system spell checker on macOS and Windows 10"
:disable="!isOsSpellcheckerSupported || !spellcheckerEnabled" notes="Requires restart."
:onChange="value => onSelectChange('spellcheckerIsHunspell', value)" :bool="spellcheckerIsHunspell"
></bool> :disable="!isOsSpellcheckerSupported || !spellcheckerEnabled"
<bool :onChange="value => onSelectChange('spellcheckerIsHunspell', value)"
description="Hide marks for spelling errors" ></bool>
:bool="spellcheckerNoUnderline" <bool
:disable="!spellcheckerEnabled" description="Hide marks for spelling errors"
:onChange="value => onSelectChange('spellcheckerNoUnderline', value)" :bool="spellcheckerNoUnderline"
></bool> :disable="!spellcheckerEnabled"
<bool :onChange="value => onSelectChange('spellcheckerNoUnderline', value)"
v-show="isOsx && !spellcheckerIsHunspell" ></bool>
description="Automatically detect document language (requires showing marks for spelling errors)" <bool
:bool="spellcheckerAutoDetectLanguage" v-show="isOsx && !spellcheckerIsHunspell"
:disable="!spellcheckerEnabled" description="Automatically detect document language (requires showing marks for spelling errors)"
:onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)" :bool="spellcheckerAutoDetectLanguage"
></bool> :disable="!spellcheckerEnabled"
:onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
></bool>
</template>
</compound>
<separator></separator> <separator></separator>
<cur-select <cur-select
description="Default language for spell checker" description="Default language for spell checker"
:value="spellcheckerLanguage" :value="spellcheckerLanguage"
@ -48,7 +54,9 @@
> >
Additional languages may be added through "Language" in your "Time & language" settings. Additional languages may be added through "Language" in your "Time & language" settings.
</div> </div>
<div v-if="isHunspellSelected && spellcheckerEnabled"> <div v-if="isHunspellSelected && spellcheckerEnabled">
<h6 class="title">Hunspell settings:</h6>
<div class="description">Installed Hunspell dictionaries</div> <div class="description">Installed Hunspell dictionaries</div>
<el-table <el-table
:data="availableDictionaries" :data="availableDictionaries"
@ -95,6 +103,7 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Compound from '../common/compound'
import CurSelect from '../common/select' import CurSelect from '../common/select'
import Bool from '../common/bool' import Bool from '../common/bool'
import Separator from '../common/separator' import Separator from '../common/separator'
@ -106,6 +115,7 @@ import { downloadHunspellDictionary, deleteHunspellDictionary } from '@/spellche
export default { export default {
components: { components: {
Bool, Bool,
Compound,
CurSelect, CurSelect,
Separator Separator
}, },
@ -293,6 +303,10 @@ export default {
color: var(--iconColor); color: var(--iconColor);
font-size: 14px; font-size: 14px;
} }
& h6.title {
font-weight: 400;
font-size: 1.1em;
}
} }
.el-table, .el-table__expanded-cell { .el-table, .el-table__expanded-cell {
background: var(--editorBgColor); background: var(--editorBgColor);

7
src/renderer/prefComponents/theme/index.vue
View File

@ -16,8 +16,8 @@
:options="autoSwitchThemeOptions" :options="autoSwitchThemeOptions"
:onChange="value => onSelectChange('autoSwitchTheme', value)" :onChange="value => onSelectChange('autoSwitchTheme', value)"
></cur-select> ></cur-select>
<separator></separator> <separator v-show="false"></separator>
<section class="import-themes ag-underdevelop"> <section v-show="false" class="import-themes ag-underdevelop">
<div> <div>
<span>Open the themes folder</span> <span>Open the themes folder</span>
<el-button size="small">Open Folder</el-button> <el-button size="small">Open Folder</el-button>
@ -79,9 +79,8 @@ export default {
</script> </script>
<style> <style>
.pref-theme {
}
.offcial-themes { .offcial-themes {
margin-top: 12px;
& .theme { & .theme {
cursor: pointer; cursor: pointer;
width: 248px; width: 248px;