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

Adjusted base64 encoder/decoder design

Browse Source
This commit is contained in:
Adam Bem
2023-10-31 09:42:31 +01:00
parent 5bd81aff8d
commit b782b89212
1 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Frontend/src/views/Base64EncoderView.vue
View File

@@ -35,27 +35,34 @@ function clear(){
</script>
<template>
<div id="layoutFull" class="w-full h-full flex">
<div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
<div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
<button class="tool-button" @click="clear()">Clear</button>
<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row">
<div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4 pr-4">
<div class="w-full flex flex-row place-content-between items-center">
<label class="dark:text-white text-center">Base64/Text</label>
<div class="flex flex-row items-center gap-2">
<button class="tool-button" @click="clear()">Clear</button>
<label class="text-grey-900 dark:text-white">Convert to</label>
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
</div>
</div>
<div id="codeEditor" class="w-4/5 h-1/3 ml-6 flex flex-col">
<label class="dark:text-white text-center w-full">Base64</label>
<div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
<CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
</div>
<div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
<input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm" type="file" @change="convertImageToBase64" />
<div class="flex flex-row justify-center w-full">
<div class="flex flex-col items-center w-fit" id="imageImporter">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
<input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm" type="file" @change="convertImageToBase64" />
</div>
</div>
</div>
<div id="separator" class="bg-black h-full w-1" ></div>
<div id="layoutRight" class=" ml-6 w-2/5">
<div v-on="DoshowImage">
<div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full pl-4">
<div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
<img :src="imageData"/>
</div>