418bd177f8
# Pull Request Template ## Description This PR includes, 1. Adjusting the inbox settings page layout width from 3xl to 4xl for the collaborators, configuration, and bot configuration sections. 2. Adding a dynamic max-width for inbox settings banners based on the selected tab. 3. Making the sender name preview layout responsive. 4. Reordering automation rule row buttons so Clone appears before Delete. 5. Update the Gmail icon ratio. 6. Fix height issues with team/inbox pages 7. The delete button changes to red on hover 8. Add border to conversation header when no dashboard apps present ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import { useBranding } from 'shared/composables/useBranding';
|
|
|
|
import PageHeader from '../SettingsSubPageHeader.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const { replaceInstallationName } = useBranding();
|
|
|
|
const globalConfig = useMapGetter('globalConfig/get');
|
|
|
|
const createFlowSteps = computed(() => {
|
|
const steps = ['CHANNEL', 'INBOX', 'AGENT', 'FINISH'];
|
|
|
|
const routes = {
|
|
CHANNEL: 'settings_inbox_new',
|
|
INBOX: 'settings_inboxes_page_channel',
|
|
AGENT: 'settings_inboxes_add_agents',
|
|
FINISH: 'settings_inbox_finish',
|
|
};
|
|
|
|
return steps.map(step => {
|
|
return {
|
|
title: t(`INBOX_MGMT.CREATE_FLOW.${step}.TITLE`),
|
|
body: t(`INBOX_MGMT.CREATE_FLOW.${step}.BODY`),
|
|
route: routes[step],
|
|
};
|
|
});
|
|
});
|
|
|
|
const isFirstStep = computed(() => {
|
|
return route.name === 'settings_inbox_new';
|
|
});
|
|
|
|
const isFinishStep = computed(() => {
|
|
return route.name === 'settings_inbox_finish';
|
|
});
|
|
|
|
const pageTitle = computed(() => {
|
|
if (isFirstStep.value) {
|
|
return t('INBOX_MGMT.ADD.AUTH.TITLE');
|
|
}
|
|
if (isFinishStep.value) {
|
|
return t('INBOX_MGMT.ADD.AUTH.TITLE_FINISH');
|
|
}
|
|
return t('INBOX_MGMT.ADD.AUTH.TITLE_NEXT');
|
|
});
|
|
|
|
const items = computed(() => {
|
|
return createFlowSteps.value.map(item => ({
|
|
...item,
|
|
body: replaceInstallationName(item.body),
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto flex flex-col gap-6 mb-8 max-w-7xl w-full !px-6">
|
|
<PageHeader class="block lg:hidden !mb-0" :header-title="pageTitle" />
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak h-full min-h-[50dvh]"
|
|
>
|
|
<woot-wizard
|
|
class="hidden lg:block col-span-2 h-fit py-8 px-6"
|
|
:global-config="globalConfig"
|
|
:items="items"
|
|
/>
|
|
<div class="col-span-6 flex flex-col overflow-y-auto">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|