more work on mail

onionr/static-data/www/mail/index.html

@@ -24,7 +24,15 @@
             <div id='threads' class='threads'>
                 <div id='threadPlaceholder'>Nothing here yet 😞</div>
             </div>
-            <div id='messageDisplay' class='overlay'><div id='threadDisplay'></div></div>
+            <div id='messageDisplay' class='overlay'>
+                <span class='closeOverlay' overlay='messageDisplay'></span>
+                <div class='overlayContent'>
+                    <div>From: <input type='text' id='fromUser' readonly>
+                    </div>
+                    <div id='threadDisplay'>
+                    </div>
+                </div>
+            </div>
         </div>
         <script src='/shared/base64.min.js'></script>
         <script src='/shared/misc.js'></script>

onionr/static-data/www/mail/mail.css

@@ -40,4 +40,16 @@ input{
   .activeTab{
       color: black;
       background-color: gray;
+  }
+
+  .overlayContent{
+      background-color: lightgray;
+      border: 3px solid black;
+      border-radius: 3px;
+      opacity: 1.0;
+      color: black;
+      font-family: Verdana, Geneva, Tahoma, sans-serif;
+      min-height: 100%;
+      padding: 1em;
+      margin: 1em;
   }

onionr/static-data/www/mail/mail.js

@@ -26,8 +26,9 @@ myPub = httpGet('/getActivePubkey')
 
 function openThread(bHash, sender, date){
     var messageDisplay = document.getElementById('threadDisplay')
-    stuff = httpGet('/getblockbody/' + bHash)
-    messageDisplay.innerText = stuff
+    blockContent = httpGet('/getblockbody/' + bHash)
+    document.getElementById('fromUser').value = sender
+    messageDisplay.innerText = blockContent
     overlay('messageDisplay')
 }
 
@@ -91,7 +92,6 @@ function loadInboxEntrys(bHash){
       }.bind(bHash))
 }
 
-
 function getInbox(){
     var showed = false
     var requested = ''
@@ -144,4 +144,11 @@ for (var i = 0; i < idStrings.length; i++){
 
 for (var i = 0; i < document.getElementsByClassName('refresh').length; i++){
     document.getElementsByClassName('refresh')[i].style.float = 'right'
-}
+}
+
+for (var i = 0; i < document.getElementsByClassName('closeOverlay').length; i++){
+    document.getElementsByClassName('closeOverlay')[i].onclick = function(e){
+        document.getElementById(e.target.getAttribute('overlay')).style.visibility = 'hidden'
+    }
+}
+

onionr/static-data/www/shared/main/style.css

@@ -132,10 +132,23 @@ body{
     left: 0px;
     top: 0px;
     width:100%;
-    opacity: 0.9;
+    opacity: 0.95;
     height:100%;
-    text-align:center;
+    text-align:left;
     z-index: 1000;
-    background-color: black;
+    background-color: #2c2b3f;
     color: white;
  }
+
+ .closeOverlay{
+     background-color: white;
+     color: black;
+     border: 1px solid red;
+     border-radius: 5px;
+     float: right;
+     font-family: sans-serif;
+ }
+ .closeOverlay:after{
+     content: '❌';
+     padding: 5px;
+ }