diff --git a/src/gui/css/options.css b/src/gui/css/options.css index fc2ad5bced6c6cf2be11fc4abd4644f8c4d7a945..baea93813c6d493bf4826dc1a9ad342c525fdcf3 100644 --- a/src/gui/css/options.css +++ b/src/gui/css/options.css @@ -20,7 +20,7 @@ div.options-group div.button-group { margin: 6px 0; } -div.options-group span.comment { +div.options-group .comment { color: gray; font-style: italic; margin-left: 10px; diff --git a/src/gui/options/options.js b/src/gui/options/options.js index a70c53a33f3320f59583ce52560a1cada384e497..16429633e0672b696031935d43860ebf9b499b9e 100644 --- a/src/gui/options/options.js +++ b/src/gui/options/options.js @@ -303,6 +303,32 @@ App.UI.OptionsGroup = (function() { } } + class Comment extends Row { + + /** + * @param {string} comment can be SC markup + */ + constructor(comment) { + super(); + this.comment = comment; + this.long = false; + } + + /** + * @param {HTMLDivElement} container + */ + render(container) { + /* left */ + container.append(document.createElement("div")); + + /* right */ + const comment = document.createElement("div"); + comment.classList.add("comment"); + $(comment).wiki(this.comment); + container.append(comment); + } + } + return class { constructor() { /** @@ -319,6 +345,17 @@ App.UI.OptionsGroup = (function() { return this; } + /** + * @template {Row} T + * @param {T} row + * @returns {T} + * @private + */ + _addRow(row) { + this.rows.push(row); + return row; + } + /** * @param {string} name * @param {string} property @@ -327,8 +364,12 @@ App.UI.OptionsGroup = (function() { */ addOption(name, property, object = V) { const option = new Option(name, property, object); - this.rows.push(option); - return option; + return this._addRow(option); + } + + addComment(comment) { + const c = new Comment(comment); + return this._addRow(c); } render() { diff --git a/themes/light/options.css b/themes/light/options.css index 88e25e7e362d0ee0669b6fb4c471dcd7a7e7c8e7..419ff6ed92790d70bcd8ce5fddc1a4419d519621 100644 --- a/themes/light/options.css +++ b/themes/light/options.css @@ -1,3 +1,3 @@ -div.options-group span.comment { +div.options-group .comment { color: #575757; }