[Feature] Website live chat (#187)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com> Co-authored-by: Sojan Jose <sojan@pepalo.com>
2019-10-29 12:50:54 +05:30
parent a4114288f3
commit 16fe912fbd
80 changed files with 2040 additions and 106 deletions
--- a/app/javascript/widget/assets/images/defaultUser.png
+++ b/app/javascript/widget/assets/images/defaultUser.png
--- a/app/javascript/widget/assets/images/message-send.svg
+++ b/app/javascript/widget/assets/images/message-send.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Untitled</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="message-send" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M18.34,7.32 L4.34,0.32 C3.20803579,-0.243393454 1.84434515,-0.0365739638 0.930331262,0.837115781 C0.0163173744,1.71080553 -0.251780361,3.06378375 0.26,4.22 L2.66,9.59 L2.66,9.59 C2.77000426,9.8522654 2.77000426,10.1477346 2.66,10.41 L0.26,15.78 C-0.153051509,16.7079201 -0.0685371519,17.7818234 0.48458191,18.6337075 C1.03770097,19.4855916 1.98429967,19.9997529 3,20 C3.46823099,19.9953274 3.9294892,19.8859921 4.35,19.68 L18.35,12.68 C19.3627539,12.1705304 20.001816,11.1336797 20.001816,10 C20.001816,8.86632027 19.3627539,7.82946961 18.35,7.32 L18.34,7.32 Z M17.45,10.89 L3.45,17.89 C3.07351737,18.0707705 2.62434212,17.9985396 2.32351279,17.7088521 C2.02268345,17.4191646 1.93356002,16.9730338 2.1,16.59 L4.49,11.22 C4.5209392,11.1482915 4.54765161,11.0748324 4.57,11 L11.46,11 C12.0122847,11 12.46,10.5522847 12.46,10 C12.46,9.44771525 12.0122847,9 11.46,9 L4.57,9 C4.54765161,8.9251676 4.5209392,8.85170847 4.49,8.78 L2.1,3.41 C1.93356002,3.02696622 2.02268345,2.5808354 2.32351279,2.2911479 C2.62434212,2.00146039 3.07351737,1.92922952 3.45,2.11 L17.45,9.11 C17.7839662,9.28109597 17.9940395,9.62475706 17.9940395,10 C17.9940395,10.3752429 17.7839662,10.718904 17.45,10.89 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
--- a/app/javascript/widget/assets/images/send.png
+++ b/app/javascript/widget/assets/images/send.png
--- a/app/javascript/widget/assets/scss/_buttons.scss
+++ b/app/javascript/widget/assets/scss/_buttons.scss
@@ -0,0 +1,57 @@
+$button-border-width: 1px;
+// Buttons
+.button {
+  appearance: none;
+  background: $color-primary;
+  border: $button-border-width solid $color-primary;
+  border-radius: $border-radius;
+  color: $color-white;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-default;
+  height: $space-two * 2;
+  line-height: $line-height;
+  outline: none;
+  padding: $space-smaller $space-normal;
+  text-align: center;
+  text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover {
+    background: lighten($color-primary, 7%);
+    border-color: $color-primary;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    background: $color-primary;
+    border-color: darken($color-primary, 5%);
+    color: lighten($color-primary, 20%);
+    text-decoration: none;
+  }
+
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  &.small {
+    font-size: $font-size-small;
+    height: $space-medium;
+    padding: $space-smaller $space-slab;
+  }
+
+  &.large {
+    font-size: $font-size-medium;
+    height: $space-larger;
+    padding: $space-small $space-medium;
+  }
+}
--- a/app/javascript/widget/assets/scss/_forms.scss
+++ b/app/javascript/widget/assets/scss/_forms.scss
@@ -0,0 +1,71 @@
+// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement
+$form-border-width: 1px;
+$input-height: $space-two * 2;
+
+.form-input {
+  @include placeholder {
+    color: $color-gray;
+  }
+
+  appearance: none;
+  background: $color-white;
+  border: $form-border-width solid $color-border;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  color: $color-body;
+  display: block;
+  font-size: $font-size-default;
+  height: $input-height;
+  line-height: 1.3;
+  max-width: 100%;
+  outline: none;
+  padding: $space-small $space-slab;
+  position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  width: 100%;
+
+  &:focus {
+    border-color: $color-primary;
+  }
+
+  &::placeholder {
+    color: $color-gray;
+  }
+
+  // Input sizes
+  &.small {
+    font-size: $font-size-small;
+    height: $space-large;
+    padding: $space-small $space-slab;
+  }
+
+  &.large {
+    font-size: $font-size-medium;
+    height: $space-larger;
+    padding: $space-slab $space-two;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Textarea
+textarea.form-input {
+  @include placeholder {
+    color: $color-light-gray;
+  }
+
+  &,
+  &.large,
+  &.small {
+    height: auto;
+  }
+}
--- a/app/javascript/widget/assets/scss/_mixins.scss
+++ b/app/javascript/widget/assets/scss/_mixins.scss
@@ -0,0 +1,20 @@
+// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
+$shadow-color-1: rgba(50, 50, 93, 0.2);
+$shadow-color-2: rgba(0, 0, 0, 0.07);
+$shadow-color-3: rgba(50, 50, 93, .08);
+$shadow-color-4: rgba(0, 0, 0, .05);
+
+@mixin normal-shadow {
+  box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2;
+}
+
+@mixin light-shadow {
+  box-shadow: 0 $space-smaller 6px $shadow-color-3, 0 1px 3px $shadow-color-4;
+}
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {@content}
+  &:-moz-placeholder           {@content}
+  &::-moz-placeholder          {@content}
+  &:-ms-input-placeholder      {@content}
+}
--- a/app/javascript/widget/assets/scss/_reset.scss
+++ b/app/javascript/widget/assets/scss/_reset.scss
@@ -0,0 +1,54 @@
+// scss-lint:disable
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/app/javascript/widget/assets/scss/_variables.scss
@@ -0,0 +1,90 @@
+// Font sizes
+$font-size-nano: 0.8rem;
+$font-size-micro: 0.8rem;
+$font-size-mini: 1rem;
+$font-size-small: 1.2rem;
+$font-size-default: 1.4rem;
+$font-size-medium: 1.6rem;
+$font-size-large: 2rem;
+$font-size-big: 2.4rem;
+$font-size-bigger: 3.2rem;
+$font-size-mega: 4rem;
+$font-size-giga: 5.6rem;
+
+// spaces
+$zero: 0;
+$space-micro: 0.2rem;
+$space-smaller: 0.4rem;
+$space-small: 0.8rem;
+$space-one: 1rem;
+$space-slab: 1.2rem;
+$space-normal: 1.6rem;
+$space-two: 2rem;
+$space-medium: 2.4rem;
+$space-large: 3.2rem;
+$space-larger: 4.8rem;
+$space-big: 6.4rem;
+$space-jumbo: 8rem;
+$space-mega: 10rem;
+
+// font-weight
+$font-weight-feather: 100;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 700;
+
+//Navbar
+$nav-bar-width: 23rem;
+$header-height: 5.6rem;
+
+// Woot Logo
+$woot-logo-width: 20rem;
+$woot-logo-height: 8rem;
+$woot-logo-padding: $space-large $space-large $space-large $space-large;
+
+// Colors
+$color-woot: #1f93ff;
+$color-primary: $color-woot;
+$color-gray: #6e6f73;
+$color-light-gray: #999a9b;
+$color-border: #e0e6ed;
+$color-border-transparent: rgba(224, 230, 237, 0.5);
+$color-border-light: #f0f4f5;
+$color-background: #ecf3f9;
+$color-background-light: #fafafa;
+$color-white: #fff;
+$color-body: #3c4858;
+$color-heading: #1f2d3d;
+$color-modal-header: #f1f1f1;
+// Thumbnail
+$thumbnail-radius: 4rem;
+
+// chat-header
+$conv-header-height: 4rem;
+
+// login
+
+// Inbox List
+
+$inbox-thumb-size: 4.8rem;
+
+
+// Spinner
+$spinkit-spinner-color: $color-white !default;
+$spinkit-spinner-margin: 0 0 0 1.6rem !default;
+$spinkit-size: 1.6rem !default;
+
+// Snackbar default
+$woot-snackbar-bg: #323232;
+$woot-snackbar-button: #ffeb3b;
+
+$swift-ease-out-duration: .4s !default;
+$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$border-radius: 3px;
+$line-height: 1;
+$footer-height: 11.2rem;
+$header-expanded-height: $space-medium * 10;
--- a/app/javascript/widget/assets/scss/sdk.css
+++ b/app/javascript/widget/assets/scss/sdk.css
@@ -0,0 +1,65 @@
+.woot-widget-holder {
+  z-index: 2147483000!important;
+  position: fixed!important;
+  bottom: 104px;
+  right: 20px;
+  height: calc(85% - 64px - 20px);
+  width: 370px!important;
+  min-height: 250px!important;
+  max-height: 590px!important;
+  -moz-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
+  -o-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
+  -webkit-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
+  box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
+  -o-border-radius: 8px!important;
+  -moz-border-radius: 8px!important;
+  -webkit-border-radius: 8px!important;
+  border-radius: 8px!important;
+  overflow: hidden!important;
+  opacity: 1!important;
+}
+
+.woot-widget-holder iframe { width: 100% !important; height: 100% !important; border: 0; }
+
+.woot-widget-bubble {
+  z-index: 2147483000!important;
+  -moz-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
+  -o-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
+  -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
+  box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
+  -o-border-radius: 100px!important;
+  -moz-border-radius: 100px!important;
+  -webkit-border-radius: 100px!important;
+  border-radius: 100px!important;
+  background: #1f93ff;
+  position: fixed;
+  cursor: pointer;
+  right: 20px;
+  bottom: 20px;
+  width: 64px!important;
+  height: 64px!important;
+}
+
+  .woot-widget-bubble:hover {
+  background: #1f93ff;
+  -moz-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
+  -o-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
+  -webkit-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
+  box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
+}
+
+.woot-widget-bubble img {
+  width: 24px;
+  height: 24px;
+  margin: 20px;
+}
+
+.woot-widget-bubble.woot--close img {
+  width: 16px;
+  height: 16px;
+  margin: 24px;
+}
+
+.woot--hide {
+  display: none !important;
+}
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -0,0 +1,16 @@
+@import 'variables';
+@import 'buttons';
+@import 'mixins';
+@import 'forms';
+@import 'reset';
+
+html,
+body {
+  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  font-size: 10px;
+  height: 100%;
+}
+
+.woot-widget-wrap {
+  height: 100%;
+}