chore: Cleanup the design in widget builder (#5852)
This commit is contained in:
Pranav Raj S
GitHub
parent
956837ded5
commit
42b466bda2
4 changed files with 55 additions and 28 deletions
|
|
@ -15,7 +15,14 @@
|
|||
<div class="branding">
|
||||
<a class="branding-link">
|
||||
<img class="branding-image" :src="globalConfig.logoThumbnail" />
|
||||
<span>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT') }}</span>
|
||||
<span>
|
||||
{{
|
||||
useInstallationName(
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,8 +52,8 @@ import WidgetHead from './WidgetHead';
|
|||
import WidgetBody from './WidgetBody';
|
||||
import WidgetFooter from './WidgetFooter';
|
||||
import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup';
|
||||
|
||||
const { LOGO_THUMBNAIL: logoThumbnail } = window.globalConfig || {};
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'Widget',
|
||||
|
|
@ -56,6 +63,7 @@ export default {
|
|||
WidgetFooter,
|
||||
InputRadioGroup,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
props: {
|
||||
welcomeHeading: {
|
||||
type: String,
|
||||
|
|
@ -115,12 +123,10 @@ export default {
|
|||
],
|
||||
isDefaultScreen: true,
|
||||
isWidgetVisible: true,
|
||||
globalConfig: {
|
||||
logoThumbnail,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
getWidgetHeadConfig() {
|
||||
return {
|
||||
welcomeHeading: this.welcomeHeading,
|
||||
|
|
@ -198,6 +204,7 @@ export default {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.widget-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -215,13 +222,14 @@ export default {
|
|||
justify-content: center;
|
||||
|
||||
.branding-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
|
||||
|
|
@ -248,7 +256,7 @@ export default {
|
|||
.bubble {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: calc(var(--border-radius-small) * 10);
|
||||
border-radius: calc(var(--border-radius-large) * 10);
|
||||
height: calc(var(--space-large) * 2);
|
||||
width: calc(var(--space-large) * 2);
|
||||
position: relative;
|
||||
|
|
@ -256,15 +264,22 @@ export default {
|
|||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: var(--space-two);
|
||||
width: var(--space-two);
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{{ config.replyTime }}
|
||||
</div>
|
||||
</div>
|
||||
<thumbnail username="J" size="40" />
|
||||
<thumbnail username="J" size="40px" />
|
||||
</div>
|
||||
<div v-else class="conversation-content">
|
||||
<div class="conversation-wrap">
|
||||
|
|
@ -88,18 +88,20 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
.widget-body-container {
|
||||
.availability-content {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
|
||||
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);
|
||||
}
|
||||
|
|
@ -108,24 +110,27 @@ export default {
|
|||
.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-top: var(--space-zero);
|
||||
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 {
|
||||
box-shadow: var(--shadow-medium);
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--shadow-medium);
|
||||
color: var(--white);
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-nano);
|
||||
|
|
@ -141,6 +146,7 @@ export default {
|
|||
border-bottom-right-radius: var(--border-radius-small);
|
||||
background: var(--color-woot);
|
||||
}
|
||||
|
||||
&.agent {
|
||||
background: var(--white);
|
||||
border-bottom-left-radius: var(--border-radius-small);
|
||||
|
|
|
|||
|
|
@ -46,28 +46,30 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.header-wrapper {
|
||||
flex-shrink: 0;
|
||||
transition: max-height 300ms;
|
||||
background-color: var(--white);
|
||||
padding: var(--space-two);
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
.logo {
|
||||
width: var(--space-jumbo);
|
||||
height: var(--space-jumbo);
|
||||
border-radius: 100%;
|
||||
transition: all 0.5s ease;
|
||||
height: var(--space-larger);
|
||||
margin-right: var(--space-small);
|
||||
transition: all 0.5s ease;
|
||||
width: var(--space-larger);
|
||||
|
||||
&.small {
|
||||
width: var(--space-large);
|
||||
height: var(--space-large);
|
||||
width: var(--space-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,6 +77,7 @@ export default {
|
|||
.header-expanded {
|
||||
max-height: var(--space-giga);
|
||||
overflow: auto;
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-big);
|
||||
margin-bottom: var(--space-small);
|
||||
|
|
@ -90,15 +93,16 @@ export default {
|
|||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
|
||||
.online-dot {
|
||||
background-color: var(--g-500);
|
||||
height: var(--space-small);
|
||||
width: var(--space-small);
|
||||
border-radius: 100%;
|
||||
height: var(--space-small);
|
||||
margin: var(--space-zero) var(--space-smaller);
|
||||
width: var(--space-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -445,8 +445,10 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-container {
|
||||
width: 60%;
|
||||
|
||||
@include breakpoint(900px down) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -456,7 +458,7 @@ export default {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 64rem;
|
||||
min-height: 65rem;
|
||||
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);
|
||||
background: var(--s-50);
|
||||
|
|
|
|||
Loading…
Reference in a new issue