mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-13 02:49:37 +00:00
549996cbcd
* fix ui issues and improve mobile view * show proc errors * auto open logs on md screens
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
:disabled="disabled"
|
|
class="
|
|
relative
|
|
flex
|
|
items-center
|
|
justify-center
|
|
text-gray-500
|
|
px-1
|
|
py-1
|
|
rounded-full
|
|
bg-transparent
|
|
hover:bg-gray-200 hover:text-gray-700
|
|
dark:hover:bg-gray-600 dark:text-gray-500 dark:hover:text-gray-700
|
|
cursor-pointer
|
|
transition-all
|
|
duration-150
|
|
focus:outline-none
|
|
overflow-hidden
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
"
|
|
@click="doClick"
|
|
>
|
|
<Icon :name="icon" />
|
|
<div
|
|
class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center"
|
|
:class="{
|
|
'opacity-100': isLoading,
|
|
'opacity-0': !isLoading,
|
|
}"
|
|
>
|
|
<Icon name="loading" class="animate-spin" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { RouteLocationRaw, useRouter } from 'vue-router';
|
|
|
|
import Icon, { IconNames } from '~/components/atomic/Icon.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'IconButton',
|
|
|
|
components: { Icon },
|
|
|
|
props: {
|
|
icon: {
|
|
type: String as PropType<IconNames>,
|
|
required: true,
|
|
},
|
|
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
|
|
to: {
|
|
type: [String, Object, null] as PropType<RouteLocationRaw | null>,
|
|
default: null,
|
|
},
|
|
|
|
isLoading: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
|
|
setup(props) {
|
|
const router = useRouter();
|
|
|
|
async function doClick() {
|
|
if (props.isLoading) {
|
|
return;
|
|
}
|
|
|
|
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>
|