scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 03:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add an extended bubble design for the widget (#1123)

Browse Source 
* feat: Add a new design for chat bubble

Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

* Add i18n

* Fix stye issues

* Set fixed font-size

* Update docs for bubble
This commit is contained in:
Pranav Raj S
2020-08-09 16:07:32 +05:30
committed by GitHub
parent a04ca24def
commit 0adbc346df
16 changed files with 164 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
app/javascript/sdk/sdk.js Normal file
View File

@@ -0,0 +1,142 @@
export const SDK_CSS = `.woot-widget-holder {
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
opacity: 1;
overflow: hidden !important;
position: fixed !important;
transition-duration: 0.5s, 0.5s;
transition-property: opacity, bottom;
z-index: 2147483000 !important;
}
.woot-widget-holder iframe {
border: 0;
height: 100% !important;
width: 100% !important;
}
.woot-widget-holder.has-unread-view {
border-radius: 0 !important;
bottom: 94px;
box-shadow: none !important;
}
.woot-widget-bubble {
background: #1f93ff;
border-radius: 100px !important;
bottom: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
cursor: pointer;
height: 64px !important;
position: fixed;
width: 64px !important;
z-index: 2147483000 !important;
}
.woot-widget-bubble.woot-widget--expanded {
bottom: 24px;
display: flex;
height: 48px !important;
width: auto !important;
}
.woot-widget-bubble.woot-widget--expanded div {
align-items: center;
color: #fff;
display: flex;
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
justify-content: center;
padding-right: 20px;
width: auto !important;
}
.woot-widget-bubble.woot-widget--expanded img {
height: 20px;
margin: 14px 8px 14px 16px;
width: 20px;
}
.woot-widget-bubble.woot-elements--left {
left: 20px;
}
.woot-widget-bubble.woot-elements--right {
right: 20px;
}
.woot-widget-bubble:hover {
background: #1f93ff;
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
}
.woot-widget-bubble img {
height: 24px;
margin: 20px;
width: 24px;
}
@media only screen and (min-width: 667px) {
.woot-widget-holder.woot-elements--left {
left: 20px;
}
.woot-widget-holder.woot-elements--right {
right: 20px;
}
}
.woot--close:hover {
opacity: 1;
}
.woot--close::before, .woot--close::after {
background-color: #fff;
content: ' ';
height: 24px;
left: 32px;
position: absolute;
top: 20px;
width: 2px;
}
.woot--close::before {
transform: rotate(45deg);
}
.woot--close::after {
transform: rotate(-45deg);
}
.woot--hide {
bottom: -20000px;
opacity: 0;
visibility: hidden !important;
z-index: -1 !important;
}
@media only screen and (max-width: 667px) {
.woot-widget-holder {
height: 100%;
right: 0;
top: 0;
width: 100%;
}
.woot-widget-bubble.woot--close {
bottom: 60px;
opacity: 0;
visibility: hidden !important;
z-index: -1 !important;
}
}
@media only screen and (min-width: 667px) {
.woot-widget-holder {
border-radius: 16px !important;
bottom: 104px;
height: calc(85% - 64px - 20px);
max-height: 590px !important;
min-height: 250px !important;
width: 400px !important;
}
}
`;