impr: add share buttons to desktop and mobile test config

Author: Miodec

frontend/src/html/pages/test.html

@@ -92,7 +92,11 @@
         <button class="textButton">change</button>
       </div>
     </div>
+    <button class="shareButton textButton">
+      <i class="fas fa-fw fa-share"></i>
+    </button>
   </div>
+
   <div id="mobileTestConfigButton">
     <button>
       <i class="fas fa-fw fa-cog"></i>

frontend/src/html/popups.html

@@ -296,6 +296,9 @@
     <div class="group customGroup hidden">
       <button class="customChange">change</button>
     </div>
+    <div class="group">
+      <button class="shareButton">share</button>
+    </div>
   </div>
 </dialog>
 

frontend/src/styles/test.scss

@@ -1144,6 +1144,10 @@
   transition: opacity 0.125s;
   justify-content: space-around;
   margin-bottom: 1rem;
+  width: max-content;
+  justify-self: center;
+  position: relative;
+
   .puncAndNum {
     // transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
     // overflow: hidden;
@@ -1154,6 +1158,7 @@
     // padding: 0 0.5rem;
     background: var(--sub-alt-color);
     border-radius: var(--roundness);
+    z-index: 2;
     // width: max-content;
   }
   .spacer {
@@ -1217,6 +1222,20 @@
   .customText {
     display: grid;
   }
+  .shareButton {
+    position: absolute;
+    right: 0;
+    padding: var(--verticalPadding) var(--horizontalPadding);
+    z-index: 1;
+    transition: opacity 0.25s, right 0.25s;
+    opacity: 0;
+  }
+  &:hover {
+    .shareButton {
+      opacity: 1;
+      right: -3.25em;
+    }
+  }
 }
 
 .pageTest {

frontend/src/ts/event-handlers/test.ts

@@ -14,6 +14,7 @@ import * as CustomTextModal from "../modals/custom-text";
 import * as PractiseWordsModal from "../modals/practise-words";
 import { navigate } from "../controllers/route-controller";
 import { getMode2 } from "../utils/misc";
+import * as ShareTestSettingsPopup from "../modals/share-test-settings";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
@@ -41,6 +42,10 @@ $(".pageTest").on("click", "#testConfig .time .textButton", (e) => {
   }
 });
 
+$(".pageTest").on("click", "#testConfig .shareButton", (e) => {
+  ShareTestSettingsPopup.show();
+});
+
 $(".pageTest").on("click", ".tags .editTagsButton", () => {
   if ((DB.getSnapshot()?.tags?.length ?? 0) > 0) {
     const resultid = $(".pageTest .tags .editTagsButton").attr(

frontend/src/ts/modals/mobile-test-config.ts

@@ -9,6 +9,7 @@ import AnimatedModal from "../utils/animated-modal";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { areUnsortedArraysEqual } from "../utils/arrays";
+import * as ShareTestSettingsPopup from "./share-test-settings";
 
 function update(): void {
   const el = $("#mobileTestConfigModal");
@@ -178,6 +179,12 @@ async function setup(modalEl: HTMLElement): Promise<void> {
     TestLogic.restart();
   });
 
+  modalEl.querySelector(".shareButton")?.addEventListener("click", () => {
+    ShareTestSettingsPopup.show({
+      modalChain: modal,
+    });
+  });
+
   const buttons = modalEl.querySelectorAll("button");
   for (const button of buttons) {
     button.addEventListener("click", () => {