feat(client/fonts): add groups for fonts

This commit is contained in:
Elian Doran 2025-01-03 18:55:45 +02:00
parent 639d118f41
commit 710a80aa26
No known key found for this signature in database

View File

@ -3,31 +3,35 @@ import utils from "../../../../services/utils.js";
import { t } from "../../../../services/i18n.js"; import { t } from "../../../../services/i18n.js";
import { OptionMap, OptionNames } from "../../../../../../services/options_interface.js"; import { OptionMap, OptionNames } from "../../../../../../services/options_interface.js";
const FONT_FAMILIES = [ const FONT_FAMILIES = {
{ value: "theme", label: t("fonts.theme_defined") }, "Generic fonts": [
{ value: "serif", label: "Serif" }, { value: "theme", label: t("fonts.theme_defined") },
{ value: "sans-serif", label: "Sans Serif" }, { value: "serif", label: "Serif" },
{ value: "monospace", label: "Monospace" }, { value: "sans-serif", label: "Sans Serif" },
{ value: "Arial", label: "Arial" }, { value: "monospace", label: "Monospace" },
{ value: "Verdana", label: "Verdana" }, ],
{ value: "Helvetica", label: "Helvetica" }, "System fonts": [
{ value: "Tahoma", label: "Tahoma" }, { value: "Arial", label: "Arial" },
{ value: "Trebuchet MS", label: "Trebuchet MS" }, { value: "Verdana", label: "Verdana" },
{ value: "Times New Roman", label: "Times New Roman" }, { value: "Helvetica", label: "Helvetica" },
{ value: "Georgia", label: "Georgia" }, { value: "Tahoma", label: "Tahoma" },
{ value: "Garamond", label: "Garamond" }, { value: "Trebuchet MS", label: "Trebuchet MS" },
{ value: "Courier New", label: "Courier New" }, { value: "Times New Roman", label: "Times New Roman" },
{ value: "Brush Script MT", label: "Brush Script MT" }, { value: "Georgia", label: "Georgia" },
{ value: "Impact", label: "Impact" }, { value: "Garamond", label: "Garamond" },
{ value: "American Typewriter", label: "American Typewriter" }, { value: "Courier New", label: "Courier New" },
{ value: "Andalé Mono", label: "Andalé Mono" }, { value: "Brush Script MT", label: "Brush Script MT" },
{ value: "Lucida Console", label: "Lucida Console" }, { value: "Impact", label: "Impact" },
{ value: "Monaco", label: "Monaco" }, { value: "American Typewriter", label: "American Typewriter" },
{ value: "Bradley Hand", label: "Bradley Hand" }, { value: "Andalé Mono", label: "Andalé Mono" },
{ value: "Luminari", label: "Luminari" }, { value: "Lucida Console", label: "Lucida Console" },
{ value: "Comic Sans MS", label: "Comic Sans MS" }, { value: "Monaco", label: "Monaco" },
{ value: "Microsoft YaHei", label: "Microsoft YaHei" }, { value: "Bradley Hand", label: "Bradley Hand" },
]; { value: "Luminari", label: "Luminari" },
{ value: "Comic Sans MS", label: "Comic Sans MS" },
{ value: "Microsoft YaHei", label: "Microsoft YaHei" },
]
};
const TPL = ` const TPL = `
<div class="options-section"> <div class="options-section">
@ -186,11 +190,17 @@ export default class FontsOptions extends OptionsWidget {
fillFontFamilyOptions($select: JQuery<HTMLElement>, currentValue: string) { fillFontFamilyOptions($select: JQuery<HTMLElement>, currentValue: string) {
$select.empty(); $select.empty();
for (const {value, label} of FONT_FAMILIES) { for (const [group, fonts] of Object.entries(FONT_FAMILIES)) {
$select.append($("<option>") $select.append($("<optgroup>")
.attr("value", value) .attr("label", group));
.prop("selected", value === currentValue)
.text(label)); for (const {value, label} of fonts) {
$select.append($("<option>")
.attr("value", value)
.prop("selected", value === currentValue)
.text(label));
}
} }
} }
} }