telephony 1.0.3

data/app/assets/stylesheets/telephony/reset.css.scss

@@ -0,0 +1,10 @@
+#telephony-widget {
+  div, span, form, input, p, button, dl, dt, dd, ol, ul, li {
+   margin: 0;
+   padding: 0;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+}

data/app/assets/stylesheets/telephony/widget.css.scss

@@ -0,0 +1,512 @@
+//= require "telephony/reset"
+//= require "telephony/font"
+
+$active: #eb7026; /* Zest orange */
+$background: #b1e6f9; /* Zest light blue */
+$hover: #b8571d; /* darker orange */
+$disabled: #cecece; /* light gray */
+$rollover: #8ec8dc; /* background blue */
+
+$offline: #7c7c7c; /* medium gray */
+$on_a_call: #ffe0af; /*creamy yellow */
+$available: #799e75; /* muted green */
+$not_available: #a95f5a; /* muted red */
+$available_dark: #36892d; /* muted green */
+$not_available_dark: #871c16; /* muted red */
+
+$answer: #007f00;
+$answer_dark: #152b06;
+$hangup: #ba0d1b;
+$hangup_dark: #6b080a;
+
+$dark-gray: #151515;
+$medium-gray: #373737;
+$light-gray: #909090;
+
+$btn_height: 24px;
+$field_height: 22px;
+
+@mixin box-shadow($val) {
+  -moz-box-shadow: $val $val $val #888;
+  -webkit-box-shadow: $val $val $val #888;
+  box-shadow: $val $val $val #888;
+}
+
+@mixin inner-shadow($val) {
+  -moz-box-shadow:    inset 0 0 $val #888;
+  -webkit-box-shadow: inset 0 0 $val #888;
+  box-shadow:         inset 0 0 $val #888;
+}
+
+/* FROM HERE DOWN ADAPTED FROM BOOTSTRAP */
+
+@mixin btn {
+  /* display: inline-block; */
+  /* *display: inline; */
+  /* IE7 inline-block hack */
+
+  *zoom: 1;
+  padding: 4px 10px 4px;
+  margin-bottom: 0;
+  font-size: 13px;
+  line-height: 18px;
+  *line-height: 20px;
+  color: #333333;
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(top, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #e6e6e6;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border: 1px solid #cccccc;
+  *border: 0;
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  *margin-left: .3em;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+
+  &:hover,
+  &:active,
+  &.active,
+  &.disabled,
+  &[disabled] {
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+  }
+
+  &:active,
+  &.active {
+    background-color: #cccccc \9;
+  }
+
+  &:first-child {
+    *margin-left: 0;
+  }
+  &:hover {
+    color: #333333;
+    text-decoration: none;
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+    /* Buttons in IE7 don't get borders, so darken on hover */
+
+    background-position: 0 -15px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -ms-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
+  }
+
+  &:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+  &.active,
+  &:active {
+    background-color: #75a1f9;
+    background-color: #d9d9d9 \9;
+    background-image: none;
+    outline: 0;
+    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+  }
+  &.disabled,
+  &[disabled] {
+    cursor: default;
+    background-color: #e6e6e6;
+    background-image: none;
+    opacity: 0.65;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+}
+
+@mixin btn-large {
+  padding: 9px 14px;
+  font-size: 15px;
+  line-height: normal;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+  [class^="icon-"] {
+    margin-top: 1px;
+  }
+}
+
+@mixin btn-small {
+  padding: 5px 9px;
+  font-size: 11px;
+  line-height: 16px;
+
+  [class^="icon-"] {
+    margin-top: -1px;
+  }
+}
+
+@mixin btn-mini {
+  padding: 2px 6px;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+/* FROM HERE UP ADAPTED FROM BOOTSTRAP */
+
+#telephony-widget {
+  font-family: Helvetica, Arial;
+  font-size: 12px;
+  z-index: 999;
+
+  .hidden { display: none; }
+  .display { display: inline; }
+  .float-left { float: left; }
+  .float-right { float: right; }
+
+  .telephony-widget-container {
+    display: inline-block;
+
+    .conversation-controls {
+      .friendly-message {
+        height: 15px;
+        padding-left: 5px;
+        margin: 5px 0;
+      }
+    }
+
+    .agent-status-wrapper {
+      float: left;
+    }
+
+    .call-queue-wrapper {
+      float: left;
+      position: relative;
+      left: 10px;
+
+      .label {
+        @include btn;
+        float:left;
+        background: $background;
+        font-size: 12px;
+        height: 18px;
+        padding-left: 8px;
+        padding-right: 16px;
+        margin-right: 4px;
+        margin-left: 4px;
+        border: 0;
+
+        &:hover {
+          background: $background;
+          cursor: default;
+        }
+
+        &:active {
+          background: $background;
+        }
+      }
+      .badge {
+        float: right;
+        position: relative;
+        top: -8px;
+        left: -20px;
+        background: radial-gradient(center -9px, circle closest-side, beige 0, red 26px );
+        background: -moz-radial-gradient( center -9px, circle closest-side, beige 0, red 26px );
+        background: -ms-radial-gradient( center -9px, circle closest-side, beige 0, red 26px );
+        background: -o-radial-gradient( center -9px, circle closest-side, beige 0, red 26px );
+        background: -webkit-radial-gradient( center -9px, circle, beige 0, red 26px );
+        background-color: red;
+        border: 2px solid beige;
+        border-radius: 50%;
+        box-shadow: 2px 2px 2px #888;
+        color: beige;
+        font: bold 12px Helvetica, Verdana, Tahoma;
+        height: 17px; /* height + padding-top must equal width */
+        padding-top: 3px; /* height + padding-top must equal width */
+        text-align: center;
+        width: 20px;
+      }
+    }
+
+    .twilio-client-wrapper {
+      float: right;
+    }
+
+    .buttons-wrapper {
+      display: inline-block;
+    }
+
+    .conversation-wrapper {
+      float: right;
+
+      &.expanded {
+        height: 100px;
+      }
+
+      .transfer-wrapper {
+        position: absolute;
+        z-index: 1;
+
+        #telephony-transfer {
+          margin-left: 4px;
+
+          form {
+            .agent-input {
+              border: 1px solid #000000;
+              padding: 2px 0px 2px 4px;
+              background: #ffffff;
+              display: block;
+              float: left;
+              width: 260px;
+              position: relative;
+
+              span.backspace {
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                top: 0;
+                right: 4px;
+                background: url(/assets/telephony/backspace.png) no-repeat center center;
+              }
+
+              span.hidden {
+                display: none;
+              }
+
+              span {
+                margin: 4px 0 0 3px;
+                float: left;
+                display: inline;
+                vertical-align: middle;
+                text-align: center;
+                top: 50%;
+
+                &.available { color: $available; }
+                &.not_available { color: $not_available; }
+                &.on_a_call { color: $on_a_call; }
+                &.offline { color: $offline; }
+              }
+              &.offline {
+                color: $light-gray;
+              }
+              &.available {
+                color: $dark-gray;
+              }
+              &.not_available {
+                color: $light-gray;
+              }
+              &.on_a_call {
+                color: $light-gray;
+              }
+
+              input[name='selected_agent'] {
+                margin-left: 0px;
+                outline: none;
+                border: none;
+                float: left;
+              }
+            }
+          }
+
+          .transfer-type {
+            float: left;
+            margin-right: 4px;
+            padding-left: 4px;
+            padding-right: 4px;
+
+            label {
+              float: right;
+              line-height: $btn_height;
+            }
+          }
+
+          .agents-list {
+            background-color: white;
+            border: 1px solid #888;
+            clear: both;
+            list-style: none;
+            margin: 0;
+            min-width: 225px;
+            max-height: 320px;
+            overflow: auto;
+            padding: 4px;
+
+            &::-webkit-scrollbar {
+              -webkit-appearance: none;
+              width: 13px;
+              height: 13px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              border-radius: 8px;
+              border: 2px solid white;
+              background-color: rgba(0, 0, 0, .5);
+            }
+
+            li {
+              padding: 1px;
+
+              span {
+                &.available { color: $available; }
+                &.not_available { color: $not_available; }
+                &.on_a_call { color: $on_a_call; }
+                &.offline { color: $offline; }
+              }
+
+              &:hover {
+                background: $rollover;
+              }
+
+              &.offline {
+                color: $light-gray;
+                &:hover { color: white}
+              }
+              &.available {
+                color: $dark-gray;
+                &:hover { color: white}
+              }
+              &.not_available {
+                color: $light-gray;
+                &:hover { color: white}
+              }
+              &.on_a_call {
+                color: $light-gray;
+                &:hover { color: white}
+              }
+            }
+          }
+        }
+      }
+    }
+
+    input[disabled], button[disabled] {
+      cursor: default;
+      opacity: 0.7;
+      @include box-shadow(0px);
+
+      &:hover {
+        background: $disabled;
+        cursor: default;
+        @include box-shadow(0px);
+      }
+    }
+
+    input[name=selected_agent] {
+    height: $field_height;
+    margin-right: 0;
+    width: 230px;
+    }
+
+    input {
+      float: left;
+      height: $field_height;
+      margin-right: 4px;
+      margin-left: 4px;
+      padding-left: 4px;
+      padding-right: 4px;
+      border: 1px solid #888;
+    }
+
+    button {
+      @include btn;
+      font-size: 11px;
+      height: $btn_height;
+      line-height: $btn_height;
+      min-width: 74px;
+      padding-top: 0;
+      padding-left: 4px;
+      padding-right: 4px;
+      margin-right: 4px;
+      border: 0;
+      @include box-shadow(2px);
+
+      &:hover {
+        cursor: pointer;
+        @include box-shadow(1px);
+      }
+
+      &:active {
+        background-color: #eb7026; /* Zest Orange */
+      }
+
+      &.agent-status {
+        &.offline { background: $offline; }
+        &.on_a_call { background: $on_a_call; }
+        &.available {
+          background: $available;
+          color: white;
+          &:hover { background: $available_dark; }
+        }
+        &.not_available {
+          background: $not_available;
+          color: white;
+          &:hover { background: $not_available_dark; }
+        }
+        text-shadow: none;
+        width: 122px;
+      }
+
+      &.answer {
+        background: $answer;
+        color: white;
+        text-shadow: none;
+        margin-left: 8px;
+        &.disabled:hover, &[disabled]:hover { background: $answer; }
+        &:hover { background: $answer_dark; }
+      }
+
+      &.hangup {
+        background: $hangup;
+        color: white;
+        text-shadow: none;
+        margin-left: 8px;
+        &.disabled:hover, &[disabled]:hover { background: $hangup; }
+        &:hover { background: $hangup_dark; }
+      }
+
+      span {
+        height: $btn_height;
+        line-height: $btn_height;
+        padding-left: 2px;
+        padding-right: 2px;
+
+        &.caps {
+          text-transform: uppercase;
+          text-align: center;
+        }
+
+        &.text {
+          text-align: center;
+        }
+
+        &.icon-spinner {
+          display: none;
+          width: 14px;
+          background: url(/assets/telephony/icon-spinner.gif) no-repeat center center;
+          &.display {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+}