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>