monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <chris@legendserver.info>
This commit is contained in:
Fabian Dill 2022-08-21 00:58:46 +02:00 committed by GitHub
parent 83bcb441bf
commit 9341332379
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
WebHostLib/options.py
View File

@ -49,6 +49,11 @@ def create():
return list(default_value) return list(default_value)
return 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 = { weighted_settings = {
"baseOptions": { "baseOptions": {
"description": "Generated by https://archipelago.gg/", "description": "Generated by https://archipelago.gg/",
@ -88,7 +93,7 @@ def create():
game_options[option_name] = this_option = { game_options[option_name] = this_option = {
"type": "select", "type": "select",
"displayName": option.display_name if hasattr(option, "display_name") else option_name, "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, "defaultValue": None,
"options": [] "options": []
} }
@ -114,7 +119,7 @@ def create():
game_options[option_name] = { game_options[option_name] = {
"type": "range", "type": "range",
"displayName": option.display_name if hasattr(option, "display_name") else option_name, "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( "defaultValue": option.default if hasattr(
option, "default") and option.default != "random" else option.range_start, option, "default") and option.default != "random" else option.range_start,
"min": option.range_start, "min": option.range_start,
@ -131,14 +136,14 @@ def create():
game_options[option_name] = { game_options[option_name] = {
"type": "items-list", "type": "items-list",
"displayName": option.display_name if hasattr(option, "display_name") else option_name, "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): elif getattr(option, "verify_location_name", False):
game_options[option_name] = { game_options[option_name] = {
"type": "locations-list", "type": "locations-list",
"displayName": option.display_name if hasattr(option, "display_name") else option_name, "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): elif issubclass(option, Options.OptionList) or issubclass(option, Options.OptionSet):
@ -146,7 +151,7 @@ def create():
game_options[option_name] = { game_options[option_name] = {
"type": "custom-list", "type": "custom-list",
"displayName": option.display_name if hasattr(option, "display_name") else option_name, "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), "options": list(option.valid_keys),
} }

10
WebHostLib/static/assets/player-settings.js
View File

@ -102,9 +102,15 @@ const buildOptionsTable = (settings, romOpts = false) => {
// td Left // td Left
const tdl = document.createElement('td'); const tdl = document.createElement('td');
const label = document.createElement('label'); const label = document.createElement('label');
label.textContent = `${settings[setting].displayName}: `;
label.setAttribute('for', setting); 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); tdl.appendChild(label);
tr.appendChild(tdl); tr.appendChild(tdl);

4
WebHostLib/static/styles/generate.css
View File

@ -56,7 +56,3 @@
#file-input{ #file-input{
display: none; display: none;
} }
.interactive{
color: #ffef00;
}

4
WebHostLib/static/styles/globalStyles.css
View File

@ -105,3 +105,7 @@ h5, h6{
margin-bottom: 20px; margin-bottom: 20px;
background-color: #ffff00; background-color: #ffff00;
} }
.interactive{
color: #ffef00;
}

4
WebHostLib/static/styles/tooltip.css
View File

@ -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 */ /* Base styles for the element that has a tooltip */
[data-tooltip], .tooltip { [data-tooltip], .tooltip {
position: relative; position: relative;
cursor: pointer;
} }
/* Base styles for the entire tooltip */ /* 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 */ /** Content styles */
.tooltip:after, [data-tooltip]:after { .tooltip:after, [data-tooltip]:after {
width: 260px;
z-index: 10000; z-index: 10000;
padding: 8px; padding: 8px;
width: 160px;
border-radius: 4px; border-radius: 4px;
background-color: #000; background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9); background-color: hsla(0, 0%, 20%, 0.9);
color: #fff; color: #fff;
content: attr(data-tooltip); content: attr(data-tooltip);
white-space: pre-wrap;
font-size: 14px; font-size: 14px;
line-height: 1.2; line-height: 1.2;
} }

79
WebHostLib/templates/generate.html
View File

@ -41,12 +41,11 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<label for="forfeit_mode">Forfeit Permission:</label> <label for="forfeit_mode">Forfeit Permission:
<span <span class="interactive" data-tooltip="A forfeit releases all remaining items from the locations in your world.">
class="interactive" (?)
data-tooltip="A forfeit releases all remaining items from the locations </span>
in your world.">(?) </label>
</span>
</td> </td>
<td> <td>
<select name="forfeit_mode" id="forfeit_mode"> <select name="forfeit_mode" id="forfeit_mode">
@ -63,12 +62,11 @@
<tr> <tr>
<td> <td>
<label for="collect_mode">Collect Permission:</label> <label for="collect_mode">Collect Permission:
<span <span class="interactive" data-tooltip="A collect releases all of your remaining items to you from across the multiworld.">
class="interactive" (?)
data-tooltip="A collect releases all of your remaining items to you </span>
from across the multiworld.">(?) </label>
</span>
</td> </td>
<td> <td>
<select name="collect_mode" id="collect_mode"> <select name="collect_mode" id="collect_mode">
@ -85,12 +83,11 @@
<tr> <tr>
<td> <td>
<label for="remaining_mode">Remaining Permission:</label> <label for="remaining_mode">Remaining Permission:
<span <span class="interactive" data-tooltip="Remaining lists all items still in your world by name only.">
class="interactive" (?)
data-tooltip="Remaining lists all items still in your world by name only." </span>
>(?) </label>
</span>
</td> </td>
<td> <td>
<select name="remaining_mode" id="remaining_mode"> <select name="remaining_mode" id="remaining_mode">
@ -106,11 +103,11 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="item_cheat">Item Cheat:</label> <label for="item_cheat">Item Cheat:
<span <span class="interactive" data-tooltip="Allows players to use the !getitem command.">
class="interactive" (?)
data-tooltip="Allows players to use the !getitem command.">(?) </span>
</span> </label>
</td> </td>
<td> <td>
<select name="item_cheat" id="item_cheat"> <select name="item_cheat" id="item_cheat">
@ -131,12 +128,11 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<label for="hint_cost"> Hint Cost:</label> <label for="hint_cost"> Hint Cost:
<span <span class="interactive" data-tooltip="After gathering this many checks, players can !hint <itemname> to get the location of that hint item.">
class="interactive" (?)
data-tooltip="After gathering this many checks, players can !hint <itemname> </span>
to get the location of that hint item.">(?) </label>
</span>
</td> </td>
<td> <td>
<select name="hint_cost" id="hint_cost"> <select name="hint_cost" id="hint_cost">
@ -150,11 +146,11 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="server_password">Server Password:</label> <label for="server_password">Server Password:
<span <span class="interactive" data-tooltip="Allows for issuing of server console commands from any text client or in-game client using the !admin command.">
class="interactive" (?)
data-tooltip="Allows for issuing of server console commands from any text client or in-game client using the !admin command.">(?) </span>
</span> </label>
</td> </td>
<td> <td>
<input id="server_password" name="server_password"> <input id="server_password" name="server_password">
@ -162,23 +158,22 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="plando_options">Plando Options:</label> Plando Options:
<span <span class="interactive" data-tooltip="Allows players to plan some of the randomization. See the 'Archipelago Plando Guide' in 'Setup Guides' for more information.">
class="interactive" (?)
data-tooltip="Allows players to plan some of the randomization. See the 'Archipelago Plando Guide' in 'Setup Guides' for more information.">(?)
</span> </span>
</td> </td>
<td> <td>
<input type="checkbox" name="plando_bosses" value="bosses" checked> <input type="checkbox" id="plando_bosses" name="plando_bosses" value="bosses" checked>
<label for="plando_bosses">Bosses</label><br> <label for="plando_bosses">Bosses</label><br>
<input type="checkbox" name="plando_items" value="items" checked> <input type="checkbox" id="plando_items" name="plando_items" value="items" checked>
<label for="plando_items">Items</label><br> <label for="plando_items">Items</label><br>
<input type="checkbox" name="plando_connections" value="connections" checked> <input type="checkbox" id="plando_connections" name="plando_connections" value="connections" checked>
<label for="plando_connections">Connections</label><br> <label for="plando_connections">Connections</label><br>
<input type="checkbox" name="plando_texts" value="texts" checked> <input type="checkbox" id="plando_texts" name="plando_texts" value="texts" checked>
<label for="plando_texts">Text</label> <label for="plando_texts">Text</label>
</td> </td>
</tr> </tr>