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

web/src/assets/locales/en.json

@@ -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",

web/src/components/atomic/Button.vue

@@ -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',

web/src/components/atomic/IconButton.vue

@@ -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>

web/src/components/atomic/ListItem.vue

@@ -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>

web/src/components/form/Checkbox.vue

@@ -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"
     />

web/src/components/form/RadioField.vue

@@ -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"

web/src/components/form/SelectField.vue

@@ -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 !== '',

web/src/components/form/TextField.vue

@@ -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: {

web/src/components/layout/Panel.vue

@@ -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>

web/src/components/layout/header/ActivePipelines.vue

@@ -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();

web/src/components/layout/header/Navbar.vue

@@ -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>

web/src/components/layout/header/NavbarIcon.vue

@@ -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>

web/src/components/layout/scaffold/Header.vue

@@ -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)"

web/src/components/repo/pipeline/PipelineItem.vue

@@ -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',

web/src/components/repo/pipeline/PipelineList.vue

@@ -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>

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -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':

web/src/views/RepoAdd.vue

@@ -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>

web/src/views/Repos.vue

@@ -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>

web/src/views/ReposOwner.vue

@@ -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>

web/src/views/repo/RepoBranches.vue

@@ -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>
 

web/src/views/repo/RepoWrapper.vue

@@ -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' }"

web/windi.config.ts

@@ -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],
 });