diff options
Diffstat (limited to 'src/frontend/components')
| -rw-r--r-- | src/frontend/components/HomeHeader.vue | 2 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryCloneDropdown.vue | 71 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryHeader.vue | 3 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryNavbar.vue | 30 |
4 files changed, 99 insertions, 7 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}` }; } } |