From e951236e3634924e2a26bf5d0890b3f25d39115d Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Fri, 18 Dec 2020 15:33:52 +0100 Subject: [PATCH 1/4] luci-base: add tooltip handling Signed-off-by: Florian Eckert --- .../htdocs/luci-static/resources/form.js | 22 +++++++++++++++++++ .../htdocs/luci-static/resources/ui.js | 11 ++++++++++ 2 files changed, 33 insertions(+) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 1588bc7bfb..4a4536bb94 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -3602,13 +3602,35 @@ var CBIFlagValue = CBIValue.extend(/** @lends LuCI.form.FlagValue.prototype */ { * @default 0 */ + /** + * Set a tooltip for the flag option. + * + * If set to a string, it will be used as-is as a tooltip. + * + * If set to a function, the function will be invoked and the return + * value will be shown as a tooltip. If the return value of the function + * is `null` no tooltip will be set. + * + * @name LuCI.form.TypedSection.prototype#tooltip + * @type string|function + * @default null + */ + /** @private */ renderWidget: function(section_id, option_index, cfgvalue) { + var tooltip = null; + + if (typeof(this.tooltip) == 'function') + tooltip = this.tooltip.apply(this, [section_id]); + else if (typeof(this.tooltip) == 'string') + tooltip = (arguments.length > 1) ? ''.format.apply(this.tooltip, this.varargs(arguments, 1)) : this.tooltip; + var widget = new ui.Checkbox((cfgvalue != null) ? cfgvalue : this.default, { id: this.cbid(section_id), value_enabled: this.enabled, value_disabled: this.disabled, validate: L.bind(this.validate, this, section_id), + tooltip: tooltip, disabled: (this.readonly != null) ? this.readonly : this.map.readonly }); diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index e35a26a8ba..81e0b81820 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -610,6 +610,17 @@ var UICheckbox = UIElement.extend(/** @lends LuCI.ui.Checkbox.prototype */ { frameEl.appendChild(E('label', { 'for': id })); + if (this.options.tooltip != null) { + frameEl.appendChild( + E('label', { 'class': 'cbi-tooltip-container' },[ + "⚠️", + E('div', { 'class': 'cbi-tooltip' }, + this.options.tooltip + ) + ]) + ); + } + return this.bind(frameEl); }, From df2a135a08def546f44158d97fbaee5a544a6899 Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Mon, 21 Dec 2020 16:31:43 +0100 Subject: [PATCH 2/4] luci-base: make tooltip icon string configurable Signed-off-by: Florian Eckert --- .../luci-base/htdocs/luci-static/resources/form.js | 12 ++++++++++++ modules/luci-base/htdocs/luci-static/resources/ui.js | 7 ++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 4a4536bb94..58a31dddb2 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -3616,6 +3616,17 @@ var CBIFlagValue = CBIValue.extend(/** @lends LuCI.form.FlagValue.prototype */ { * @default null */ + /** + * Set a tooltip icon. + * + * If set, this icon will be shown for the default one. + * This could also be a png icon from the resources directory. + * + * @name LuCI.form.TypedSection.prototype#tooltipicon + * @type string + * @default 'ℹ️'; + */ + /** @private */ renderWidget: function(section_id, option_index, cfgvalue) { var tooltip = null; @@ -3631,6 +3642,7 @@ var CBIFlagValue = CBIValue.extend(/** @lends LuCI.form.FlagValue.prototype */ { value_disabled: this.disabled, validate: L.bind(this.validate, this, section_id), tooltip: tooltip, + tooltipicon: this.tooltipicon, disabled: (this.readonly != null) ? this.readonly : this.map.readonly }); diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index 81e0b81820..3ada9e375a 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -611,9 +611,14 @@ var UICheckbox = UIElement.extend(/** @lends LuCI.ui.Checkbox.prototype */ { frameEl.appendChild(E('label', { 'for': id })); if (this.options.tooltip != null) { + var icon = "⚠️"; + + if (this.options.tooltipicon != null) + icon = this.options.tooltipicon; + frameEl.appendChild( E('label', { 'class': 'cbi-tooltip-container' },[ - "⚠️", + icon, E('div', { 'class': 'cbi-tooltip' }, this.options.tooltip ) From 4bbf6db9d9909d1cc1105d39bfbabaa1cb897b87 Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Fri, 18 Dec 2020 15:53:08 +0100 Subject: [PATCH 3/4] luci-app-firewall: add limited masquerading tooltip Signed-off-by: Florian Eckert --- .../htdocs/luci-static/resources/view/firewall/zones.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/zones.js b/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/zones.js index b2f9b81a9b..53612e0572 100644 --- a/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/zones.js +++ b/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/zones.js @@ -158,6 +158,14 @@ return view.extend({ o = s.taboption('general', form.Flag, 'masq', _('Masquerading')); o.editable = true; + o.tooltip = function(section_id) { + var masq_src = uci.get('firewall', section_id, 'masq_src') + var masq_dest = uci.get('firewall', section_id, 'masq_dest') + if (masq_src || masq_dest) + return _('Limited masquerading enabled'); + + return null; + }; o = s.taboption('general', form.Flag, 'mtu_fix', _('MSS clamping')); o.modalonly = true; From ab390cf94eef0fa0d5278073e5fffaecb9722f82 Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Wed, 13 Jan 2021 10:46:39 +0100 Subject: [PATCH 4/4] luci-app-firewall: add tooltip on rules that have time restrictions enabled Signed-off-by: Florian Eckert --- .../luci-static/resources/view/firewall/rules.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/rules.js b/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/rules.js index bacbbd7044..7c09eeadf6 100644 --- a/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/rules.js +++ b/applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/rules.js @@ -236,7 +236,19 @@ return view.extend({ o.modalonly = false; o.default = o.enabled; o.editable = true; + o.tooltip = function(section_id) { + var weekdays = uci.get('firewall', section_id, 'weekdays'); + var monthdays = uci.get('firewall', section_id, 'monthdays'); + var start_time = uci.get('firewall', section_id, 'start_time'); + var stop_time = uci.get('firewall', section_id, 'stop_time'); + var start_date = uci.get('firewall', section_id, 'start_date'); + var stop_date = uci.get('firewall', section_id, 'stop_date'); + if (weekdays || monthdays || start_time || stop_time || start_date || stop_date ) + return _('Time restritions are enabled for this rule'); + + return null; + }; o = s.taboption('advanced', form.ListValue, 'direction', _('Match device')); o.modalonly = true;