zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 15:45:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

added option to bring back plain (non-markdown) headings, closes #1678

Browse source
This commit is contained in:
zadam 2021-03-09 22:06:40 +01:00
parent a654078e56
commit f8fb071a6f
8 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/public/app/dialogs/options/appearance.js
View file

@ -28,6 +28,16 @@ const TPL = `
</select>
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label for="heading-style">Heading style</label>
<select class="form-control" id="heading-style">
<option value="plain">Plain</option>
<option value="markdown">Markdown-style</option>
</select>
</div>
</div>
<p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
@ -78,6 +88,7 @@ export default class ApperanceOptions {
this.$themeSelect = $("#theme-select");
this.$zoomFactorSelect = $("#zoom-factor-select");
this.$nativeTitleBarSelect = $("#native-title-bar-select");
this.$headingStyle = $("#heading-style");
this.$mainFontSize = $("#main-font-size");
this.$treeFontSize = $("#tree-font-size");
this.$detailFontSize = $("#detail-font-size");
@ -86,11 +97,7 @@ export default class ApperanceOptions {
this.$themeSelect.on('change', () => {
const newTheme = this.$themeSelect.val();
for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
if (clazz.startsWith("theme-")) {
this.$body.removeClass(clazz);
}
}
this.toggleBodyClass("theme-", newTheme);
const noteId = $(this).find(":selected").attr("data-note-id");
@ -100,8 +107,6 @@ export default class ApperanceOptions {
libraryLoader.requireCss(`api/notes/download/${noteId}`);
}
this.$body.addClass("theme-" + newTheme);
server.put('options/theme/' + newTheme);
});
@ -113,6 +118,14 @@ export default class ApperanceOptions {
server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
});
this.$headingStyle.on('change', () => {
const newHeadingStyle = this.$headingStyle.val();
this.toggleBodyClass("heading-style-", newHeadingStyle);
server.put('options/headingStyle/' + newHeadingStyle);
});
this.$mainFontSize.on('change', async () => {
await server.put('options/mainFontSize/' + this.$mainFontSize.val());
@ -132,6 +145,16 @@ export default class ApperanceOptions {
});
}
toggleBodyClass(prefix, value) {
for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
if (clazz.startsWith(prefix)) {
this.$body.removeClass(clazz);
}
}
this.$body.addClass(prefix + value);
}
async optionsLoaded(options) {
const themes = [
{ val: 'white', title: 'White' },
@ -159,6 +182,8 @@ export default class ApperanceOptions {
this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide');
this.$headingStyle.val(options.headingStyle);
this.$mainFontSize.val(options.mainFontSize);
this.$treeFontSize.val(options.treeFontSize);
this.$detailFontSize.val(options.detailFontSize);

11
src/public/app/widgets/type_widgets/editable_text.js
View file

@ -49,15 +49,16 @@ const TPL = `
}
.note-detail-editable-text h2 { font-size: 1.8em; }
.note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
.note-detail-editable-text h3 { font-size: 1.6em; }
.note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
.note-detail-editable-text h4 { font-size: 1.4em; }
.note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
.note-detail-editable-text h5 { font-size: 1.2em; }
.note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
.note-detail-editable-text h6 { font-size: 1.1em; }
.note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
.note-detail-editable-text-editor {
padding-top: 10px;

15
src/public/app/widgets/type_widgets/read_only_text.js
View file

@ -14,16 +14,11 @@ const TPL = `
.note-detail-readonly-text h5 { font-size: 1.2em; }
.note-detail-readonly-text h6 { font-size: 1.1em; }
.note-detail-readonly-text h2 { font-size: 1.8em; }
.note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
.note-detail-readonly-text h3 { font-size: 1.6em; }
.note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
.note-detail-readonly-text h4 { font-size: 1.4em; }
.note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
.note-detail-readonly-text h5 { font-size: 1.2em; }
.note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
.note-detail-readonly-text h6 { font-size: 1.1em; }
.note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
.note-detail-readonly-text {
padding-left: 22px;

3
src/routes/api/options.js
View file

@ -40,7 +40,8 @@ const ALLOWED_OPTIONS = new Set([
'nativeTitleBarVisible',
'attributeListExpanded',
'promotedAttributesExpanded',
'similarNotesExpanded'
'similarNotesExpanded',
'headingStyle'
]);
function getOptions() {

1
src/routes/index.js
View file

@ -19,6 +19,7 @@ function index(req, res) {
res.render(view, {
csrfToken: csrfToken,
theme: options.theme,
headingStyle: options.headingStyle,
mainFontSize: parseInt(options.mainFontSize),
treeFontSize: parseInt(options.treeFontSize),
detailFontSize: parseInt(options.detailFontSize),

3
src/services/options_init.js
View file

@ -84,7 +84,8 @@ const defaultOptions = [
{ name: 'attributeListExpanded', value: 'false', isSynced: false },
{ name: 'promotedAttributesExpanded', value: 'true', isSynced: true },
{ name: 'similarNotesExpanded', value: 'true', isSynced: true },
{ name: 'debugModeEnabled', value: 'false', isSynced: false }
{ name: 'debugModeEnabled', value: 'false', isSynced: false },
{ name: 'headingStyle', value: 'markdown', isSynced: true },
];
function initStartupOptions() {

2
src/views/desktop.ejs
View file

@ -5,7 +5,7 @@
<link rel="shortcut icon" href="favicon.ico">
<title>Trilium Notes</title>
</head>
<body class="desktop theme-<%= theme %>" style="--main-font-size: <%= mainFontSize %>%; --tree-font-size: <%= treeFontSize %>%; --detail-font-size: <%= detailFontSize %>%;">
<body class="desktop theme-<%= theme %> heading-style-<%= headingStyle %>" style="--main-font-size: <%= mainFontSize %>%; --tree-font-size: <%= treeFontSize %>%; --detail-font-size: <%= detailFontSize %>%;">
<noscript>Trilium requires JavaScript to be enabled.</noscript>
<script>

2
src/views/mobile.ejs
View file

@ -95,7 +95,7 @@
}
</style>
</head>
<body class="mobile theme-<%= theme %>">
<body class="mobile theme-<%= theme %> heading-style-<%= headingStyle %>">
<noscript>Trilium requires JavaScript to be enabled.</noscript>
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>