Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 02:52: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 = ` const TPL = `
<div class="options-section"> <div class="options-section">
<h4>${t("database_anonymization.title")}</h4> <h4>${t("database_anonymization.title")}</h4>
<div class="row"> <div class="row">
<p>${t("database_anonymization.choose_anonymization")}</p> <p>${t("database_anonymization.choose_anonymization")}</p>
<div class="col-6"> <div class="col-md-6">
<h5>${t("database_anonymization.full_anonymization")}</h5> <h5>${t("database_anonymization.full_anonymization")}</h5>
<p>${t("database_anonymization.full_anonymization_description")}</p> <p>${t("database_anonymization.full_anonymization_description")}</p>
<button class="anonymize-full-button btn">${t("database_anonymization.save_fully_anonymized_database")}</button> <button class="anonymize-full-button btn">${t("database_anonymization.save_fully_anonymized_database")}</button>
</div> </div>
<div class="col-6"> <div class="col-md-6">
<h5>${t("database_anonymization.light_anonymization")}</h5> <h5>${t("database_anonymization.light_anonymization")}</h5>
<p>${t("database_anonymization.light_anonymization_description")}</p> <p>${t("database_anonymization.light_anonymization_description")}</p>
<button class="anonymize-light-button btn">${t("database_anonymization.save_lightly_anonymized_database")}</button> <button class="anonymize-light-button btn">${t("database_anonymization.save_lightly_anonymized_database")}</button>
</div> </div>
</div> </div>
<hr /> <hr />
<h5>${t("database_anonymization.existing_anonymized_databases")}</h5> <h5>${t("database_anonymization.existing_anonymized_databases")}</h5>
<ul class="existing-anonymized-databases"></ul> <ul class="existing-anonymized-databases"></ul>
</div>`; </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. * 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. * @param {number} times The number of times to print the \`Hello World!\` message.
*/ */
function greet(times) { function greet(times) {
@ -27,12 +27,12 @@ const TPL = `
<p>${t("highlighting.description")}</p> <p>${t("highlighting.description")}</p>
<div class="form-group row"> <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> <label for="highlighting-color-scheme-select">${t("highlighting.color-scheme")}</label>
<select id="highlighting-color-scheme-select" class="theme-select form-select"></select> <select id="highlighting-color-scheme-select" class="theme-select form-select"></select>
</div> </div>
<div class="col-6 side-checkbox"> <div class="col-md-6 side-checkbox">
<label class="form-check"> <label class="form-check">
<input type="checkbox" class="word-wrap form-check-input" /> <input type="checkbox" class="word-wrap form-check-input" />
${t("code_block.word_wrapping")} ${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. * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
*/ */
export default class CodeBlockOptions extends OptionsWidget { export default class CodeBlockOptions extends OptionsWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select"); this.$themeSelect = this.$widget.find(".theme-select");
this.$themeSelect.on("change", async () => { this.$themeSelect.on("change", async () => {
const newTheme = this.$themeSelect.val(); const newTheme = this.$themeSelect.val();
library_loader.loadHighlightingTheme(newTheme); library_loader.loadHighlightingTheme(newTheme);
await server.put(`options/codeBlockTheme/${newTheme}`); await server.put(`options/codeBlockTheme/${newTheme}`);
}); });
this.$wordWrap = this.$widget.find("input.word-wrap"); this.$wordWrap = this.$widget.find("input.word-wrap");
this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap)); this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
// Set up preview // Set up preview
this.$sampleEl = this.$widget.find(".code-sample"); this.$sampleEl = this.$widget.find(".code-sample");
} }
#setupPreview(shouldEnableSyntaxHighlight) { #setupPreview(shouldEnableSyntaxHighlight) {
@ -116,4 +116,4 @@ export default class CodeBlockOptions extends OptionsWidget {
this.#setupPreview(options.codeBlockTheme !== "none"); 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 = ` const TPL = `
<div class="options-section"> <div class="options-section">
<h4>${t("max_content_width.title")}</h4> <h4>${t("max_content_width.title")}</h4>
<p>${t("max_content_width.default_description")}</p> <p>${t("max_content_width.default_description")}</p>
<div class="form-group row"> <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> <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"> <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
</div> </div>
</div> </div>
<p> <p>
${t("max_content_width.apply_changes_description")} ${t("max_content_width.apply_changes_description")}
<button class="btn btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button> <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> </div>
<div class="options-section"> <div class="options-section">
<h4>${t("theme.title")}</h4> <h4>${t("theme.title")}</h4>
<div class="form-group row"> <div class="form-group row">
<div class="col-6"> <div class="col-md-6">
<label for="theme-select">${t("theme.theme_label")}</label> <label for="theme-select">${t("theme.theme_label")}</label>
<select id="theme-select" class="theme-select form-select"></select> <select id="theme-select" class="theme-select form-select"></select>
</div> </div>
<div class="col-6 side-checkbox"> <div class="col-md-6 side-checkbox">
<label class="form-check"> <label class="form-check">
<input type="checkbox" class="override-theme-fonts form-check-input"> <input type="checkbox" class="override-theme-fonts form-check-input">
${t("theme.override_theme_fonts_label")} ${t("theme.override_theme_fonts_label")}
</label> </label>
</div> </div>
</div> </div>
</div>`; </div>`;
export default class ThemeOptions extends OptionsWidget { 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 { body.mobile .help-dialog kbd {
display: inline !important; display: inline !important;
} }
body.mobile .options-section table {
word-break: break-all;
}
} }
/* Mobile, tablet mode */ /* Mobile, tablet mode */