jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2485 from Safelite/CASH-313-style-webchat

Browse source 
Cash 313 style webchat
This commit is contained in:
bmauger 2025-05-05 14:58:14 -04:00 committed by GitHub
commit c33b43e9f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 122 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/digital-components/salesforce-webchat/salesforce-webchat.vue
View file

@ -1,5 +1,7 @@
<template>
<span class="salesforce-webchat"></span>
<span class="salesforce-webchat">
<button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
</span>
</template>
<script>
@ -49,12 +51,91 @@ export default {
};
</script>
<style type="text/css">
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #167cac;
font-family: "Arial", sans-serif;
<style lang="scss">
.salesforce-webchat {
.salesforce-chat-button {
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
background-position: center;
border: none;
background-color: transparent;
}
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
outline: 1px solid #167cac;
.dockableContainer.showDockableContainer .sidebarBody {
button {
background: #0070d1;
color: #fff;
&:hover {
background: #06577c !important;
}
}
.embeddedServiceSidebarFormField .uiInput input {
border: 1px solid #8e9292;
}
.embeddedServiceSidebarButton.uiButton--inverse .label {
color: #fff;
text-decoration: underline;
}
.embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
background-color: #0070d1;
}
.embeddedServiceSidebarFormField .uiInput .uiLabel-left {
font-family: AvertaRegular;
color: #727676;
}
.form-element__help {
color: #db0020;
}
.embeddedServiceSidebarFormField .uiInput input {
border: 1px solid #06577c;
}
.embeddedServiceLiveAgentStateChatInputFooter
.footerMenuWrapper
.footer-menu-items
.slds-dropdown__item
> a {
padding-left: 0;
max-width: 100%;
display: flex;
justify-content: center;
}
.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items a {
margin: 0 auto;
}
.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus {
background-color: #0070d1;
}
}
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #0070d1 !important;
}
.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
.embeddedServiceSidebarMinimizedDefaultUI.helpButton,
.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
background-color: #0070d1;
border: 1px solid #0070d1;
}
.dockableContainer.showDockableContainer .chatHeaderBranding {
background-color: #0070d1;
}
.dockableContainer.showDockableContainer {
font-family: AvertaRegular;
color: #727676;
}
.dockableContainer.showDockableContainer span.required {
color: #db0020;
}
.dockableContainer.showDockableContainer .sidebarBody button:hover {
}
</style>

51
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -1,13 +1,21 @@
<template>
<div
class="funnel-header d-flex justify-content-center align-items-center flex-column"
v-if="imageSrc">
<!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton />-->
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
<menuModal />
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
<progressBar />
<div class="funnel-header" v-if="imageSrc">
<div class="d-flex justify-content-between align-items-center">
<div class="button-container">
<!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton /> -->
</div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</div>
<div class="button-container">
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
<menuModal />
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
</div>
</div>
<div class="d-flex w-100">
<progressBar />
</div>
</div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in">
@ -45,7 +53,7 @@ export default {
cmsWidgetName: String,
hideSalesforceWebchatLaunchButton: {
type: Boolean,
default: false,
default: true,
},
},
computed: {
@ -100,16 +108,23 @@ export default {
</script>
<style lang="scss" scoped>
:deep(.menu-modal-container) {
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
.funnel-header {
position: relative;
padding-top: 0.97rem;
}
padding: 1rem 0;
.logo-image {
width: auto;
height: 1.1875rem;
.button-container {
width: 1.5rem;
height: 1.625rem;
}
.logo-image {
width: auto;
height: 1.1875rem;
margin: 0 auto;
}
:deep(.menu-modal-container) {
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
}
</style>

20
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -11,21 +11,6 @@
<div class="bar3"></div>
</button>
</div>
<div class="menu-modal-container">
<button
aria-hidden="true"
tabindex="-1"
class="menu-button"
type="button"
:class="[isActive ? 'active' : '']"
@click="toggleModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<!-- Modal -->
<div
class="modal menu-modal fade"
data-bs-backdrop="false"
@ -123,9 +108,6 @@ export default {
<style lang="scss" scoped>
.menu-modal-container {
position: absolute;
padding: 1.47rem 0 1.47rem 1.47rem;
right: 0;
button {
border: none;
&.menu-button {
@ -164,7 +146,7 @@ export default {
}
.modal {
&.menu-modal {
left: auto;
//left: auto;
height: calc(100% - 56px);
top: 56px;
border-top: 1px solid $gray-300;