From 9341332379adb02f87921067ffed1afd87f3343a Mon Sep 17 00:00:00 2001 From: Fabian Dill Date: Sun, 21 Aug 2022 00:58:46 +0200 Subject: [PATCH] WebHost: allow newlines in data-tooltip (#921) * WebHost: allow newlines in data-tooltip * WebHost: Tooltips: strip surrounding whitespace * WebHost: unify tooltips behaviour * WebHost: unify labels around tooltips * WebHost: changing tooltips width to max-width to allow small tooltips to not have empty space. * Minor modifications to tooltips - Reduce tooltip target to (?) spans - Set fixed width of 260px on tooltips - Add space between : and (?) on player-settings - Removed cursor:pointer on tooltips - Fix labels for checkboxes on generate.html Co-authored-by: Chris Wilson --- WebHostLib/options.py | 15 ++-- WebHostLib/static/assets/player-settings.js | 10 ++- WebHostLib/static/styles/generate.css | 4 -- WebHostLib/static/styles/globalStyles.css | 4 ++ WebHostLib/static/styles/tooltip.css | 4 +- WebHostLib/templates/generate.html | 79 ++++++++++----------- 6 files changed, 61 insertions(+), 55 deletions(-) diff --git a/WebHostLib/options.py b/WebHostLib/options.py index 3c481be6..e2d362a5 100644 --- a/WebHostLib/options.py +++ b/WebHostLib/options.py @@ -49,6 +49,11 @@ def create(): return list(default_value) return default_value + def get_html_doc(option_type: type(Options.Option)) -> str: + if not option_type.__doc__: + return "Please document me!" + return "\n".join(line.strip() for line in option_type.__doc__.split("\n")).strip() + weighted_settings = { "baseOptions": { "description": "Generated by https://archipelago.gg/", @@ -88,7 +93,7 @@ def create(): game_options[option_name] = this_option = { "type": "select", "displayName": option.display_name if hasattr(option, "display_name") else option_name, - "description": option.__doc__ if option.__doc__ else "Please document me!", + "description": get_html_doc(option), "defaultValue": None, "options": [] } @@ -114,7 +119,7 @@ def create(): game_options[option_name] = { "type": "range", "displayName": option.display_name if hasattr(option, "display_name") else option_name, - "description": option.__doc__ if option.__doc__ else "Please document me!", + "description": get_html_doc(option), "defaultValue": option.default if hasattr( option, "default") and option.default != "random" else option.range_start, "min": option.range_start, @@ -131,14 +136,14 @@ def create(): game_options[option_name] = { "type": "items-list", "displayName": option.display_name if hasattr(option, "display_name") else option_name, - "description": option.__doc__ if option.__doc__ else "Please document me!", + "description": get_html_doc(option), } elif getattr(option, "verify_location_name", False): game_options[option_name] = { "type": "locations-list", "displayName": option.display_name if hasattr(option, "display_name") else option_name, - "description": option.__doc__ if option.__doc__ else "Please document me!", + "description": get_html_doc(option), } elif issubclass(option, Options.OptionList) or issubclass(option, Options.OptionSet): @@ -146,7 +151,7 @@ def create(): game_options[option_name] = { "type": "custom-list", "displayName": option.display_name if hasattr(option, "display_name") else option_name, - "description": option.__doc__ if option.__doc__ else "Please document me!", + "description": get_html_doc(option), "options": list(option.valid_keys), } diff --git a/WebHostLib/static/assets/player-settings.js b/WebHostLib/static/assets/player-settings.js index 21c6414d..b77d4e87 100644 --- a/WebHostLib/static/assets/player-settings.js +++ b/WebHostLib/static/assets/player-settings.js @@ -102,9 +102,15 @@ const buildOptionsTable = (settings, romOpts = false) => { // td Left const tdl = document.createElement('td'); const label = document.createElement('label'); + label.textContent = `${settings[setting].displayName}: `; label.setAttribute('for', setting); - label.setAttribute('data-tooltip', settings[setting].description); - label.innerText = `${settings[setting].displayName}:`; + + const questionSpan = document.createElement('span'); + questionSpan.classList.add('interactive'); + questionSpan.setAttribute('data-tooltip', settings[setting].description); + questionSpan.innerText = '(?)'; + + label.appendChild(questionSpan); tdl.appendChild(label); tr.appendChild(tdl); diff --git a/WebHostLib/static/styles/generate.css b/WebHostLib/static/styles/generate.css index 066fb8a7..478d444d 100644 --- a/WebHostLib/static/styles/generate.css +++ b/WebHostLib/static/styles/generate.css @@ -56,7 +56,3 @@ #file-input{ display: none; } - -.interactive{ - color: #ffef00; -} diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css index c20bab6b..d8b10d1c 100644 --- a/WebHostLib/static/styles/globalStyles.css +++ b/WebHostLib/static/styles/globalStyles.css @@ -105,3 +105,7 @@ h5, h6{ margin-bottom: 20px; background-color: #ffff00; } + +.interactive{ + color: #ffef00; +} \ No newline at end of file diff --git a/WebHostLib/static/styles/tooltip.css b/WebHostLib/static/styles/tooltip.css index 0c5c0c69..7cd8463f 100644 --- a/WebHostLib/static/styles/tooltip.css +++ b/WebHostLib/static/styles/tooltip.css @@ -14,7 +14,6 @@ give it one of the following classes: tooltip-left, tooltip-right, tooltip-top, /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; - cursor: pointer; } /* Base styles for the entire tooltip */ @@ -55,14 +54,15 @@ give it one of the following classes: tooltip-left, tooltip-right, tooltip-top, /** Content styles */ .tooltip:after, [data-tooltip]:after { + width: 260px; z-index: 10000; padding: 8px; - width: 160px; border-radius: 4px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); + white-space: pre-wrap; font-size: 14px; line-height: 1.2; } diff --git a/WebHostLib/templates/generate.html b/WebHostLib/templates/generate.html index 916ed72b..aa16a47d 100644 --- a/WebHostLib/templates/generate.html +++ b/WebHostLib/templates/generate.html @@ -41,12 +41,11 @@ - - (?) - + @@ -85,12 +83,11 @@ - - (?) - + @@ -131,12 +128,11 @@ - - (?) - + @@ -162,23 +158,22 @@ - - (?) + Plando Options: + + (?) - +
- +
- +
- +