From 361a50a4a99273896cfddd04dc5254cd9fac5ac1 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Tue, 6 Apr 2021 12:59:25 +0200
Subject: [PATCH] Added tips and returned its functionallity

---
 .../resources/static/css/commons/r11form.css  |  3 -
 src/main/resources/static/html/mock.html      | 75 +++++++++++++++----
 src/main/resources/static/js/uianimation.js   |  6 +-
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 003b8b4..9ead030 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -29,9 +29,6 @@
 }
 
 .tooltip-window .tip {
-    width: 80%;
-    background: gray;
-    
 }
 
 .bordered-field {
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 81a78b3..23699ff 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -26,8 +26,8 @@
                     </div>
                     <!-- link -->
                     <div>
-                        <label for="message-link" class="block-display">Link</label>
-                        <input id="message-link" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
+                        <label for="messageLink" class="block-display">Link</label>
+                        <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
                     </div>
                     <div class="display-space-between max-width">
                         <!-- status and type -->
@@ -71,23 +71,32 @@
                     <div class="max-width with-padding">
                         <!-- tab menu -->
                         <div class="tabmenu medium-vertical-margin">
-                            <button class="tabitem active clickable-text big-font">Headers</button>
-                            <button class="tabitem clickable-text big-font">History</button>
+                            <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
+                            <button id="historyTab" class="tabitem clickable-text big-font">History</button>
                         </div>
                         <!-- container -->
                         <div class="medium-vertical-margin">
                             <!-- headers -->
                             <div class="medium-vertical-margin tabcontent centered-content">
                                 <table class="table-map">
+                                    <thead>
+                                        <tr>
+                                            <th>Name</th>
+                                            <th>Value</th>
+                                            <th></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td><input class="key" value="basic value"></td>
+                                            <td><input value="basic value"></td>
+                                            <td><button class="deletion-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        </tr>
+                                    </tbody>
                                     <tr>
-                                        <th>Name</th>
-                                        <th>Value</th>
-                                        <th></th>
-                                    </tr>
-                                    <tr>
-                                        <td><input class="key" value="basic value"></td>
-                                        <td><input value="basic value"></td>
-                                        <td><button class="deletion-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        <td><input id="headerKeyInput" placeholder="name"></td>
+                                        <td><input id="headerValueInput" placeholder="value"></td>
+                                        <td><button class="clickable-text"><i class="icon-plus"></i></button></td>
                                     </tr>
                                 </table>
                             </div>
@@ -168,9 +177,45 @@
                 <h2>Help</h2>
                 <p>When cursor hovers over an item. It's description is displayed below.</p>
                 <div class="large-vertical-margin">
-                    <div>
-                        <h3>Example</h3>
-                        <p>Here should be instruction for given field.</p>
+                    <div id="messageLinkTip" class="tip">
+                        <h3>Link</h3>
+                        <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="httpStatusTip" class="tip">
+                        <h3>Http Status</h3>
+                        <p>Value of the field is corresponding to status value that server will return.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="typeSelectorTip" class="tip">
+                        <h3>Content Type</h3>
+                        <p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="bodyEditorTip" class="tip">
+                        <h3>Body</h3>
+                        <p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="headersTabTip" class="tip">
+                        <h3>Headers</h3>
+                        <p>Content of this tab allows to set and modify headers that will be included in the response.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="historyTabTip" class="tip">
+                        <h3>History</h3>
+                        <p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="newHeaderTip" class="tip">
+                        <h3>New header</h3>
+                        <p>Insert value in the field and press the plus icon to add a new header to the message.</p>
                     </div>
                 </div>
             </div>
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 97a88f4..dd13b87 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -65,13 +65,13 @@ function focusOutTip(element){
 
 function hidTip(element){
     if(focusedField) return;
-    $('#'+element).fadeOut(100);
+    $('#'+element).removeClass('active');
 }
 
 function showTip(element){
     if(focusedField) return;
-    $('.collapsible').fadeOut(0);
-    $('#'+element).fadeIn(100);
+    $('.tip').removeClass('active');
+    $('#'+element).addClass('active');
 }
 
 $('#messageLink').mouseover(function(){showTip('messageLinkTip')});