mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-22 16:36:30 +00:00
Code Issues Projects Releases Wiki Activity

Unify buttons, links and improve focus styles (#1317)

Browse source
This commit is contained in:
Lukas 2022-11-18 08:10:43 +01:00 committed by GitHub
parent 7859bde63d
commit 2dfa231184
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 110 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/assets/locales/en.json
View file

@ -53,6 +53,7 @@
"success": "Repository enabled",
"list_reloaded": "Repository list reloaded"
},
"open_in_forge": "Open Repository in Version Control System",
"settings": {
"settings": "Settings",
"not_allowed": "You are not allowed to access this repository's settings",

2
web/src/components/atomic/Button.vue
View file

@ -1,7 +1,7 @@
<template>
<button
type="button"
class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
:class="{
'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
color === 'gray',

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

@ -1,13 +1,26 @@
<template>
<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"
<router-link v-if="to" :to="to" :title="title" :aria-label="title" class="icon-button">
<slot>
<Icon :name="icon" />
</slot>
</router-link>
<a
v-else-if="href"
:href="href"
:title="title"
:aria-label="title"
@click="doClick"
class="icon-button"
target="_blank"
rel="noopener noreferrer"
>
<Icon :name="icon" />
<slot>
<Icon :name="icon" />
</slot>
</a>
<button v-else :disabled="disabled" class="icon-button" type="button" :title="title" :aria-label="title">
<slot>
<Icon :name="icon" />
</slot>
<div v-if="isLoading" class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
<Icon name="loading" class="animate-spin" />
</div>
@ -16,7 +29,7 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { RouteLocationRaw, useRouter } from 'vue-router';
import { RouteLocationRaw } from 'vue-router';
import Icon, { IconNames } from '~/components/atomic/Icon.vue';
@ -28,7 +41,7 @@ export default defineComponent({
props: {
icon: {
type: String as PropType<IconNames>,
required: true,
default: '',
},
disabled: {
@ -49,29 +62,17 @@ export default defineComponent({
type: String,
required: true,
},
},
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 };
href: {
type: String,
default: '',
},
},
});
</script>
<style scoped>
.icon-button {
@apply relative flex items-center justify-center px-1 py-1 rounded-full bg-transparent hover-effect overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed;
}
</style>

22
web/src/components/atomic/ListItem.vue
View file

@ -1,23 +1,19 @@
<template>
<component
:is="clickable ? 'button' : 'div'"
:is="to ? 'router-link' : clickable ? 'button' : 'div'"
:to="to"
class="w-full flex border rounded-md bg-white overflow-hidden p-4 border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400"
:class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable }"
:class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable || to }"
>
<slot />
</component>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { RouteLocationRaw } from 'vue-router';
export default defineComponent({
name: 'ListItem',
props: {
clickable: {
type: Boolean,
},
},
});
defineProps<{
clickable?: boolean;
to?: RouteLocationRaw;
}>();
</script>

2
web/src/components/form/Checkbox.vue
View file

@ -3,7 +3,7 @@
<input
:id="`checkbox-${id}`"
type="checkbox"
class="checkbox flex-shrink-0 relative border border-gray-400 dark:border-gray-600 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-800 dark:checked:border-lime-800"
class="checkbox flex-shrink-0 relative border border-gray-400 dark:border-gray-600 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-800 dark:checked:border-lime-800 focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
:checked="innerValue"
@click="innerValue = !innerValue"
/>

2
web/src/components/form/RadioField.vue
View file

@ -3,7 +3,7 @@
<input
:id="`radio-${id}-${option.value}`"
type="radio"
class="radio relative flex-shrink-0 border border-gray-400 dark:border-gray-600 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-700 dark:checked:border-lime-700"
class="radio relative flex-shrink-0 border border-gray-400 dark:border-gray-600 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-700 dark:checked:border-lime-700 focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
:value="option.value"
:checked="innerValue.includes(option.value)"
@click="innerValue = option.value"

2
web/src/components/form/SelectField.vue
View file

@ -1,7 +1,7 @@
<template>
<select
v-model="innerValue"
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400 w-full border py-1 px-2 rounded-md focus:outline-none"
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400 w-full border py-1 px-2 rounded-md"
:class="{
'text-color': innerValue === '',
'text-gray-900': innerValue !== '',

44
web/src/components/form/TextField.vue
View file

@ -1,27 +1,22 @@
<template>
<div
class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white hover:border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:border-dark-800"
<input
v-if="lines === 1"
v-model="innerValue"
class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
:class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
>
<input
v-if="lines === 1"
v-model="innerValue"
class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
:class="inputClass"
:disabled="disabled"
:type="type"
:placeholder="placeholder"
/>
<textarea
v-else
v-model="innerValue"
class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
:class="inputClass"
:disabled="disabled"
:placeholder="placeholder"
:rows="lines"
/>
</div>
:disabled="disabled"
:type="type"
:placeholder="placeholder"
/>
<textarea
v-else
v-model="innerValue"
class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
:class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
:disabled="disabled"
:placeholder="placeholder"
:rows="lines"
/>
</template>
<script lang="ts">
@ -54,11 +49,6 @@ export default defineComponent({
disabled: {
type: Boolean,
},
inputClass: {
type: String,
default: '',
},
},
emits: {

2
web/src/components/layout/Panel.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
<div v-if="title" class="font-bold text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2">{{ title }}</div>
<div class="w-full p-4 bg-white dark:bg-dark-gray-700">
<div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
<slot />
</div>
</div>

9
web/src/components/layout/header/ActivePipelines.vue
View file

@ -1,5 +1,5 @@
<template>
<NavbarIcon :title="$t('pipeline_feed')" class="!p-1.5 relative" @click="toggle">
<IconButton :title="$t('pipeline_feed')" class="!p-1.5 relative text-current" @click="toggle">
<div v-if="activePipelines.length > 0" class="spinner">
<div class="spinner-ring ring1" />
<div class="spinner-ring ring2" />
@ -11,20 +11,19 @@
>
{{ activePipelines.length || 0 }}
</div>
</NavbarIcon>
</IconButton>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import IconButton from '~/components/atomic/IconButton.vue';
import usePipelineFeed from '~/compositions/usePipelineFeed';
import NavbarIcon from './NavbarIcon.vue';
export default defineComponent({
name: 'ActivePipelines',
components: { NavbarIcon },
components: { IconButton },
setup() {
const pipelineFeed = usePipelineFeed();

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

@ -19,35 +19,28 @@
<!-- Right Icons Box -->
<div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
<!-- Dark Mode Toggle -->
<NavbarIcon
<IconButton
:icon="darkMode ? 'dark' : 'light'"
:title="$t(darkMode ? 'color_scheme_dark' : 'color_scheme_light')"
class="navbar-icon navbar-clickable"
class="navbar-icon"
@click="darkMode = !darkMode"
>
<i-ic-baseline-dark-mode v-if="darkMode" />
<i-ic-round-light-mode v-else />
</NavbarIcon>
/>
<!-- Admin Settings -->
<NavbarIcon
<IconButton
v-if="user?.admin"
class="navbar-icon navbar-clickable"
class="navbar-icon"
:title="$t('admin.settings.settings')"
:to="{ name: 'admin-settings' }"
>
<i-clarity-settings-solid />
</NavbarIcon>
</IconButton>
<!-- Active Pipelines Indicator -->
<ActivePipelines v-if="user" class="navbar-icon navbar-clickable" />
<ActivePipelines v-if="user" class="navbar-icon" />
<!-- User Avatar -->
<NavbarIcon
v-if="user"
:to="{ name: 'user' }"
:title="$t('user.settings')"
class="navbar-icon navbar-clickable !p-1.5"
>
<IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings')" class="navbar-icon !p-1.5">
<img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
</NavbarIcon>
</IconButton>
<!-- Login Button -->
<Button v-else :text="$t('login')" @click="doLogin" />
</div>
@ -59,17 +52,17 @@ import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
import IconButton from '~/components/atomic/IconButton.vue';
import useAuthentication from '~/compositions/useAuthentication';
import useConfig from '~/compositions/useConfig';
import { useDarkMode } from '~/compositions/useDarkMode';
import ActivePipelines from './ActivePipelines.vue';
import NavbarIcon from './NavbarIcon.vue';
export default defineComponent({
name: 'Navbar',
components: { Button, ActivePipelines, NavbarIcon },
components: { Button, ActivePipelines, IconButton },
setup() {
const config = useConfig();
@ -90,11 +83,15 @@ export default defineComponent({
</script>
<style scoped>
.navbar-link {
@apply px-3 py-2 -my-1 rounded-md;
.navbar-icon {
@apply w-11 h-11 rounded-full p-2.5;
}
.navbar-clickable {
@apply hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100;
.navbar-icon :deep(svg) {
@apply w-full h-full;
}
.navbar-link {
@apply px-3 py-2 -my-1 rounded-md hover-effect;
}
</style>

55
web/src/components/layout/header/NavbarIcon.vue
View file

@ -1,55 +0,0 @@
<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>

5
web/src/components/layout/scaffold/Header.vue
View file

@ -1,5 +1,5 @@
<template>
<header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700">
<header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700 text-color">
<FluidContainer class="!py-0">
<div class="flex flex-wrap items-center justify-between py-4 <md:flex-row <md:gap-y-4">
<div
@ -15,8 +15,7 @@
</div>
<TextField
v-if="searchBoxPresent"
class="w-auto !bg-gray-100 !dark:bg-dark-gray-600 <md:w-full <md:order-3"
input-class="!placeholder-gray-500"
class="w-auto !bg-gray-100 !dark:bg-dark-gray-600 placeholder-gray-500 <md:w-full <md:order-3"
:placeholder="$t('search')"
:model-value="search"
@update:model-value="(value: string) => $emit('update:search', value)"

6
web/src/components/repo/pipeline/PipelineItem.vue
View file

@ -1,8 +1,8 @@
<template>
<ListItem v-if="pipeline" clickable class="p-0 w-full">
<div class="flex h-full w-11 items-center md:mr-4">
<ListItem v-if="pipeline" class="p-0 w-full">
<div class="flex w-11 items-center md:mr-4">
<div
class="min-h-full w-3"
class="h-full w-3"
:class="{
'bg-yellow-400 dark:bg-dark-200': pipeline.status === 'pending',
'bg-red-400 dark:bg-red-800': pipelineStatusColors[pipeline.status] === 'red',

8
web/src/components/repo/pipeline/PipelineList.vue
View file

@ -1,16 +1,14 @@
<template>
<div v-if="pipelines" class="space-y-4">
<router-link
<PipelineItem
v-for="pipeline in pipelines"
:key="pipeline.id"
:to="{
name: 'repo-pipeline',
params: { repoOwner: repo.owner, repoName: repo.name, pipelineId: pipeline.number },
}"
class="flex"
>
<PipelineItem :pipeline="pipeline" />
</router-link>
:pipeline="pipeline"
/>
<Panel v-if="pipelines.length === 0">
<span class="text-color">{{ $t('repo.pipeline.no_pipelines') }}</span>
</Panel>

4
web/src/components/repo/pipeline/PipelineStepList.vue
View file

@ -66,7 +66,7 @@
v-if="pipeline.steps && pipeline.steps.length > 1"
type="button"
:title="workflow.name"
class="flex items-center gap-2 py-2 px-1 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-md"
class="flex items-center gap-2 py-2 px-1 hover-effect rounded-md"
@click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
>
<Icon
@ -91,7 +91,7 @@
:key="step.pid"
type="button"
:title="step.name"
class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 w-full"
class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect w-full"
:class="{
'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': selectedStepId && selectedStepId === step.pid,
'mt-1':

3
web/src/views/RepoAdd.vue
View file

@ -13,8 +13,7 @@
v-for="repo in searchedRepos"
:key="repo.id"
class="items-center"
:clickable="repo.active"
@click="repo.active && $router.push({ name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } })"
:to="repo.active ? { name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } } : undefined"
>
<span class="text-color">{{ repo.full_name }}</span>
<span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>

3
web/src/views/Repos.vue
View file

@ -12,8 +12,7 @@
<ListItem
v-for="repo in searchedRepos"
:key="repo.id"
clickable
@click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
:to="{ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } }"
>
<span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
</ListItem>

3
web/src/views/ReposOwner.vue
View file

@ -17,8 +17,7 @@
<ListItem
v-for="repo in searchedRepos"
:key="repo.id"
clickable
@click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
:to="{ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } }"
>
<span class="text-color">{{ `${repo.name}` }}</span>
</ListItem>

10
web/src/views/repo/RepoBranches.vue
View file

@ -1,15 +1,13 @@
<template>
<div v-if="branches" class="space-y-4">
<router-link
<ListItem
v-for="branch in branches"
:key="branch"
class="text-color"
:to="{ name: 'repo-branch', params: { branch } }"
class="flex"
>
<ListItem clickable class="text-color">
{{ branch }}
</ListItem>
</router-link>
{{ branch }}
</ListItem>
</div>
</template>

8
web/src/views/repo/RepoWrapper.vue
View file

@ -17,17 +17,13 @@
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-2">
<img :src="badgeUrl" />
</a>
<a
:href="repo.link_url"
target="_blank"
class="flex p-1 rounded-full text-color hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
>
<IconButton :href="repo.link_url" :title="$t('repo.open_in_forge')">
<Icon v-if="forge === 'github'" name="github" />
<Icon v-else-if="forge === 'gitea'" name="gitea" />
<Icon v-else-if="forge === 'gitlab'" name="gitlab" />
<Icon v-else-if="forge === 'bitbucket' || forge === 'stash'" name="bitbucket" />
<Icon v-else name="repo" />
</a>
</IconButton>
<IconButton
v-if="repoPermissions.admin"
:to="{ name: 'repo-settings' }"

4
web/windi.config.ts
View file

@ -35,5 +35,9 @@ export default defineConfig({
],
},
},
shortcuts: {
'hover-effect':
'hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100',
},
plugins: [typography],
});