From 3163671df689e7e65fd61fd5681c032e3399f28b Mon Sep 17 00:00:00 2001
From: Nikita Khromov <nikita.khromov@onlyoffice.com>
Date: Tue, 15 Nov 2022 18:53:59 +0500
Subject: [PATCH] [zoom] Style fixes for desktop version and other small fixes.

---
 sdkjs-plugins/content/zoom/index.html         | 18 +++----
 sdkjs-plugins/content/zoom/index_zoom.html    | 48 ++++++++++++++++---
 sdkjs-plugins/content/zoom/scripts/zoom.js    |  2 +-
 .../content/zoom/vendor/zoom-sdk/index.js     | 18 ++++++-
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/sdkjs-plugins/content/zoom/index.html b/sdkjs-plugins/content/zoom/index.html
index fec88831..dd47cdaa 100644
--- a/sdkjs-plugins/content/zoom/index.html
+++ b/sdkjs-plugins/content/zoom/index.html
@@ -170,10 +170,10 @@
 				</div>
 				<input type="text" id="topic-value" class="form-control" placeholder="Enter topic here" style="width: calc(100% - 24px); margin: 0 12px 0 12px; text-align: left;"> </div>
 			<div style="margin:16px 12px 0px 12px;">
-				<button id="start-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Start a meeting</button>
+				<button id="start-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Start meeting</button>
 			</div>
 			<div style="margin:16px 12px 0px 12px;">
-				<button id="schedule-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Schedule a meeting</button>
+				<button id="schedule-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Schedule meeting</button>
 			</div>
 			<div id="scheduler-container" style="display:none">
 				<div id="date">
@@ -216,9 +216,6 @@
 							</div>
 						</span> </div>
 				</div>
-				<div style="margin:16px 12px 0px 12px;">
-					<button id="create_meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Create a meeting</button>
-				</div>
 				<div id="settings_wrapper" style="margin-top: 16px;">
 					<div class="legend">
 						<div id="adv_settings" class="button">
@@ -694,6 +691,9 @@
 						</div>
 					</div>
 				</div>
+				<div style="margin:16px 12px 0px 12px;">
+					<button id="create_meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Save</button>
+				</div>
 			</div>
 		</div>
 		<div style="margin: 16px 0 16px 0;">
@@ -711,13 +711,13 @@
 			<div style="margin:12px;"> In the form, enter any application name and description, accept Terms and Conditions and generate a secret. Enter Client ID, Secret ID, JWT token below and save it. </div>
 		</div>
 		<div style="display: flex; flex-direction: column; margin: 12px;"> <span>Email</span>
-			<input id="emailField" autocomplete="off" class="form-control" data-id="zoom-email-value" type="text" placeholder="Email" /> </div>
+			<input id="emailField" autocomplete="new-password" class="form-control" data-id="zoom-email-value" type="text" placeholder="Email" /> </div>
 		<div style="display: flex; flex-direction: column; margin: 12px;"> <span>SDK Key</span>
-			<input id="sdkKeyField" autocomplete="off" class="form-control" data-id="zoom-sdk-key" type="text" placeholder="SDK Key" /> </div>
+			<input id="sdkKeyField" autocomplete="new-password" class="form-control" data-id="zoom-sdk-key" type="text" placeholder="SDK Key" /> </div>
 		<div style="display: flex; flex-direction: column; margin: 12px;"> <span>SDK Secret</span>
-			<input id="sdkSecretField" autocomplete="off" class="form-control" data-id="zoom-sdk-secret" type="password" placeholder="SDK Secret" /> </div>
+			<input id="sdkSecretField" autocomplete="new-password" class="form-control" data-id="zoom-sdk-secret" type="password" placeholder="SDK Secret" /> </div>
 		<div style="display: flex; flex-direction: column; margin: 12px;"> <span>JWT Token</span>
-			<input id="tokenKeyField" autocomplete="off" class="form-control" data-id="zoom-jwt-token" type="text" placeholder="JWT Token" /> </div>
+			<input id="tokenKeyField" autocomplete="new-password" class="form-control" data-id="zoom-jwt-token" type="text" placeholder="JWT Token" /> </div>
 		<div id="saveConfigBtn" class="button wide control i18n">
 			<button class="btn-text-default" style="width:calc(100% - 24px); margin: 0 12px 0px 12px; height: 30px;">Save</button>
 		</div>
diff --git a/sdkjs-plugins/content/zoom/index_zoom.html b/sdkjs-plugins/content/zoom/index_zoom.html
index 0640ee17..6040caff 100644
--- a/sdkjs-plugins/content/zoom/index_zoom.html
+++ b/sdkjs-plugins/content/zoom/index_zoom.html
@@ -30,6 +30,16 @@
 </head>
 
 <body id="body">
+    <div id="loader-container" class="asc-plugin-loader display-none">
+		<div id="flex-loader-container">
+			<div>
+				<div class="asc-loader-image">
+					<div class="asc-loader-title"></div>
+				</div>
+				<div class="asc-loader-title"> Loading... </div>
+			</div>
+		</div>
+	</div>
     <style>
         body, html {
             font-size: 11px !important;
@@ -41,6 +51,27 @@
             line-height: normal !important;
         }
 
+        .display-none {
+            display: none !important;
+        }
+
+        #flex-loader-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 150px;
+            height: 50px;
+            border: none;
+            background-image: none;
+            background-color: rgba(68, 68, 68, 0.95);
+            color: #f1f1f1;
+            border-radius: 6px;
+        }
+			
+        .asc-plugin-loader .asc-loader-image {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=) !important;
+        }
+
         .sdk-select {
             height: 34px;
             border-radius: 4px;
@@ -252,9 +283,9 @@
                     rule += ".select2-container--default .select2-selection--single { color : " + oTheme["text-normal"] + " !important; background-color : " + oTheme["background-normal"] + " !important;}\n";
                     rule += ".select2-container--default .select2-selection--single .select2-selection__rendered { color : " + oTheme["text-normal"] + " !important;}\n";
                     rule += ".select2-results { background-color : " + oTheme["background-normal"] + ";}\n";
-                    rule += ".select2-container--default .select2-results__option--highlighted[aria-selected] { background-color : " + oTheme["border-regular-control"] + " !important;}\n";
-                    rule += ".select2-container--default .select2-results__option[aria-selected=true] { color: " + oTheme["text-contrast-background"] + "!important; background-color : " + oTheme["border-regular-control"] + " !important;}\n";
-                    rule += ".select2-dropdown, .select2-container--default .select2-selection--single { border-color : " + oTheme["border-regular-control"] + " !important;}\n";
+                    rule += ".select2-container--default .select2-results__option--highlighted[aria-selected] { background-color : " + oTheme["highlight-button-hover"] + " !important;}\n";
+                    rule += ".select2-container--default .select2-results__option[aria-selected=true] { color: " + oTheme["text-contrast-background"] + "!important; background-color : " + oTheme["highlight-button-pressed"] + " !important;}\n";
+                    rule += ".select2-dropdown, .select2-container--default .select2-selection--single { border: 0.5px solid " + oTheme["border-regular-control"] + " !important;}\n";
                     rule += ".select2-container--default.select2-container--open .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
                     rule += ".select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single { border-color : " + oTheme["border-regular-control"] + " !important;}\n";
                     rule += ".select2-container--default.select2-container--open.select2-container--focus .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
@@ -264,7 +295,7 @@
                     rule += ".select2-container--default .select2-selection--single .select2-selection__arrow b { border-color : " + oTheme["text-normal"] + " !important" + ";}\n";
                     rule += ".select2-results__option { color : " + oTheme["text-normal"] + " !important" + ";}\n";
 
-                    rule += ".ps .ps__rail-y:hover { background-color : " + oTheme["background-toolbar"] + ";}\n";
+                    rule += ".ps .ps__rail-y:hover { background-color : " + oTheme["background-toolbar"] + "!important;}\n";
                     rule += ".ps .ps__rail-y.ps--clicking { background-color : " + oTheme["background-toolbar"] + ";}\n";
                     rule += ".ps__thumb-y { background-color : " + oTheme["background-normal"] + "; border-color:" + oTheme["Border"] + " !important" + ";}\n";
                     rule += ".ps__rail-y:hover > .ps__thumb-y { border-color : " + oTheme["canvas-scroll-thumb-hover"] + "; background-color : " + oTheme["canvas-scroll-thumb-hover"] + " !important" + ";}\n";
@@ -274,13 +305,16 @@
                     rule += ".ps__rail-x:hover > .ps__thumb-x { border-color : " + oTheme["canvas-scroll-thumb-hover"] + ";}\n";
 
                     rule += "*::-webkit-scrollbar-track { background : " + oTheme["background-normal"] + ";}\n";
-                    rule += "*::-webkit-scrollbar-track:hover { background : " + oTheme["background-toolbar-additional"] + ";}\n";
+                    rule += "*::-webkit-scrollbar-track:hover { border-radius: 2px; background : " + oTheme["background-toolbar-additional"] + ";}\n";
                     rule += "*::-webkit-scrollbar-thumb { background-color : " + oTheme["background-toolbar"] + "!important; border-color : " + oTheme["border-regular-control"] + ";}\n";
-                    rule += "*::-webkit-scrollbar-thumb:hover { background-color : " + oTheme["canvas-scroll-thumb-hover"] + ";}\n";
+                    rule += "*::-webkit-scrollbar-thumb:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC) !important; background: no-repeat; border-radius: 2px; background-color : " + oTheme["canvas-scroll-thumb-hover"] + " !important;}\n";
 
+                    if (oTheme['type'] == 'light') {
+                        rule+= '*::-webkit-scrollbar-thumb:hover { background-position: -7px center !important;}';
+                    }
                     rule += ".select2-search__field { height: 20px; }\n";
                     rule += "*::-webkit-scrollbar { width: 9px !important; }\n";
-                    rule += "*::-webkit-scrollbar-thumb { border-radius: 2px; background: no-repeat;}\n";
+                    rule += "*::-webkit-scrollbar-thumb { border: 1px solid " + oTheme['border-regular-control'] + " !important; border-radius: 2px; background: no-repeat;}\n";
                     
                     rule += `::selection {\
                                 background-color: ${oTheme["highlight-text-select"]};\
diff --git a/sdkjs-plugins/content/zoom/scripts/zoom.js b/sdkjs-plugins/content/zoom/scripts/zoom.js
index 13a05de8..0e8884f4 100644
--- a/sdkjs-plugins/content/zoom/scripts/zoom.js
+++ b/sdkjs-plugins/content/zoom/scripts/zoom.js
@@ -67,7 +67,7 @@ var Ps;
             el.classList.remove(className);
         }
     };
-
+    
 	window.Asc.plugin.init = function () {
 	    $('#topic-value').val(window.Asc.plugin.info.documentTitle);
 
diff --git a/sdkjs-plugins/content/zoom/vendor/zoom-sdk/index.js b/sdkjs-plugins/content/zoom/vendor/zoom-sdk/index.js
index 643086b7..0a28569a 100644
--- a/sdkjs-plugins/content/zoom/vendor/zoom-sdk/index.js
+++ b/sdkjs-plugins/content/zoom/vendor/zoom-sdk/index.js
@@ -81,13 +81,27 @@ function websdkready() {
       );
     });
 
+  var displayNoneClass = "display-none";
+  function switchClass(el, className, add) {
+    if (add) {
+        el.classList.add(className);
+    } else {
+        el.classList.remove(className);
+    }
+  };
+  function showLoader(bShow) {
+    switchClass(document.getElementById("loader-container"), displayNoneClass, !bShow);
+  };
+
   // click join meeting button
   window.joinMeeting = function () {
+      showLoader(true);
       SDK_KEY = localStorage.getItem('zoom-sdk-key') || "";
       SDK_SECRET = SDK_SECRET = localStorage.getItem('zoom-sdk-secret') || "";
 
       var meetingConfig = testTool.getMeetingConfig();
       if (!meetingConfig.mn || !meetingConfig.name) {
+        showLoader(false);
         alert("Meeting number or username is empty");
         return false;
       }
@@ -116,8 +130,10 @@ function websdkready() {
             meetingConfig.sdkKey = SDK_KEY;
             var joinUrl = document.location.protocol + "//" + document.location.host + document.location.pathname.replace("index_zoom.html", "meeting.html?") + testTool.serialize(meetingConfig);
             window.parent.openMeeting(joinUrl);
+            showLoader(false);
         }).error(function(oResponse) {
-            console.log(oResponse)
+            showLoader(false);
+            console.log(oResponse);
         })
   };