akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: update colors for v4 (#10660)

Browse Source 
Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Shivam Mishra
2025-01-15 17:13:03 +05:30
committed by GitHub
co-authored by Pranav Sivin Varghese Vishnu Narayanan Sojan iamsivin Pranav
parent a4c0c76fa5
commit 7fd8b4d03a
79 changed files with 660 additions and 795 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+34 -56
View File
@@ -1,72 +1,50 @@
<script>
export default {
props: {
title: {
type: String,
default: '',
},
empty: {
type: Boolean,
default: false,
},
query: {
type: String,
default: '',
},
showTitle: {
type: Boolean,
default: true,
},
isFetching: {
type: Boolean,
default: true,
},
<script setup>
import { computed } from 'vue';
const props = defineProps({
title: {
type: String,
default: '',
},
computed: {
titleCase() {
return this.title.toLowerCase();
},
empty: {
type: Boolean,
default: false,
},
};
query: {
type: String,
default: '',
},
showTitle: {
type: Boolean,
default: true,
},
isFetching: {
type: Boolean,
default: true,
},
});
const titleCase = computed(() => props.title.toLowerCase());
</script>
<template>
<section class="result-section">
<div v-if="showTitle" class="header">
<h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
<section class="mx-0 my-2">
<div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
<h3 class="text-sm text-n-slate-12">{{ title }}</h3>
</div>
<woot-loading-state
v-if="isFetching"
:message="$t('SEARCH.SEARCHING_DATA')"
/>
<slot v-else />
<div v-if="empty && !isFetching" class="empty">
<fluent-icon icon="info" size="16px" class="icon" />
<p class="empty-state__text">
<div
v-if="empty && !isFetching"
class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
>
<fluent-icon icon="info" size="16px" class="text-n-slate-11" />
<p class="mx-2 my-0 text-center text-n-slate-11">
{{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
</p>
</div>
</section>
</template>
<style scoped lang="scss">
.result-section {
@apply my-2 mx-0;
}
.search-list {
@apply m-0 py-4 px-0 list-none;
}
.header {
@apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
}
.empty {
@apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
.icon {
@apply text-slate-500 dark:text-slate-300;
}
.empty-state__text {
@apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
}
}
</style>