From 5d676ad351a8dae8f04efae38b077ed36d7e513b Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic@cloud.timenet.it>
Date: Tue, 18 Jan 2022 22:12:03 +0100
Subject: [PATCH] [mirotalksfu] - improve file transfer UI

---
 public/css/Room.css     |  18 ++++++++++++++++--
 public/images/share.png | Bin 0 -> 4340 bytes
 public/js/Room.js       |   2 ++
 public/js/RoomClient.js |   3 +++
 public/view/Room.html   |   7 +++++++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 public/images/share.png

diff --git a/public/css/Room.css b/public/css/Room.css
index a82488d..15b8cf3 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -524,6 +524,13 @@ emoji-picker {
     transform: translate(-50%, -50%);
 }
 
+.center-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}
+
 .fadein {
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;
@@ -626,14 +633,16 @@ button:hover {
     overflow: hidden;
 }
 
-#sendAbortBtn {
+#sendAbortBtn,
+#receiveHideBtn {
     padding: 5px;
     border-radius: 5px;
     color: white;
     background: transparent;
 }
 
-#sendAbortBtn:hover {
+#sendAbortBtn:hover,
+#receiveHideBtn:hover {
     color: rgb(255, 0, 0);
     transform: var(--btns-hover-scale);
     transition: all 0.3s ease-in-out;
@@ -644,6 +653,11 @@ progress {
     min-width: 100%;
 }
 
+#imgShareSend:hover,
+#imgShareReceive:hover {
+    cursor: move;
+}
+
 /*--------------------------------------------------------------
 # Whiteboard
 --------------------------------------------------------------*/
diff --git a/public/images/share.png b/public/images/share.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3c7567ddcc8314c4d111f2d0d6b9eb0ab6e703f
GIT binary patch
literal 4340
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
b5r&`fdes>mZ##ATjRDYx76$eDE)V_>9FhY`

literal 0
HcmV?d00001

diff --git a/public/js/Room.js b/public/js/Room.js
index 2314e49..71f4696 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -481,6 +481,8 @@ function roomIsReady() {
         rc.makeDraggable(mySettings, mySettingsHeader);
         rc.makeDraggable(participants, participantsHeader);
         rc.makeDraggable(whiteboard, whiteboardHeader);
+        rc.makeDraggable(sendFileDiv, imgShareSend);
+        rc.makeDraggable(receiveFileDiv, imgShareReceive);
         if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
             show(startScreenButton);
         }
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index d0761ad..1d014ad 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -25,6 +25,7 @@ const image = {
     user: '../images/participant.png',
     youtube: '../images/youtube.png',
     message: '../images/message.png',
+    share: '../images/share.png',
 };
 
 const mediaType = {
@@ -1778,6 +1779,8 @@ class RoomClient {
         Swal.fire({
             allowOutsideClick: false,
             background: swalBackground,
+            imageAlt: 'mirotalksfu-file-sharing',
+            imageUrl: image.share,
             position: 'center',
             title: 'Share the file',
             input: 'file',
diff --git a/public/view/Room.html b/public/view/Room.html
index 1b8383d..81376fb 100644
--- a/public/view/Room.html
+++ b/public/view/Room.html
@@ -256,6 +256,7 @@ access to use this app.
         <div id="remoteAudios"></div>
 
         <div id="sendFileDiv" class="fadein center">
+            <img id="imgShareSend" src="../images/share.png" alt="mirotalksfu-share-send" class="center-img" /><br />
             <div id="sendFileInfo"></div>
             <div id="sendFilePercentage"></div>
             <progress id="sendProgress" max="0" value="0"></progress>
@@ -263,6 +264,12 @@ access to use this app.
         </div>
 
         <div id="receiveFileDiv" class="fadein center">
+            <img
+                id="imgShareReceive"
+                src="../images/share.png"
+                alt="mirotalksfu-share-receive"
+                class="center-img"
+            /><br />
             <div id="receiveFileInfo"></div>
             <div id="receiveFilePercentage"></div>
             <progress id="receiveProgress" max="0" value="0"></progress>