feat(ui): add tooltips for dash pattern, border fill fade, and name/e…

…mblem min/max size
MichaelMakesGames · May 14, 2024 · 59647b8 · 59647b8
1 parent 51556b8
commit 59647b8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/renderer/src/intl/en-US.ts b/src/renderer/src/intl/en-US.ts
@@ -121,7 +121,9 @@ export default {
 				smoothed: 'Smoothed',
 				glow: 'Glow',
 				dashed: 'Dashed',
-				dash_pattern: 'Dash Pattern',
+				dash_pattern: 'Pattern',
+				dash_pattern_tooltip:
+					'A space-separated list determining the length of dashes and gaps. For example, "3 1" is a 3-length dash followed by a 1-length gap. You can use longer lists for complex patterns.',
 			},
 		},
 	},
@@ -250,6 +252,11 @@ export default {
 		borderColor: 'Country Border Color',
 		borderFillColor: 'Country Fill Color',
 		borderFillFade: 'Country Fill Fade',
+		borderFillFade_tooltip: `<ul>
+			<li>Adds a fade-out effect at near the border.</li>
+			<li>Starts at 100% opacity at the border.</li>
+			<li>Works best if Country Fill Color has low opacity.</li>
+		</ul>`,
 		sectorBorderStroke: 'Sector Borders',
 		sectorBorderColor: 'Sector Border Color',
 		unionBorderStroke: 'Union Borders',
@@ -265,12 +272,18 @@ export default {
 		countryNames: 'Names',
 		countryNamesType: 'Name Type',
 		countryNamesMinSize: 'Name Min Size',
+		countryNamesMinSize_tooltip: 'If this size does not fit, the name is not drawn.',
 		countryNamesMaxSize: 'Name Max Size',
+		countryNamesMaxSize_tooltip:
+			'The name will not be drawn bigger than this, even if there is room.',
 		countryNamesSecondaryRelativeSize: 'Secondary Name Relative Size',
 		countryNamesFont: 'Font',
 		countryEmblems: 'Emblems',
 		countryEmblemsMinSize: 'Emblem Min Size',
+		countryEmblemsMinSize_tooltip: 'If this size does not fit, the emblem is not drawn.',
 		countryEmblemsMaxSize: 'Emblem Max Size',
+		countryEmblemsMaxSize_tooltip:
+			'The emblem will not be drawn bigger than this, even if there is room.',
 		labelsAvoidHoles: 'Avoid Holes in Border',
 		systemNames: 'System Names',
 		systemNamesFont: 'Font',

diff --git a/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte b/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+	import { Accordion, AccordionItem, popup } from '@skeletonlabs/skeleton';
 	import { fade } from 'svelte/transition';
 	import { t } from '../../intl';
+	import HeroiconInfoMini from '../icons/HeroiconInfoMini.svelte';
 	import type { SettingConfigStroke, StrokeSetting } from '../settings';
 
 	export let value: StrokeSetting;
@@ -96,6 +97,24 @@
 								<label class="text-surface-300" for="{config.id}-dashArray" transition:fade>
 									{$t('control.stroke.more_styles.dash_pattern')}
 								</label>
+								<button
+									type="button"
+									class="text-secondary-500-400-token ms-1 [&>*]:pointer-events-none"
+									use:popup={{
+										event: 'hover',
+										target: `${config.id}-dash-pattern-tooltip`,
+										placement: 'top',
+									}}
+								>
+									<HeroiconInfoMini />
+								</button>
+								<div
+									class="card variant-filled-secondary z-10 max-w-96 p-2 text-sm"
+									data-popup="{config.id}-dash-pattern-tooltip"
+								>
+									{$t('control.stroke.more_styles.dash_pattern_tooltip')}
+									<div class="variant-filled-secondary arrow" />
+								</div>
 								<input
 									id="{config.id}-dashArray"
 									type="text"

diff --git a/src/renderer/src/lib/settings/mapSettingsConfig.ts b/src/renderer/src/lib/settings/mapSettingsConfig.ts
@@ -35,6 +35,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				min: 0,
 				max: 1,
 				step: 0.05,
+				tooltip: 'setting.borderFillFade_tooltip',
 			},
 			{
 				id: 'sectorBorderStroke',
@@ -163,6 +164,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 						name: 'option.country_names_type.player_then_country',
 					},
 				],
+				hideIf: (settings) => !settings.countryNames,
 			},
 			{
 				id: 'countryNamesMinSize',
@@ -172,6 +174,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				step: 1,
 				optional: true,
 				hideIf: (settings) => !settings.countryNames,
+				tooltip: 'setting.countryNamesMinSize_tooltip',
 			},
 			{
 				id: 'countryNamesMaxSize',
@@ -181,6 +184,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				step: 1,
 				optional: true,
 				hideIf: (settings) => !settings.countryNames,
+				tooltip: 'setting.countryNamesMaxSize_tooltip',
 			},
 			{
 				id: 'countryNamesSecondaryRelativeSize',
@@ -212,6 +216,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				step: 1,
 				optional: true,
 				hideIf: (settings) => !settings.countryEmblems,
+				tooltip: 'setting.countryEmblemsMinSize_tooltip',
 			},
 			{
 				id: 'countryEmblemsMaxSize',
@@ -221,6 +226,7 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				step: 1,
 				optional: true,
 				hideIf: (settings) => !settings.countryEmblems,
+				tooltip: 'setting.countryEmblemsMaxSize_tooltip',
 			},
 			{
 				id: 'labelsAvoidHoles',