diff options
| -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 | ||||
| -rw-r--r-- | src/frontend/scss/abstracts/_colors.scss | 5 | ||||
| -rw-r--r-- | src/frontend/scss/style.scss | 83 | ||||
| -rw-r--r-- | src/frontend/util/worker.js | 6 | ||||
| -rw-r--r-- | src/frontend/views/Home.vue | 4 | ||||
| -rw-r--r-- | src/frontend/views/RepositoryCommit.vue | 2 | ||||
| -rw-r--r-- | src/frontend/views/RepositoryLog.vue | 2 |
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" |