mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-09-07 23:26:59 +08:00
feat(settings): add deep links to specific sections (@fehmer) (#6661)
Allow to deep-link to a specific config setting. Users in discord often ask how to enable a specific setting. Instead of guiding them manually to the correct settings we can use a deep-link: https://github.com/user-attachments/assets/90b99660-13ae-49bf-8ff2-c5e6da290070 Added a link next to the group on mouse over to copy the deep link to the clipboard:  --------- Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
Christian Fehmer
GitHub
parent
ee6a9293c4
commit
e50d5e9cdd
8 changed files with 329 additions and 13 deletions
|
|
@ -71,10 +71,13 @@
|
|||
<span>behavior</span>
|
||||
</button>
|
||||
<div class="settingsGroup behavior">
|
||||
<div class="section tags needsAccount">
|
||||
<div class="section tags needsAccount" data-section-id="tags">
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-tag"></i>
|
||||
<span>tags</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
With tags, you can compare how fast you're typing in different
|
||||
|
|
@ -86,10 +89,13 @@
|
|||
<button class="addTagButton fullWidth">add tag</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section presets needsAccount">
|
||||
<div class="section presets needsAccount" data-section-id="presets">
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
<span>presets</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Create settings presets that can be applied with one click. Remember to
|
||||
|
|
@ -104,6 +110,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>test difficulty</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Normal is the classic typing test experience. Expert fails the test if
|
||||
|
|
@ -120,6 +129,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-redo-alt"></i>
|
||||
<span>quick restart</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Press
|
||||
|
|
@ -146,6 +158,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<span>repeat quotes</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
This setting changes the restarting behavior when typing in quote mode.
|
||||
|
|
@ -166,6 +181,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-eye-slash"></i>
|
||||
<span>blind mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
No errors or incorrect words are highlighted. Helps you to focus on raw
|
||||
|
|
@ -183,6 +201,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-align-left"></i>
|
||||
<span>always show words history</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
This option will automatically show the words history at the end of the
|
||||
|
|
@ -197,6 +218,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>single list command line</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, it will show the command line with all commands in a
|
||||
|
|
@ -214,6 +238,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-bomb"></i>
|
||||
<span>min speed</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Automatically fails a test if your speed falls below a threshold.
|
||||
|
|
@ -243,6 +270,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-bomb"></i>
|
||||
<span>min accuracy</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Automatically fails a test if your accuracy falls below a threshold.
|
||||
|
|
@ -272,6 +302,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-bomb"></i>
|
||||
<span>min burst</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Automatically fails a test if your raw for a single word falls below
|
||||
|
|
@ -304,6 +337,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-language"></i>
|
||||
<span>british english</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, the website will use the British spelling instead of
|
||||
|
|
@ -319,6 +355,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-language"></i>
|
||||
<span>language</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change in which language you want to type.</div>
|
||||
<div class="inputs">
|
||||
|
|
@ -329,6 +368,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
<span>funbox</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
These are special modes that change the website in some special way (by
|
||||
|
|
@ -342,6 +384,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tint"></i>
|
||||
<span>custom layoutfluid</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Select which layouts you want the layoutfluid funbox to cycle through.
|
||||
|
|
@ -355,6 +400,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-language"></i>
|
||||
<span>polyglot languages</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Select which languages you want the polyglot funbox to use.
|
||||
|
|
@ -374,6 +422,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-feather-alt"></i>
|
||||
<span>freedom mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Allows you to delete any word, even if it was typed correctly.
|
||||
|
|
@ -387,6 +438,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-minus"></i>
|
||||
<span>strict space</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Pressing space at the beginning of a word will insert a space character
|
||||
|
|
@ -401,6 +455,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-exchange-alt"></i>
|
||||
<span>opposite shift mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
This mode will force you to use opposite
|
||||
|
|
@ -427,6 +484,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-hand-paper"></i>
|
||||
<span>stop on error</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Letter mode will stop input when pressing any incorrect letters. Word
|
||||
|
|
@ -443,6 +503,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-backspace"></i>
|
||||
<span>confidence mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, you will not be able to go back to previous words to fix
|
||||
|
|
@ -460,6 +523,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-step-forward"></i>
|
||||
<span>quick end</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
This only applies to the words mode - when enabled, the test will end as
|
||||
|
|
@ -476,6 +542,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
<span>indicate typos</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Shows typos that you've made. Below shows what you typed below the
|
||||
|
|
@ -491,6 +560,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-eye-slash"></i>
|
||||
<span>hide extra letters</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Hides extra letters. This will completely avoid words jumping lines (due
|
||||
|
|
@ -506,6 +578,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-couch"></i>
|
||||
<span>lazy mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Replaces accents / diacritics / special characters with their normal
|
||||
|
|
@ -520,6 +595,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>layout emulator</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
With this setting you can emulate other layouts. This setting is best
|
||||
|
|
@ -533,6 +611,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-code"></i>
|
||||
<span>code unindent on backspace</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Automatically go back to the previous line when deleting line leading
|
||||
|
|
@ -564,6 +645,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-volume-down"></i>
|
||||
<span>sound volume</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change the volume of the sound effects.</div>
|
||||
<div class="inputs">
|
||||
|
|
@ -577,6 +661,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
<span>play sound on click</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Plays a short sound when you press a key.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -602,6 +689,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-volume-mute"></i>
|
||||
<span>play sound on error</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Plays a short sound if you press an incorrect key or press space too
|
||||
|
|
@ -627,6 +717,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-i-cursor"></i>
|
||||
<span>smooth caret</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
The caret will move smoothly between letters and words.
|
||||
|
|
@ -642,6 +735,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-i-cursor"></i>
|
||||
<span>caret style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change the style of the caret during the test.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -656,6 +752,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-i-cursor"></i>
|
||||
<span>pace caret</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Displays a second caret that moves at constant speed. The 'average'
|
||||
|
|
@ -693,6 +792,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-i-cursor"></i>
|
||||
<span>repeated pace</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When repeating a test, a pace caret will automatically be enabled for
|
||||
|
|
@ -708,6 +810,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-i-cursor"></i>
|
||||
<span>pace caret style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the style of the pace caret during the test.
|
||||
|
|
@ -736,6 +841,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
<span>live progress style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the style of the timer/word count during a test.
|
||||
|
|
@ -751,6 +859,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span>live speed style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the style of the live speed displayed during the test.
|
||||
|
|
@ -765,6 +876,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span>live accuracy style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the style of the live accuracy displayed during the test.
|
||||
|
|
@ -779,6 +893,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span>live burst style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the style of the live burst speed displayed during the test.
|
||||
|
|
@ -793,6 +910,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
<span>live stats color</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the color of the progress, live speed, accuracy and burst text.
|
||||
|
|
@ -808,6 +928,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
<span>live stats opacity</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the opacity of the progress, live speed, burst and accuracy text.
|
||||
|
|
@ -823,6 +946,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-highlighter"></i>
|
||||
<span>highlight mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change what is highlighted during the test.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -838,6 +964,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tape"></i>
|
||||
<span>tape mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Only shows one line which scrolls horizontally. Setting this to 'word'
|
||||
|
|
@ -855,6 +984,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tape"></i>
|
||||
<span>tape margin</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When in tape mode, set the carets position from the left edge of the
|
||||
|
|
@ -879,6 +1011,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-align-left"></i>
|
||||
<span>smooth line scroll</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, the line transition will be animated.
|
||||
|
|
@ -892,6 +1027,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-align-left"></i>
|
||||
<span>show all lines</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, the website will show all lines for word, custom and quote
|
||||
|
|
@ -908,6 +1046,9 @@
|
|||
<div class="groupTitle">
|
||||
<div class="textIcon">00</div>
|
||||
<span>always show decimal places</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Always shows decimal places for values on the result page, without the
|
||||
|
|
@ -922,6 +1063,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span>typing speed unit</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Display typing speed in the specified unit.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -935,6 +1079,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<span>start graphs at zero</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Force graph axis to always start at zero, no matter what the data is.
|
||||
|
|
@ -949,6 +1096,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-text-width"></i>
|
||||
<span>max line width</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Change the maximum width of the typing test, measured in characters.
|
||||
|
|
@ -972,6 +1122,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-font"></i>
|
||||
<span>font size</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change the font size of the test words.</div>
|
||||
<div class="inputs">
|
||||
|
|
@ -992,6 +1145,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-font"></i>
|
||||
<span>font family</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="text">Change the font family for the site</div> -->
|
||||
<div class="buttons"></div>
|
||||
|
|
@ -1000,6 +1156,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Displays your current layout while taking a test. React shows what you
|
||||
|
|
@ -1016,6 +1175,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap layout</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Controls which layout is displayed on the keymap.</div>
|
||||
<div class="inputs">
|
||||
|
|
@ -1026,6 +1188,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="text">Displays the keymap in a different style.</div> -->
|
||||
<div class="buttons">
|
||||
|
|
@ -1042,6 +1207,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap legend style</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button data-config-value="lowercase">lowercase</button>
|
||||
|
|
@ -1054,6 +1222,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap show top row</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button data-config-value="always">always</button>
|
||||
|
|
@ -1065,6 +1236,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
<span>keymap size</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Change the size of the keymap.</div>
|
||||
<div class="inputs">
|
||||
|
|
@ -1095,6 +1269,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-adjust"></i>
|
||||
<span>flip test colors</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
By default, typed text is brighter than the future text. When enabled,
|
||||
|
|
@ -1110,6 +1287,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-fill-drip"></i>
|
||||
<span>colorful mode</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
When enabled, the test words will use the main color, instead of the
|
||||
|
|
@ -1124,6 +1304,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-image"></i>
|
||||
<span>custom background</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Set an image url to be a custom background image. Cover fits the image
|
||||
|
|
@ -1159,6 +1342,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
<span>custom background filter</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Apply various effects to the custom background.</div>
|
||||
<div class="groups">
|
||||
|
|
@ -1188,6 +1374,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-palette"></i>
|
||||
<span>auto switch theme</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Enabling this will automatically switch the theme between light and dark
|
||||
|
|
@ -1208,6 +1397,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-random"></i>
|
||||
<span>randomize theme</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
After completing a test, the theme will be set to a random one. The
|
||||
|
|
@ -1225,10 +1417,13 @@
|
|||
<button data-config-value="custom">custom</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section themes fullWidth">
|
||||
<div class="section themes fullWidth" data-section-id="theme">
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-palette"></i>
|
||||
<span>theme</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<button data-tab="preset">preset</button>
|
||||
|
|
@ -1474,6 +1669,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-question"></i>
|
||||
<span>key tips</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Shows the keybind tips at the bottom of the page.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1485,6 +1683,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
<span>out of focus warning</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Shows an out of focus reminder after 1 second of being 'out of focus'
|
||||
|
|
@ -1499,6 +1700,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<span>caps lock warning</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Displays a warning when caps lock is on.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1510,6 +1714,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
<span>average</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Displays your average speed and/or accuracy over the last 10 tests.
|
||||
|
|
@ -1533,10 +1740,16 @@
|
|||
danger zone
|
||||
</button>
|
||||
<div class="settingsGroup dangerZone">
|
||||
<div class="section importexportSettings">
|
||||
<div
|
||||
class="section importexportSettings"
|
||||
data-section-id="importexportSettings"
|
||||
>
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
<span>import/export settings</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">Import or export the settings as JSON.</div>
|
||||
<div class="buttons">
|
||||
|
|
@ -1548,6 +1761,9 @@
|
|||
<div class="groupTitle">
|
||||
<i class="fas fa-ad"></i>
|
||||
<span>ads</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
You can disable or enable ads at any time. "Result" will show one ad on
|
||||
|
|
@ -1564,10 +1780,16 @@
|
|||
<button data-config-value="sellout">sellout</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section updateCookiePreferences">
|
||||
<div
|
||||
class="section updateCookiePreferences"
|
||||
data-section-id="updateCookiePreferences"
|
||||
>
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-cookie-bite"></i>
|
||||
<span>update cookie preferences</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
If you changed your mind about which cookies you consent to, you can
|
||||
|
|
@ -1577,10 +1799,13 @@
|
|||
<button>open</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section resetSettings">
|
||||
<div class="section resetSettings" data-section-id="resetSettings">
|
||||
<div class="groupTitle">
|
||||
<i class="fas fa-redo-alt"></i>
|
||||
<span>reset settings</span>
|
||||
<button class="text" tabindex="-1">
|
||||
<i class="fas fa-fw fa-link"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text">
|
||||
Resets settings to the default (but doesn't touch your tags).
|
||||
|
|
|
|||
|
|
@ -111,3 +111,12 @@
|
|||
bottom: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flashBorder {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0.2em var(--main-color);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0.2em transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -489,6 +489,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
margin: -1em;
|
||||
padding: 1em;
|
||||
animation: flashBorder 4s ease-in;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.groupTitle button.text {
|
||||
padding: 0;
|
||||
margin-left: 0.5em;
|
||||
align-self: center;
|
||||
opacity: 0;
|
||||
.fas {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:hover .groupTitle button.text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default class SettingsGroup<T extends ConfigValue> {
|
|||
this.elements = [el];
|
||||
} else if (this.mode === "button") {
|
||||
const els = document.querySelectorAll(`
|
||||
.pageSettings .section[data-config-name=${this.configName}] button`);
|
||||
.pageSettings .section[data-config-name=${this.configName}] .buttons button, .pageSettings .section[data-config-name=${this.configName}] .inputs button`);
|
||||
|
||||
if (els.length === 0) {
|
||||
throw new Error(`Failed to find a button element for ${configName}`);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ settingsPage
|
|||
});
|
||||
|
||||
settingsPage
|
||||
?.querySelector(".section.updateCookiePreferences button")
|
||||
?.querySelector(".section.updateCookiePreferences .buttons button")
|
||||
?.addEventListener("click", () => {
|
||||
CookiesModal.show(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import * as Notifications from "../elements/notifications";
|
|||
import * as ImportExportSettingsModal from "../modals/import-export-settings";
|
||||
import * as ConfigEvent from "../observables/config-event";
|
||||
import * as ActivePage from "../states/active-page";
|
||||
import Page from "./page";
|
||||
import { PageWithUrlParams } from "./page";
|
||||
import { isAuthenticated } from "../firebase";
|
||||
import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
|
||||
import SlimSelect from "slim-select";
|
||||
|
|
@ -25,6 +25,7 @@ import {
|
|||
ThemeName,
|
||||
CustomLayoutFluid,
|
||||
FunboxName,
|
||||
ConfigKeySchema,
|
||||
} from "@monkeytype/contracts/schemas/configs";
|
||||
import { getAllFunboxes, checkCompatibility } from "@monkeytype/funbox";
|
||||
import { getActiveFunboxNames } from "../test/funbox/list";
|
||||
|
|
@ -37,6 +38,7 @@ import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
|
|||
import { LayoutName } from "@monkeytype/contracts/schemas/layouts";
|
||||
import { LanguageGroupNames, LanguageGroups } from "../constants/languages";
|
||||
import { Language } from "@monkeytype/contracts/schemas/languages";
|
||||
import { z } from "zod";
|
||||
|
||||
let settingsInitialized = false;
|
||||
|
||||
|
|
@ -46,6 +48,24 @@ let customPolyglotSelect: SlimSelect | undefined;
|
|||
|
||||
export const groups: SettingsGroups<ConfigValue> = {};
|
||||
|
||||
const HighlightSchema = ConfigKeySchema.or(
|
||||
z.enum([
|
||||
"resetSettings",
|
||||
"updateCookiePreferences",
|
||||
"importexportSettings",
|
||||
"theme",
|
||||
"presets",
|
||||
"tags",
|
||||
])
|
||||
);
|
||||
type Highlight = z.infer<typeof HighlightSchema>;
|
||||
|
||||
const StateSchema = z
|
||||
.object({
|
||||
highlight: HighlightSchema,
|
||||
})
|
||||
.partial();
|
||||
|
||||
async function initGroups(): Promise<void> {
|
||||
groups["smoothCaret"] = new SettingsGroup(
|
||||
"smoothCaret",
|
||||
|
|
@ -1001,7 +1021,7 @@ $(".pageSettings .section[data-config-name='minBurst']").on(
|
|||
);
|
||||
|
||||
//funbox
|
||||
$(".pageSettings .section[data-config-name='funbox']").on(
|
||||
$(".pageSettings .section[data-config-name='funbox'] .buttons").on(
|
||||
"click",
|
||||
"button",
|
||||
(e) => {
|
||||
|
|
@ -1333,6 +1353,40 @@ function getThemeDropdownData(
|
|||
}));
|
||||
}
|
||||
|
||||
function handleHighlightSection(highlight: Highlight): void {
|
||||
const element = document.querySelector(
|
||||
`[data-config-name="${highlight}"] .groupTitle,[data-section-id="${highlight}"] .groupTitle`
|
||||
);
|
||||
|
||||
if (element !== null) {
|
||||
setTimeout(() => {
|
||||
element.scrollIntoView({ block: "center", behavior: "auto" });
|
||||
element.parentElement?.classList.remove("highlight");
|
||||
element.parentElement?.classList.add("highlight");
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
$(".pageSettings .section .groupTitle button").on("click", (e) => {
|
||||
const section = e.target.parentElement?.parentElement;
|
||||
const configName = (section?.dataset?.["configName"] ??
|
||||
section?.dataset?.["sectionId"]) as Highlight | undefined;
|
||||
if (configName === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
page.setUrlParams({ highlight: configName });
|
||||
|
||||
navigator.clipboard
|
||||
.writeText(window.location.toString())
|
||||
.then(() => {
|
||||
Notifications.add("Link copied to clipboard", 1);
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
Notifications.add("Failed to copy to clipboard: " + e, -1);
|
||||
});
|
||||
});
|
||||
|
||||
ConfigEvent.subscribe((eventKey, eventValue) => {
|
||||
if (eventKey === "fullConfigChange") setEventDisabled(true);
|
||||
if (eventKey === "fullConfigChangeFinished") setEventDisabled(false);
|
||||
|
|
@ -1352,18 +1406,22 @@ ConfigEvent.subscribe((eventKey, eventValue) => {
|
|||
}
|
||||
});
|
||||
|
||||
export const page = new Page({
|
||||
export const page = new PageWithUrlParams({
|
||||
id: "settings",
|
||||
element: $(".page.pageSettings"),
|
||||
path: "/settings",
|
||||
urlParamsSchema: StateSchema,
|
||||
afterHide: async (): Promise<void> => {
|
||||
Skeleton.remove("pageSettings");
|
||||
},
|
||||
beforeShow: async (): Promise<void> => {
|
||||
beforeShow: async (options): Promise<void> => {
|
||||
Skeleton.append("pageSettings", "main");
|
||||
await UpdateConfig.loadPromise;
|
||||
await fillSettingsPage();
|
||||
await update();
|
||||
if (options.urlParams?.highlight !== undefined) {
|
||||
handleHighlightSection(options.urlParams.highlight);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@
|
|||
"testing.automaticallyOpenTestResults": "neverOpen",
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -438,7 +438,8 @@ export const ConfigSchema = z
|
|||
.strict();
|
||||
|
||||
export type Config = z.infer<typeof ConfigSchema>;
|
||||
export type ConfigKey = keyof Config;
|
||||
export const ConfigKeySchema = ConfigSchema.keyof();
|
||||
export type ConfigKey = z.infer<typeof ConfigKeySchema>;
|
||||
export type ConfigValue = Config[keyof Config];
|
||||
|
||||
export const PartialConfigSchema = ConfigSchema.partial();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue