R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Polished styling of REST Mock

Browse Source
This commit is contained in:
Adam Bem
2023-06-27 11:31:25 +02:00
parent ba55773c47
commit b4d9b73f78
7 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Frontend/src/components/mock/HeadersComponent.vue
View File

@@ -20,7 +20,7 @@ function isHeaderEssential(headerName : string){
}
function setEssentialHeaderStyle(headerName : string){
return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
return isHeaderEssential(headerName) ? "inactive-button" : "tool-button";
}
function deleteHeader(index : string){
@@ -42,21 +42,22 @@ function addNewHeader(name : string, value : string){
</script>
<template>
<div class="w-full gap-4 flex">
<div class="w-full">Header name</div>
<div class="w-full">Header value</div>
<div class="w-1/5"></div>
</div>
<div class="flex flex-col gap-4">
<div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
<div class="flex flex-row gap-9">
<div class="w-full">Header name</div>
<div class="w-full">Header value</div>
<div class="w-52 px-4"></div>
</div>
<div class="flex flex-row gap-9" v-for="(item, index) in headerData" :key="index">
<input type="text" :value="index" class="text-field" />
<input type="text" :value="item" class="text-field" />
<button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
<button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
</div>
<div class="flex gap-9 flex-row">
<div class="flex flex-row gap-9">
<input type="text" v-model="newHeaderName" class="text-field" />
<input type="text" v-model="newHeaderValue" class="text-field" />
<button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
<button @click="addNewHeader(newHeaderName, newHeaderValue)" class="tool-button w-56">Add</button>
</div>
</div>
</template>

6
Frontend/src/components/mock/HistoryComponent.vue
View File

@@ -33,8 +33,8 @@ function showHeaders(headers: object, index: number){
<template>
<div class="w-full xl:w-5/12 flex flex-col gap-y-4">
<HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
<BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>
<HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
<BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>
</div>
</template>

4
Frontend/src/components/mock/HistoryRecords.vue
View File

@@ -52,9 +52,9 @@ function refreshHistory(){
<tr v-for="(item , index) in historyRecords" :key="index">
<td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
<td> {{ item.httpMethod }} </td>
<td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
<td> <button @click="showHeaders(item.headers, index)" class="underline">Show Headers</button> </td>
<td>
<button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button>
<button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)" class="underline">Show Body</button>
<span v-else>Empty Body</span>
</td>
</tr>

13
Frontend/src/components/mock/RestMockMessageComponent.vue
View File

@@ -39,17 +39,18 @@ function putDataInFields(data: mockedMessageData){
</script>
<template>
<div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
<div>
<label for="link">Link</label><br/>
<div class="flex gap-4">
<div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
<div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
<div class="flex flex-col w-full">
<label for="link">Link</label><br/>
<div class="p-2 w-full border-slate-400 border-2 rounded-lg">
<a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
</div>
<SaveComponent v-bind:message-data="messageData"></SaveComponent>
</div>
<SaveComponent v-bind:message-data="messageData"></SaveComponent>
</div>
<div class="flex flex-row w-full gap-64">
<div class="flex flex-col md:flex-row w-full gap-4 md:gap-36">
<div class="w-full">
<label for="contentType">Content Type</label><br/>
<input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>

2
Frontend/src/components/mock/SaveComponent.vue
View File

@@ -38,7 +38,7 @@ function hideToast(){
</script>
<template>
<button @click="prepareAndSendData()" class="w-2/12 tool-button">Save</button>
<button @click="prepareAndSendData()" class="tool-button w-full md:w-32">Save</button>
<div class="fixed bottom-5 right-12">
<MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>

6
Frontend/src/style.css
View File

@@ -2,8 +2,12 @@
@tailwind components;
@tailwind utilities;
.inactive-button {
@apply py-2.5 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
}
.tool-button {
@apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-400 to-sky-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
@apply hover:brightness-110 py-2.5 px-4 h-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
}
.text-field {

2
Frontend/src/views/RestMockView.vue
View File

@@ -6,7 +6,7 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
<template>
<div class="flex flex-col xl:flex-row gap-6 w-full overflow-hidden h-full">
<div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-scroll overflow-x-hidden h-full">
<RestMockMessageComponent></RestMockMessageComponent>
<HistoryComponent></HistoryComponent>
</div>