T190 tooltip added
This commit is contained in:
		
							
								
								
									
										28
									
								
								.idea/workspace.xml
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										28
									
								
								.idea/workspace.xml
									
									
									
										generated
									
									
									
								
							| @@ -20,28 +20,11 @@ | ||||
|   </component> | ||||
|   <component name="ChangeListManager"> | ||||
|     <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 beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/icons8-cancel-64.png" beforeDir="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/OlderVersion/static/img/icons8-plus-48.png" beforeDir="false" /> | ||||
|       <change beforePath="$PROJECT_DIR$/src/main/resources/OlderVersion/static/img/update-button.png" beforeDir="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" /> | ||||
|       <change afterPath="$PROJECT_DIR$/src/main/resources/static/css/tooltip.css" afterDir="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/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/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/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" /> | ||||
|     </list> | ||||
|     <option name="SHOW_DIALOG" value="false" /> | ||||
|     <option name="HIGHLIGHT_CONFLICTS" value="true" /> | ||||
| @@ -334,6 +317,7 @@ | ||||
|       <workItem from="1612777983977" duration="14203000" /> | ||||
|       <workItem from="1612868404302" duration="13841000" /> | ||||
|       <workItem from="1613384221052" duration="5569000" /> | ||||
|       <workItem from="1613557608694" duration="9724000" /> | ||||
|     </task> | ||||
|     <task id="LOCAL-00077" summary="testing jenkins docker"> | ||||
|       <created>1601453886631</created> | ||||
|   | ||||
| @@ -1,5 +1,5 @@ | ||||
| #container { | ||||
|     width: 1330px; | ||||
|     width: 1400px; | ||||
|     margin-left: auto; | ||||
|     margin-right: auto; | ||||
|     min-height: 1900px; | ||||
| @@ -235,6 +235,13 @@ | ||||
|  | ||||
| } | ||||
|  | ||||
| #mockIntroTip { | ||||
|     margin-top: 10px; | ||||
|     text-align: justify; | ||||
|     padding: 5px; | ||||
|     margin-bottom: 10px; | ||||
| } | ||||
|  | ||||
| .btn-function-table { | ||||
|     font-size: 24px; | ||||
|     font-weight: 700; | ||||
| @@ -259,3 +266,4 @@ | ||||
|     color:indianred; | ||||
| } | ||||
|  | ||||
|  | ||||
|   | ||||
							
								
								
									
										49
									
								
								src/main/resources/static/css/tooltip.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								src/main/resources/static/css/tooltip.css
									
									
									
									
									
										Normal 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; | ||||
| } | ||||
| @@ -51,24 +51,35 @@ function showHeaders(){ | ||||
|     $('#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').mouseleave(function(){$('#messageLinkTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block'); showTip();}); | ||||
| $('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block'); showTip();}); | ||||
| $('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block'); showTip();}); | ||||
| $('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block'); showTip();}); | ||||
| $('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block'); showTip();}); | ||||
| $('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();}); | ||||
| $('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
| $('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();}); | ||||
| $('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();}); | ||||
|  | ||||
|   | ||||
| @@ -4,7 +4,7 @@ | ||||
|     <title>R11 MockedServices</title> | ||||
|     <meta charset="utf-8"> | ||||
|     <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="preconnect" href="https://fonts.gstatic.com"> | ||||
|     <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> | ||||
|         </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="toolHeader"><h2>Tip:</h2></div> | ||||
|                 <div> | ||||
|                     <div id="messageLinkTip" class="collapsible" style="display: none;"> | ||||
|                         <!--style="display: none;"--> | ||||
|                         <h4>The link</h4> | ||||
|                         <p>It's url where you need send your request</p> | ||||
|                     </div> | ||||
|                     <div id="httpStatusTip" class="collapsible" style="display: none;"> | ||||
|                         <h4>Http status</h4> | ||||
|                         <p>Set http status for server response. 200 OK is default.</p> | ||||
|                     </div> | ||||
|                     <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> | ||||
|                     </div> | ||||
|                     <div id="bodyEditorTip" class="collapsible" style="display: none;"> | ||||
|                         <h4>Body</h4> | ||||
|                         <p>Text placed in this field will be displayed as response body</p> | ||||
|                     </div> | ||||
|                     <div id="headersTabTip" class="collapsible" style="display: none;"> | ||||
|                         <h4>Headers</h4> | ||||
|                         <p>Set headers for your messages.</p> | ||||
|                     </div> | ||||
|                     <div id="historyTabTip" class="collapsible" style="display: none;"> | ||||
|                         <h4>History</h4> | ||||
|                         <p>Check history of this message</p> | ||||
|                     </div> | ||||
|                     <div id="newHeaderTip" class="collapsible" style="display: none;"> | ||||
|                         <h4>Next header value</h4> | ||||
|                         <p>Type values and press enter to add new header.</p> | ||||
|                     </div> | ||||
|                 </div> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user