mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 11:02:02 +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>
57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
|
|
>
|
|
<component
|
|
:is="collapsable ? 'button' : 'div'"
|
|
v-if="title"
|
|
type="button"
|
|
class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
|
|
@click="collapsed && (_collapsed = !_collapsed)"
|
|
>
|
|
<Icon
|
|
v-if="collapsable"
|
|
name="chevron-right"
|
|
class="transition-transform duration-150 min-w-6 h-6"
|
|
:class="{ 'transform rotate-90': !collapsed }"
|
|
/>
|
|
{{ title }}
|
|
</component>
|
|
<div
|
|
:class="{
|
|
'max-h-auto': !collapsed,
|
|
'max-h-0': collapsed,
|
|
}"
|
|
class="transition-height duration-150 overflow-hidden"
|
|
>
|
|
<div class="w-full p-4 text-wp-text-100">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue';
|
|
|
|
import Icon from '~/components/atomic/Icon.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
collapsable?: boolean;
|
|
}>(),
|
|
{
|
|
title: '',
|
|
},
|
|
);
|
|
|
|
/**
|
|
* _collapsed is used to store the internal state of the panel, but is
|
|
* ignored if the panel is not collapsable.
|
|
*/
|
|
const _collapsed = ref(false);
|
|
|
|
const collapsed = computed(() => props.collapsable && _collapsed.value);
|
|
</script>
|