RIA-23435 endpoint explorer style (#830)

* RIA-23435 reformat code and style changes * RIA-23435 styling * RIA-23435 more styling and prevent dragging tabs * RIA-23435 font changes * RIA-23435 font size input and close-btn * RIA-23435 add shadow to closeButton text
SmartBear · Nov 25, 2024 · f46a660 · f46a660
1 parent 829fe81
commit f46a660
Showing 1 changed file with 61 additions and 37 deletions.
diff --git a/.../resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html b/.../resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html
@@ -1,5 +1,6 @@
-<html>
+<html lang="eng">
 <head>
+    <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
     <link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.css"/>
     <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.css"/>
@@ -26,8 +27,6 @@
         }, 1000);
 
 
-
-
     </script>
     <script type="text/javascript" src="js/jquery-1.11.1min.js"></script>
 
@@ -177,7 +176,7 @@
                 }
             };
 
-            window.closeHandler = function(success) {
+            window.closeHandler = function (success) {
                 if (success == true) {
                     closeCallback.close();
                 }
@@ -205,15 +204,15 @@
                 }
             });
 
-            $('#closeAction').click(function() {
+            $('#closeAction').click(function () {
                 closeCallback.close();
             });
 
-            $('#bodyTab').click(function() {
+            $('#bodyTab').click(function () {
                 requestPayload.focus();
             });
 
-            $('#methodList-button').hover(function() {
+            $('#methodList-button').hover(function () {
                 $('.ui-icon').css('background-image', 'url("../images/jquery-ui/ui-icons_222222_256x240.png")');
             });
 
@@ -359,11 +358,11 @@
         };
         $(document).ready(function () {
             initPage();
-            document.body.addEventListener('dragover', function(e) {
+            document.body.addEventListener('dragover', function (e) {
                 e.preventDefault();
                 e.stopPropagation();
             }, false);
-            document.body.addEventListener('drop', function(e){
+            document.body.addEventListener('drop', function (e) {
                 e.preventDefault();
                 e.stopPropagation();
             }, false);
@@ -376,7 +375,14 @@
             }, false);
         });
 
-
+        document.addEventListener('DOMContentLoaded', function() {
+            const rightAlignedTabs = document.querySelectorAll('.rightAlignedTab');
+            rightAlignedTabs.forEach(tab => {
+                tab.addEventListener('dragstart', function(event) {
+                    event.preventDefault();
+                });
+            });
+        });
 
 
     </script>
@@ -404,6 +410,10 @@
             margin: 7px 0 5px 0;
         }
 
+        .re-request-item {
+            max-height: calc(100% - 10px);
+        }
+
         .re-main .re-request-item label {
             display: block;
             text-align: left;
@@ -423,8 +433,8 @@
             display: -ms-flexbox;
             display: flex;
             -webkit-box-pack: justify;
-                -ms-flex-pack: justify;
-                    justify-content: space-between;
+            -ms-flex-pack: justify;
+            justify-content: space-between;
         }
 
         .re-main .re-request-item .re-info-params {
@@ -450,18 +460,21 @@
         #re-info-params-tabs {
 
             -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
+            box-sizing: border-box;
         }
 
         .re-main .re-request-item.re-request-info {
-
             -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            flex-grow: 1;
+            -webkit-flex-grow: 1;
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
             position: relative;
             -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
+            box-sizing: border-box;
         }
 
         .re-main .re-request-item.re-request-info ::-webkit-scrollbar {
@@ -483,7 +496,7 @@
         }
 
         .re-main .re-request-item.re-request-info ::-webkit-scrollbar-thumb:window-inactive {
-            background: rgba(201, 201, 201, 0.);
+            background: rgba(201, 201, 201, 0.5);
         }
 
         .ui-tabs.ui-widget-content#re-info-params-tabs {
@@ -495,7 +508,7 @@
             margin: 0px;
             padding: 0;
             -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
+            box-sizing: border-box;
 
             width: 100%;
         }
@@ -586,13 +599,12 @@
 
         .ui-tabs-panel.ui-widget-content#re-info-params-tab-2 {
             overflow: scroll;
-            height: calc(100% - 171px);
+            height: calc(100% - 161px);
         }
 
         .re-params-table-row.re-params-table-body {
             overflow-x: hidden;
             overflow-y: auto;
-            max-height: 150px;
         }
 
         .ui-tabs-panel.ui-widget-content#re-info-params-tab-3 {
@@ -603,10 +615,10 @@
             display: flex;
             -webkit-box-orient: horizontal;
             -webkit-box-direction: normal;
-                -ms-flex-flow: row wrap;
-                    flex-flow: row wrap;
+            -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
             -ms-flex-pack: distribute;
-                justify-content: space-around;
+            justify-content: space-around;
         }
 
         .re-main .re-request-item .re-info-params .ui-tabs-nav.ui-widget-header li.ui-tab a {
@@ -653,7 +665,7 @@
         }
 
         .re-main .re-request-item .re-method .ui-selectmenu-button {
-            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#d4d4d4));
+            background-image: -webkit-linear-gradient(to bottom, #ffffff, #d4d4d4);
             border: 1px solid #707070;
             border-radius: 3px;
             color: black;
@@ -711,7 +723,7 @@
             background-size: 15%;
         }
 
-         button.re-control.re-send.ui-button:hover {
+        button.re-control.re-send.ui-button:hover {
             background-color: #29A344;
             border-color: #25963F;
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF+mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTIxVDExOjQ0OjI2KzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMS0yMVQxMTo0NzoxMCswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0yMVQxMTo0NzoxMCswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplY2JiNGVmNS00Zjk2LWM1NGEtOWViYS04Yjc4MDNkYjkxZjQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoxOGJlOTBlNC1jMzg5LTIyNGMtODYzYS02Mjk3YzI3NjNhNTkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0NzU3NmNmNi03ODM0LTA1NGYtODY4Mi1lYjRkZjZjNWFmOTkiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3NTc2Y2Y2LTc4MzQtMDU0Zi04NjgyLWViNGRmNmM1YWY5OSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0yMVQxMTo0NDoyNiswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplY2JiNGVmNS00Zjk2LWM1NGEtOWViYS04Yjc4MDNkYjkxZjQiIHN0RXZ0OndoZW49IjIwMTktMDEtMjFUMTE6NDc6MTArMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7DahR/AAAAz0lEQVQokWPUXOzCQBxgglDReoEOqtZEKdUWUG03LG6wKSSs9D8DAz8bb6iC5xrf6W7q9viUMjD8Z2BgYGRg1OJXaTEsarQtxqMUAXhYuELlPbYHLPDScCagFALkeaTbjYpb7EoJK2VgYGBgZORh4YLzWHApe/T12ZQbi7dc34NP6Zc/37Y82dd0ZCKaOFQpIwMjAwPD739/Lry7Pv3m0hP3z2IaAVX69/+/599fr3qwbebZJbicBFV64vX5NQ+3X3x0FZc6hNKtN/biUQQBACrUPxJnra7qAAAAAElFTkSuQmCC');
@@ -753,8 +765,8 @@
             max-height: calc(100% - 13px);
             -webkit-box-orient: vertical;
             -webkit-box-direction: normal;
-                -ms-flex-direction: column;
-                    flex-direction: column;
+            -ms-flex-direction: column;
+            flex-direction: column;
             position: relative;
         }
 
@@ -801,6 +813,11 @@
             border: 1px solid #3489D1;
         }
 
+        #methodEndpoint {
+            font-size: 12px;
+            font-family: "Open Sans Regular", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+        }
+
         .re-params-table-row.re-params-table-footer {
             margin: 0;
         }
@@ -817,7 +834,7 @@
             overflow: hidden;
             cursor: pointer;
             margin: 0 0 0 11px;
-            display: -webkit-inline-box;
+            display: -webkit-inline-flex;
             display: -ms-inline-flexbox;
             display: inline-flex;
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAD7SURBVChTY/j/6+3/+08+/scEH/8/uf/2/y8gi1np96+GDYdOMDwVM2MwkmRngICXDEen9DDM2b6P4cx3DQYmiOAPhiuL2xnmnvsEVTCBYc3dHxApIGD8/+3S/7lN8xiugMU4GMTEGBhevYIo4DVMYqiM0wUqAgKGT+cY5rYvhiqEAJgCTiAbYh2fNIOKOAeYCQEcDPI68mAFIABUBHHDhodIxqC4kYGB2VWEpQHmSJAV1Zk6DG9OXGJ49ecPw6tLQF9LWzMwG6qbNLyHKgC5gYddksHITIzhKUzhdykGhm/3D/xftfva/28gHyCDb9f+71518v+L////AwBsJZjhGJq0VwAAAABJRU5ErkJggg==');
@@ -863,8 +880,7 @@
             background-color: #fd9c9c;
         }
 
-        .hint{
-            font-style: italic;
+        .hint {
             color: gray;
         }
 
@@ -877,12 +893,16 @@
         }
 
         .closeButton {
+            font-family: "Open Sans Regular", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+            font-size: 12px;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
             float: right;
-            width: 68px;
-            height: 23px;
+            width: 72px;
+            height: 25px;
             border: 1px solid #6E6E6E;
             border-radius: 3px;
-            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#E5E5E5));
+            background-image: linear-gradient(to bottom, #FFFFFF, #E5E5E5);
+            background-image: -webkit-linear-gradient(to bottom, #FFFFFF, #E5E5E5);
             cursor: pointer;
         }
 
@@ -901,6 +921,7 @@
         }
 
         .dontShowInscription {
+            margin-left: 4px;
             vertical-align: super;
         }
 
@@ -910,18 +931,19 @@
         }
 
         .dontShowLabel {
-            display: block;
+            display: flex;
+            align-items: center;
         }
 
         .dontShowLabel, #dontShow {
             cursor: pointer;
         }
 
         .labels {
-            margin-top: 5px;
+            margin-top: -120px;
             font-family: "Open Sans Regular", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
             font-size: 12px;
-
+            z-index: 100;
         }
 
         .dontShowLabelContainer {
@@ -930,6 +952,7 @@
 
 
     </style>
+    <title>EndpointExplorer</title>
 </head>
 <body onload="populateRecentItems()">
 <div class="container">
@@ -982,8 +1005,9 @@
                             </li>
                             <li id="authHeadTab" class="rightAlignedTab">
                                 <a href="#re-info-params-tab-2"
-                                   onclick="inspectorCallback.exploreAPIClickAuthHeadersTab();return false;">Authentication
-                                    & Headers</a>
+                                   onclick="inspectorCallback.exploreAPIClickAuthHeadersTab();return false;">
+                                    Authentication & Headers
+                                </a>
                             </li>
                             <li id="bodyTab" class="rightAlignedTab">
                                 <a href="#re-info-params-tab-3"