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

Improve code highlighting in web UI (#4447)

Browse source 
Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
This commit is contained in:
Patrick Schratz 2025-01-04 15:26:13 +01:00 committed by GitHub
parent 1da7a64349
commit cccd1e79b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<slot v-else-if="$slots.titleActions" name="titleActions" />
</div>
<slot :id="id" />
<div v-if="$slots.description" class="text-wp-text-alt-100 ml-1">
<div v-if="$slots.description" class="text-wp-text-alt-100 ml-1 mt-1">
<slot name="description" />
</div>
</div>

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

@ -6,7 +6,7 @@
:is="collapsable ? 'button' : 'div'"
v-if="title"
type="button"
class="text-wp-text-100 bg-wp-background-300 flex w-full gap-2 px-4 py-2 font-bold"
class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
@click="_collapsed = !_collapsed"
>
<Icon

2
web/src/components/repo/pipeline/PipelineLog.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
<div
class="code-box !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
class="code-box-log !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
@mouseover="showActions = true"
@mouseleave="showActions = false"
>

29
web/src/style.css
View file

@ -38,8 +38,15 @@
--wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
--wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
--wp-code-inline-100: theme('colors.gray.200');
--wp-code-inline-200: theme('colors.gray.200');
--wp-code-inline-text-100: theme('colors.gray.600');
--wp-code-100: theme('colors.int-wp-secondary.300');
--wp-code-200: theme('colors.int-wp-secondary.600');
--wp-code-300: theme('colors.int-wp-secondary.600');
--wp-code-text-100: theme('colors.gray.200');
--wp-code-text-alt-100: theme('colors.gray.300');
@ -86,9 +93,16 @@
--wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
--wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
--wp-code-100: theme('colors.int-wp-secondary.700');
--wp-code-200: theme('colors.int-wp-secondary.800');
--wp-code-text-100: theme('colors.gray.300');
--wp-code-inline-100: theme('colors.int-wp-secondary.700');
--wp-code-inline-200: theme('colors.int-wp-secondary.300');
--wp-code-inline-text-100: theme('colors.gray.300');
--wp-code-100: theme('colors.int-wp-secondary.700'); /* #222631 */
--wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
--wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
--wp-code-text-100: theme('colors.gray.200');
--wp-code-text-alt-100: theme('colors.gray.400');
--wp-link-100: theme('colors.blue.400');
@ -141,11 +155,16 @@ body,
}
.code-box {
@apply bg-wp-code-200 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
@apply bg-wp-code-inline-100 text-wp-code-inline-text-100 break-words rounded-md p-4 text-sm;
white-space: pre-wrap;
}
.code-box-inline,
code:not(pre > code) {
@apply bg-wp-code-200 text-wp-code-text-100 rounded-md px-1 py-px;
@apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md px-1.5 py-0.5;
}
.code-box-log {
@apply bg-wp-code-300 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
white-space: pre-wrap;
}

11
web/windi.config.ts
View file

@ -178,10 +178,21 @@ export default defineConfig({
200: 'var(--wp-hint-warn-200)',
},
'wp-code-inline': {
100: 'var(--wp-code-inline-100)',
200: 'var(--wp-code-inline-200)',
},
'wp-code-inline-text': {
100: 'var(--wp-code-inline-text-100)',
},
'wp-code': {
100: 'var(--wp-code-100)',
200: 'var(--wp-code-200)',
300: 'var(--wp-code-300)',
},
'wp-code-text': {
100: 'var(--wp-code-text-100)',
},