From 3d6b4c9bd8b1b80c28fde2e03576b89dfb448dc0 Mon Sep 17 00:00:00 2001
From: Sanskar Tiwari <sanskar.mk2@gmail.com>
Date: Fri, 8 Mar 2024 13:05:56 +0530
Subject: [PATCH] remove redundant class and add copied tooltip/open in new tab

---
 resources/views/components/newtab.blade.php  | 12 +++++
 resources/views/components/tooltip.blade.php | 11 ++++
 resources/views/homepage.blade.php           |  2 +-
 resources/views/partials/button.blade.php    |  2 +-
 resources/views/upload.blade.php             | 53 ++++++++++++++++----
 5 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 resources/views/components/newtab.blade.php
 create mode 100644 resources/views/components/tooltip.blade.php

diff --git a/resources/views/components/newtab.blade.php b/resources/views/components/newtab.blade.php
new file mode 100644
index 0000000..2275c29
--- /dev/null
+++ b/resources/views/components/newtab.blade.php
@@ -0,0 +1,12 @@
+<svg class="w-6 h-6 fill-primary"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <g stroke-width="0"></g>
+    <g stroke-linecap="round"
+        stroke-linejoin="round"></g>
+    <g>
+        <path fill-rule="evenodd"
+            d="M5,2 L7,2 C7.55228475,2 8,2.44771525 8,3 C8,3.51283584 7.61395981,3.93550716 7.11662113,3.99327227 L7,4 L5,4 C4.48716416,4 4.06449284,4.38604019 4.00672773,4.88337887 L4,5 L4,19 C4,19.5128358 4.38604019,19.9355072 4.88337887,19.9932723 L5,20 L19,20 C19.5128358,20 19.9355072,19.6139598 19.9932723,19.1166211 L20,19 L20,17 C20,16.4477153 20.4477153,16 21,16 C21.5128358,16 21.9355072,16.3860402 21.9932723,16.8833789 L22,17 L22,19 C22,20.5976809 20.75108,21.9036609 19.1762728,21.9949073 L19,22 L5,22 C3.40231912,22 2.09633912,20.75108 2.00509269,19.1762728 L2,19 L2,5 C2,3.40231912 3.24891996,2.09633912 4.82372721,2.00509269 L5,2 L7,2 L5,2 Z M21,2 L21.081,2.003 L21.2007258,2.02024007 L21.2007258,2.02024007 L21.3121425,2.04973809 L21.3121425,2.04973809 L21.4232215,2.09367336 L21.5207088,2.14599545 L21.5207088,2.14599545 L21.6167501,2.21278596 L21.7071068,2.29289322 L21.7071068,2.29289322 L21.8036654,2.40469339 L21.8036654,2.40469339 L21.8753288,2.5159379 L21.9063462,2.57690085 L21.9063462,2.57690085 L21.9401141,2.65834962 L21.9401141,2.65834962 L21.9641549,2.73400703 L21.9641549,2.73400703 L21.9930928,2.8819045 L21.9930928,2.8819045 L22,3 L22,3 L22,9 C22,9.55228475 21.5522847,10 21,10 C20.4477153,10 20,9.55228475 20,9 L20,5.414 L13.7071068,11.7071068 C13.3466228,12.0675907 12.7793918,12.0953203 12.3871006,11.7902954 L12.2928932,11.7071068 C11.9324093,11.3466228 11.9046797,10.7793918 12.2097046,10.3871006 L12.2928932,10.2928932 L18.584,4 L15,4 C14.4477153,4 14,3.55228475 14,3 C14,2.44771525 14.4477153,2 15,2 L21,2 Z">
+        </path>
+    </g>
+</svg>
diff --git a/resources/views/components/tooltip.blade.php b/resources/views/components/tooltip.blade.php
new file mode 100644
index 0000000..753e32a
--- /dev/null
+++ b/resources/views/components/tooltip.blade.php
@@ -0,0 +1,11 @@
+<div {{ $attributes }}
+    class="px-2 py-1 rounded text-xs cursor-default z-50 absolute -top-8 left-1/2 bg-primary text-white"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0 scale-90"
+    x-transition:enter-end="opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-300"
+    x-transition:leave-start="opacity-100 scale-100"
+    x-transition:leave-end="opacity-0 scale-90"
+    x-cloak>
+    Copied
+</div>
diff --git a/resources/views/homepage.blade.php b/resources/views/homepage.blade.php
index 152af5a..d6078b1 100644
--- a/resources/views/homepage.blade.php
+++ b/resources/views/homepage.blade.php
@@ -109,7 +109,7 @@
 					</p>
 
 					<select
-						class="w-full py-4 text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
+						class="w-full text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
 						name="expiry"
 						id="upload-expiry"
 						x-model="currentBundle"
diff --git a/resources/views/partials/button.blade.php b/resources/views/partials/button.blade.php
index 8a8b552..6d5db71 100644
--- a/resources/views/partials/button.blade.php
+++ b/resources/views/partials/button.blade.php
@@ -3,7 +3,7 @@
 @endif
 
 <button
-    class="inline-flex items-center w-full py-1 rounded bg-primary hover:bg-primary-light text-center text-white text-base text-center"
+    class="inline-flex items-center w-full py-1 rounded bg-primary hover:bg-primary-light text-white text-base text-center"
     x-on:click="{{ $action }}()"
 >
     <p class="w-10/12 {{ $way == 'left' ? 'order-last' : '' }}">{{ $text }}</p>
diff --git a/resources/views/upload.blade.php b/resources/views/upload.blade.php
index 9c3e024..37bb7c4 100644
--- a/resources/views/upload.blade.php
+++ b/resources/views/upload.blade.php
@@ -22,6 +22,10 @@
 			completed: false,
 			step: 0,
 			maxFiles: maxFiles,
+			copynotify: {
+				preview: false,
+				direct_download: false,
+			},
 			modal: {
 				show: false,
 				text: 'test'
@@ -340,12 +344,33 @@
 			},
 
 			selectCopy: function(el) {
-				el.select();
-
 				if (navigator.clipboard) {
 					navigator.clipboard.writeText(el.value)
 					.then(() => {
-						//alert("Copied to clipboard");
+						// check if the element is preview or direct download
+						if (el.id == 'copy-preview') {
+							// check if its already set to true
+							if (this.copynotify.preview == false) {
+								this.copynotify.preview = true
+								// timeout in 2s
+								setTimeout(() => {
+									// if still true, set it to false
+									if (this.copynotify.preview == true) {
+										this.copynotify.preview = false
+									}
+								}, 2000)
+							}
+						}
+						else if (el.id == 'copy-direct-download') {
+							if (this.copynotify.direct_download == false) {
+								this.copynotify.direct_download = true
+								setTimeout(() => {
+									if (this.copynotify.direct_download == true) {
+										this.copynotify.direct_download = false
+									}
+								}, 2000)
+							}
+						}
 					});
 				}
 			},
@@ -629,28 +654,36 @@
 
 				{{-- STEP 3 --}}
 				<template x-if="step == 3">
-					<div class="" x-show="step == 3">
+					<div  x-show="step == 3">
 						<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
 							@lang('app.download-links')
 						</h2>
 
 						{{-- Preview link --}}
-						<div class="flex flex-wrap items-center">
+						<div class="flex flex-wrap items-center relative">
 							<div class="w-1/3 text-right px-2">
 								@lang('app.preview-link')
 							</div>
-							<div class="w-2/3 shadow">
-								<input x-model="bundle.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+							<x-tooltip x-show="copynotify.preview" x-on:click.away="copynotify.preview = false" />
+							<div class="w-2/3 shadow flex items-center">
+								<input id="copy-preview" x-model="bundle.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+								<a class="p-1" title="Open in a new Tab" :href="bundle.preview_link" target="_blank">
+									<x-newtab />
+								</a>
 							</div>
 						</div>
 
 						{{-- Direct download link --}}
-						<div class="flex flex-wrap items-center mt-5">
+						<div class="flex flex-wrap items-center mt-5 relative">
 							<div class="w-1/3 text-right px-2">
 								@lang('app.direct-link')
 							</div>
-							<div class="w-2/3 shadow">
-								<input x-model="bundle.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+							<x-tooltip x-show="copynotify.direct_download" x-on:click.away="copynotify.direct_download = false" />
+							<div class="w-2/3 flex items-center shadow">
+								<input id="copy-direct-download" x-model="bundle.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+								<a class="p-1" title="Open in a new Tab" :href="bundle.download_link" target="_blank">
+									<x-newtab />
+								</a>
 							</div>
 						</div>