Goodbye, Bootstrap & added a button component

1 files changed, 166 insertions, 49 deletions

diff --git a/packages/client/src/components/RepositoryCloneDropdown.vue b/packages/client/src/components/RepositoryCloneDropdown.vue
index ed565ef..a46d569 100644
--- a/packages/client/src/components/RepositoryCloneDropdown.vue
+++ b/packages/client/src/components/RepositoryCloneDropdown.vue
@@ -1,36 +1,41 @@
 <template>
-	<div id="clone" class="d-flex align-items-center">
-		<div class="dropdown">
-			<button
-				class="btn btn-primary btn-sm dropdown-toggle" type="button"
-				id="dropdownMenuButton1" data-bs-toggle="dropdown"
-				data-bs-auto-close="outside" aria-expanded="false">
-				Clone
-			</button>
-			<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
-				<li class="pt-2">
-					<span class="ms-2 fs-5 fw-bold">Clone with HTTP</span>
-					<label id="clone-url-copy">
-						<input
-							type="text" :value="getURL()"
-							class="form-control form-control-sm ms-2 me-2" readonly>
-						<svg
-							xmlns="http://www.w3.org/2000/svg" height="18px"
-							viewBox="0 0 24 24" width="18px"
-							fill="#FFFFFF" @click="copyToClipboard">
-							<path d="M0 0h24v24H0z" fill="none" />
-							<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
-						</svg>
-					</label>
-				</li>
-			</ul>
+	<div id="clone">
+		<button
+			id="dropdown-button" aria-describedby="dropdown-menu"
+			type="button">
+			Clone
+		</button>
+		<div id="dropdown-menu" role="dropdown-menu">
+			<div>
+				<p id="dropdown-title" class="fs-5">
+					Clone with HTTP
+				</p>
+				<div
+					id="copied-tooltip" role="copied-tooltip"
+					class="fs-5">
+					<div id="tooltip-arrow" />
+					Copied!
+				</div>
+				<label id="clone-url-copy">
+					<input
+						type="text" :value="getURL()"
+						readonly>
+					<svg
+						xmlns="http://www.w3.org/2000/svg" height="18px"
+						viewBox="0 0 24 24" width="18px"
+						fill="#FFFFFF" @click="copyToClipboard"
+						id="copy">
+						<path d="M0 0h24v24H0z" fill="none" />
+						<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+					</svg>
+				</label>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { Tooltip } from "bootstrap/dist/js/bootstrap.esm";
-// Import Fan from "../util/sleep.worker";
+import { createPopper } from "@popperjs/core";
 
 export default {
 	name: "RepositoryCloneDropdown",
@@ -48,41 +53,74 @@ export default {
 			url_box.setSelectionRange(0, 99999);
 			document.execCommand("copy");
 
-			event.stopPropagation();
+			const copied_tooltip = document.querySelector("#copied-tooltip");
+			copied_tooltip.classList.add("show");
 
-			const exampleEl = document.getElementById("clone-url-copy").getElementsByTagName("svg")[0];
-			const tooltip = new Tooltip(exampleEl, { title: "Copied the URL", trigger: "manual" });
-			console.log(tooltip);
-			tooltip.show();
-
-			await new Promise(resolve => setTimeout(resolve, 1700));
-			tooltip.hide();
+			await new Promise(resolve => setTimeout(resolve, 2000));
+			copied_tooltip.classList.remove("show");
 		},
 		getURL() {
 			return `${window.location.protocol}//${window.location.host}/${this.repository}`;
 		}
+	},
+	mounted() {
+		const dropdown_button = document.querySelector("#dropdown-button");
+		const dropdown_menu = document.querySelector("#dropdown-menu");
+
+		const copied_tooltip = document.querySelector("#copied-tooltip");
+		const copy = document.querySelector("#copy");
+		const tooltip_arrow = document.querySelector("#tooltip-arrow");
+		createPopper(dropdown_button, dropdown_menu, {
+			placement: "bottom-end",
+			modifiers: [
+				{
+					name: "offset",
+					options: { offset: [ 0, 2 ] }
+				}
+			]
+		});
+		createPopper(copy, copied_tooltip, {
+			placement: "top",
+			modifiers: [
+				{
+					name: "offset",
+					options: { offset: [ 0, 10 ] }
+				},
+				{
+					name: "arrow",
+					options: { element: tooltip_arrow }
+				}
+			]
+		});
+
+		const clickOutsideDropdown = (event) => {
+			if(!dropdown_menu.contains(event.target) && event.target !== dropdown_button) {
+				dropdown_menu.classList.remove("show");
+				document.removeEventListener("click", clickOutsideDropdown);
+			}
+		};
+
+		dropdown_button.addEventListener("click", () => {
+			if(dropdown_menu.classList.contains("show")) {
+				dropdown_menu.classList.remove("show");
+				document.removeEventListener("click", clickOutsideDropdown);
+			} else {
+				dropdown_menu.classList.add("show");
+				document.addEventListener("click", clickOutsideDropdown);
+			}
+		});
 	}
 };
 </script>
 
 <style lang="scss" scoped>
 @use "../scss/colors";
-@import "../scss/bootstrap";
-
-$dropdown-dark-bg: lighten(#000000, 10%);
-
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/tooltip";
-
-.form-control {
-	width: auto;
-}
+@use "../scss/mixins";
+@use "../scss/fonts";
 
 #clone {
-	margin-left: auto;
-	margin-right: 40px;
+	display: flex;
+	align-items: center;
 }
 
 #clone-url-copy {
@@ -95,6 +133,14 @@ $dropdown-dark-bg: lighten(#000000, 10%);
 		display: inline-block;
 		padding-right: 30px;
 		min-height: 0;
+		background: lighten(#000000, 15%);
+		border: 1px solid lighten(#000000, 28%);
+		color: colors.$text;
+		border-radius: 2px;
+		height: 25px;
+		margin-left: 0.5rem;
+		margin-right: 0.5rem;
+		font-family: fonts.$primary;
 	}
 	svg {
 		content: "";
@@ -109,4 +155,75 @@ $dropdown-dark-bg: lighten(#000000, 10%);
 		}
 	}
 }
+
+#dropdown-button {
+	@include mixins.button;
+	padding: 3px 5px 3px 6px;
+	font-size: 15px;
+	font-family: fonts.$primary;
+	&::after {
+		display: inline-block;
+		vertical-align: 0.255em;
+		content: "";
+		border-top: 0.3em solid;
+		border-right: 0.3em solid transparent;
+		border-bottom: 0;
+		border-left: 0.3em solid transparent;
+	}
+}
+
+#dropdown-menu {
+	visibility: hidden;
+	pointer-events: none;
+	background-color: lighten(#000000, 12%);
+	opacity: 0;
+	transition:visibility 0.08s linear,opacity 0.08s linear;
+	border-radius: 5px;
+	z-index: 1000;
+	position: absolute;
+}
+
+#copied-tooltip {
+	visibility: hidden;
+	pointer-events: none;
+	position: absolute;
+	background-color: #000000;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	border-radius: 3px;
+	z-index: 99999;
+	opacity: 0;
+	transition:visibility 0.4s linear,opacity 0.4s linear;
+}
+
+.show {
+	visibility: visible !important;
+	pointer-events: all !important;
+	opacity: 1 !important;
+}
+
+#tooltip-arrow {
+	bottom: -4px;
+}
+
+#tooltip-arrow,
+#tooltip-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  z-index: -1;
+}
+
+#tooltip-arrow::before {
+  content: '';
+  transform: rotate(45deg);
+  background: #000000;
+}
+
+#dropdown-title {
+	margin-left: 0.5rem;
+	font-weight: 700;
+}
 </style>