mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 21:49:25 +00:00
e2ab8a46ed
Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------: ![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png) | ![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png) ![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png) | ![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png) ![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png) | ![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png) ![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png) | ![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png) ![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png) | ![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png) What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<template>
|
|
<!-- Navbar -->
|
|
<div class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
|
|
<!-- Left Links Box -->
|
|
<div class="flex text-white dark:text-gray-400 items-center space-x-2">
|
|
<!-- Logo -->
|
|
<router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
|
|
<img class="w-8 h-8" src="../../../assets/logo.svg?url" />
|
|
<span class="text-xs">{{ version }}</span>
|
|
</router-link>
|
|
<!-- Repo Link -->
|
|
<router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link navbar-clickable">
|
|
<span class="flex md:hidden">{{ $t('repos') }}</span>
|
|
<span class="hidden md:flex">{{ $t('repositories') }}</span>
|
|
</router-link>
|
|
<!-- Docs Link -->
|
|
<a :href="docsUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('docs') }}</a>
|
|
</div>
|
|
<!-- Right Icons Box -->
|
|
<div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
|
|
<!-- Dark Mode Toggle -->
|
|
<NavbarIcon
|
|
:title="$t(darkMode ? 'color_scheme_dark' : 'color_scheme_light')"
|
|
class="navbar-icon navbar-clickable"
|
|
@click="darkMode = !darkMode"
|
|
>
|
|
<i-ic-baseline-dark-mode v-if="darkMode" />
|
|
<i-ic-round-light-mode v-else />
|
|
</NavbarIcon>
|
|
<!-- Admin Settings -->
|
|
<NavbarIcon
|
|
v-if="user?.admin"
|
|
class="navbar-icon navbar-clickable"
|
|
:title="$t('admin.settings.settings')"
|
|
:to="{ name: 'admin-settings' }"
|
|
>
|
|
<i-clarity-settings-solid />
|
|
</NavbarIcon>
|
|
|
|
<!-- Active Pipelines Indicator -->
|
|
<ActivePipelines v-if="user" class="navbar-icon navbar-clickable" />
|
|
<!-- User Avatar -->
|
|
<NavbarIcon
|
|
v-if="user"
|
|
:to="{ name: 'user' }"
|
|
:title="$t('user.settings')"
|
|
class="navbar-icon navbar-clickable !p-1.5"
|
|
>
|
|
<img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
|
|
</NavbarIcon>
|
|
<!-- Login Button -->
|
|
<Button v-else :text="$t('login')" @click="doLogin" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import Button from '~/components/atomic/Button.vue';
|
|
import useAuthentication from '~/compositions/useAuthentication';
|
|
import useConfig from '~/compositions/useConfig';
|
|
import { useDarkMode } from '~/compositions/useDarkMode';
|
|
|
|
import ActivePipelines from './ActivePipelines.vue';
|
|
import NavbarIcon from './NavbarIcon.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'Navbar',
|
|
|
|
components: { Button, ActivePipelines, NavbarIcon },
|
|
|
|
setup() {
|
|
const config = useConfig();
|
|
const route = useRoute();
|
|
const authentication = useAuthentication();
|
|
const { darkMode } = useDarkMode();
|
|
const docsUrl = window.WOODPECKER_DOCS;
|
|
|
|
function doLogin() {
|
|
authentication.authenticate(route.fullPath);
|
|
}
|
|
|
|
const version = config.version?.startsWith('next') ? 'next' : config.version;
|
|
|
|
return { darkMode, user: authentication.user, doLogin, docsUrl, version };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navbar-link {
|
|
@apply px-3 py-2 -my-1 rounded-md;
|
|
}
|
|
|
|
.navbar-clickable {
|
|
@apply hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100;
|
|
}
|
|
</style>
|