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

Stylized new editor (#238)

Browse Source 
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #238
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Adam Bem
2023-06-30 11:56:01 +02:00
parent e5844a913f
commit 99ea6367e8
11 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Frontend/src/components/CodeEditorComponent.vue
View File

@@ -55,10 +55,10 @@ import {html} from '@codemirror/lang-html'
</script>
<template>
<div class="editor h-full overflow-scroll">
<div class="editor w-full max-w-full h-full overflow-scroll">
<codemirror
style="height: 100%; padding:0.5rem ; border-radius: 0.5rem"
style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
:model-value="code"
@update:model-value="dataUpdated"
:extensions="extensions"

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

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

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

@@ -44,7 +44,7 @@ function showUpdatedCode(newCode : string){
</script>
<template>
<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 flex-none 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/>

7
Frontend/src/components/xml/XmlInputFieldComponent.vue
View File

@@ -42,16 +42,15 @@ function canBeFormatted() {
</script>
<template>
<div class="flex flex-col w-full h-1/2">
<div class="flex place-content-between w-full pr-2 items-center m-2">
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
<div class="flex place-content-between w-full items-center">
<span class="dark:text-white">{{ stylizedName }}</span>
<div class="flex space-x-2">
<div class="flex space-x-2 pb-2">
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button>
</div>
</div>
<!-- <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea> -->
<CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
</div>
</template>

7
Frontend/src/components/xml/XmlOutputFieldComponent.vue
View File

@@ -129,8 +129,8 @@ function emitVersionChange() {
</script>
<template>
<div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
<div class="flex place-content-between w-full items-center m-2">
<div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2">
<div class="flex place-content-between w-full items-center pb-2">
<span class="dark:text-white">Result:</span>
<div class="flex space-x-2">
<select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
@@ -143,8 +143,7 @@ function emitVersionChange() {
<button class="tool-button" @click="process">Process</button>
</div>
</div>
<div class="text-field overflow-scroll h-full w-full">
<!-- <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre> -->
<div class="overflow-scroll h-full w-full">
<CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
</div>

2
Frontend/src/components/xml/tooltips/TooltipComponent.vue
View File

@@ -38,7 +38,7 @@ function toggleTooltips() {
</script>
<template>
<div :class="{ 'w-4/12' : !areTooltipsHidden }" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
<div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
<button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
</button>