UI bug fixes

Author: Gourav Dwivedi

src/css/main.css

@@ -12,7 +12,12 @@ body {
 }
 
 /* .tabcontent .tab-pane{ border:solid 1px blue;  border-top: 0};  */
-#tabheader li a { background-color: rgb(17, 106, 158); color: white; font-size: 20px; }
+#tabheader li a { 
+  background-color: rgb(17, 106, 158); 
+  color: white; 
+  font-size: 20px; 
+}
+
 #tabheader  a.active {
     border-bottom-color: transparent;
     background-color:  white; 
@@ -82,4 +87,15 @@ li:hover {
     margin-top: 10px;
     margin-bottom: 10px;
   }
-  
+  
+  .btn-send-payload {
+    margin-right: 10px;
+  }
+
+ul.nav .nav-item a:hover { 
+  border-color:  rgb(17, 106, 158) !important;
+ } 
+ul.nav .nav-link.active:hover { 
+  border-color: white !important; 
+} 
+

src/js/components/srform.component.js

@@ -39,13 +39,9 @@ class SrFormComponent extends HTMLElement {
                                             <input type="text" class="form-control inputUrl" id="inputUrl" placeholder="Url" value="https://localhost:5001/Test/OneHub">
                                         </div>
                                     </div>
-                                    <div class="form-group row">
-                                        <div class="col-sm-10 offset-sm-2">
-                                            <input type="button" class="btn btn-primary connectbtn" id="btn-connect" value="Connect" />
-                                        </div>
-                                    </div>
 
-                                    <div class="form-group row ">
+
+                                    <div class="form-group row onconnect" id="auth-container">
                                         <label for="authHeader" class="col-sm-2 col-form-label">Authentication Header</label>
                                         <div class="col-sm-10 offset-sm-2">
                                             <input type="text" class="form-control" id="authHeader" placeholder="Token">
@@ -75,6 +71,12 @@ class SrFormComponent extends HTMLElement {
                                             </div>
                                         </div>
                                      </div>
+
+                                     <div class="form-group row">
+                                        <div class="col-sm-10 offset-sm-2">
+                                            <input type="button" class="btn btn-primary connectbtn" id="btn-connect" value="Connect" />
+                                        </div>
+                                    </div>
                                     
                                     <div class="form-group row onconnect">
                                         <label for="inputServerMethod" class="col-sm-2 col-form-label">Server Method</label>
@@ -95,17 +97,16 @@ class SrFormComponent extends HTMLElement {
                                                 <textarea rows="2" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
                                             </div>
                                     </div>
-                                    <div class="form-group row onconnect">
-                                        <div class="col-10 col-sm-5 col-md-5">
+                                    <div class="form-group row onconnect ">
+                                        <div class="col-sm-2 offset-sm-2 btn-group">
                                             <input type="button" class="btn btn-primary btn-send-payload" value="Send"/>
                                             <input type="button" class="btn btn-primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
                                         </div>
                                     </div>
+                                    </div>
                                 </fieldset>
                             </form>
         `;
-
-        
     }
 }
 

src/js/components/srform.js

@@ -103,9 +103,11 @@ export function OnTabChange(tabName) {
 export function AdvanceViewElements(enable) {
     if(enable === true) {
         document.getElementById('protocol-support').style = 'display:block';
+        document.getElementById('auth-container').style = 'display:block';
     } 
     else {
         document.getElementById('protocol-support').style = 'display:none';
+        document.getElementById('auth-container').style = 'display:none';
     }
 }
 
@@ -264,8 +266,7 @@ export function buildConnection(url) {
 
       };
 
-      if(isAdvanceView) { 
-        var token = document.getElementById('authHeader').value;
+      if(isAdvanceView) {
         option.accessTokenFactory = () => document.getElementById('authHeader').value;
       }
 
@@ -332,14 +333,6 @@ export function OnConnect() {
 }
 
 export function SetConnectionProtocol() {
-    // var anyCheckbox = document.getElementById("txt-chk-any");
-
-    // if(anyCheckbox.checked === true)
-    // {
-    //     return;
-    // }
-    //Start work from here.
-    var counter = 0;
     var elements = document.querySelectorAll(".protocol-support");
 
     for(var i = 0; i < elements.length; i++)
@@ -363,16 +356,6 @@ export function SetConnectionProtocol() {
             counter++;
         }
     }
-
-
-    // if(counter === 0)
-    // {
-    //     anyCheckbox.checked = true;
-    // }
-    // else
-    // {
-    //     anyCheckbox.checked = false;
-    // }
 }
 
 export function DisableElementByClassName(className) {