From ca8e642e945491bfb5c6403bd398117d4e6fff95 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Wed, 17 Feb 2021 16:02:11 +0100
Subject: [PATCH] T190 tooltip added

---
 .idea/workspace.xml                         | 28 +++---------
 src/main/resources/static/css/main.css      | 10 ++++-
 src/main/resources/static/css/tooltip.css   | 49 +++++++++++++++++++++
 src/main/resources/static/js/uianimation.js | 15 ++++++-
 src/main/resources/templates/mock.html      | 19 ++++++--
 5 files changed, 93 insertions(+), 28 deletions(-)
 create mode 100644 src/main/resources/static/css/tooltip.css

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index af46c4b..61f6b73 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -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>
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 1f7876b..758b9aa 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -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;
 }
 
+
diff --git a/src/main/resources/static/css/tooltip.css b/src/main/resources/static/css/tooltip.css
new file mode 100644
index 0000000..e9f6cbd
--- /dev/null
+++ b/src/main/resources/static/css/tooltip.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 9071cad..5724f65 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -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();});
 
diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html
index cb4018f..77a150b 100644
--- a/src/main/resources/templates/mock.html
+++ b/src/main/resources/templates/mock.html
@@ -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>