Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-28 10:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): improve layout for settings

Browse Source
This commit is contained in:
Elian Doran 2025-01-04 19:26:22 +02:00
parent 33ce41bdd8
commit 657fa9402c
No known key found for this signature in database
5 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/public/app/widgets/type_widgets/options/advanced/database_anonymization.js
View File

@ -6,30 +6,30 @@ import { t } from "../../../../services/i18n.js";
const TPL = `
<div class="options-section">
<h4>${t("database_anonymization.title")}</h4>
<div class="row">
<p>${t("database_anonymization.choose_anonymization")}</p>
<div class="col-6">
<div class="col-md-6">
<h5>${t("database_anonymization.full_anonymization")}</h5>
<p>${t("database_anonymization.full_anonymization_description")}</p>
<button class="anonymize-full-button btn">${t("database_anonymization.save_fully_anonymized_database")}</button>
</div>
<div class="col-6">
<div class="col-md-6">
<h5>${t("database_anonymization.light_anonymization")}</h5>
<p>${t("database_anonymization.light_anonymization_description")}</p>
<button class="anonymize-light-button btn">${t("database_anonymization.save_lightly_anonymized_database")}</button>
</div>
</div>
<hr />
<h5>${t("database_anonymization.existing_anonymized_databases")}</h5>
<ul class="existing-anonymized-databases"></ul>
</div>`;

16
src/public/app/widgets/type_widgets/options/appearance/code_block.js
View File

@ -10,7 +10,7 @@ greet(n); // Print "Hello World" for n times
/**
* Displays a "Hello World!" message for a given amount of times, on the standard console. The "Hello World!" text will be displayed once per line.
*
*
* @param {number} times The number of times to print the \`Hello World!\` message.
*/
function greet(times) {
@ -27,12 +27,12 @@ const TPL = `
<p>${t("highlighting.description")}</p>
<div class="form-group row">
<div class="col-6">
<div class="col-md-6">
<label for="highlighting-color-scheme-select">${t("highlighting.color-scheme")}</label>
<select id="highlighting-color-scheme-select" class="theme-select form-select"></select>
</div>
<div class="col-6 side-checkbox">
<div class="col-md-6 side-checkbox">
<label class="form-check">
<input type="checkbox" class="word-wrap form-check-input" />
${t("code_block.word_wrapping")}
@ -58,20 +58,20 @@ const TPL = `
* Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
*/
export default class CodeBlockOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
doRender() {
this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select");
this.$themeSelect.on("change", async () => {
const newTheme = this.$themeSelect.val();
library_loader.loadHighlightingTheme(newTheme);
await server.put(`options/codeBlockTheme/${newTheme}`);
});
this.$wordWrap = this.$widget.find("input.word-wrap");
this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
// Set up preview
this.$sampleEl = this.$widget.find(".code-sample");
this.$sampleEl = this.$widget.find(".code-sample");
}
#setupPreview(shouldEnableSyntaxHighlight) {
@ -116,4 +116,4 @@ export default class CodeBlockOptions extends OptionsWidget {
this.#setupPreview(options.codeBlockTheme !== "none");
}
}
}

8
src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
View File

@ -7,16 +7,16 @@ const MIN_VALUE = 640;
const TPL = `
<div class="options-section">
<h4>${t("max_content_width.title")}</h4>
<p>${t("max_content_width.default_description")}</p>
<div class="form-group row">
<div class="col-6">
<div class="col-md-6">
<label for="max-content-width">${t("max_content_width.max_width_label")}</label>
<input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
</div>
</div>
<p>
${t("max_content_width.apply_changes_description")}
<button class="btn btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>

12
src/public/app/widgets/type_widgets/options/appearance/theme.js
View File

@ -26,22 +26,22 @@ const TPL = `
</div>
</div>
<div class="options-section">
<div class="options-section">
<h4>${t("theme.title")}</h4>
<div class="form-group row">
<div class="col-6">
<div class="col-md-6">
<label for="theme-select">${t("theme.theme_label")}</label>
<select id="theme-select" class="theme-select form-select"></select>
</div>
<div class="col-6 side-checkbox">
<div class="col-md-6 side-checkbox">
<label class="form-check">
<input type="checkbox" class="override-theme-fonts form-check-input">
${t("theme.override_theme_fonts_label")}
</label>
</div>
</div>
</div>
</div>`;
export default class ThemeOptions extends OptionsWidget {

4
src/public/stylesheets/style.css
View File

@ -1239,6 +1239,10 @@ body.mobile #launcher-pane .dropdown-menu.show {
body.mobile .help-dialog kbd {
display: inline !important;
}
body.mobile .options-section table {
word-break: break-all;
}
}
/* Mobile, tablet mode */