R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

T190 tooltip added

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-02-17 16:02:11 +01:00
parent 96d912fb87
commit ca8e642e94
5 changed files with 93 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.idea/workspace.xml generated
View File

@@ -20,28 +20,11 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment=""> <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/css/styles.css" beforeDir="false" /> <change afterPath="$PROJECT_DIR$/src/main/resources/static/css/tooltip.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/icons8-cancel-64.png" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/icons8-down-arrow-40.png" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/src/main/resources/static/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/main.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/icons8-plus-48.png" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/update-button.png" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/src/main/resources/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/js/etrackPaggination.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/js/main.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/js/paggination.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/templates/etrack.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/templates/index.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/img/icons8-cancel-64.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/img/icons8-down-arrow-40.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/img/icons8-plus-48.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/img/update-button.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/js/jquery.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/main/resources/static/json/draft.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/KlausApplicationTests.java" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/config/RedisConfigTest.java" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/controller/KlausControllerTest.java" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/controller/KlausMvcControllerTest.java" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/repository/EventRepositoryImplTest.java" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/test/java/com/release11/klaus/service/KlausServiceImplTest.java" beforeDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -334,6 +317,7 @@
<workItem from="1612777983977" duration="14203000" /> <workItem from="1612777983977" duration="14203000" />
<workItem from="1612868404302" duration="13841000" /> <workItem from="1612868404302" duration="13841000" />
<workItem from="1613384221052" duration="5569000" /> <workItem from="1613384221052" duration="5569000" />
<workItem from="1613557608694" duration="9724000" />
</task> </task>
<task id="LOCAL-00077" summary="testing jenkins docker"> <task id="LOCAL-00077" summary="testing jenkins docker">
<created>1601453886631</created> <created>1601453886631</created>

10
src/main/resources/static/css/main.css
View File

@@ -1,5 +1,5 @@
#container { #container {
width: 1330px; width: 1400px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-height: 1900px; min-height: 1900px;
@@ -235,6 +235,13 @@
} }
#mockIntroTip {
margin-top: 10px;
text-align: justify;
padding: 5px;
margin-bottom: 10px;
}
.btn-function-table { .btn-function-table {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
@@ -259,3 +266,4 @@
color:indianred; color:indianred;
} }

49
src/main/resources/static/css/tooltip.css Normal file
View File

@@ -0,0 +1,49 @@
p#tooltipText {
/* /* padding: 20px; */
width: 200px;
height: 150px;
}
div#tooltip {
border-radius: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
margin-top: 20px;
border: 2px solid rgba(155, 165, 160, 0.507);
width: 350px;
/* width: 70%; */
/* background-color: rgb(68, 158, 116); */
min-height: 591px;
}
.collapsible {
/*background-color: rgba(155, 165, 160, 0.507);*/
color: rgb(44, 44, 44);
cursor: pointer;
padding: 5px;
width: 100%;
/*border: none;*/
/*outline: none;*/
/*max-height: 0;*/
/*overflow: hidden;*/
/*transition: max-height 0.2s ease-out;*/
}
/*.active, .collapsibleActive:hover {*/
/* background-color: rgb(85, 85, 85);*/
/*}*/
.collapsibleData {
padding: 0 18px;
background-color: #f1f1f1;
}
.fixed {
position: fixed;
/*top: 50%;*/
left: 50%;
margin-top: 150px;
margin-left: 300px;
}

15
src/main/resources/static/js/uianimation.js
View File

@@ -51,24 +51,35 @@ function showHeaders(){
$('#headersTab').off('click'); $('#headersTab').off('click');
} }
function hidTip(){$('#toolTipContent').css('display', 'none');} function hidTip(){
// $('#toolTipContent').css('display', 'none');
}
function showTip(){$('#toolTipContent').css('display', 'block');} function showTip(){
// $('#toolTipContent').css('display', 'block');
}
$('#messageLink').mouseover(function(){$('#messageLinkTip').css('display', 'block'); showTip();}); $('#messageLink').mouseover(function(){$('#messageLinkTip').css('display', 'block'); showTip();});
$('#messageLink').mouseleave(function(){$('#messageLinkTip').css('display', 'none'); hidTip();}); $('#messageLink').mouseleave(function(){$('#messageLinkTip').css('display', 'none'); hidTip();});
$('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block'); showTip();}); $('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block'); showTip();});
$('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none'); hidTip();}); $('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none'); hidTip();});
$('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block'); showTip();}); $('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block'); showTip();});
$('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none'); hidTip();}); $('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none'); hidTip();});
$('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block'); showTip();}); $('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block'); showTip();});
$('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none'); hidTip();}); $('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none'); hidTip();});
$('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block'); showTip();}); $('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block'); showTip();});
$('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none'); hidTip();}); $('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none'); hidTip();});
$('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block'); showTip();}); $('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block'); showTip();});
$('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none'); hidTip();}); $('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none'); hidTip();});
$('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();}); $('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
$('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();}); $('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
$('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();}); $('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
$('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();}); $('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});

19
src/main/resources/templates/mock.html
View File

@@ -4,7 +4,7 @@
<title>R11 MockedServices</title> <title>R11 MockedServices</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/css/wojtas.css" type="text/css">--> <link rel="stylesheet" href="/css/tooltip.css" type="text/css">
<link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/> <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
@@ -81,30 +81,43 @@
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
</div> </div>
<div id="tooltip"> <div id="tooltip" class="fixed">
<div id="mockIntroTip">
<h2>What's mock service?</h2>
<p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
<p>Hover over an item to see description!</p>
<br>
<h2>Help:</h2>
</div>
<div id="toolTipContent" style="display: none;"> <div id="toolTipContent" style="display: none;">
<div id="toolHeader"><h2>Tip:</h2></div>
<div> <div>
<div id="messageLinkTip" class="collapsible" style="display: none;"> <div id="messageLinkTip" class="collapsible" style="display: none;">
<!--style="display: none;"--> <!--style="display: none;"-->
<h4>The link</h4>
<p>It's url where you need send your request</p> <p>It's url where you need send your request</p>
</div> </div>
<div id="httpStatusTip" class="collapsible" style="display: none;"> <div id="httpStatusTip" class="collapsible" style="display: none;">
<h4>Http status</h4>
<p>Set http status for server response. 200 OK is default.</p> <p>Set http status for server response. 200 OK is default.</p>
</div> </div>
<div id="typeSelectorTip" class="collapsible" style="display: none;"> <div id="typeSelectorTip" class="collapsible" style="display: none;">
<h4>Content type</h4>
<p>Select content type of body. Set plain text if data has no format.</p> <p>Select content type of body. Set plain text if data has no format.</p>
</div> </div>
<div id="bodyEditorTip" class="collapsible" style="display: none;"> <div id="bodyEditorTip" class="collapsible" style="display: none;">
<h4>Body</h4>
<p>Text placed in this field will be displayed as response body</p> <p>Text placed in this field will be displayed as response body</p>
</div> </div>
<div id="headersTabTip" class="collapsible" style="display: none;"> <div id="headersTabTip" class="collapsible" style="display: none;">
<h4>Headers</h4>
<p>Set headers for your messages.</p> <p>Set headers for your messages.</p>
</div> </div>
<div id="historyTabTip" class="collapsible" style="display: none;"> <div id="historyTabTip" class="collapsible" style="display: none;">
<h4>History</h4>
<p>Check history of this message</p> <p>Check history of this message</p>
</div> </div>
<div id="newHeaderTip" class="collapsible" style="display: none;"> <div id="newHeaderTip" class="collapsible" style="display: none;">
<h4>Next header value</h4>
<p>Type values and press enter to add new header.</p> <p>Type values and press enter to add new header.</p>
</div> </div>
</div> </div>