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

T141 stylesheet added. Fields needs resize

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-02-19 12:35:53 +01:00
parent a3aa5969e1
commit 584c848473
4 changed files with 114 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/main/resources/static/css/common.css Normal file
View File

@@ -0,0 +1,94 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
body {
font-family: 'Nunito', sans-serif;
color: #2e3133;
font-weight: normal;
margin: 0px;
}
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238);
outline: none;
}
.tooltip{
border: 2px solid rgba(155, 165, 160, 0.507);
border-radius: 15px;
padding: 20px;
}
a, a:visited, a:active {
color: rgb(47, 125, 146);
}
a:hover{
filter: brightness(120%);
}
.field {
border: 2px solid rgba(56, 59, 58, 0.507);
border-radius: 5px;
}
button {
font-size: 20px;
text-align: center;
cursor: pointer;
border: none;
text-decoration: none;
}
input {
border-radius: 5px;
border: 1px solid rgba(155, 165, 160, 0.507);
}
button:hover{
filter: brightness(110%);
/* TODO Insert animation here! */
}
.tooltip h1{
margin: 0px;
font-size: 24px;
font-weight: bold;
}
.tooltip button{
background-color: rgba(155, 165, 160, 0.507);
color: rgb(44, 44, 44);
border-bottom: 2px solid rgba(99, 99, 99, 0.507);
padding: 14px;
}
.btn-action {
background-color: #3bc4f1;
color: white;
padding: 15px 32px;
display: inline-block;
}
.resizeVertical {
resize: vertical;
}
.resizeNone {
resize: none;
}
table{
border: none;
}
.collapsibleData {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
textField-key{
background-color: #f0f0f0;
}

61
src/main/resources/static/css/main.css
View File

@@ -2,14 +2,8 @@
width: 1400px;
margin-left: auto;
margin-right: auto;
min-height: 1900px;
min-height: 700px;
background: white;
font-family: 'Josefin Slab', serif;
}
.borderStyle {
border: 3px solid lightgray;
border-radius: 5px;
}
#toolName {
@@ -18,7 +12,6 @@
font-size: 72px;
text-align: center;
padding: 50px;
font-family: 'Acme', sans-serif;
}
.articleHead {
@@ -54,8 +47,6 @@
margin-top: 30px;
width: 720px;
height: 50px;
border-bottom: 1px solid lightgray;
}
.advancedMenuTab {
@@ -94,26 +85,11 @@
float: left;
margin-left: 10px;
margin-right: 10px;
background: gray;
color: white;
font-size: 24px;
padding: 12px;
cursor: pointer;
border-radius: 15px;
text-align: center;
}
.functionBarButton:hover {
float: left;
margin-left: 10px;
margin-right: 10px;
background: lightgray;
color: white;
font-size: 24px;
padding: 12px;
cursor: pointer;
}
#link {
width: 750px;
margin-bottom: 40px;
@@ -122,7 +98,6 @@
#messageLink {
width: 630px;
padding: 10px;
background: #f0f0f0;
font-size: 18px;
}
@@ -149,13 +124,6 @@
margin-right: 30px;
}
.label {
margin-top: 15px;
margin-bottom: 0px;
font-size: 12px;
color: lightgray;
}
.menuItem {
float: left;
width: 150px;
@@ -194,16 +162,17 @@
font-weight: 400;
}
/*TODO add style to general stylesheet. Gray if inactive red if hover*/
.btn-del-MenuItem {
float: left;
font-size: 24px;
color: red;
color: lightgray;
text-align: center;
cursor: pointer;
}
.btn-del-MenuItem:hover {
color: indianred;
color: red;
}
#headerTable {
@@ -212,7 +181,6 @@
}
.tableHead {
font-size: 24px;
width: 240px;
padding: 5px;
}
@@ -221,18 +189,6 @@
height: 20px;
padding: 5px;
width: 240px;
font-size: 18px;
background: white;
border: 1px solid lightgray;
border-radius: 5px;
}
.headerName {
background: #f0f0f0;
}
.httpStatusValue {
}
#mockIntroTip {
@@ -247,23 +203,24 @@
font-weight: 700;
}
/*TODO add to general styles. Gray if inactive green if hover*/
.btn-table-add {
color: green;
color: lightgray;
cursor: pointer;
}
.btn-table-add:hover {
color:lightgreen;
color: green;
}
.btn-table-remove {
color: red;
color: lightgray;
cursor: pointer;
}
.btn-table-remove:hover {
color:indianred;
color: red;
}

6
src/main/resources/static/js/datatransfer.js
View File

@@ -127,7 +127,7 @@ function fillHeaderTable(headers){
innerHTML += generateHeaderTable(headers);
$('#httpStatusValues').html(innerHTML);
}
//TODO: Add addRow() to generate new rows and populate them with data
function generateHeaderTable(headers){
let count = 0;
let innerHTML = '';
@@ -149,7 +149,7 @@ function generateHeaderTable(headers){
innerHTML+=
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
'<td>' +
'<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + keys[i] + '"/></td>' +
'<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
'<td>' +
'<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + values[i] + '"/></td>' +
'<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
@@ -171,7 +171,7 @@ function addRow(){
var innerHtml =
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
'<td>' +
'<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + hkey.val() +
'<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
'"/></td>' +
'<td>' +
'<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +

15
src/main/resources/templates/mock.html
View File

@@ -5,6 +5,7 @@
<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="/css/common.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">
@@ -28,15 +29,15 @@
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
<div id="link">
<label for="messageLink">Your link</label>
<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 id="messageLink" class="field">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">
<label for="httpStatus">Http Status</label>
<textarea type="text" id="httpStatus" class="fieldDefault borderStyle"></textarea>
<textarea type="text" id="httpStatus" class="field"></textarea>
<label for="typeSelector">Content Type</label>
<select id="typeSelector" class="fieldDefault borderStyle">
<select id="typeSelector" class="field">
<option value="application/xml">application/xml</option>
<option value="application/json">application/json</option>
<option value="text/xml">text/xml</option>
@@ -44,7 +45,7 @@
</div>
<div id="bodyEdition">
<label for="bodyEditor">Body:</label>
<textarea type="text" id="bodyEditor" class="fieldText borderStyle"></textarea>
<textarea type="text" id="bodyEditor" class="field resizeNone"></textarea>
</div>
</div>
@@ -58,8 +59,8 @@
<table id="headerTable">
<thead>
<tr>
<td class="tableHead">Header</td>
<td class="tableHead">Value</td>
<td>Header</td>
<td>Value</td>
<td></td>
</tr>
</thead>
@@ -101,7 +102,7 @@
<div style="clear: both;"></div>
</div>
</div>
<div id="tooltip" class="fixed">
<div id="tooltip" class="fixed tooltip">
<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>