mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-05-07 00:38:44 +00:00
Code Issues Projects Releases Wiki Activity

Imporve Navbar UI (#1235)

Browse source 
- Improved padding
- Grouped links together on the left and icons on the right
- Updated navbar link hover effect
- Moved account icon to the rightmost place (as in almost every other
application)
- Rounded account icon to make it consistent with rest of the icon
buttons

Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>
This commit is contained in:
Divya Jain 2022-10-08 19:21:12 +05:30 committed by GitHub
parent 6397965406
commit 57ed64e1ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/layout/header/ActiveBuilds.vue
View file

@ -1,6 +1,6 @@
<template>
<button
class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white"
class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white select-none"
:class="{
spinner: activeBuilds.length !== 0,
}"

58
web/src/components/layout/header/Navbar.vue
View file

@ -1,42 +1,44 @@
<template>
<div class="flex shadow-lg dark:shadow-sm 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-400 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>
<!-- Navbar -->
<div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-900">
<!-- 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>
<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"
>
<!-- Repo Link -->
<router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link">
<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 hidden md:flex">{{ $t('docs') }}</a>
</div>
<div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-400">
<a
:href="docsUrl"
target="_blank"
class="hover:bg-lime-700 dark:hover:bg-gray-600 px-4 py-1 rounded-md hidden md:flex"
>{{ $t('docs') }}</a
>
<!-- Right Icons Box -->
<div class="flex ml-auto items-center space-x-3 text-white dark:text-gray-400">
<!-- Dark Mode Toggle -->
<IconButton
:icon="darkMode ? 'dark' : 'light'"
class="!text-white !dark:text-gray-500"
class="!text-white !dark:text-gray-500 navbar-icon"
@click="darkMode = !darkMode"
/>
<!-- Admin Settings -->
<IconButton
v-if="user?.admin"
icon="settings"
class="!text-white !dark:text-gray-500"
class="!text-white !dark:text-gray-500 navbar-icon"
:to="{ name: 'admin-settings' }"
/>
<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="$t('login')" @click="doLogin" />
<!-- Active Builds Indicator -->
<ActiveBuilds v-if="user" />
<!-- User Avatar -->
<router-link v-if="user" :to="{ name: 'user' }" class="rounded-full overflow-hidden">
<img v-if="user && user.avatar_url" class="navbar-icon" :src="`${user.avatar_url}`" />
</router-link>
<!-- Login Button -->
<Button v-else :text="$t('login')" @click="doLogin" />
</div>
</div>
</template>
@ -75,3 +77,13 @@ export default defineComponent({
},
});
</script>
<style scoped>
.navbar-link {
@apply hover:bg-black hover:bg-opacity-10 transition-colors duration-100 px-3 py-2 -my-1 rounded-md;
}
.navbar-icon {
@apply w-8 h-8;
}
</style>