fix: Show add/import/export buttons in mobile view (#9761)
This commit is contained in:
Sivin Varghese
@@ -3,114 +3,120 @@
|
||||
class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
|
||||
>
|
||||
<div class="flex justify-between w-full px-4 py-2">
|
||||
<div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
|
||||
<woot-sidemenu-icon />
|
||||
<h1
|
||||
class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div
|
||||
class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
|
||||
>
|
||||
<div class="flex items-center absolute h-full left-2.5">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
|
||||
class="contact-search border-slate-100 dark:border-slate-600"
|
||||
:value="searchQuery"
|
||||
@keyup.enter="submitSearch"
|
||||
@input="inputSearch"
|
||||
/>
|
||||
<woot-button
|
||||
:is-loading="false"
|
||||
class="clear"
|
||||
:class-names="searchButtonClass"
|
||||
@click="submitSearch"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="hasActiveSegments" class="flex gap-2">
|
||||
<woot-button
|
||||
class="clear"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
@click="onToggleEditSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear"
|
||||
color-scheme="alert"
|
||||
icon="delete"
|
||||
@click="onToggleDeleteSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="!hasActiveSegments" class="relative">
|
||||
<div class="flex flex-col items-center w-full gap-2 md:flex-row">
|
||||
<div class="flex justify-between w-full gap-2">
|
||||
<div
|
||||
v-if="hasAppliedFilters"
|
||||
class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
|
||||
/>
|
||||
<woot-button
|
||||
class="clear"
|
||||
color-scheme="secondary"
|
||||
data-testid="create-new-contact"
|
||||
icon="filter"
|
||||
@click="toggleFilter"
|
||||
class="flex items-center justify-center max-w-full min-w-[6.25rem]"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
|
||||
<woot-sidemenu-icon />
|
||||
<h1
|
||||
class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
|
||||
>
|
||||
<div class="flex items-center absolute h-full left-2.5">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
|
||||
class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
|
||||
:value="searchQuery"
|
||||
@keyup.enter="submitSearch"
|
||||
@input="inputSearch"
|
||||
/>
|
||||
<woot-button
|
||||
:is-loading="false"
|
||||
class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
|
||||
:class-names="searchButtonClass"
|
||||
@click="submitSearch"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div v-if="hasActiveSegments" class="flex gap-2">
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
@click="onToggleEditSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="alert"
|
||||
icon="delete"
|
||||
@click="onToggleDeleteSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="!hasActiveSegments" class="relative">
|
||||
<div
|
||||
v-if="hasAppliedFilters"
|
||||
class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
|
||||
/>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="secondary"
|
||||
data-testid="create-new-contact"
|
||||
icon="filter"
|
||||
@click="toggleFilter"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
|
||||
<woot-button
|
||||
v-if="hasAppliedFilters && !hasActiveSegments"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="alert"
|
||||
variant="clear"
|
||||
icon="save"
|
||||
@click="onToggleSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="success"
|
||||
icon="person-add"
|
||||
data-testid="create-new-contact"
|
||||
@click="toggleCreate"
|
||||
>
|
||||
{{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="upload"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
@click="toggleImport"
|
||||
>
|
||||
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="download"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
@click="submitExport"
|
||||
>
|
||||
{{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
|
||||
<woot-button
|
||||
v-if="hasAppliedFilters && !hasActiveSegments"
|
||||
class="clear"
|
||||
color-scheme="alert"
|
||||
variant="clear"
|
||||
icon="save"
|
||||
@click="onToggleSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear"
|
||||
color-scheme="success"
|
||||
icon="person-add"
|
||||
data-testid="create-new-contact"
|
||||
@click="toggleCreate"
|
||||
>
|
||||
{{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="upload"
|
||||
class="clear"
|
||||
@click="toggleImport"
|
||||
>
|
||||
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="download"
|
||||
class="clear"
|
||||
@click="submitExport"
|
||||
>
|
||||
{{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<woot-confirm-modal
|
||||
@@ -156,7 +162,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
searchButtonClass() {
|
||||
return this.searchQuery !== '' ? 'show' : '';
|
||||
return this.searchQuery !== ''
|
||||
? 'opacity-100 translate-x-0 visible'
|
||||
: '-translate-x-px opacity-0 invisible';
|
||||
},
|
||||
...mapGetters({
|
||||
getAppliedContactFilters: 'contacts/getAppliedContactFilters',
|
||||
@@ -209,20 +217,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrap {
|
||||
.contact-search {
|
||||
@apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: transform 100ms linear;
|
||||
@apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
|
||||
}
|
||||
|
||||
.button.show {
|
||||
@apply opacity-100 translate-x-0 visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,6 +20,14 @@ module.exports = {
|
||||
interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
xs: '480px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
},
|
||||
fontSize: {
|
||||
...defaultTheme.fontSize,
|
||||
xxs: '0.625rem',
|
||||
|
||||
Reference in New Issue
Block a user