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
96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
|
import Label from 'dashboard/components-next/label/Label.vue';
|
|
import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
|
|
|
|
const props = defineProps({
|
|
attribute: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
badges: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['edit', 'delete']);
|
|
|
|
const iconByType = {
|
|
text: 'i-lucide-menu',
|
|
checkbox: 'i-lucide-circle-check-big',
|
|
list: 'i-lucide-list',
|
|
date: 'i-lucide-calendar',
|
|
link: 'i-lucide-link',
|
|
number: 'i-lucide-hash',
|
|
};
|
|
|
|
const attributeIcon = computed(() => {
|
|
const typeKey = props.attribute.type?.toLowerCase();
|
|
return iconByType[typeKey] || 'i-lucide-menu';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col py-4 min-w-0">
|
|
<div class="flex justify-between flex-row items-center gap-4 min-w-0">
|
|
<div class="flex items-center gap-4 min-w-0">
|
|
<div
|
|
class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
|
|
>
|
|
<Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
|
|
</div>
|
|
<div class="flex flex-col gap-1.5 items-start min-w-0 overflow-hidden">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h4 class="text-heading-3 truncate text-n-slate-12 min-w-0">
|
|
{{ attribute.label }}
|
|
</h4>
|
|
<div class="flex items-center gap-1.5">
|
|
<Label :label="attribute.type" compact />
|
|
<AttributeBadge
|
|
v-for="badge in badges"
|
|
:key="badge.type"
|
|
:type="badge.type"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-[auto_1fr] items-center gap-1.5">
|
|
<Icon icon="i-lucide-key-round" class="size-3.5 text-n-slate-11" />
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<span class="text-body-main text-n-slate-11 truncate">
|
|
{{ attribute.value }}
|
|
</span>
|
|
<template
|
|
v-if="attribute.attribute_description || attribute.description"
|
|
>
|
|
<div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
|
|
<span class="text-body-main text-n-slate-11 truncate">
|
|
{{ attribute.attribute_description || attribute.description }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 justify-end flex-shrink-0">
|
|
<Button
|
|
icon="i-woot-edit-pen"
|
|
slate
|
|
sm
|
|
@click="emit('edit', attribute)"
|
|
/>
|
|
<Button
|
|
icon="i-woot-bin"
|
|
slate
|
|
sm
|
|
class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
|
|
@click="emit('delete', attribute)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|