Added slider with alarm frame tick marks and scrubbing

6 files changed, 758 insertions, 0 deletions

diff --git a/www/lib/angular-awesome-slider/src/css/less/main.less b/www/lib/angular-awesome-slider/src/css/less/main.less
new file mode 100644
index 00000000..5182d4af
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/main.less
@@ -0,0 +1,339 @@
+//
+// Main slider css rules
+// --------------------------------------------------
+
+@import "variables.less";
+
+/*http://codeguide.co/#css-syntax*/
+
+.jslider {
+
+  /* Positioning */
+  position: relative;
+  top: 0.6em;
+
+  /* Box-model */
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  height: 1em;
+
+  /* Typography */
+  font-family: @font-family-base;
+
+  // disabled
+  &.disabled { opacity: 0.5; }
+
+  table {
+    border-collapse: collapse;
+    border: 0;
+    width: 100%;
+    td, th {
+      width: 100%;
+      vertical-align: top;
+      border: 0;
+      padding: 0;
+      text-align: left;
+      vertical-align: top;
+    }
+  }
+
+  // RANGES
+  div.jslider-bg i, div.jslider-pointer {
+    background: url(../img/jslider.png) no-repeat 0 0;
+  }
+
+  div.jslider-bg {
+    position: relative;
+    i {
+      position: absolute;
+      top: 0;
+      height: 5px;
+
+      &.left {
+        left: 0;
+        width: 50%;
+        background-position: 0 0;
+      }
+
+      &.right {
+        left: 50%;
+        width: 50%;
+        background-position: right 0;
+      }
+
+      &.range {
+        position: absolute;
+        top: 0;
+        left: 20%;
+        width: 60%;
+        height: 5px;
+        z-index: 1;
+        background-repeat: repeat-x;
+        background-position: 0 -40px;
+      }
+
+      &.default {
+        left: 0;
+        width: 1px;
+        z-index: 1;
+        background-color: @color-pointers-default-value;
+      }
+
+    }
+  }
+  // END RANGES
+
+  // POINTERS
+  // single value hide to
+  &.jslider-single {
+    div.jslider-pointer-to,
+    div.jslider-value-to,
+    div.jslider-bg .v,
+    .jslider-limitless .jslider-label {
+      display: none;
+    }
+  }
+
+  div.jslider-pointer {
+    position: absolute;
+    top: -4px;
+    left: 20%;
+    z-index: 2;
+    width: 15px;
+    height: 15px;
+    background-position: 2px -60px;
+    margin-left: -8px;
+    cursor: pointer;
+    cursor: hand;
+
+    &.jslider-pointer-to {
+      left: 80%;
+    }
+
+    &.jslider-pointer-hover {
+      background-position: -18px -60px;
+    }
+  }
+  // END POINTERS
+
+  // LABELS
+  div.jslider-label small,
+  div.jslider-value small {
+    position: relative;
+    top: -0.4em;
+  }
+
+  // limits
+  div.jslider-label {
+    position: absolute;
+    top: -18px;
+    left: 0px;
+    padding: 0px 2px;
+    opacity: 0.4;
+    color: @color-pointers-label;
+    font-size: @font-size-pointers-label;
+    line-height: @line-height-pointers-label;
+    white-space: nowrap;
+
+    &.jslider-label-to {
+      left: auto;
+      right: 0;
+    }
+  }
+  // END LABELS
+
+  // POINTERS VALUE
+  div.jslider-value {
+    position: absolute;
+    top: -19px;
+    left: 0;
+    padding: 1px 2px 0;
+    background: white;
+    font-size: @font-size-pointers-value;
+    line-height: @line-height-pointers-value;
+    white-space: nowrap;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+    border-radius: 2px;
+    &.jslider-value-to {
+      left: 80%;
+    }
+  }
+  // END POINTERS VALUE
+
+  // SCALE
+  div.jslider-scale {
+    position: relative;
+    top: 9px;
+    span {
+      position: absolute;
+      height: 5px;
+      border-left: 1px solid #999;
+      font-size: 0;
+    }
+    ins {
+      position: absolute;
+      top: 5px;
+      left: 0px;
+      font-size: 9px;
+      text-decoration: none;
+      color: #999; }
+  }
+  // END SCALE
+
+  // VERTICAL
+  &.vertical {
+    display: block;
+    width: 17px;
+    height: 100%;
+    position: relative;
+    top: 0.6em;
+    font-family: Arial, sans-serif;
+    table {
+      height: 100%;
+    }
+
+    &.sliderCSS .jslider-bg i, &.jslider-pointer {
+      background-color: silver;
+      background-image: none;
+    }
+
+    // RANGES
+    div.jslider-bg i,.jslider-pointer {
+      background: url(../img/jslider.vertical.png) no-repeat 0 0;
+    }
+
+    div.jslider-bg {
+      position: relative;
+      height:100%;
+
+      i {
+        position: absolute;
+        top: 0;
+        width: 5px;
+        font-size: 0;
+
+        &.before {
+          left: 50%;
+          background: none
+        }
+
+        &.left {
+          top: 0;
+          left: 50%;
+          height: 50%;
+          background-position: right 0;
+          background-repeat: repeat-y
+        }
+
+        &.right {
+          top: 50%;
+          left: 50%;
+          height: 50%;
+          background-position: right 0;
+          background-repeat: repeat-y
+        }
+
+        &.range {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          width: 60%;
+          height: 100%;
+          z-index: 1;
+          background-repeat: repeat-y;
+          background-position: -36px 0px;
+        }
+
+        &.default {
+          left: 50%;
+          width: 5px;
+          height:1px;
+          z-index: 1;
+          background-color: @color-pointers-default-value;
+        }
+
+      }
+    }
+    // END RANGES
+
+    // POINTERS
+    div.jslider-pointer {
+      left: 62%;
+      background-position: -7px -1px;
+
+      &.jslider-pointer-hover {
+        background-position: -7px -21px;
+      }
+
+      &.jslider-pointer-to {
+        left: 62%;
+      }
+
+      &.jslider-pointer-to.jslider-pointer-hover {
+        background-position: -7px -21px;
+      }
+    }
+    // END POINTERS
+
+    // LABELS
+    div.jslider-label {
+      top: -5px;
+      margin-left: 22px;
+
+      &.jslider-label-to {
+        top:100%;
+        left: inherit;
+        right: inherit;
+        margin-top: -5px;
+      }
+    }
+    // END LABELS
+
+
+    // POINTERS VALUE
+    div.jslider-value {
+      top: 0;
+      left: 0;
+    }
+
+    div.jslider-value-to {
+      top: 80%;
+      left: 0;
+    }
+    // END POINTERS VALUE
+
+    // SCALES
+    div.jslider-scale {
+      position: inherit;
+      span {
+        position: absolute;
+        width: 5px;
+        height: 1px;
+        border-left: none;
+        font-size: 0;
+        border-top: 1px solid #999;
+      }
+      ins {
+        position: absolute;
+        left: 0px;
+        top: 5px;
+        font-size: 9px;
+        text-decoration: none;
+        color: @color-scale;
+      }
+    }
+
+  }
+  // END VERTICAL
+
+
+  // SKINS
+  @import "skin-css.less";
+  @import "skin-round.less";
+  @import "skin-blue.less";
+  @import "skin-plastic.less";
+}
+
diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-blue.less b/www/lib/angular-awesome-slider/src/css/less/skin-blue.less
new file mode 100644
index 00000000..931c6afb
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/skin-blue.less
@@ -0,0 +1,79 @@
+//
+// Blue skin
+// --------------------------------------------------
+
+&.jslider_blue {
+  .jslider-bg i,
+  .jslider-pointer {
+    background: url(../img/jslider.blue.png) no-repeat 0 0;
+  }
+
+  .jslider-bg {
+    i {
+      background-position: 2px -20px;
+      &.default {
+        background-color: @color-skin-pointers-default-value;
+      }
+
+      &.range {
+        z-index: 1;
+        background-position: 0 -40px;
+      }
+    }
+  }
+
+  div.jslider-pointer {
+    top: -6px;
+    width: 20px;
+    height: 17px;
+    background-position: 2px -60px;
+    z-index: 2;
+
+    &.jslider-pointer-hover {
+      background-position: -20px -60px;
+    }
+  }
+
+  &.vertical {
+    div.jslider-bg i,
+    div.jslider-pointer {
+      background: url(../img/jslider.blue.vertical.png) no-repeat 0 0;
+    }
+
+    div.jslider-bg {
+      i {
+        background-position: right 0;
+
+        &.range {
+          background-position: -37px 0;
+        }
+
+        &.before,
+        &.after {
+          background: none;
+        }
+
+        &.default {
+          background-color: @color-skin-pointers-default-value;
+        }
+      }
+    }
+
+    div.jslider-pointer {
+      top: -6px;
+      width: 20px;
+      height: 17px;
+      background-position: -7px 0;
+
+      &.jslider-pointer-hover {
+        background-position: -7px -20px;
+      }
+
+    }
+
+    div.jslider-value {
+      left: 0;
+    }
+
+  }
+}
diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-css.less b/www/lib/angular-awesome-slider/src/css/less/skin-css.less
new file mode 100644
index 00000000..43b45901
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/skin-css.less
@@ -0,0 +1,139 @@
+//
+// Main slider custom overrided js css rules
+// --------------------------------------------------
+&.sliderCSS {
+
+  div.jslider-bg {
+
+    i {
+      &.left {
+        left: 0;
+        width: 50%;
+        background-color: @color-skin-background;
+        background-image: none;
+      }
+      &.right {
+        width: 50%;
+        left: 50%;
+        background-color: @color-skin-background;
+        background-image: none;
+      }
+      &.before {
+        left: 0;
+        width: 1px;
+        background-color: @color-skin-css-pointers-before-value;
+        background-image: none;
+      }
+      &.default {
+        left: 0;
+        width: 1px;
+        z-index: 1;
+        background-color: @color-skin-css-pointers-default-value;
+        background-image: none;
+      }
+      &.after {
+        left: 0;
+        background-color: @color-skin-css-pointers-after-value;
+        background-image: none;
+      }
+      &.range {
+        position: absolute;
+        top: 0;
+        left: 20%;
+        width: 60%;
+        height: 5px;
+        z-index: 1;
+        background-image: none;
+        background-color: #777575
+      }
+    }
+  }
+
+  div.jslider-pointer {
+    top: -3px;
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    margin-left: -5px;
+    background-color: silver;
+    background-color: #615959;
+    border-radius: 50%;
+  }
+
+  div.jslider-bg i,div.jslider-pointer {
+    background: none;
+  }
+
+  // vertical
+  &.vertical {
+
+    td {
+      height: 100%;
+    }
+
+    div.jslider-bg {
+
+      i {
+        left: 50%;
+        width: 5px;
+
+        &.left {
+          top: 0;
+          height: 50%;
+          background-color: @color-skin-background;
+          background-image: none;
+        }
+
+        &.right {
+          height: 50%;
+          top: 50%;
+          background-color: @color-skin-background;
+          background-image: none;
+        }
+
+        &.range {
+          height: 100%;
+          z-index: 1;
+          background-color: #777575;
+          background-image: none;
+        }
+
+        &.before {
+          background-color: @color-skin-css-pointers-before-value;
+          background-image: none;
+        }
+
+        &.default {
+          height: 1px;
+          background-color: @color-skin-css-pointers-default-value;
+          background-image: none;
+          z-index: 2;
+        }
+
+        &.after {
+          background-color: @color-skin-css-pointers-after-value;
+          background-image: none;
+        }
+
+      }
+
+    }
+
+    div.jslider-bg i,div.jslider-pointer {
+      background: none;
+    }
+
+    div.jslider-pointer {
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      background-color: #615959;
+      border-radius: 50%;
+      margin-left: -3px;
+
+      &.jslider-pointer-to {
+        left: 50%;
+      }
+    }
+  }
+}
diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less b/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less
new file mode 100644
index 00000000..31ebf55d
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less
@@ -0,0 +1,78 @@
+//
+// Plastic skin
+// --------------------------------------------------
+
+&.jslider_plastic {
+  .jslider-bg i,
+  .jslider-pointer {
+    background: url(../img/jslider.plastic.png) no-repeat 0 0;
+  }
+
+  .jslider-bg {
+    i {
+      background-position: 2px -20px;
+      &.default {
+        background-color: @color-skin-pointers-default-value;
+      }
+
+      &.range {
+        z-index: 1;
+        background-position: 0 -40px;
+      }
+    }
+  }
+
+  .jslider-pointer {
+    z-index: 2;
+    width: 20px;
+    height: 17px;
+    top: -4px;
+    background-position: 2px -60px;
+
+    &.jslider-pointer-hover {
+      background-position: -18px -60px;
+    }
+  }
+
+  &.vertical {
+    div.jslider-bg i,
+    div.jslider-pointer {
+      background: url(../img/jslider.plastic.vertical.png) no-repeat 0 0;
+    }
+
+    div.jslider-bg {
+
+      i {
+        background-position: right 0;
+
+        &.range {
+          background-position: -35px 0;
+        }
+
+        &.before,
+        &.after {
+          background: none;
+        }
+
+        &.default {
+          background-color: @color-skin-pointers-default-value;
+        }
+      }
+    }
+
+    div.jslider-pointer {
+      top: -6px;
+      margin-left: -6px;
+      width: 20px;
+      height: 17px;
+      background-position: -7px -1px;
+
+      &.jslider-pointer-hover {
+        background-position: -7px -21px;
+      }
+
+    }
+
+  }
+}
+
diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-round.less b/www/lib/angular-awesome-slider/src/css/less/skin-round.less
new file mode 100644
index 00000000..b0247d7b
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/skin-round.less
@@ -0,0 +1,81 @@
+//
+// Round skin
+// --------------------------------------------------
+
+&.jslider_round {
+  div.jslider-bg i,
+  div.jslider-pointer {
+    background: url(../img/jslider.round.png) no-repeat 0 0;
+  }
+
+  div.jslider-bg {
+    i {
+      background-position: 0 -20px;
+      &.default {
+        background-color: #C2C7CA;
+      }
+
+      &.range {
+        z-index: 1;
+        background-position: 0 -40px;
+      }
+    }
+  }
+
+  div.jslider-pointer {
+    top: -6px;
+    width: 20px;
+    height: 17px;
+    background-position: 0 -60px;
+    z-index: 2;
+
+    &.jslider-pointer-hover {
+      background-position: -20px -60px;
+    }
+  }
+
+  &.vertical {
+    div.jslider-bg i,
+    div.jslider-pointer {
+      background: url(../img/jslider.round.vertical.png) no-repeat 0 0;
+    }
+
+    div.jslider-bg {
+      i {
+        background-position: right 0;
+        &.range {
+          background-position: -37px 0;
+        }
+
+        &.before,
+        &.after {
+          background: none;
+        }
+
+        &.default {
+          background-color: @color-skin-pointers-default-value;
+        }
+      }
+    }
+
+    div.jslider-pointer {
+      top: -6px;
+      width: 20px;
+      height: 17px;
+      background-position: -4px -3px;
+
+      &.jslider-pointer-hover {
+        background-position: -4px -23px;
+      }
+
+      &.jslider-value-to {
+        left: 80%;
+      }
+    }
+
+    div.jslider-value {
+      left: 0;
+    }
+
+  }
+}
diff --git a/www/lib/angular-awesome-slider/src/css/less/variables.less b/www/lib/angular-awesome-slider/src/css/less/variables.less
new file mode 100644
index 00000000..4e667771
--- /dev/null
+++ b/www/lib/angular-awesome-slider/src/css/less/variables.less
@@ -0,0 +1,42 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+
+@black:                  #000;
+@white:                  #fff;
+@gray:                   #999;
+@gray2:                  #C2C7CA;
+@blue:                   #185F83;
+
+//== Typography
+//
+
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-pointers-label:  9px;
+@line-height-pointers-label:  12px;
+@font-size-pointers-value:  @font-size-pointers-label;
+@line-height-pointers-value:  @line-height-pointers-label;
+
+@color-pointers-label:  @black;
+@color-pointers-value:  @color-pointers-label;
+@color-scale:           @gray;
+
+@color-pointers-default-value:                    @blue;
+
+//== Skin CSS
+//
+
+@color-skin-pointers-default-value:               @gray2;
+
+@color-skin-background:                           silver;
+@color-skin-css-pointers-default-value:           @white;
+@color-skin-css-pointers-before-value:            rgba(92, 98, 203, 0.89);
+@color-skin-css-pointers-after-value:             rgb(14, 23, 115);
+
+