Skip to content

Commit cc09c94

Browse files
MiodecMiodec
authored
refactor: solid custom text and associated modals (@Miodec) (#7695)
1 parent 252d92f commit cc09c94

31 files changed

Lines changed: 1712 additions & 2358 deletions

‎frontend/src/html/popups.html‎

Lines changed: 0 additions & 380 deletions
Original file line numberDiff line numberDiff line change
@@ -404,386 +404,6 @@
404404
<div class="button">ok</div>
405405
</div>
406406
</dialog>
407-
<dialog id="customTextModal" class="modalWrapper hidden">
408-
<div class="modal" action="">
409-
<div class="buttonsTop">
410-
<div class="button saveCustomText">
411-
<i class="fas fa-save"></i>
412-
save
413-
</div>
414-
<div class="button showSavedTexts">
415-
<i class="fas fa-folder"></i>
416-
saved texts
417-
</div>
418-
</div>
419-
<div class="buttonsTop2">
420-
<input id="fileInput" type="file" class="hidden" accept=".txt" />
421-
<label for="fileInput" class="button importText">
422-
<i class="fas fa-file-import"></i>
423-
open file
424-
</label>
425-
<div class="button wordfilter">
426-
<i class="fas fa-filter"></i>
427-
words filter
428-
</div>
429-
<div class="button customGenerator">
430-
<i class="fas fa-cogs"></i>
431-
custom generator
432-
</div>
433-
</div>
434-
<div class="savedTexts hidden" style="display: none">
435-
<div class="title">saved texts</div>
436-
<div class="buttons"></div>
437-
</div>
438-
<div class="textAreaWrapper" style="position: relative">
439-
<div class="longCustomTextWarning">
440-
<div>
441-
<p>
442-
A long custom text is currently loaded.
443-
<br />
444-
Editing the text will disable progress tracking.
445-
<br />
446-
<br />
447-
</p>
448-
<p class="small">Click anywhere to start editing the text.</p>
449-
</div>
450-
</div>
451-
<div class="challengeWarning">
452-
<div>
453-
<p>
454-
A challenge is currently loaded.
455-
<br />
456-
Editing the settings will clear the challenge.
457-
<br />
458-
<br />
459-
</p>
460-
<p class="small">Click anywhere to edit.</p>
461-
</div>
462-
</div>
463-
<textarea class="textarea"></textarea>
464-
</div>
465-
<div class="inputs">
466-
<div class="group" data-id="mode">
467-
<div class="title">
468-
<i class="fas fa-fw fa-cog"></i>
469-
Mode
470-
</div>
471-
<div class="sub">Change the way words are generated.</div>
472-
<div class="groupInputs">
473-
<div class="buttonGroup">
474-
<button value="simple">simple</button>
475-
<button value="repeat">repeat</button>
476-
<button value="shuffle">shuffle</button>
477-
<button value="random">random</button>
478-
</div>
479-
</div>
480-
</div>
481-
<div class="group" data-id="limit">
482-
<div class="title">
483-
<i class="fas fa-fw fa-step-forward"></i>
484-
Limit
485-
</div>
486-
<div class="sub">
487-
Control how many words to generate or for how long you want to type.
488-
</div>
489-
<div class="groupInputs limitInputs">
490-
<input
491-
class="words"
492-
type="number"
493-
value=""
494-
min="0"
495-
placeholder="words"
496-
/>
497-
<input
498-
class="sections hidden"
499-
type="number"
500-
value=""
501-
min="0"
502-
placeholder="sections"
503-
/>
504-
<div class="or">or</div>
505-
<input
506-
class="time"
507-
type="number"
508-
value=""
509-
min="0"
510-
placeholder="time"
511-
/>
512-
</div>
513-
</div>
514-
515-
<div class="group" data-id="delimiter">
516-
<div class="title">
517-
<i class="fas fa-fw fa-grip-lines-vertical"></i>
518-
Word delimiter
519-
</div>
520-
<div class="sub">
521-
Change how words are separated. Using the pipe delimiter allows you to
522-
randomize groups of words.
523-
</div>
524-
<div class="groupInputs">
525-
<div class="buttonGroup">
526-
<button value="true">pipe</button>
527-
<button value="false">space</button>
528-
</div>
529-
</div>
530-
</div>
531-
532-
<div class="group" data-id="zeroWidth">
533-
<div class="title">
534-
<i class="fas fa-fw fa-text-width"></i>
535-
Remove zero-width characters
536-
</div>
537-
<div class="sub">Fully remove zero-width characters.</div>
538-
<div class="groupInputs">
539-
<div class="buttonGroup">
540-
<button value="false">no</button>
541-
<button value="true">yes</button>
542-
</div>
543-
</div>
544-
</div>
545-
546-
<div class="group" data-id="fancy">
547-
<div class="title">
548-
<i class="fas fa-fw fa-pen-fancy"></i>
549-
Remove fancy typography
550-
</div>
551-
<div class="sub">
552-
Standardises typography symbols (for example “ and ” become ")
553-
</div>
554-
<div class="groupInputs">
555-
<div class="buttonGroup">
556-
<button value="false">no</button>
557-
<button value="true">yes</button>
558-
</div>
559-
</div>
560-
</div>
561-
562-
<div class="group" data-id="control">
563-
<div class="title">
564-
<i class="fas fa-fw fa-code"></i>
565-
Replace control characters
566-
</div>
567-
<div class="sub">
568-
Replace control characters (\n becomes a new line and \t becomes a
569-
tab)
570-
</div>
571-
<div class="groupInputs">
572-
<div class="buttonGroup">
573-
<button value="false">no</button>
574-
<button value="true">yes</button>
575-
</div>
576-
</div>
577-
</div>
578-
579-
<div class="group" data-id="newlines">
580-
<div class="title">
581-
<i class="fas fa-fw fa-level-down-alt fa-rotate-90"></i>
582-
Replace new lines with spaces
583-
</div>
584-
<div class="sub">
585-
Replace all new line characters with spaces. Can automatically add
586-
periods to the end of lines if you wish.
587-
</div>
588-
<div class="groupInputs">
589-
<div class="buttonGroup">
590-
<button value="off">off</button>
591-
<button value="space">space</button>
592-
<button value="periodSpace">period + space</button>
593-
</div>
594-
</div>
595-
</div>
596-
</div>
597-
<div class="button apply">ok</div>
598-
</div>
599-
</dialog>
600-
<dialog id="savedTextsModal" class="modalWrapper hidden">
601-
<div class="modal">
602-
<div class="title">Saved texts</div>
603-
<div class="list"></div>
604-
<div class="title">Saved long texts</div>
605-
<div class="listLong"></div>
606-
<div class="divider"></div>
607-
<div class="message">
608-
Heads up! These texts are only stored locally. If you switch devices or
609-
clear your local browser data they will be lost.
610-
</div>
611-
</div>
612-
</dialog>
613-
<dialog id="saveCustomTextModal" class="modalWrapper hidden">
614-
<form class="modal">
615-
<div class="title">Save custom text</div>
616-
<input class="textName" type="text" placeholder="name" />
617-
<div>
618-
<label class="checkboxWithSub">
619-
<input type="checkbox" class="isLongText" />
620-
<div>Long text (book mode)</div>
621-
<div class="sub">
622-
Disables editing this text but allows you to save progress by pressing
623-
shift + enter or bailing out. You can then load this text again to
624-
continue where you left off.
625-
</div>
626-
</label>
627-
</div>
628-
<button class="save">save</button>
629-
</form>
630-
</dialog>
631-
<dialog id="wordFilterModal" class="modalWrapper hidden">
632-
<div class="modal">
633-
<!-- hidden for now, dunno where to place it -->
634-
<!-- <div class="loadingIndicator">
635-
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
636-
</div> -->
637-
<div class="top">
638-
<div class="group">
639-
<div class="title">language</div>
640-
<select class="languageInput" title="language"></select>
641-
</div>
642-
<div class="tip">
643-
You can manually filter words by length, words or characters (separated
644-
by spaces) on the left side. On the right side you can generate filters
645-
based on a preset and selected layout.
646-
</div>
647-
</div>
648-
<div class="leftSide">
649-
<div class="group lengthgrid">
650-
<div class="title">min length</div>
651-
<div class="title">max length</div>
652-
653-
<input
654-
class="wordLength wordMinInput"
655-
autocomplete="off"
656-
type="number"
657-
title="min"
658-
/>
659-
<input
660-
class="wordLength wordMaxInput"
661-
autocomplete="off"
662-
type="number"
663-
title="max"
664-
/>
665-
</div>
666-
<div class="group">
667-
<div class="title">include</div>
668-
<input
669-
class="wordIncludeInput"
670-
id="wordIncludeInput"
671-
autocomplete="off"
672-
title="include"
673-
/>
674-
<label class="checkbox">
675-
<input id="exactMatchOnly" type="checkbox" />
676-
Exact match only
677-
</label>
678-
</div>
679-
<div class="group">
680-
<div class="title">exclude</div>
681-
<input
682-
class="wordExcludeInput"
683-
id="wordExcludeInput"
684-
autocomplete="off"
685-
title="exclude"
686-
/>
687-
</div>
688-
</div>
689-
<div class="divider"></div>
690-
691-
<div class="rightSide">
692-
<div class="group">
693-
<div class="title">presets</div>
694-
<select class="presetInput"></select>
695-
</div>
696-
<div class="group">
697-
<div class="title">layout</div>
698-
<select class="layoutInput"></select>
699-
</div>
700-
<!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
701-
<button class="generateButton">apply</button>
702-
</div>
703-
704-
<div class="bottom">
705-
<div class="tip">
706-
"Set" replaces the current custom word list with the filter result,
707-
"Add" appends the filter result to the current custom word list.
708-
</div>
709-
<button class="setButton">set</button>
710-
<button class="addButton">add</button>
711-
</div>
712-
</div>
713-
</dialog>
714-
<dialog id="customGeneratorModal" class="modalWrapper hidden">
715-
<div class="modal">
716-
<div class="main">
717-
<div class="group">
718-
<div class="title">presets</div>
719-
<select class="presetInput">
720-
<option value="alphas">a-z</option>
721-
<option value="numbers">0-9</option>
722-
<option value="special">symbols</option>
723-
<option value="bigrams">bigrams</option>
724-
<option value="trigrams">trigrams</option>
725-
</select>
726-
<button class="generateButton">apply</button>
727-
</div>
728-
<div class="separator"></div>
729-
<div class="tip">
730-
Enter characters or strings separated by spaces. Random combinations
731-
will be generated using these inputs.
732-
</div>
733-
<div class="group">
734-
<div class="title">character set</div>
735-
<textarea
736-
class="characterInput"
737-
id="characterInput"
738-
autocomplete="off"
739-
placeholder=""
740-
title="characters"
741-
></textarea>
742-
</div>
743-
<div class="group lengthgrid">
744-
<div class="title">min length</div>
745-
<div class="title">max length</div>
746-
747-
<input
748-
class="wordLength minLengthInput"
749-
autocomplete="off"
750-
type="number"
751-
value="2"
752-
min="1"
753-
title="min"
754-
/>
755-
<input
756-
class="wordLength maxLengthInput"
757-
autocomplete="off"
758-
type="number"
759-
value="5"
760-
min="1"
761-
title="max"
762-
/>
763-
</div>
764-
<div class="group">
765-
<div class="title">word count</div>
766-
<input
767-
class="wordCountInput"
768-
autocomplete="off"
769-
type="number"
770-
value="100"
771-
min="1"
772-
title="word count"
773-
/>
774-
</div>
775-
</div>
776-
777-
<div class="bottom">
778-
<div class="tip">
779-
"Set" replaces the current custom text with generated words, "Add"
780-
appends generated words to the current custom text.
781-
</div>
782-
<button class="setButton">set</button>
783-
<button class="addButton">add</button>
784-
</div>
785-
</div>
786-
</dialog>
787407
<dialog id="googleSignUpModal" class="modalWrapper hidden">
788408
<form class="modal">
789409
<div class="title">Account name</div>

‎frontend/src/styles/inputs.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,6 @@ label.checkboxWithSub {
102102
}
103103
}
104104

105-
#wordFilterModal #exactMatchOnly {
106-
width: 1.25em;
107-
}
108-
109105
input[type="checkbox"] {
110106
appearance: none;
111107
height: 1.25em;

0 commit comments

Comments
 (0)