From f46a66022ba800a31678ccd7813e2fdf77ec97d9 Mon Sep 17 00:00:00 2001 From: Konrad Krasocki <104936644+KodeRad@users.noreply.github.com> Date: Mon, 25 Nov 2024 09:16:07 +0100 Subject: [PATCH] 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 --- ...ro-api-endpoint-explorer-starter-page.html | 98 ++++++++++++------- 1 file changed, 61 insertions(+), 37 deletions(-) diff --git a/soapui/src/main/resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html b/soapui/src/main/resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html index 4f726c8898..e67593908b 100644 --- a/soapui/src/main/resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html +++ b/soapui/src/main/resources/com/eviware/soapui/explorer/soapui-pro-api-endpoint-explorer-starter-page.html @@ -1,5 +1,6 @@ - + + @@ -26,8 +27,6 @@ }, 1000); - - @@ -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(); + }); + }); + }); @@ -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,7 +931,8 @@ } .dontShowLabel { - display: block; + display: flex; + align-items: center; } .dontShowLabel, #dontShow { @@ -918,10 +940,10 @@ } .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 @@ + EndpointExplorer
@@ -982,8 +1005,9 @@
  • Authentication - & Headers + onclick="inspectorCallback.exploreAPIClickAuthHeadersTab();return false;"> + Authentication & Headers +