mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-03 05:59:30 +00:00
ed7ecb060e
Some improvements to the navbar icons. Changes Implemented: - Increase touch target size for navbar icons. - Make icon colors and hover effect consistent with navbar links - Added title for all navbar icons - New key (user.settings) in locales - Updated Dark and Light Mode values in locales - Minor tweaks in active builds indicator - New component NavbarIcon (because trying to match IconButton size and colors felt hacky at best) Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>
56 lines
1,007 B
Vue
56 lines
1,007 B
Vue
<template>
|
|
<button type="button" :title="title" :aria-label="title" class="navbar-icon" @click="doClick">
|
|
<slot />
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { RouteLocationRaw, useRouter } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
name: 'NavbarIcon',
|
|
|
|
props: {
|
|
to: {
|
|
type: [String, Object, null] as PropType<RouteLocationRaw | null>,
|
|
default: null,
|
|
},
|
|
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
setup(props) {
|
|
const router = useRouter();
|
|
|
|
async function doClick() {
|
|
if (!props.to) {
|
|
return;
|
|
}
|
|
|
|
if (typeof props.to === 'string' && props.to.startsWith('http')) {
|
|
window.location.href = props.to;
|
|
return;
|
|
}
|
|
|
|
await router.push(props.to);
|
|
}
|
|
|
|
return { doClick };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navbar-icon {
|
|
@apply w-11 h-11 rounded-full p-2.5;
|
|
}
|
|
|
|
.navbar-icon :deep(svg) {
|
|
@apply w-full h-full;
|
|
}
|
|
</style>
|