feat: update colors for v4 (#10660)
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
@@ -274,7 +274,7 @@ export default {
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply m-1 border-b border-solid border-slate-50 dark:border-slate-800/50;
|
||||
@apply m-1 border-b border-solid border-n-strong;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -71,12 +71,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<blockquote
|
||||
ref="messageContainer"
|
||||
class="message border-l-2 border-slate-100 dark:border-slate-700"
|
||||
>
|
||||
<blockquote ref="messageContainer" class="message border-l-2 border-n-weak">
|
||||
<p class="header">
|
||||
<strong class="text-slate-700 dark:text-slate-100">
|
||||
<strong class="text-n-slate-11">
|
||||
{{ author }}
|
||||
</strong>
|
||||
{{ $t('SEARCH.WROTE') }}
|
||||
@@ -93,18 +90,18 @@ export default {
|
||||
}
|
||||
.message-content::v-deep p,
|
||||
.message-content::v-deep li::marker {
|
||||
@apply text-slate-700 dark:text-slate-100 mb-1;
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply text-slate-500 dark:text-slate-300 mb-1;
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
@apply break-words text-slate-600 dark:text-slate-200;
|
||||
@apply break-words text-n-slate-11;
|
||||
}
|
||||
|
||||
.message-content::v-deep .searchkey--highlight {
|
||||
@apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
|
||||
@apply text-n-slate-12 text-sm font-semibold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,63 +1,35 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
shrink: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
<script setup>
|
||||
defineProps({
|
||||
shrink: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
emits: ['expand'],
|
||||
};
|
||||
});
|
||||
|
||||
defineEmits(['expand']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="read-more">
|
||||
<div>
|
||||
<div
|
||||
:class="{
|
||||
'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
|
||||
shrink,
|
||||
'max-h-[100px] overflow-hidden relative': shrink,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
<woot-button
|
||||
v-if="shrink"
|
||||
size="tiny"
|
||||
variant="smooth"
|
||||
color-scheme="primary"
|
||||
class="read-more-button"
|
||||
@click.prevent="$emit('expand')"
|
||||
<div
|
||||
class="bg-n-slate-3 rounded-md dark:bg-n-solid-3 absolute left-0 right-0 z-20 mx-auto mt-0 max-w-max bottom-2 backdrop-blur[100px]"
|
||||
>
|
||||
{{ $t('SEARCH.READ_MORE') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="shrink"
|
||||
size="tiny"
|
||||
variant="smooth"
|
||||
color-scheme="primary"
|
||||
@click.prevent="$emit('expand')"
|
||||
>
|
||||
{{ $t('SEARCH.READ_MORE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@tailwind components;
|
||||
@layer components {
|
||||
.shrink-gradient-light {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.shrink-gradient-dark {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgb(21, 23, 24) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.shrink-container {
|
||||
@apply max-h-[100px] overflow-hidden relative;
|
||||
}
|
||||
.shrink-container::after {
|
||||
}
|
||||
.read-more-button {
|
||||
@apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,14 +50,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-container" :class="{ 'is-focused': isInputFocused }">
|
||||
<div class="icon-container">
|
||||
<fluent-icon icon="search" class="icon" aria-hidden="true" />
|
||||
<div
|
||||
class="input-container rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 border border-solid"
|
||||
:class="{
|
||||
'border-n-brand': isInputFocused,
|
||||
'border-n-weak': !isInputFocused,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
:class="{
|
||||
'text-n-blue-text': isInputFocused,
|
||||
'text-n-slate-10': !isInputFocused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
type="search"
|
||||
class="dark:bg-slate-900"
|
||||
class="w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
|
||||
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
|
||||
:value="searchQuery"
|
||||
@focus="onFocus"
|
||||
@@ -68,37 +82,7 @@ export default {
|
||||
:title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
|
||||
:show-close="false"
|
||||
small
|
||||
class="helper-label"
|
||||
class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-container {
|
||||
transition: border-bottom 0.2s ease-in-out;
|
||||
@apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
|
||||
|
||||
input[type='search'] {
|
||||
@apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
@apply border-woot-100 dark:border-woot-600;
|
||||
|
||||
.icon {
|
||||
color: var(--w-400);
|
||||
@apply text-woot-400 dark:text-woot-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-container {
|
||||
@apply flex items-center;
|
||||
.icon {
|
||||
@apply text-slate-400;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-label {
|
||||
@apply m-0 whitespace-nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
phone: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
thumbnail: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
accountId: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
computed: {
|
||||
navigateTo() {
|
||||
return frontendURL(`accounts/${this.accountId}/contacts/${this.id}`);
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
phone: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
thumbnail: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
accountId: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
return frontendURL(`accounts/${props.accountId}/contacts/${props.id}`);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="navigateTo" class="contact-item">
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex items-center p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<woot-thumbnail :src="thumbnail" :username="name" size="24px" />
|
||||
<div class="ml-2 rtl:mr-2 rtl:ml-0">
|
||||
<h5 class="text-sm name text-slate-800 dark:text-slate-200">
|
||||
<h5 class="text-sm name text-n-slate-12 dark:text-n-slate-12">
|
||||
{{ name }}
|
||||
</h5>
|
||||
<p
|
||||
class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
|
||||
class="flex items-center gap-1 m-0 text-sm text-slate-600 dark:text-slate-200"
|
||||
>
|
||||
<span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
|
||||
<span v-if="email" class="email text-n-slate-12 dark:text-n-slate-12">{{
|
||||
email
|
||||
}}</span>
|
||||
<span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
|
||||
<span
|
||||
v-if="phone"
|
||||
class="separator text-n-slate-10 dark:text-n-slate-10"
|
||||
>
|
||||
•
|
||||
</span>
|
||||
<span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
|
||||
<span v-if="phone" class="phone text-n-slate-12 dark:text-n-slate-12">
|
||||
{{ phone }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-item {
|
||||
@apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
|
||||
}
|
||||
.contact-details {
|
||||
@apply ml-2 rtl:mr-2 rtl:ml-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,7 +43,7 @@ export default {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="contacts.length" class="search-list">
|
||||
<ul v-if="contacts.length" class="space-y-1.5">
|
||||
<li v-for="contact in contacts" :key="contact.id">
|
||||
<SearchResultContactItem
|
||||
:id="contact.id"
|
||||
|
||||
@@ -56,37 +56,62 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="navigateTo" class="conversation-item">
|
||||
<div class="icon-wrap">
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center flex-shrink-0 w-6 h-6 rounded bg-n-brand/10 dark:bg-n-brand/40 text-n-blue-text dark:text-n-blue-text"
|
||||
>
|
||||
<fluent-icon icon="chat-multiple" :size="14" />
|
||||
</div>
|
||||
<div class="conversation-details">
|
||||
<div class="meta-wrap">
|
||||
<div class="flex-grow min-w-0 ml-2">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex">
|
||||
<woot-label
|
||||
class="conversation-id"
|
||||
class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
|
||||
:title="`#${id}`"
|
||||
:show-close="false"
|
||||
small
|
||||
/>
|
||||
<div class="inbox-name-wrap">
|
||||
<InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
|
||||
<div
|
||||
class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
|
||||
>
|
||||
<InboxName
|
||||
:inbox="inbox"
|
||||
class="mr-2 rtl:mr-0 rtl:ml-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="created-at">{{ createdAtTime }}</span>
|
||||
<span
|
||||
class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
|
||||
>
|
||||
{{ createdAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
|
||||
<span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
|
||||
<div class="flex gap-2">
|
||||
<h5
|
||||
v-if="name"
|
||||
class="m-0 text-sm text-n-slate-12 dark:text-n-slate-12"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
|
||||
>
|
||||
{{ $t('SEARCH.FROM') }}:
|
||||
</span>
|
||||
{{ name }}
|
||||
</h5>
|
||||
<h5
|
||||
v-if="email"
|
||||
class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
|
||||
class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
<span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
|
||||
<span
|
||||
class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
|
||||
>
|
||||
{{ $t('SEARCH.EMAIL') }}:
|
||||
</span>
|
||||
{{ email }}
|
||||
</h5>
|
||||
</div>
|
||||
@@ -94,40 +119,3 @@ export default {
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.conversation-item {
|
||||
@apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
|
||||
}
|
||||
|
||||
.meta-wrap {
|
||||
@apply flex items-center justify-between mb-1;
|
||||
}
|
||||
.icon-wrap {
|
||||
@apply w-6 h-6 flex-shrink-0 bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
|
||||
}
|
||||
|
||||
.inbox-name-wrap {
|
||||
@apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
|
||||
}
|
||||
.conversation-details {
|
||||
@apply ml-2 flex-grow min-w-0;
|
||||
}
|
||||
|
||||
.name {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
.conversation-id,
|
||||
.name,
|
||||
.email {
|
||||
@apply m-0;
|
||||
}
|
||||
.created-at,
|
||||
.pre-text {
|
||||
@apply text-slate-600 dark:text-slate-100 text-xs font-normal;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
:show-title="showTitle || isFetching"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="conversations.length" class="search-list">
|
||||
<ul v-if="conversations.length" class="space-y-1.5">
|
||||
<li v-for="conversation in conversations" :key="conversation.id">
|
||||
<SearchResultConversationItem
|
||||
:id="conversation.id"
|
||||
|
||||
@@ -51,7 +51,7 @@ export default {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="messages.length" class="search-list">
|
||||
<ul v-if="messages.length" class="space-y-1.5">
|
||||
<li v-for="message in messages" :key="message.id">
|
||||
<SearchResultConversationItem
|
||||
:id="message.conversation_id"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,6 +4,7 @@ import SearchTabs from './SearchTabs.vue';
|
||||
import SearchResultConversationsList from './SearchResultConversationsList.vue';
|
||||
import SearchResultMessagesList from './SearchResultMessagesList.vue';
|
||||
import SearchResultContactsList from './SearchResultContactsList.vue';
|
||||
import ButtonV4 from 'dashboard/components-next/button/Button.vue';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
import {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
SearchResultConversationsList,
|
||||
SearchResultMessagesList,
|
||||
Policy,
|
||||
ButtonV4,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -201,19 +203,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-page">
|
||||
<div class="page-header">
|
||||
<woot-button
|
||||
icon="chevron-left"
|
||||
variant="smooth"
|
||||
size="small "
|
||||
class="back-button"
|
||||
<div class="flex flex-col w-full bg-n-background">
|
||||
<div class="flex p-4">
|
||||
<ButtonV4
|
||||
:label="$t('GENERAL_SETTINGS.BACK')"
|
||||
icon="i-lucide-chevron-left"
|
||||
faded
|
||||
primary
|
||||
sm
|
||||
@click="onBack"
|
||||
>
|
||||
{{ $t('GENERAL_SETTINGS.BACK') }}
|
||||
</woot-button>
|
||||
/>
|
||||
</div>
|
||||
<section class="search-root">
|
||||
<section
|
||||
class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
|
||||
>
|
||||
<header>
|
||||
<SearchHeader @search="onSearch" />
|
||||
<SearchTabs
|
||||
@@ -223,7 +226,7 @@ export default {
|
||||
@tab-change="tab => (selectedTab = tab)"
|
||||
/>
|
||||
</header>
|
||||
<div class="search-results">
|
||||
<div class="flex-grow h-full px-2 py-0 overflow-y-auto">
|
||||
<div v-if="showResultsSection">
|
||||
<Policy :permissions="[...rolePermissions, contactPermissions]">
|
||||
<SearchResultContactsList
|
||||
@@ -259,17 +262,23 @@ export default {
|
||||
/>
|
||||
</Policy>
|
||||
</div>
|
||||
<div v-else-if="showEmptySearchResults" class="empty">
|
||||
<fluent-icon icon="info" size="16px" class="icon" />
|
||||
<p class="empty-state__text">
|
||||
<div
|
||||
v-else-if="showEmptySearchResults"
|
||||
class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
|
||||
>
|
||||
<fluent-icon icon="info" size="16px" class="text-n-slate-11" />
|
||||
<p class="m-2 text-center text-n-slate-11">
|
||||
{{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="text-center empty">
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
|
||||
>
|
||||
<p class="text-center margin-bottom-0">
|
||||
<fluent-icon icon="search" size="24px" class="icon" />
|
||||
<fluent-icon icon="search" size="24px" class="text-n-slate-11" />
|
||||
</p>
|
||||
<p class="empty-state__text">
|
||||
<p class="m-2 text-center text-n-slate-11">
|
||||
{{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -277,29 +286,3 @@ export default {
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-page {
|
||||
@apply flex flex-col w-full bg-white dark:bg-slate-900;
|
||||
}
|
||||
.page-header {
|
||||
@apply flex p-4;
|
||||
}
|
||||
.search-root {
|
||||
@apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
|
||||
|
||||
.search-results {
|
||||
@apply flex-grow h-full overflow-y-auto py-0 px-2;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
@apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
|
||||
.icon {
|
||||
@apply text-slate-500 dark:text-slate-400;
|
||||
}
|
||||
.empty-state__text {
|
||||
@apply text-center text-slate-500 dark:text-slate-400 m-2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user