mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 13:21:31 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details>  I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues.   What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<header
|
|
class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
|
|
>
|
|
<FluidContainer class="!py-0">
|
|
<div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
|
|
<div
|
|
class="flex items-center min-w-0 justify-start <md:justify-center"
|
|
:class="{
|
|
'md:flex-1': searchBoxPresent,
|
|
}"
|
|
>
|
|
<IconButton
|
|
v-if="goBack"
|
|
icon="back"
|
|
:title="$t('back')"
|
|
class="flex-shrink-0 mr-2 <md:hidden"
|
|
@click="goBack"
|
|
/>
|
|
<h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
|
|
<slot name="title" />
|
|
</h1>
|
|
</div>
|
|
<TextField
|
|
v-if="searchBoxPresent"
|
|
class="w-auto <md:w-full <md:order-3"
|
|
:placeholder="$t('search')"
|
|
:model-value="search"
|
|
@update:model-value="(value: string) => $emit('update:search', value)"
|
|
/>
|
|
<div
|
|
v-if="$slots.titleActions"
|
|
class="flex items-center justify-end gap-x-2 <md:w-full <md:justify-center"
|
|
:class="{
|
|
'md:flex-1': searchBoxPresent,
|
|
}"
|
|
>
|
|
<slot name="titleActions" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="enableTabs" class="flex justify-between">
|
|
<Tabs class="<md:order-2" />
|
|
<div
|
|
v-if="$slots.titleActions"
|
|
class="flex items-center justify-end gap-x-2 md:mb-2 <md:w-full <md:justify-center <md:order-1"
|
|
>
|
|
<slot name="tabActions" />
|
|
</div>
|
|
</div>
|
|
</FluidContainer>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TextField from '~/components/form/TextField.vue';
|
|
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
|
|
|
import Tabs from './Tabs.vue';
|
|
|
|
const props = defineProps<{
|
|
goBack?: () => void;
|
|
enableTabs?: boolean;
|
|
search?: string;
|
|
}>();
|
|
defineEmits(['update:search']);
|
|
|
|
const searchBoxPresent = props.search !== undefined;
|
|
</script>
|