From eb0cb7bd3b3f378fb0ffcee709ecf571bb824aa0 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Wed, 10 Jun 2020 19:46:19 +0100
Subject: [PATCH] More work in progress on the trash modal.

---
 index.html                         | 32 +++++++++++++++++++-----------
 public/scripts/app.js              |  6 ++++--
 public/stylesheets/styles.css      | 32 ++++++++++++++++++++++++++++--
 public/stylesheets/styles.css.map  |  2 +-
 sass/components/_modal.scss        | 31 ++++++++++++++++++++++++-----
 sass/components/_system-icons.scss |  6 +++++-
 6 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 35f46f5..59db108 100644
--- a/index.html
+++ b/index.html
@@ -319,18 +319,26 @@
                       width="60px"
                       height="45px"
                     />
-                    <img
-                      id="trash-icon"
-                      src="./public/icons/trash.png"
-                      width="25px"
-                      height="45px"
-                    />
-                    <div class="outer-edge__dark modal-container hidden" id="trash-modal">
-                      <div class="inner-edge__dark modal-container__content">
-                        <p class="modal-container__text">Test</p>
-                        <button id="modal-container__close-button">
-                          close
-                        </button>
+                    <div id="trash-icon-wrapper">
+                      <img
+                        id="trash-icon"
+                        src="./public/icons/trash.png"
+                        width="25px"
+                        height="45px"
+                      />
+                      <div
+                        class="outer-edge__dark modal-inactive"
+                        id="trash-modal"
+                      >
+                        <div class="inner-edge__dark modal-container__content">
+                          <p class="modal-container__text">Test</p>
+                          <p class="modal-container__text">Test</p>
+                          <p class="modal-container__text">Test</p>
+                          <p class="modal-container__text">Test</p>
+                          <button id="modal-container__close-button">
+                            close
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/public/scripts/app.js b/public/scripts/app.js
index 08ebf16..c48c78c 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -31,12 +31,14 @@ trashIcon.addEventListener("click", () => {
   const trashModal = document.getElementById("trash-modal");
   const trashModalCloseButton = document.getElementById("modal-container__close-button");
   trashModalCloseButton.addEventListener("click", () => {
-    trashModal.classList.add("hidden");
+    trashModal.classList.add("modal-inactive");
+    trashModal.classList.remove("modal-active");
   });
   trashModal.addEventListener("focusout", () => {
     trashModal.classList.add("hidden");
   });
-  trashModal.classList.remove("hidden");
+  trashModal.classList.remove("modal-inactive");
+  trashModal.classList.add("modal-active");
   trashModal.focus();
 });
 /////////////////
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index c6e99f6..35f5642 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -584,20 +584,48 @@ body {
   padding: 2px;
 }
 
+#trash-icon {
+  z-index: 1;
+}
+
 .system-icons__icon-wrapper {
   display: flex;
   align-items: flex-end;
 }
 
-#system-icons__wrapper > div > img {
+#system-icons__wrapper img {
   cursor: pointer;
 }
 
 .modal-container {
   position: fixed;
+  z-index: 0;
+  background-color: #797979;
+  width: 500px;
+  height: 200px;
+  transition-duration: 2s;
+  transition-property: transform;
+}
+
+#trash-icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.modal-inactive {
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.modal-active {
   transform-origin: bottom right;
   transform: translate(-400px, -250px) scale(1, 1);
-  z-index: 9999;
+  z-index: 99;
   background-color: #797979;
   width: 500px;
   height: 200px;
diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map
index 4d738b8..3781c9a 100644
--- a/public/stylesheets/styles.css.map
+++ b/public/stylesheets/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC9BF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AClCF;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
index 5d92d93..0d89b22 100644
--- a/sass/components/_modal.scss
+++ b/sass/components/_modal.scss
@@ -1,10 +1,9 @@
 .modal-container {
   position: fixed;
-  transform-origin: bottom right;
-  transform: translate(-400px, -250px) scale(1, 1);
+  
   // top: 30%;
   // left: 20%;
-  z-index: 9999;
+  z-index: 0;
   background-color: #797979;
   width: 500px;
   height: 200px;
@@ -12,6 +11,28 @@
   transition-property: transform;
 }
 
-.modal__active {
-  
+#trash-icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.modal-inactive {
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.modal-active {
+  transform-origin: bottom right;
+  transform: translate(-400px, -250px) scale(1, 1);
+  z-index: 99;
+  background-color: #797979;
+  width: 500px;
+  height: 200px;
+  transition-duration: 2s;
+  transition-property: transform;
 }
diff --git a/sass/components/_system-icons.scss b/sass/components/_system-icons.scss
index d94d0f3..6fa9722 100644
--- a/sass/components/_system-icons.scss
+++ b/sass/components/_system-icons.scss
@@ -22,11 +22,15 @@
   padding: 2px;
 }
 
+#trash-icon {
+  z-index: 1;
+}
+
 .system-icons__icon-wrapper {
   display: flex;
   align-items: flex-end;
 }
 
-#system-icons__wrapper > div > img {
+#system-icons__wrapper img {
   cursor: pointer;
 }
\ No newline at end of file