mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-06-18 05:10:48 +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>
<div
<button
: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"
type="button"
@click="doClick"
>
<Icon :name="icon" />
@ -14,7 +15,7 @@
>
<Icon name="loading" class="animate-spin" />
</div>
</div>
</button>
</template>
<script lang="ts">

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

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

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

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col">
<div class="flex w-full md:pt-4 flex-wrap">
<div
<button
v-for="tab in tabs"
: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"
@ -9,12 +9,13 @@
'border-gray-400 dark:border-gray-600': activeTab === tab.id,
'border-transparent': activeTab !== tab.id,
}"
type="button"
@click="selectTab(tab)"
>
<Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
<Icon v-else name="blank" class="md:hidden" />
<span>{{ tab.title }}</span>
</div>
</button>
</div>
<div>