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

Implemented first segment of new styles

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-02 15:03:38 +02:00
parent 68d4384d51
commit 0348082f9d
2 changed files with 75 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/resources/static/css/commons/r11form.css
View File

@@ -163,9 +163,10 @@
} }
.headline { .float-left {
display: flex; display: flex;
justify-content: left; justify-content: left;
width: 100%;
} }
.version-span { .version-span {
@@ -174,7 +175,7 @@
color: rgba(85,85,85,0.555); color: rgba(85,85,85,0.555);
} }
.tool-window { .block-display {
display: block; display: block;
} }
@@ -227,20 +228,36 @@
margin: 3px 0; margin: 3px 0;
} }
.medium-input { .quater-width {
width: 25%;
}
.half-width {
width: 50%; width: 50%;
} }
.small-input { .half-width.with-padding {
width: 30%; width: 45%;
} }
.large-input { .max-width {
width: 100%; width: 100%;
} }
.large-button { .max-width.with-padding {
width: 100%; width: 94%;
}
.max-height {
height: 100%;
}
.max-height.with-padding {
height: 90%;
}
.small-margins {
margin: 3%;
} }
.small-vertical-margin { .small-vertical-margin {

201
src/main/resources/static/html/mock.html
View File

@@ -3,33 +3,39 @@
<head> <head>
<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/tooltip.css" type="text/css">
<link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.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="stylesheet" href="../css/modal.css" type="text/css"> <link rel="stylesheet" href="../css/modal.css" type="text/css">
<link rel="stylesheet" href="../css/table.css" type="text/css"> <link rel="stylesheet" href="../css/commons/r11form.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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<div class="container">
<div id="container"> <div class="tool extended">
<div id="toolName">Mocked Service <span id="version">v0.0.1</span></div> <div class="tool-context">
<div id="itemData"> <div class="float-left">
<div id="basicItemData" class="articleHead">Your message</div> <h1>MockedServices <span class="version-span">v0.0.1</span></h1>
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId">0</span></div>
<div id="link">
<label for="messageLink">Link</label>
<div id="messageLink" class="field">https://www.testlink.com/doesntwork/tho</div>
</div> </div>
<div id="msgBody"> <div>
<div id="messageFields"> <!-- h2 -->
<div class="fieldFloater"> <div><h2>Your Message</h2></div>
<div> <!-- save -->
<div>
<!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
</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">
</div>
<div class="float-left">
<!-- status and type -->
<div class="medium-input block-display small-vertical-margin">
<!-- status -->
<div class="max-width with-padding small-vertical-margin">
<label for="httpStatus">Http Status</label> <label for="httpStatus">Http Status</label>
<input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion"> <input id="httpStatus" class="bordered-field max-width" type="text" value="200" list="httpStatusSuggestion">
<datalist id="httpStatusSuggestion"> <datalist id="httpStatusSuggestion">
<option value="200"> <option value="200">
<option value="300"> <option value="300">
@@ -39,9 +45,10 @@
<option value="500"> <option value="500">
</datalist> </datalist>
</div> </div>
<div id="typeSelection"> <!-- content type -->
<div class="max-width with-padding small-vertical-margin">
<label for="typeSelector">Content Type</label> <label for="typeSelector">Content Type</label>
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/> <input id="typeSelector" class="bordered-field max-width" type="text" value="application/xml" list="contentTypes">
<datalist id="contentTypes"> <datalist id="contentTypes">
<option value="application/xml"> <option value="application/xml">
<option value="application/json"> <option value="application/json">
@@ -49,145 +56,37 @@
</datalist> </datalist>
</div> </div>
</div> </div>
<div class="fieldFloater" id="functionBar"> <button class="small-margins half-width with-padding action-button active">Save</button>
<div class="buttonSpacer"></div>
<div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
<div class="buttonSpacer"></div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div> </div>
<!-- body -->
<div id="bodyEdition"> <div></div>
<label for="bodyEditor">Body:</label> <!-- show/hide -->
<textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea> <div></div>
</div> <!-- advanced -->
<div>
</div> <!-- tab menu -->
<div id="optional">&gt; show/hide advanced settings</div> <div></div>
<div id="advanced" style="display: none;"> <!-- container -->
<div id="advancedMenu"> <div>
<div id="headersTab" class="advancedMenuTabSelected">Headers</div> <!-- headers -->
<div id="historyTab" class="advancedMenuTab">History</div> <div></div>
</div> <!-- history -->
<div id="headers"> <div></div>
<table id="headerTable">
<thead>
<tr>
<td>Header</td>
<td>Value</td>
<td></td>
</tr>
</thead>
<tbody id="httpStatusValues">
</tbody>
<tfoot>
<tr>
<td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
<td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
<td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
</tr>
</tfoot>
</table>
</div>
<div id="history" style="display:none;">
<div id="historyFunction">
<div>
<label for="historyFrom">From</label>
<input type="date" name="dateFrom" id="historyFrom"/>
<input type="time" name="timeFrom" id="historyTimeFrom"/>
</div>
<div>
<label for="historyTo">To</label>
<input type="date" name="dateTo" id="historyTo"/>
<input type="time" name="dateTo" id="historyTimeTo"/>
</div>
<button id="btn-searchHistory">Search</button>
</div>
<div style="clear:both;"></div>
<div id="historyDisplay">
<table id="historyTable" class="simpleTable">
<thead>
<tr class="head">
<th>Timestamp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="tool-extention">
<!-- header -->
<div></div>
<!-- container -->
<div>
</div> </div>
<div id="selectMenu">
<div id="selectMenuContent" style="display: none;">
<div id="selectMenuHead" class="articleHead">List</div>
<div id="listItems"></div>
<div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
</div> </div>
</div> </div>
<div id="tooltip" class="fixed tooltip"> <div class="tooltip-window lite">
<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="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>
<div style="clear:both;"></div>
</div>
<div id="overlay"></div>
<div id="modal-confirm" class="modal">
<div class="header">
<div>Message saved<i class="r-exclamation"></i></div>
<button>&times;</button>
</div>
<div class="body">Your message has been successfuly saved.<br>You might view it under the link.</div>
</div>
<div id="modal-query" class="modal">
<div class="header">
<div>Unsaved data<i class="r-exclamation"></i></div>
<button>&times;</button>
</div>
<div class="body">You haven't saved your message! Any changes will be lost.<br>Do you want to continue?</div>
<div class="function">
<button>Yes</button>
<button>No</button>
</div> </div>
</div> </div>
<script type="text/javascript" src="/js/modal.js"></script> <script type="text/javascript" src="/js/modal.js"></script>