mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
ecdf977de7
* update widget preview on storybook * removed default value for logo * add online dot * resolve PR comments - split widget to head, body & footer - updated reply time to a select box * update spacing with variables * update reply-time with i18 * update with spacing variables * update padding with space variable * resolved PR comments * update background color Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
<template>
|
|
<div class="widget-wrapper">
|
|
<WidgetHead :config="getWidgetHeadConfig" />
|
|
<WidgetBody />
|
|
<WidgetFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WidgetHead from './WidgetHead';
|
|
import WidgetBody from './WidgetBody';
|
|
import WidgetFooter from './WidgetFooter';
|
|
|
|
export default {
|
|
name: 'Widget',
|
|
components: {
|
|
WidgetHead,
|
|
WidgetBody,
|
|
WidgetFooter,
|
|
},
|
|
props: {
|
|
welcomeHeading: {
|
|
type: String,
|
|
default: 'Hi There,',
|
|
},
|
|
welcomeTagLine: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
websiteName: {
|
|
type: String,
|
|
default: '',
|
|
required: true,
|
|
},
|
|
websiteDomain: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
logo: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isExpanded: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isOnline: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
replyTime: {
|
|
type: String,
|
|
default: 'few minutes',
|
|
},
|
|
},
|
|
computed: {
|
|
getWidgetHeadConfig() {
|
|
return {
|
|
welcomeHeading: this.welcomeHeading,
|
|
welcomeTagLine: this.welcomeTagLine,
|
|
websiteName: this.websiteName,
|
|
websiteDomain: this.websiteDomain,
|
|
logo: this.logo,
|
|
isExpanded: this.isExpanded,
|
|
isOnline: this.isOnline,
|
|
replyTime: this.replyTime,
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.text-lg {
|
|
font-size: var(--font-size-default);
|
|
}
|
|
.widget-wrapper {
|
|
box-shadow: var(--shadow-larger);
|
|
border-radius: var(--border-radius-large);
|
|
background-color: var(--color-background);
|
|
z-index: 99;
|
|
}
|
|
</style>
|