zuora_connect_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 21571ab34714c28083e54d033233aaa2dadb378d
+  data.tar.gz: be9b865ac8f13e0a10300477074b192faffaab73
+SHA512:
+  metadata.gz: c8a3e2059a7960cccb7db218da5b501c38cf2b248113d5e72589636ba7b64105a2dbd62aa8f04ed1f987771ace1bdfa04d432a51350f516cefa83671fb715968
+  data.tar.gz: bebbf6e08c42bbaea730c946c295e2537afc714cade7dda609dd9c0f7fd22b03c3bf6b498486f40a3be27294ae3d9affe7b23c246d14b957a55c4c1a5c888b51

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 hmcguire
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+# ZuoraConnectUI
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/zuora_connect_ui`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'zuora_connect_ui'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install zuora_connect_ui
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/zuora_connect_ui.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/zuora_connect_ui/input.js

@@ -0,0 +1,9 @@
+// 'Polyfill' for :placeholder-shown, since it's not standard yet
+
+$(document).on('focus focusout', '.zuo-textbox', function(e) {
+    $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', $(this).val() !== "");
+});
+
+$(document).on('change.select2', 'select', function(e) {
+    $("label[for='" + $(this).attr('id') + "']").toggleClass('floating', $(this).val() !== "");
+});

data/app/assets/javascripts/zuora_connect_ui.js

@@ -0,0 +1,30 @@
+// JQuery UI
+//
+//= require jquery-ui
+//
+//
+// Bootstrap
+//
+//= require bootstrap-sprockets
+//
+//
+// Select2
+//
+//= require select2-full
+//= require select2_locale_en
+//= require select2_locale_fr
+//= require select2_locale_zh-CN
+//
+//
+// Datatables
+//
+//= require dataTables/jquery.dataTables
+//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
+//= require dataTables/extras/dataTables.responsive
+//= require dataTables/extras/dataTables.responsive
+//= require dataTables/extras/dataTables.colReorder
+//= require dataTables/extras/dataTables.select
+//
+//
+//= require zuora_connect_ui/input
+//

data/app/assets/stylesheets/_zuora_connect_ui.scss

@@ -0,0 +1,125 @@
+$primary: #384B5D;
+$neutral-1: #1A232B;
+$neutral-2: #D0D3DA;
+$neutral-3: #F1F2F4;
+$neutral-4: #FFFFFF;
+$support-1: #036ED1;
+$support-2: #31B865;
+$support-3: #FFE952;
+$support-4: #D23F3C;
+$zuora-accent: #6EC5AB; //zuora aqua
+$primary-hover: #025aab;
+
+$disabled-btn-bg: #E9EBEE;
+$neutral-shadow: rgba(56, 75, 93, 0.3); // disabled btn text color, dropdown box shadow color
+
+$brand-primary: $primary;  //New
+$brand-success: $support-2;  //show
+$brand-info: #6d95a0;     //Edit/Update
+$brand-warning: $support-3;  //Other
+$brand-danger: $support-4;  //Deleted
+
+// $navbar-default-color: #394b5b;
+// $navbar-default-bg: #394b5b;
+// $navbar-default-link-color: #fff;
+// $navbar-default-link-hover-color: #fff;
+// $navbar-default-link-hover-bg: transparent;
+// $navbar-default-link-active-bg: transparent;
+// $navbar-default-link-active-color: #fff;
+// $navbar-margin-bottom: 0px;
+// $navbar-height: 50px;
+// $navbar-border-radius: 0px;
+// $navbar-default-toggle-hover-bg: transparent;
+// $navbar-default-toggle-icon-bar-bg: #afb7be;
+// $navbar-default-toggle-border-color: transparent;
+// $navbar-default-toggle-icon-bar-bg: #6ec5ab;
+// $navbar-padding-vertical: 15px;
+// $navbar-padding-horizontal: 15px;
+
+$border-radius-base: 0px;
+$border-radius-large: 0px;
+
+$breadcrumb-padding-vertical: 1rem;
+$breadcrumb-padding-horizontal: 1rem;
+$breadcrumb-bg: none;
+$breadcrumb-color: $neutral-1;
+$breadcrumb-active-color: $neutral-1;
+$breadcrumb-separator: "/";
+
+$link-color: $support-1;
+$link-hover-color: $primary-hover;
+$link-hover-decoration: underline;
+
+$dropdown-link-color: $primary;
+$dropdown-divider-bg: $neutral-3;
+$dropdown-link-hover-bg: $neutral-3;
+$dropdown-link-hover-color: $primary;
+$dropdown-link-active-color: #6ec5ab;
+$dropdown-link-active-bg: $neutral-3;
+$dropdown-bg: $neutral-4;
+$dropdown-border: #d3d7d8;
+$zindex-dropdown: 1000;
+
+$font-family-base: Muli, sans-serif;
+$font-size-base: 12px;
+$line-height-base: 1.4;
+$text-color: $neutral-1;
+$body-bg: none;
+
+$modal-backdrop-bg: #fff;
+$modal-content-bg: #fff;
+$modal-header-border-color: transparent;
+$modal-title-padding: 15px 20px;
+$modal-inner-padding: 15px 20px;;
+$modal-footer-border-color: transparent;
+$modal-sm: 400px;
+$modal-md: 600px;
+$modal-lg: 800px;
+$modal-backdrop-bg: rgb(57,75,93) ;
+$modal-backdrop-opacity: .6;
+$modal-content-border-color: 2px solid #e9ebee;
+$modal-content-fallback-border-color: 2px solid #e9ebee;
+
+// I think this is for bootstrap class we don't use
+$btn-border-radius-small: 3px;
+$btn-border-radius-medium: 3px;
+$btn-border-radius-large: 5px;
+
+// Panels are used by summernote, which shouldn't really be here
+$panel-bg: #FFF;
+$panel-default-heading-bg: #FFF;
+$panel-default-border: #FFF;
+
+// JQuery UI
+@import "jquery-ui";
+
+// Datatables
+@import "dataTables/bootstrap/3/jquery.dataTables.bootstrap";
+@import "dataTables/extras/dataTables.responsive";
+
+// Bootstrap
+@import "bootstrap-sprockets";
+@import "bootstrap";
+
+// Awesome Bootstrap Checkbox
+$font-family-icon: webicons;
+$check-icon: "\E936";
+@import "css/awesome-bootstrap-checkbox";
+
+// Select2
+@import "select2";
+@import "select2-bootstrap";
+
+// Glyphicon and FA
+@import "css/icons.scss";
+
+// Zuora Connect UI
+@import "zuora_connect_ui/base";
+@import "zuora_connect_ui/box";
+@import "zuora_connect_ui/breadcrumb_bar";
+@import "zuora_connect_ui/buttons";
+@import "zuora_connect_ui/datatables";
+@import "zuora_connect_ui/grid_view";
+@import "zuora_connect_ui/input";
+@import "zuora_connect_ui/modal";
+@import "zuora_connect_ui/tabs";

data/app/assets/stylesheets/zuora_connect_ui/base.scss

@@ -0,0 +1,130 @@
+html {
+  background-color: $neutral-3;
+  font-size: 16px;
+}
+
+body {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+p {
+  color: $primary;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+h1 {
+  color: $primary;
+  font-size: 1.625rem;
+  line-height: 2.25rem;
+  font-weight: 600;
+  letter-spacing: .0125rem;
+}
+h2 {
+  color: $primary;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+h3 {
+  color: $primary;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+}
+h4 {
+  color: $primary;
+  font-size: .75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.0125rem;
+}
+
+select {
+  background-color: $neutral-4;
+  cursor: pointer;
+  border: none;
+  padding-right: 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+// Potential to remove focus ring from select
+// :-moz-focusring {
+//   color: transparent;
+//   text-shadow: 0 0 0 #000;
+// }
+// option:not(:checked) {
+//   color: black; /* prevent <option>s from becoming transparent as well */
+// }
+
+.select_container {
+  text-align: center;
+}
+
+.center{
+  text-align: center
+}
+
+#content {
+  margin: 0px 15px 15px 15px;
+  background-color: $neutral-4;
+  min-height: 500px;
+
+  > * {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.dropdown-menu {
+  min-width: 164px;
+  padding: 6px 0;
+  box-shadow: 0 1px 8px -1px $neutral-shadow;
+  border-radius: 0;
+  font-size: .875rem;
+
+
+  // working on the arrow for dropdowns
+  // &:before {
+  //   content: '';
+  //   position: absolute;
+  //   border: 10px solid transparent;
+  //   border-bottom-color: #00aabb;
+  // }
+  // &:after {
+  //   content: '';
+  //   position: absolute;
+  //   border: 10px solid transparent;
+  //   border-bottom-color: black; 
+  // }
+  
+  > li {
+    &.divider {
+      margin: .5rem;
+    }
+    > a {
+      padding: .25rem .75rem;
+      // If we aren't using Font Awesome or Glyphicons, this next block can all go
+      span.fa {
+        margin-right: 10px;
+      }
+      span.glyphicons {
+        padding-left: 0px;
+        margin-right: 4px;
+        &:before {
+          font-size: inherit;
+          position: inherit;
+          color: $dropdown-link-color;
+        }
+      }
+      &:hover{
+        span.glyphicons {
+          &:before {
+            color: $dropdown-link-hover-color;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/zuora_connect_ui/box.scss

@@ -0,0 +1,115 @@
+.box {
+  margin: 0px 0px;
+
+  .box-header {
+    height: 42px;
+    border: 1px solid #ddd;
+    margin-bottom: -1px;
+    padding: 10px;
+    background-color: #fafafa;
+    background-image: -moz-linear-gradient(top, #fafafa, #efefef);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef));
+    background-image: -webkit-linear-gradient(top, #fafafa, #efefef);
+    background-image: -o-linear-gradient(top, #fafafa, #efefef);
+    background-image: linear-gradient(to bottom, #fafafa, #efefef);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0);
+    -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+          box-shadow: none;
+    -webkit-border-radius: 2px 2px 0px 0px;
+       -moz-border-radius: 2px 2px 0px 0px;
+            border-radius: 2px 2px 0px 0px;
+    overflow: hidden;
+
+    h2{
+      font-size: 16px;
+      line-height: 16px;
+      float:left;
+      margin-top: 2px;
+      color: #646464;
+      font-weight: normal;
+      text-shadow: 0px 1px 0px #fff;
+
+      i {
+        margin: 1px 3px 0px 5px;
+        opacity: .4;
+      }
+    }
+    .break{
+      border-left: 1px solid #fcfcfc;
+      border-right: 1px solid #ddd;
+      margin: -12px 10px -10px 10px;
+      padding: 12px 0px 10px 0px;
+    }
+
+    .box-actions {
+      display:inline
+
+      a, button {
+        margin-top:-6px;
+        margin-right:5px;
+      }
+    }
+
+    .box-icon {
+      float:right;
+      margin-top: 1px;
+
+      i {
+        -webkit-transition: all 0.1s ease-in-out;
+        -moz-transition: all 0.1s ease-in-out;
+        -o-transition: all 0.1s ease-in-out;
+        -ms-transition: all 0.1s ease-in-out;
+        transition: all 0.1s ease-in-out;
+        opacity: .4;
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+
+       a {
+        color:#777777;
+        margin: 0px 5px;
+
+        &:hover, &:focus{
+          color: #333;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .box-content {
+    margin-top: -1px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    background: #fcfcfc;
+    -webkit-border-radius: 0px 0px 2px 2px;
+    -moz-border-radius: 0px 0px 2px 2px;
+    border-radius: 0px 0px 2px 2px;
+    -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .6);
+    -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .6);
+    box-shadow: 0 1px 0px rgba(255, 255, 255, .6);
+
+    >.box-footer {
+      margin: 20px -10px -10px -10px;
+      border: none;
+      border-top: 1px solid #ddd;
+    }
+  }
+  .box-footer {
+    min-height: 42px;
+    border: 1px solid #ddd;
+    margin-bottom: -1px;
+    padding: 10px;
+    background-color: #fafafa;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -webkit-border-radius: 0px 0px 2px 2px;
+    -moz-border-radius: 2px 2px 2px 2px;
+    border-radius: 0px 0px 2px 2px;
+    overflow: hidden;
+    margin-top: -1px;
+  }
+}

data/app/assets/stylesheets/zuora_connect_ui/breadcrumb_bar.scss

@@ -0,0 +1,110 @@
+#breadcrumb-bar {
+  #breadcrumbs {
+    .breadcrumb {
+      font-size: .75rem;
+      margin-bottom: 0px; // override bootstrap default
+    }
+  }
+
+  #peek {
+    font-size: .625rem;
+    text-shadow: none;
+    background-color: transparent;
+    overflow: hidden; // keeps the contents hidden when peek is collapsed
+    width: 0;
+
+    -webkit-transition: width 0.3s ease-in-out;
+    -moz-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
+
+    &.active {
+      width: 54rem;
+    }
+
+    &.disabled {
+      display: block;
+
+      &.active {
+        width: 7rem;
+      }
+    }
+
+    .wrapper {
+      padding-left: 1rem;
+      width: auto;
+    }
+
+    .bucket {
+      white-space: nowrap;
+      .hidden {
+        display: inline !important;
+      }
+    }
+
+    strong {
+      color: $neutral-1;
+    }
+
+    #peek-view-connect > strong:not(:first-child) {
+      margin-left: 15px;
+    }
+  }
+
+  #admin-menu {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 100%;
+
+    background-color: $neutral-4;
+    border-left: 1px solid $neutral-2;
+    border-bottom: 1px solid $neutral-2;
+    border-radius: 0rem 0rem 0rem .5rem;
+    box-shadow: 0 1px 8px -1px $neutral-shadow;
+
+    #admin-peek-btn {
+      z-index: 2;
+      border-radius: 0 0 0 .5rem;
+      background: white;
+      padding: 1rem .5rem;
+      line-height: 1.2rem;
+
+      &:before {
+        display: inline-block;
+        transform: rotate(90deg);
+        font-size: .75rem;
+      }
+    }
+
+    .dropdown-toggle {
+      cursor: pointer;
+      min-width: 120px;
+      z-index: 2;
+      background: white;
+      border-left: 1px solid $neutral-3;
+      font-size: .75rem;
+      padding: 1rem;
+
+      > span {
+        float: right;
+        padding: .25rem 0rem;
+      }
+
+    }
+
+    .dropdown-menu{
+      min-width: 120px;
+      left: unset;
+      right: 0;
+      z-index: 1;
+      margin-top: -2px;
+      font-size: .75rem;
+      border-radius: 0 0 0 .5rem;
+      border: 1px solid #D0D3DA;
+      border-right: none;
+    }
+  }
+}