brian/batch-color-converter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding a click to copy function, needs indication that it was successful

Browse Source
This commit is contained in:
Brian
2021-08-03 14:37:36 -06:00
parent bb060ea691
commit 772913e702
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.php
View File

@ -53,10 +53,12 @@
</head>
<body class="font-open-sans antialiased">
<div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
<div class="w-1/2">
<div class="w-3/5">
<h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>
<button type="button" class="w-full py-4 uppercase font-bold text-white bg-pink-600 rounded my-8" v-on:click="batchConvert()">Convert</button>
<p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>
<button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>
<div class="flex flex-row mb-8">
<div class="flex w-1/3 mr-4">
@ -78,9 +80,9 @@
<td v-show="!color.error">
<div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
</td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.hex }}</td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.rgb }}</td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.hsl }}</td>
<td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
<td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
<td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
</tr>
</tbody>
</table>