mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-01-11 10:05:27 +00:00
Code Issues Projects Releases Wiki Activity

Use html buttons to allow keyboard navigation (#1242)

Browse source
This commit is contained in:
Lukas 2022-10-08 12:51:21 +02:00 committed by GitHub
parent 34419ae521
commit 687611b682
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/components/atomic/IconButton.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div <button
:disabled="disabled" :disabled="disabled"
class="relative flex items-center justify-center text-color px-1 py-1 rounded-full bg-transparent hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700 cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed" class="relative flex items-center justify-center text-color px-1 py-1 rounded-full bg-transparent hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700 cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
type="button"
@click="doClick" @click="doClick"
> >
<Icon :name="icon" /> <Icon :name="icon" />
@ -14,7 +15,7 @@
> >
<Icon name="loading" class="animate-spin" /> <Icon name="loading" class="animate-spin" />
</div> </div>
</div> </button>
</template> </template>
<script lang="ts"> <script lang="ts">

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

@ -1,9 +1,10 @@
<template> <template>
<div <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"
:class="{ :class="{
spinner: activeBuilds.length !== 0, spinner: activeBuilds.length !== 0,
}" }"
type="button"
@click="toggle" @click="toggle"
> >
<div class="spinner-ring ring1" /> <div class="spinner-ring ring1" />
@ -11,7 +12,7 @@
<div class="spinner-ring ring3" /> <div class="spinner-ring ring3" />
<div class="spinner-ring ring4" /> <div class="spinner-ring ring4" />
{{ activeBuilds.length || 0 }} {{ activeBuilds.length || 0 }}
</div> </button>
</template> </template>
<script lang="ts"> <script lang="ts">

5
web/src/components/tabs/Tabs.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex w-full md:pt-4 flex-wrap"> <div class="flex w-full md:pt-4 flex-wrap">
<div <button
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.id" :key="tab.id"
class="w-full py-2 md:w-auto md:pt-0 md:pb-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center" class="w-full py-2 md:w-auto md:pt-0 md:pb-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
@ -9,12 +9,13 @@
'border-gray-400 dark:border-gray-600': activeTab === tab.id, 'border-gray-400 dark:border-gray-600': activeTab === tab.id,
'border-transparent': activeTab !== tab.id, 'border-transparent': activeTab !== tab.id,
}" }"
type="button"
@click="selectTab(tab)" @click="selectTab(tab)"
> >
<Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" /> <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
<Icon v-else name="blank" class="md:hidden" /> <Icon v-else name="blank" class="md:hidden" />
<span>{{ tab.title }}</span> <span>{{ tab.title }}</span>
</div> </button>
</div> </div>
<div> <div>