T137 draft structure for tooltip added
This commit is contained in:
4
.idea/workspace.xml
generated
4
.idea/workspace.xml
generated
@@ -20,11 +20,9 @@
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
|
||||
<change afterPath="$PROJECT_DIR$/src/main/resources/static/css/wojtas.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/java/com/release11/klaus/controller/EventController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/com/release11/klaus/controller/EventController.java" 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/datatransfer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/datatransfer.js" 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" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#container {
|
||||
width: 950px;
|
||||
width: 1330px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-height: 1900px;
|
||||
|
||||
43
src/main/resources/static/css/wojtas.css
Normal file
43
src/main/resources/static/css/wojtas.css
Normal file
@@ -0,0 +1,43 @@
|
||||
p#tooltipText {
|
||||
/* /* padding: 20px; */
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
div#tooltip {
|
||||
border-radius: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 160px;
|
||||
border: 2px solid rgba(155, 165, 160, 0.507);
|
||||
float: right;
|
||||
width: 40%;
|
||||
/* width: 70%; */
|
||||
/* background-color: rgb(68, 158, 116); */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
background-color: rgba(155, 165, 160, 0.507);
|
||||
color: rgb(44, 44, 44);
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.active, .collapsibleActive:hover {
|
||||
background-color: rgb(85, 85, 85);
|
||||
}
|
||||
|
||||
.collapsibleData {
|
||||
padding: 0 18px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
@@ -52,4 +52,3 @@ function showHeaders(){
|
||||
}
|
||||
|
||||
|
||||
//TODO: Add animation for Headers and History
|
||||
@@ -27,7 +27,7 @@
|
||||
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
|
||||
<div id="link">
|
||||
<p class="label">Your link</p>
|
||||
<div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</div>
|
||||
<div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</span></div>
|
||||
</div>
|
||||
<div id="msgBody">
|
||||
<div id="typeSelection">
|
||||
@@ -80,6 +80,33 @@
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tooltip">
|
||||
<div id="toolHeader"><h2>Tip:</h2></div>
|
||||
<div>
|
||||
<div id="messageLinkTip" class="collapsible">
|
||||
<!--style="display: none;"-->
|
||||
<p>It's url where you need send your request</p>
|
||||
</div>
|
||||
<div id="httpStatusTip" class="collapsible" style="display: none;">
|
||||
<p>Set http status for server response. 200 OK is default.</p>
|
||||
</div>
|
||||
<div id="typeSelectorTip" class="collapsible" style="display: none;">
|
||||
<p>Select content type of body. Set plain text if data has no format.</p>
|
||||
</div>
|
||||
<div id="bodyEditorTip" class="collapsible" style="display: none;">
|
||||
<p>Text placed in this field will be displayed as response body</p>
|
||||
</div>
|
||||
<div id="headersTip" class="collapsible" style="display: none;">
|
||||
<p>Set headers for your messages.</p>
|
||||
</div>
|
||||
<div id="historyTip" class="collapsible" style="display: none;">
|
||||
<p>Check history of this message</p>
|
||||
</div>
|
||||
<div id="newHeaderTip" class="collapsible" style="display: none;">
|
||||
<p>Type values and press enter to add new header.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user