fix(add_popup_input): Change add module part element input to text area

XPEHO · Feb 22, 2024 · 0270814 · 0270814
1 parent 0d2353a
commit 0270814
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 25 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,8 +1,8 @@
-favicon.ico,1708434809641,642f1aaa9a48d91d01009c5d59bf43b000ac928f2087032988c612cfc9a0ffcf
-index.html,1708434809829,b242388574b33005163c28e1faf5a1955fe4dc84fcd0bf56a36688cf1eaf8490
-assets/fireman-helmet-Ukc3N7ug.png,1708434809829,f8c2804ac98abb8be17dab1f4c198cf379a3122e19b82a898bf919a55c6c12b3
-assets/index-GCIAG80o.css,1708434809829,5f54addd7ef147e32fa6397e9bbda66f5214baaed528d2ecafad428d912ed3b2
-assets/google-logo-7SJOUJsJ.png,1708434809829,f56e9879d41f269f2bb757924c931fff5bd22ed1b6ec2563327125f872e34312
-assets/background-zxbUyEDC.png,1708434809829,21491117a988ab2a35192e617e1d1b3bc6e09907951cb82916512cfd170dbdd8
-assets/index-Y3Uxn2Xd.js,1708434809829,165e3e0eda130998976ea11de484a748995a175228d8bdcba17bed0b96d1c36e
-assets/logo-FNuJ5V5l.png,1708434809829,c7e4655162bd792eb336d1d9c9ef1dc162a5be24ea5651694f354d2732d5262d
+favicon.ico,1708616553748,642f1aaa9a48d91d01009c5d59bf43b000ac928f2087032988c612cfc9a0ffcf
+index.html,1708616553928,e865bf78a74377096c14b5e62dbff09d7b9845bf0708ac3d5cbcf0b5cd56742d
+assets/fireman-helmet-Ukc3N7ug.png,1708616553928,f8c2804ac98abb8be17dab1f4c198cf379a3122e19b82a898bf919a55c6c12b3
+assets/index-YYuIn3io.css,1708616553928,2c403f6fe376a7397d3b8ec074586c571b558adef4296c8a70bb9ecb9c323255
+assets/google-logo-7SJOUJsJ.png,1708616553928,f56e9879d41f269f2bb757924c931fff5bd22ed1b6ec2563327125f872e34312
+assets/background-zxbUyEDC.png,1708616553928,21491117a988ab2a35192e617e1d1b3bc6e09907951cb82916512cfd170dbdd8
+assets/index-AggciY1l.js,1708616553928,fa7d64ca16392176cd65d846b0c814f908a82dc7b7ce1971efc8f89eb11a94c4
+assets/logo-FNuJ5V5l.png,1708616553928,c7e4655162bd792eb336d1d9c9ef1dc162a5be24ea5651694f354d2732d5262d
diff --git a/src/components/AddPopup.vue b/src/components/AddPopup.vue
@@ -41,11 +41,13 @@ function show() {
   popupWrapper.style.display = "flex";
   let input;
   if (route.name == "Tips") {
-    input = document.querySelector(".popup-add textarea") as HTMLTextAreaElement;
+    input = document.querySelector(".popup-add #tipsToAdd") as HTMLTextAreaElement;
   } else if (route.name == "Accounts") {
     input = document.querySelector(".popup-add #mailToAdd") as HTMLInputElement;
   } else {
-    input = document.querySelector(".popup-add #titleToAdd") as HTMLInputElement;
+    input = document.querySelector(".popup-add #titleToAdd") as
+      | HTMLInputElement
+      | HTMLTextAreaElement;
   }
   input.focus();
 }
@@ -76,7 +78,7 @@ function addModulePart() {
 }
 
 function addModulePartElement() {
-  let titleInput = document.querySelector(".popup-add #titleToAdd") as HTMLInputElement;
+  let titleInput = document.querySelector(".popup-add #titleToAdd") as HTMLTextAreaElement;
   let modulePartElement = new ModulePartElement("", titleInput.value);
   let modulePart = dataStore.moduleEdited.parts[+route.params.part];
   modulePart.addElement(modulePartElement);
@@ -86,15 +88,15 @@ function addModulePartElement() {
 }
 
 function addTip() {
-  let tipInput = document.querySelector(".popup-add textarea") as HTMLTextAreaElement;
+  let tipInput = document.querySelector(".popup-add #tipsToAdd") as HTMLTextAreaElement;
   let tip = tipInput.value;
   dataStore.addTip(tip);
   tipInput.value = "";
   hide();
 }
 
 function addAccount() {
-  let mailInput = document.querySelector('.popup-add input[name="mailToAdd"]') as HTMLInputElement;
+  let mailInput = document.querySelector(".popup-add #mailToAdd") as HTMLInputElement;
   let account = new Account(mailInput.value, false);
   dataStore.addAccount(account);
   mailInput.value = "";
@@ -134,16 +136,24 @@ function getPopupTitle() {
   <div class="popup-add-wrapper">
     <div class="popup-add">
       <h3 class="subtitle-style">{{ getPopupTitle() }}</h3>
-      <textarea
+      <div
         v-if="route.name == 'Tips'"
-        name="content"
-      ></textarea>
+        class="text-area-card"
+      >
+        <textarea id="tipsToAdd"></textarea>
+      </div>
       <InputCard
         v-else-if="route.name == 'Accounts'"
         id="mailToAdd"
         label="Email :"
         type="email"
       />
+      <div
+        v-else-if="'part' in route.params"
+        class="text-area-card"
+      >
+        <textarea id="titleToAdd"></textarea>
+      </div>
       <InputCard
         v-else
         id="titleToAdd"
@@ -195,18 +205,54 @@ function getPopupTitle() {
       color: var(--color-secondary);
     }
 
-    & textarea {
+    &:has(textarea#titleToAdd) {
+      width: 40rem;
+      height: 30rem;
+    }
+
+    &:has(textarea#tipsToAdd) {
+      width: 33rem;
+      height: 23rem;
+    }
+
+    & .text-area-card {
+      background-color: var(--color-primary-1);
+      color: var(--color-background);
+      padding: 1rem;
+      margin: 1rem 0;
+      border-radius: 1rem;
       width: 100%;
       height: 100%;
-      resize: none;
-      border: 1px solid var(--color-primary-1);
-      background: none;
-      color: var(--color-primary-1);
-      font-size: 14pt;
-      margin: 1rem 0;
+      box-shadow: 3px 3px 10px 1px rgb(0 0 0 / 40%);
+
+      &:has(#titleToAdd) {
+        background-color: var(--color-primary-3);
+      }
+
+      & textarea {
+        font-size: 14pt;
+        width: 100%;
+        height: 100%;
+        resize: none;
+        border: none;
+        background: none;
+        color: var(--color-background);
+
+        &::-webkit-scrollbar {
+          width: 0.25rem;
+          height: 0.25rem;
+          border-radius: 0.12rem;
+          background-color: rgba(255, 255, 255, 0.15);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: rgba(255, 255, 255, 0.3);
+          border-radius: 0.12rem;
+        }
 
-      &:focus {
-        outline: none;
+        &:focus {
+          outline: none;
+        }
       }
     }