From e08ddf521cae3d558715aca57e9ad38f681d4d5f Mon Sep 17 00:00:00 2001
From: milad <milad@miladnazeri.com>
Date: Tue, 5 Nov 2019 17:28:21 -0800
Subject: [PATCH] updated electron app ui

---
 screenshare/src/app.js     | 22 ++++++++---
 screenshare/src/index.html |  4 +-
 screenshare/src/styles.css | 80 +++++++++++++++++++++++++++++++-------
 3 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/screenshare/src/app.js b/screenshare/src/app.js
index a3e4f88e70..0fbddd4a2d 100644
--- a/screenshare/src/app.js
+++ b/screenshare/src/app.js
@@ -43,7 +43,7 @@ for (let index = 0; index < images; index++) {
 let currentScreensharePickID = "";
 function screensharePicked(id){
     currentScreensharePickID = id;
-    // console.log(currentScreensharePickID);
+    console.log(currentScreensharePickID);
     document.getElementById("share_pick").innerHTML = "";
     addSource(sourceMap[id], "share_pick");
     togglePage();
@@ -77,14 +77,22 @@ function togglePage(){
         let sourceBody = document.createElement('div')
         let thumbnail = isBrowser ? source.thumbnail : source.thumbnail.toDataURL();
         sourceBody.classList.add("box")
+        if (type === "share_pick") {
+            sourceBody.style.marginLeft = "0px";
+        }
+
         let circle = `<div class="circle" onclick="screensharePicked('${source.id}')"}></div>`
+        let image = "";
+        if (source.appIcon) {
+            image = `<img class="icon" src="${source.appIcon.toDataURL()}" />`;
+        }
         sourceBody.innerHTML = `
             <div class="heading">
-                ${type === "selects" ? circle : ""}
+                ${image}
                 <span class="screen_label">${source.name}</span>
             </div>
-            <div class="image">
-                <img src="${thumbnail}"></img>
+            <div class="${type === "share_pick" ? "image_no_hover" : "image"}" onclick="screensharePicked('${source.id}')">
+                <img src="${thumbnail}" />
             </div>
         `
         // console.log(sourceBody.innerHTML);
@@ -92,6 +100,7 @@ function togglePage(){
             document.getElementById("selects").appendChild(sourceBody);
         } else {
             document.getElementById("share_pick").appendChild(sourceBody);
+            document.getElementById("content_name").innerHTML = source.name;
         }
     }
 
@@ -110,14 +119,15 @@ function togglePage(){
                 thumbnailSize: {
                     width: imageWidth,
                     height: imageHeight
-                }
+                },
+                fetchWindowIcons: true
             }, (error, sources) => {
                 if (error) {
                     console.log("Error getting sources", error);
                 }
     
                 for (let source of sources) {
-                    console.log(JSON.stringify(sources,null,4));
+                    // console.log(JSON.stringify(sources,null,4));
                     sourceMap[source.id] = source;
                     //*if (source.id.indexOf("screen") > -1) {
                     //  console.log("Adding:", source.id)
diff --git a/screenshare/src/index.html b/screenshare/src/index.html
index 3ba1fa8d8e..60adf5f3ce 100644
--- a/screenshare/src/index.html
+++ b/screenshare/src/index.html
@@ -40,14 +40,14 @@
                     Others will be able to everything contained within this view.
                 </p>
             </div>
-            <div id="button_selection" >
+            <div id="button_selection">
                 <div id="yes" class="button_confirmation" style="color: #ffffff" onClick="screenConfirmed(true)">
                     Yes, share this content
                 </div>
                 <div id="no" class="button_confirmation" style="color: #009ee0" onClick="screenConfirmed(false)">
                     No, don't share this content
                 </div>
-            </div> <!-- button_selection -->
+            </div> button_selection
         </div> <!-- confirmation screen -->
         <script src="app.js"></script>
         <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
diff --git a/screenshare/src/styles.css b/screenshare/src/styles.css
index 63b3bf94e5..14e0c9d424 100644
--- a/screenshare/src/styles.css
+++ b/screenshare/src/styles.css
@@ -1,14 +1,53 @@
 body {
   background: black;
-  box-sizing: 0px;
+  box-sizing: border-box;
   /* display: -webkit-flex; */
   /* -webkit-justify-content: center; */
   /* -webkit-align-items: center; */
   /* -webkit-flex-direction: column; */
   font-family: "Graphik";
   margin: 0px;
+
+  }
+html::-webkit-scrollbar {
+  overflow: scroll;
+  overflow-x: hidden;
+  width: 0px;
 }
 
+#confirmation_screen {
+  /* background-color: orange; */
+  width: 100%;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+#confirmation_text {
+  margin-top: 25px;
+  font-size: 25px;
+  line-height: 25px;
+}
+
+#confirmation_text p {
+  margin: 0px;
+}
+
+#button_selection {
+  margin-top: 25px;
+  width: 100%;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+
+#share_pick {
+  /* background-color: blue; */
+}
 
 .text_title {
   color: white;
@@ -54,8 +93,8 @@ h3 {
 
 .screen_label {
   max-width: 220px;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: 25px;
+  line-height: 25px;
   margin-left: 15px;
   color: white;
   white-space: nowrap;
@@ -63,11 +102,11 @@ h3 {
   text-overflow: ellipsis;
 }
 
-.circle {
+.icon {
   display: inline-block;
   background: #C4C4C4;
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
 }
 
@@ -80,25 +119,28 @@ h3 {
   margin: 4px;
   cursor: pointer;
   width: 250px;
+  height: 75px;
+  line-height: 75px;
+  text-align: center;
+  vertical-align: middle;
 }
 
 .button_confirmation:hover {
-  border: 2px solid white;
+  outline: solid white 2px;
   width: 250px;
 }
 
 .box {
-  background-color: orange;
+  /* background-color: orange; */
   height: 165px;
   width: 265px;
   display: inline-block;
-  margin-left: 20px;
+  margin-left: 35px;
   margin-bottom: 40px;
   margin-top: 20px;
 }
 
 .heading {
-  background-color: red;
   height: 35px;
   display: flex;
   align-items: center;
@@ -112,18 +154,26 @@ h3 {
   max-width: 265px;
 }
 
+.image:hover {
+  outline: solid white 3px;
+}
+
+.image_no_hover {
+  background-color: blue;
+  width: 265px;
+  height: 165px;
+  max-height: 165px;
+  max-width: 265px;
+}
+
 img {
   width: 265px;
   height: 165px;
 }
 
 .scrollbar {
-  /* background-color: #F5F5F5; */
   float: right;
-  height: 100%;
-  /* margin-bottom: 25px; */
-  /* margin-left: 22px; */
-  /* margin-top: 40px; */
+  height: 470px;
   margin-right: 20px;
   width: 100%;
   overflow-y: scroll;