Added a clone-dropdown & made multiple small frontend improvements

10 files changed, 192 insertions, 16 deletions

diff --git a/src/frontend/components/HomeHeader.vue b/src/frontend/components/HomeHeader.vue
index 8c27c93..9a0688d 100644
--- a/src/frontend/components/HomeHeader.vue
+++ b/src/frontend/components/HomeHeader.vue
@@ -18,7 +18,7 @@ export default {
 	name: "HomeHeader",
 	setup()
 	{
-		const state = reactive({ title: String, about: String });
+		const state = reactive({ title: "", about: "" });
 
 		watch(() =>
 		{
diff --git a/src/frontend/components/RepositoryCloneDropdown.vue b/src/frontend/components/RepositoryCloneDropdown.vue
new file mode 100644
index 0000000..aaef5ef
--- /dev/null
+++ b/src/frontend/components/RepositoryCloneDropdown.vue
@@ -0,0 +1,71 @@
+<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="url"
+							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>
+	</div>
+</template>
+
+<script>
+import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
+
+export default {
+	name: "RepositoryCloneDropdown",
+	props: {
+		repository: {
+			type: String,
+			required: true
+		}
+	},
+	methods: {
+		copyToClipboard(event)
+		{
+			const url_box = document.getElementById("clone").getElementsByTagName("input")[0];
+
+			url_box.select();
+			url_box.setSelectionRange(0, 99999);
+			document.execCommand("copy");
+
+			event.stopPropagation();
+
+			var exampleEl = document.getElementById('clone-url-copy').getElementsByTagName("svg")[0];
+			var tooltip = new bootstrap.Tooltip(exampleEl, { boundary: document.body, title: "Copied the URL", trigger: "manual" });
+			tooltip.show();
+
+			const worker = new Worker("../util/worker.js");
+			worker.postMessage({ work: "sleep", time: 1700 });
+
+			worker.onmessage = function()
+			{
+				tooltip.hide();
+			}
+		}
+	},
+	setup(props)
+	{
+		return { url: `${window.location.protocol}//${window.location.host}/${props.repository}` };
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/RepositoryHeader.vue b/src/frontend/components/RepositoryHeader.vue
index b074d15..61b8d20 100644
--- a/src/frontend/components/RepositoryHeader.vue
+++ b/src/frontend/components/RepositoryHeader.vue
@@ -4,7 +4,7 @@
 			<BaseBackButton to="/" />
 			<div class="d-inline ms-3">
 				<span id="title" class="fs-1">{{ title }}</span>
-				<p id="about" class="mb-3 fs-4">
+				<p id="about" class="fs-4">
 					{{ about }}
 				</p>
 			</div>
@@ -14,6 +14,7 @@
 
 <script>
 import BaseBackButton from "./BaseBackButton";
+
 import { watch, reactive, toRefs } from "vue";
 
 export default {
diff --git a/src/frontend/components/RepositoryNavbar.vue b/src/frontend/components/RepositoryNavbar.vue
index a1e1002..87a32d6 100644
--- a/src/frontend/components/RepositoryNavbar.vue
+++ b/src/frontend/components/RepositoryNavbar.vue
@@ -4,9 +4,16 @@
 			<nav class="navbar navbar-expand navbar-dark">
 				<div class="container-fluid px-0">
 					<div class="collapse navbar-collapse">
-						<ul class="navbar-nav">
-							<li v-for="(item, index) in nav_items" v-bind:key="index" class="nav-item">
-								<a class="nav-link fs-4" :class="{ active: activePage === item }" :aria-current="(activePage === item) ? 'page' : ''" :href="item">{{ item }}</a>
+						<ul class="navbar-nav align-items-center flex-fill">
+							<li
+								v-for="(item, index) in nav_items" :key="index"
+								class="nav-item">
+								<a
+									class="nav-link fs-4" :class="{ active: activePage === item }"
+									:aria-current="(activePage === item) ? 'page' : ''" :href="item">{{ item }}</a>
+							</li>
+							<li class="nav-item ms-auto me-4">
+								<RepositoryCloneDropdown :repository="repository" class="d-block" />
 							</li>
 						</ul>
 					</div>
@@ -17,15 +24,28 @@
 </template>
 
 <script>
+import RepositoryCloneDropdown from "./RepositoryCloneDropdown";
+
 export default {
 	name: "RepositoryNavbar",
 	props: {
-		activePage: String
+		activePage: {
+			type: String,
+			required: true
+		},
+		repository: {
+			type: String,
+			required: true
+		}
+	},
+	components: {
+		RepositoryCloneDropdown
 	},
 	data()
 	{
 		return {
-			nav_items: ["log", "refs", "tree"]
+			nav_items: [ "log", "refs", "tree" ],
+			url: `${window.location.protocol}//${window.location.host}/${this.repository}`
 		};
 	}
 }
diff --git a/src/frontend/scss/abstracts/_colors.scss b/src/frontend/scss/abstracts/_colors.scss
index d7c43f5..3c05336 100644
--- a/src/frontend/scss/abstracts/_colors.scss
+++ b/src/frontend/scss/abstracts/_colors.scss
@@ -1,9 +1,10 @@
 $primary: #023E8A;
-$primary-light: #0096C7;
+$primary-light: #0077b6;
 $secondary: #F48C06;
 $success: #40916C;
 $new: #06d6a0;
 $danger: #D00000;
 $text: #ffffff;
 $text-gray: #6c757d;
-$background: #121212;
\ No newline at end of file
+$background: #121212;
+$not-selected: #adb5bd;
\ No newline at end of file
diff --git a/src/frontend/scss/style.scss b/src/frontend/scss/style.scss
index 77fee90..d5a4a02 100644
--- a/src/frontend/scss/style.scss
+++ b/src/frontend/scss/style.scss
@@ -36,7 +36,25 @@ $font-sizes: (
 
 $navbar-nav-link-padding-x: 0.5rem;
 
+$btn-box-shadow: none;
+$btn-active-box-shadow: none;
+$btn-focus-box-shadow: none;
+
+$input-bg: lighten(#000000, 12%);
+$input-disabled-bg: lighten(#000000, 12%);
+$input-color: colors.$text;
+$input-focus-color: colors.$text;
+$input-focus-box-shadow: none;
+$input-disabled-border-color: lighten(#000000, 50%);
+$input-height-sm: auto;
+
+$dropdown-dark-bg: lighten(#000000, 10%);
+
 @import "../../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../../node_modules/bootstrap/scss/tooltip";
+@import "../../../node_modules/bootstrap/scss/buttons";
+@import "../../../node_modules/bootstrap/scss/dropdown";
+@import "../../../node_modules/bootstrap/scss/forms";
 @import "../../../node_modules/bootstrap/scss/utilities";
 @import "../../../node_modules/bootstrap/scss/utilities/api";
 @import "../../../node_modules/bootstrap/scss/nav";
@@ -71,12 +89,11 @@ body {
 }
 
 ul {
-    list-style-type: none;
+	list-style-type: none;
 	padding: 0;
 }
 
 li {
-	margin-bottom: 25px;
 	div {
 		h2 {
 			margin: 0px;
@@ -99,6 +116,39 @@ p {
 	padding-left: 1px;
 }
 
+.form-control {
+	width: auto;
+}
+
+#clone {
+	margin-left: auto;
+	margin-right: 40px;
+}
+
+#clone-url-copy {
+	position: relative;
+	height: 30px;
+	display: block;
+    text-align: left;
+    margin: 5px auto;
+	input {
+		display: inline-block;
+    	padding-right: 30px;
+	}
+	svg {
+		content: "";
+		position: absolute;
+		right: 12px;
+		top: 7px;
+		bottom: 0;
+		width: 18px;
+		fill: colors.$not-selected;
+		&:hover {
+			fill: colors.$text;
+		}
+	}
+}
+
 #projects-search {
 	align-items: center;
 	form {
@@ -113,6 +163,9 @@ p {
 
 #repos {
 	margin-top: 25px;
+	li {
+		margin-bottom: 25px;
+	}
 }
 
 .repo-last-updated {
@@ -217,7 +270,7 @@ code {
 
 .commit-file-header {
 	display: flex;
-	background-color: rgba($color: #ffffff, $alpha: 0.08);
+	background-color: lighten(#000000, 14%);
 	padding: 10px;
 	span {
 		margin-right: 30px;
@@ -249,6 +302,30 @@ th {
 	font-weight: 600;
 }
 
+.dropdown-item {
+	width: auto !important;
+}
+
+.btn-primary {
+	color: colors.$text;
+	&:hover {
+		background-color: colors.$primary-light;
+	}
+}
+
+
+.btn-check:checked + .btn-primary:focus,
+.btn-check:active + .btn-primary:focus,
+.btn-primary:active:focus,
+.btn-primary.active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+	box-shadow: none;
+}
+
+.btn-check:focus + .btn-primary,
+.btn-primary:focus {
+	box-shadow: none;
+}
 
 @include media-breakpoint-down(sm) {
 	.commit-file table tbody tr td {
diff --git a/src/frontend/util/worker.js b/src/frontend/util/worker.js
new file mode 100644
index 0000000..addb2b5
--- /dev/null
+++ b/src/frontend/util/worker.js
@@ -0,0 +1,6 @@
+onmessage = function(e)
+{
+	if(e.data.work === "sleep") {
+		setTimeout(() => { postMessage("done") }, e.data.time);
+	}
+}
\ No newline at end of file
diff --git a/src/frontend/views/Home.vue b/src/frontend/views/Home.vue
index 9ee5c02..e3746c7 100644
--- a/src/frontend/views/Home.vue
+++ b/src/frontend/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
 	<HomeHeader />
-	<div class="row mx-0 mt-5">
+	<div class="row mx-0">
 		<div id="projects-header" class="col ms-4">
 			<p class="fs-1">
 				Projects
@@ -43,7 +43,7 @@ export default {
 	},
 	setup()
 	{
-		const state = reactive({ projects: Object, search: String });
+		const state = reactive({ projects: {}, search: "" });
 
 		watch(() =>
 		{
diff --git a/src/frontend/views/RepositoryCommit.vue b/src/frontend/views/RepositoryCommit.vue
index 9554de7..21ed12e 100644
--- a/src/frontend/views/RepositoryCommit.vue
+++ b/src/frontend/views/RepositoryCommit.vue
@@ -1,5 +1,5 @@
 <template>
-	<RepositoryNavbar active-page="log" />
+	<RepositoryNavbar active-page="log" :repository="repository" />
 	<div class="row mx-0">
 		<div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent">
 			<nav aria-label="breadcrumb">
diff --git a/src/frontend/views/RepositoryLog.vue b/src/frontend/views/RepositoryLog.vue
index 42a9780..d9d1696 100644
--- a/src/frontend/views/RepositoryLog.vue
+++ b/src/frontend/views/RepositoryLog.vue
@@ -1,5 +1,5 @@
 <template>
-	<RepositoryNavbar active-page="log" />
+	<RepositoryNavbar active-page="log" :repository="repository" />
 	<div class="row mx-0 vld-parent">
 		<Loading
 			v-model:active="is_loading" :height="24"