feat: Shows an alert while replying if chats are not assigned to them (#3867)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
parent
a737f89c47
commit
1a3d39a7f3
4 changed files with 233 additions and 75 deletions
129
app/javascript/dashboard/components/ui/Banner.vue
Normal file
129
app/javascript/dashboard/components/ui/Banner.vue
Normal file
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="banner" :class="bannerClasses">
|
||||
<span>
|
||||
{{ bannerMessage }}
|
||||
<a
|
||||
v-if="hrefLink"
|
||||
:href="hrefLink"
|
||||
rel="noopener noreferrer nofollow"
|
||||
target="_blank"
|
||||
>
|
||||
{{ hrefLinkText }}
|
||||
</a>
|
||||
</span>
|
||||
<woot-button
|
||||
v-if="hasActionButton"
|
||||
size="small"
|
||||
variant="link"
|
||||
icon="arrow-right"
|
||||
color-scheme="primary"
|
||||
class-names="banner-action__button"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ actionButtonLabel }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="hasCloseButton"
|
||||
size="small"
|
||||
variant="link"
|
||||
color-scheme="warning"
|
||||
icon="dismiss-circle"
|
||||
class-names="banner-action__button"
|
||||
@click="onClickClose"
|
||||
>
|
||||
</woot-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bannerMessage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hrefLink: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hrefLinkText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hasActionButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
actionButtonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
colorScheme: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hasCloseButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
bannerClasses() {
|
||||
return [this.colorScheme];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
},
|
||||
onClickClose(e) {
|
||||
this.$emit('close', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.banner {
|
||||
display: flex;
|
||||
color: var(--white);
|
||||
font-size: var(--font-size-mini);
|
||||
padding: var(--space-slab) var(--space-normal);
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
|
||||
&.secondary {
|
||||
background: var(--s-300);
|
||||
}
|
||||
|
||||
&.alert {
|
||||
background: var(--r-400);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: var(--y-800);
|
||||
color: var(--s-600);
|
||||
a {
|
||||
color: var(--s-600);
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background: var(--b-500);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--white);
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
||||
|
||||
.banner-action__button {
|
||||
margin: 0 var(--space-smaller);
|
||||
|
||||
::v-deep .button__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue