mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 19:48:08 +00:00
feat: Update widget builder to support dark mode (#10230)
This commit is contained in:
Sivin Varghese
@@ -77,7 +77,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
getWidgetHeadConfig() {
|
||||
getWidgetConfig() {
|
||||
return {
|
||||
welcomeHeading: this.welcomeHeading,
|
||||
welcomeTagline: this.welcomeTagline,
|
||||
@@ -89,23 +89,6 @@ export default {
|
||||
color: this.color,
|
||||
};
|
||||
},
|
||||
getWidgetBodyConfig() {
|
||||
return {
|
||||
welcomeHeading: this.welcomeHeading,
|
||||
welcomeTagline: this.welcomeTagline,
|
||||
isDefaultScreen: this.isDefaultScreen,
|
||||
isOnline: this.isOnline,
|
||||
replyTime: this.replyTimeText,
|
||||
color: this.color,
|
||||
logo: this.logo,
|
||||
};
|
||||
},
|
||||
getWidgetFooterConfig() {
|
||||
return {
|
||||
isDefaultScreen: this.isDefaultScreen,
|
||||
color: this.color,
|
||||
};
|
||||
},
|
||||
replyTimeText() {
|
||||
switch (this.replyTime) {
|
||||
case 'in_a_few_minutes':
|
||||
@@ -123,12 +106,10 @@ export default {
|
||||
justifyContent: this.widgetBubblePosition === 'left' ? 'start' : 'end',
|
||||
};
|
||||
},
|
||||
getBubbleTypeClass() {
|
||||
return {
|
||||
'bubble-close': this.isWidgetVisible,
|
||||
'bubble-expanded':
|
||||
!this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble',
|
||||
};
|
||||
isBubbleExpanded() {
|
||||
return (
|
||||
!this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble'
|
||||
);
|
||||
},
|
||||
getWidgetBubbleLauncherTitle() {
|
||||
return this.isWidgetVisible || this.widgetBubbleType === 'standard'
|
||||
@@ -149,22 +130,33 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="widget-preview-container">
|
||||
<div v-if="isWidgetVisible" class="screen-selector">
|
||||
<div>
|
||||
<div v-if="isWidgetVisible" class="flex flex-col items-center">
|
||||
<InputRadioGroup
|
||||
name="widget-screen"
|
||||
:items="widgetScreens"
|
||||
:action="handleScreenChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isWidgetVisible" class="widget-wrapper">
|
||||
<WidgetHead :config="getWidgetHeadConfig" />
|
||||
<div
|
||||
v-if="isWidgetVisible"
|
||||
class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[500px] w-[320px]"
|
||||
>
|
||||
<WidgetHead :config="getWidgetConfig" />
|
||||
<div>
|
||||
<WidgetBody :config="getWidgetBodyConfig" />
|
||||
<WidgetFooter :config="getWidgetFooterConfig" />
|
||||
<div class="branding">
|
||||
<a class="branding-link">
|
||||
<img class="branding-image" :src="globalConfig.logoThumbnail" />
|
||||
<WidgetBody
|
||||
v-if="!getWidgetConfig.isDefaultScreen"
|
||||
:config="getWidgetConfig"
|
||||
/>
|
||||
<WidgetFooter :config="getWidgetConfig" />
|
||||
<div class="py-2.5 flex justify-center">
|
||||
<a
|
||||
class="items-center gap-0.5 text-slate-500 dark:text-slate-400 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
|
||||
>
|
||||
<img
|
||||
class="max-w-2.5 max-h-2.5"
|
||||
:src="globalConfig.logoThumbnail"
|
||||
/>
|
||||
<span>
|
||||
{{
|
||||
useInstallationName(
|
||||
@@ -177,135 +169,34 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-bubble" :style="getBubblePositionStyle">
|
||||
<div class="flex mt-4 w-[320px]" :style="getBubblePositionStyle">
|
||||
<button
|
||||
class="bubble"
|
||||
:class="getBubbleTypeClass"
|
||||
class="relative flex items-center justify-center rounded-full cursor-pointer"
|
||||
:style="{ background: color }"
|
||||
:class="
|
||||
isBubbleExpanded
|
||||
? 'w-auto font-medium text-base text-white dark:text-white h-12 px-4'
|
||||
: 'w-16 h-16'
|
||||
"
|
||||
@click="toggleWidget"
|
||||
>
|
||||
<img
|
||||
v-if="!isWidgetVisible"
|
||||
src="~dashboard/assets/images/bubble-logo.svg"
|
||||
alt=""
|
||||
draggable="false"
|
||||
class="w-6 h-6 mx-auto"
|
||||
/>
|
||||
<div>
|
||||
<div v-if="isBubbleExpanded" class="ltr:pl-2.5 rtl:pr-2.5">
|
||||
{{ getWidgetBubbleLauncherTitle }}
|
||||
</div>
|
||||
<div v-if="isWidgetVisible" class="relative">
|
||||
<div class="absolute w-0.5 h-8 rotate-45 -translate-y-1/2 bg-white" />
|
||||
<div
|
||||
class="absolute w-0.5 h-8 -rotate-45 -translate-y-1/2 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.widget-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: var(--shadow-widget-builder);
|
||||
border-radius: var(--border-radius-large);
|
||||
background-color: #f4f6fb;
|
||||
width: calc(var(--space-large) * 10);
|
||||
height: calc(var(--space-mega) * 5);
|
||||
|
||||
.branding {
|
||||
padding-top: var(--space-one);
|
||||
padding-bottom: var(--space-one);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.branding-link {
|
||||
align-items: center;
|
||||
color: var(--b-500);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
filter: grayscale(1);
|
||||
flex-direction: row;
|
||||
font-size: var(--font-size-micro);
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
color: var(--b-600);
|
||||
}
|
||||
|
||||
.branding-image {
|
||||
max-width: var(--space-one);
|
||||
max-height: var(--space-one);
|
||||
margin-right: var(--space-micro);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-bubble {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: var(--space-normal);
|
||||
width: calc(var(--space-large) * 10);
|
||||
|
||||
.bubble {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: calc(var(--border-radius-large) * 10);
|
||||
height: calc(var(--space-large) * 2);
|
||||
width: calc(var(--space-large) * 2);
|
||||
position: relative;
|
||||
overflow-wrap: anywhere;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: var(--space-medium);
|
||||
margin: var(--space-one) var(--space-one) var(--space-one)
|
||||
var(--space-two);
|
||||
width: var(--space-medium);
|
||||
}
|
||||
|
||||
div {
|
||||
padding-right: var(--space-two);
|
||||
}
|
||||
|
||||
.bubble-expanded {
|
||||
img {
|
||||
height: var(--space-large);
|
||||
width: var(--space-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-close::before,
|
||||
.bubble-close::after {
|
||||
background-color: var(--white);
|
||||
content: ' ';
|
||||
display: inline;
|
||||
height: var(--space-medium);
|
||||
width: var(--space-micro);
|
||||
left: var(--space-large);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bubble-close::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.bubble-close::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.bubble-expanded {
|
||||
font-size: var(--font-size-default);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--white);
|
||||
width: auto !important;
|
||||
height: var(--space-larger) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,160 +1,41 @@
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
export default {
|
||||
name: 'WidgetBody',
|
||||
components: {
|
||||
Thumbnail,
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getStatusText() {
|
||||
return this.config.isOnline
|
||||
? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
|
||||
: this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
|
||||
},
|
||||
getWidgetBodyClass() {
|
||||
return {
|
||||
'with-chat-view': !this.config.isDefaultScreen,
|
||||
'with-heading-or-title':
|
||||
this.config.isDefaultScreen &&
|
||||
(this.config.welcomeHeading || this.config.welcomeTagline),
|
||||
'with-heading-or-title-without-logo':
|
||||
this.config.isDefaultScreen &&
|
||||
(this.config.welcomeHeading || this.config.welcomeTagline) &&
|
||||
!this.config.logo,
|
||||
'without-heading-and-title':
|
||||
this.config.isDefaultScreen &&
|
||||
!this.config.welcomeHeading &&
|
||||
!this.config.welcomeTagline,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="widget-body-container">
|
||||
<div v-if="config.isDefaultScreen" class="availability-content">
|
||||
<div class="availability-info">
|
||||
<div class="team-status">
|
||||
{{ getStatusText }}
|
||||
</div>
|
||||
<div class="reply-wait-message">
|
||||
{{ config.replyTime }}
|
||||
<div class="h-[calc(2rem*10)] px-4 overflow-y-auto">
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="items-end flex justify-end ml-auto mb-1 mt-0 max-w-[85%] text-right"
|
||||
>
|
||||
<div
|
||||
class="rounded-[1.25rem] rounded-br-[0.25rem] text-white dark:text-white text-sm px-4 py-3"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
<p class="m-0">
|
||||
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Thumbnail username="J" size="40px" />
|
||||
</div>
|
||||
<div v-else class="conversation-content">
|
||||
<div class="conversation-wrap">
|
||||
<div class="message-wrap">
|
||||
<div class="user-message-wrap">
|
||||
<div class="user-message">
|
||||
<div class="message-wrap">
|
||||
<div
|
||||
class="chat-bubble user"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
<p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-message-wrap">
|
||||
<div class="agent-message">
|
||||
<div class="avatar-wrap" />
|
||||
<div class="message-wrap">
|
||||
<div class="chat-bubble agent">
|
||||
<div class="message-content">
|
||||
<p>
|
||||
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-slate-900 dark:text-white dark:bg-slate-700"
|
||||
>
|
||||
<div>
|
||||
<p class="m-0">
|
||||
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.widget-body-container {
|
||||
.availability-content {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: inherit;
|
||||
padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
|
||||
|
||||
.availability-info {
|
||||
width: 100%;
|
||||
|
||||
.team-status {
|
||||
font-size: var(--font-size-default);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.reply-wait-message {
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
||||
}
|
||||
}
|
||||
.conversation-content {
|
||||
height: calc(var(--space-large) * 10);
|
||||
padding: 0 var(--space-two);
|
||||
|
||||
.conversation-wrap {
|
||||
.user-message {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-smaller);
|
||||
margin-left: auto;
|
||||
margin-top: var(--space-zero);
|
||||
max-width: 85%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
margin-right: var(--space-smaller);
|
||||
max-width: 100%;
|
||||
|
||||
.chat-bubble {
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: var(--shadow-medium);
|
||||
color: var(--white);
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-nano);
|
||||
line-height: 1.5;
|
||||
padding: 0.8125rem 1.09375rem;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
margin: var(--space-zero);
|
||||
}
|
||||
|
||||
&.user {
|
||||
border-bottom-right-radius: var(--border-radius-small);
|
||||
background: var(--color-woot);
|
||||
}
|
||||
|
||||
&.agent {
|
||||
background: var(--white);
|
||||
border-bottom-left-radius: var(--border-radius-small);
|
||||
color: var(--b-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,105 +1,81 @@
|
||||
<script>
|
||||
import CustomButton from 'dashboard/components/buttons/Button.vue';
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
|
||||
export default {
|
||||
name: 'WidgetFooter',
|
||||
components: {
|
||||
CustomButton,
|
||||
ResizableTextArea,
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const isInputFocused = ref(false);
|
||||
|
||||
const getStatusText = computed(() => {
|
||||
return props.config.isOnline
|
||||
? t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
|
||||
: t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="footer-wrap">
|
||||
<CustomButton
|
||||
<div class="relative flex flex-col w-full px-4">
|
||||
<div
|
||||
v-if="config.isDefaultScreen"
|
||||
class="start-conversation"
|
||||
:style="{ background: config.color }"
|
||||
class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div
|
||||
class="text-sm font-medium leading-4 text-slate-700 dark:text-slate-50"
|
||||
>
|
||||
{{ getStatusText }}
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-slate-500 dark:text-slate-100">
|
||||
{{ config.replyTime }}
|
||||
</div>
|
||||
</div>
|
||||
<Thumbnail username="C" size="34px" />
|
||||
</div>
|
||||
<button
|
||||
v-if="config.isDefaultScreen"
|
||||
class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-slate-800 dark:bg-transparent dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
|
||||
:style="{ color: config.color }"
|
||||
>
|
||||
<span class="pr-2 text-xs">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT'
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<FluentIcon icon="arrow-right" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center h-10 bg-white rounded-md dark:bg-slate-700"
|
||||
:class="{ 'ring-2 ring-woot-500 dark:ring-woot-400': isInputFocused }"
|
||||
>
|
||||
{{
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
|
||||
}}
|
||||
</CustomButton>
|
||||
<div v-else class="chat-message-input is-focused">
|
||||
<ResizableTextArea
|
||||
id="chat-input"
|
||||
:rows="1"
|
||||
:placeholder="
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
|
||||
"
|
||||
class="user-message-input is-focused"
|
||||
class="flex-grow !bg-white border-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
|
||||
@focus="isInputFocused = true"
|
||||
@blur="isInputFocused = false"
|
||||
/>
|
||||
<div class="button-wrap">
|
||||
<fluent-icon icon="emoji" />
|
||||
<fluent-icon class="icon-send" icon="send" />
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<FluentIcon icon="emoji" />
|
||||
<FluentIcon class="icon-send" icon="send" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'dashboard/assets/scss/variables.scss';
|
||||
.footer-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-left: var(--space-two);
|
||||
padding-right: var(--space-two);
|
||||
|
||||
.start-conversation {
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-small);
|
||||
border-radius: var(--border-radius-normal);
|
||||
padding-left: var(--space-two);
|
||||
padding-right: var(--space-two);
|
||||
}
|
||||
|
||||
.chat-message-input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: var(--space-zero) var(--space-small) var(--space-zero)
|
||||
var(--space-slab);
|
||||
border-radius: var(--border-radius-normal);
|
||||
background: white;
|
||||
|
||||
&.is-focused {
|
||||
box-shadow:
|
||||
0 0 0 1px var(--color-woot),
|
||||
0 0 2px 2px var(--w-100);
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: var(--space-small);
|
||||
}
|
||||
|
||||
.user-message-input {
|
||||
border: 0;
|
||||
height: var(--space-medium);
|
||||
min-height: var(--space-medium);
|
||||
max-height: var(--space-giga);
|
||||
line-height: 1;
|
||||
font-size: var(--font-size-small);
|
||||
resize: none;
|
||||
padding: var(--space-zero);
|
||||
padding-top: var(--space-smaller);
|
||||
padding-bottom: var(--space-smaller);
|
||||
margin-top: var(--space-small);
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
|
||||
.icon-send {
|
||||
margin-left: var(--space-one);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,111 +1,65 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
computed: {
|
||||
isDefaultScreen() {
|
||||
return (
|
||||
this.config.isDefaultScreen &&
|
||||
((this.config.welcomeHeading &&
|
||||
this.config.welcomeHeading.length !== 0) ||
|
||||
(this.config.welcomeTagLine &&
|
||||
this.config.welcomeTagline.length !== 0))
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const isDefaultScreen = computed(() => {
|
||||
return (
|
||||
props.config.isDefaultScreen &&
|
||||
((props.config.welcomeHeading &&
|
||||
props.config.welcomeHeading.length !== 0) ||
|
||||
(props.config.welcomeTagLine && props.config.welcomeTagline.length !== 0))
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header-wrapper">
|
||||
<div class="header-branding">
|
||||
<div class="header">
|
||||
<div
|
||||
class="rounded-t-lg flex-shrink-0 transition-[max-height] duration-300"
|
||||
:class="
|
||||
isDefaultScreen
|
||||
? 'bg-slate-25 dark:bg-slate-800 px-4 py-5'
|
||||
: 'bg-white dark:bg-slate-900 p-4'
|
||||
"
|
||||
>
|
||||
<div class="relative top-px">
|
||||
<div class="flex items-center justify-start">
|
||||
<img
|
||||
v-if="config.logo"
|
||||
:src="config.logo"
|
||||
class="logo"
|
||||
:class="{ small: !isDefaultScreen }"
|
||||
class="mr-2 rounded-full logo"
|
||||
:class="!isDefaultScreen ? 'h-8 w-8 mb-1' : 'h-12 w-12 mb-2'"
|
||||
/>
|
||||
<div v-if="!isDefaultScreen">
|
||||
<div class="title-block">
|
||||
<span>{{ config.websiteName }}</span>
|
||||
<div v-if="config.isOnline" class="online-dot" />
|
||||
<div class="flex items-center justify-start gap-1">
|
||||
<span
|
||||
class="text-base font-medium leading-3 text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ config.websiteName }}
|
||||
</span>
|
||||
<div
|
||||
v-if="config.isOnline"
|
||||
class="w-2 h-2 bg-green-500 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ config.replyTime }}</div>
|
||||
<span class="mt-1 text-xs text-slate-600 dark:text-slate-400">
|
||||
{{ config.replyTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isDefaultScreen" class="header-expanded">
|
||||
<h2>{{ config.welcomeHeading }}</h2>
|
||||
<p>{{ config.welcomeTagline }}</p>
|
||||
<div v-if="isDefaultScreen" class="overflow-auto max-h-60">
|
||||
<h2 class="mb-2 text-2xl break-words text-slate-900 dark:text-white">
|
||||
{{ config.welcomeHeading }}
|
||||
</h2>
|
||||
<p class="text-sm break-words text-slate-600 dark:text-slate-100">
|
||||
{{ config.welcomeTagline }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-wrapper {
|
||||
background-color: var(--white);
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-two);
|
||||
transition: max-height 300ms;
|
||||
|
||||
.header-branding {
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.logo {
|
||||
border-radius: 100%;
|
||||
height: var(--space-larger);
|
||||
margin-right: var(--space-small);
|
||||
transition: all 0.5s ease;
|
||||
width: var(--space-larger);
|
||||
|
||||
&.small {
|
||||
height: var(--space-large);
|
||||
width: var(--space-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-expanded {
|
||||
max-height: var(--space-giga);
|
||||
overflow: auto;
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-big);
|
||||
margin-bottom: var(--space-small);
|
||||
margin-top: var(--space-two);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-small);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
|
||||
.online-dot {
|
||||
background-color: var(--g-500);
|
||||
border-radius: 100%;
|
||||
height: var(--space-small);
|
||||
margin: var(--space-zero) var(--space-smaller);
|
||||
width: var(--space-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -266,9 +266,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<div class="mx-8">
|
||||
<div class="widget-builder-container">
|
||||
<div class="settings-container w-100 lg:w-[40%]">
|
||||
<div class="settings-content">
|
||||
<div class="flex p-2.5">
|
||||
<div class="w-100 lg:w-[40%]">
|
||||
<div class="min-h-full py-4 overflow-y-scroll">
|
||||
<form @submit.prevent="updateWidget">
|
||||
<woot-avatar-uploader
|
||||
:label="
|
||||
@@ -377,7 +377,7 @@ export default {
|
||||
"
|
||||
/>
|
||||
<woot-submit-button
|
||||
class="submit-button"
|
||||
class="mt-4"
|
||||
:button-text="
|
||||
$t(
|
||||
'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
|
||||
@@ -389,14 +389,17 @@ export default {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-container w-100 lg:w-3/5">
|
||||
<div class="w-100 lg:w-3/5">
|
||||
<InputRadioGroup
|
||||
name="widget-view-options"
|
||||
class="text-center"
|
||||
:items="getWidgetViewOptions"
|
||||
:action="handleWidgetViewChange"
|
||||
/>
|
||||
<div v-if="isWidgetPreview" class="widget-preview">
|
||||
<div
|
||||
v-if="isWidgetPreview"
|
||||
class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-slate-50 dark:bg-slate-900/50 rounded-lg"
|
||||
>
|
||||
<Widget
|
||||
:welcome-heading="welcomeHeading"
|
||||
:welcome-tagline="welcomeTagline"
|
||||
@@ -410,56 +413,10 @@ export default {
|
||||
:widget-bubble-type="widgetBubbleType"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="widget-script">
|
||||
<div v-else class="mx-5 p-2.5 bg-slate-50 rounded-lg dark:bg-slate-700">
|
||||
<woot-code :script="widgetScript" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'dashboard/assets/scss/woot';
|
||||
|
||||
.widget-builder-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: var(--space-one);
|
||||
// @include breakpoint(900px down) {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
.settings-content {
|
||||
padding: var(--space-normal) var(--space-zero);
|
||||
overflow-y: scroll;
|
||||
min-height: 100%;
|
||||
|
||||
.submit-button {
|
||||
margin-top: var(--space-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-container {
|
||||
.widget-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 40.625rem;
|
||||
margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
|
||||
padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
|
||||
@apply bg-slate-50 dark:bg-slate-700;
|
||||
|
||||
// @include breakpoint(500px down) {
|
||||
// background: none;
|
||||
// }
|
||||
}
|
||||
|
||||
.widget-script {
|
||||
@apply mx-5 p-2.5 bg-slate-50 dark:bg-slate-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user