mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 21:49:25 +00:00
58838f225c
Rewrite of the UI using Typescript, Vue3, Windicss and Vite. The design should be close to the current one with some changes: - latest pipeline in a sidebar on the right - secrets and registry as part of the repo-settings (secrets and registry entries shouldn't be used as much so they can be "hidden" under settings IMO) - start page shows list of active repositories with button to enable / add new ones (currently you see all repositories and in most cases you only add new repositories once in a while)
70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex shadow-lg bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
|
|
<div class="flex text-white dark:text-gray-500 items-center">
|
|
<router-link :to="{ name: 'home' }" class="relative">
|
|
<img class="-mt-3 w-8" src="../../../assets/logo.svg?url" />
|
|
<span class="absolute -bottom-4 text-xs">{{ version }}</span>
|
|
</router-link>
|
|
<router-link
|
|
v-if="user"
|
|
:to="{ name: 'repos' }"
|
|
class="mx-4 hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md"
|
|
>
|
|
<span class="flex md:hidden">Repos</span>
|
|
<span class="hidden md:flex">Repositories</span>
|
|
</router-link>
|
|
</div>
|
|
<div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-500">
|
|
<a
|
|
:href="docsUrl"
|
|
target="_blank"
|
|
class="hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md hidden md:flex"
|
|
>Docs</a
|
|
>
|
|
<IconButton
|
|
:icon="darkMode ? 'dark' : 'light'"
|
|
class="!text-white !dark:text-gray-500"
|
|
@click="darkMode = !darkMode"
|
|
/>
|
|
<router-link v-if="user" :to="{ name: 'user' }">
|
|
<img v-if="user && user.avatar_url" class="w-8" :src="`${user.avatar_url}`" />
|
|
</router-link>
|
|
<Button v-else text="Login" @click="doLogin" />
|
|
<ActiveBuilds v-if="user" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import Button from '~/components/atomic/Button.vue';
|
|
import IconButton from '~/components/atomic/IconButton.vue';
|
|
import useAuthentication from '~/compositions/useAuthentication';
|
|
import useConfig from '~/compositions/useConfig';
|
|
import { useDarkMode } from '~/compositions/useDarkMode';
|
|
|
|
import ActiveBuilds from './ActiveBuilds.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'Navbar',
|
|
|
|
components: { Button, ActiveBuilds, IconButton },
|
|
|
|
setup() {
|
|
const config = useConfig();
|
|
const authentication = useAuthentication();
|
|
const { darkMode } = useDarkMode();
|
|
const docsUrl = window.WOODPECKER_DOCS;
|
|
|
|
function doLogin() {
|
|
authentication.authenticate();
|
|
}
|
|
|
|
const version = config.version?.startsWith('next') ? 'next' : config.version;
|
|
|
|
return { darkMode, user: authentication.user, doLogin, docsUrl, version };
|
|
},
|
|
});
|
|
</script>
|