fix: Revert missing files for search (#8215)

This commit is contained in:
Sivin Varghese
2023-10-26 09:08:28 +05:30
committed by GitHub
parent 483d55df91
commit 232fa6fd18
2 changed files with 115 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
<template>
<div class="relative">
<div
class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
>
<woot-sidemenu-icon
size="tiny"
class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
/>
<router-link
:to="searchUrl"
class="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
>
<div class="flex">
<fluent-icon
icon="search"
class="search--icon text-slate-800 dark:text-slate-200"
size="16"
/>
</div>
<p
class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
>
{{ $t('CONVERSATION.SEARCH_MESSAGES') }}
</p>
</router-link>
<switch-layout
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="$emit('toggle-conversation-layout')"
/>
</div>
</div>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
import { mapGetters } from 'vuex';
import timeMixin from '../../../../mixins/time';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import SwitchLayout from './SwitchLayout.vue';
import { frontendURL } from 'dashboard/helper/URLHelper';
export default {
components: {
SwitchLayout,
},
directives: {
focus: {
inserted(el) {
el.focus();
},
},
},
mixins: [timeMixin, messageFormatterMixin, clickaway],
props: {
isOnExpandedLayout: {
type: Boolean,
required: true,
},
},
computed: {
...mapGetters({
accountId: 'getCurrentAccountId',
}),
searchUrl() {
return frontendURL(`accounts/${this.accountId}/search`);
},
},
};
</script>
<style lang="scss" scoped>
.search-link {
&:hover {
.search--icon,
.search--label {
@apply hover:text-woot-500 dark:hover:text-woot-500;
}
}
}
</style>

View File

@@ -0,0 +1,36 @@
<template>
<woot-button
v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
icon="arrow-right-import"
size="tiny"
variant="smooth"
color-scheme="secondary"
class="layout-switch__container"
:class="{ expanded: isOnExpandedLayout }"
@click="toggle"
/>
</template>
<script>
export default {
props: {
isOnExpandedLayout: {
type: Boolean,
default: false,
},
},
methods: {
toggle() {
this.$emit('toggle');
},
},
};
</script>
<style lang="scss" soped>
.layout-switch__container {
&.expanded .icon {
transform: rotate(180deg);
}
}
</style>