zuora_connect_ui 0.1.0

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

@@ -0,0 +1,267 @@
+.checkbox input[type="checkbox"] {
+  transform: scale(1.5);
+  margin-left: -18px;
+  margin-top: 3px;
+
+  + label::before {
+    top: .125rem;
+    transition: all .2s ease;
+    border-radius: .1rem;
+    border-color: #d3d7d8; // default is #ccc
+  }
+
+  + label:after {
+    font-family: webicons;
+    content: "\E936";
+    max-width: 0;
+    overflow: hidden;
+    line-height: 1.25rem;
+    color: $neutral-4;
+
+    -webkit-transition: all 0.4s ease;
+    -moz-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+  }
+
+  &:checked {
+    + label:before {
+      background-color: $support-1;
+      border-color: $support-1;
+    }
+    + label:after {
+      max-width: 1rem;
+    }
+  }
+}
+
+.radio input[type="radio"] {
+  transform: scale(1.6);
+  margin-left: -17px;
+  margin-top: 5px;
+
+  + label {
+    cursor: normal;
+    &:before {
+      transition: all .4s ease;
+      height: 1rem;
+      width: 1rem;
+    }
+    &:after {
+      transform: none;
+      height: .4rem;
+      width: .4rem;
+      top: .3rem;
+      left: .3rem;
+      background-color: $neutral-4;
+    }
+  }
+
+  &:checked {
+    + label:before {
+      background-color: $support-1;
+      border-color: $support-1;
+    }
+    + label:after {
+      background-color: $neutral-4;
+    }
+  }
+}
+
+textarea {
+  box-sizing: content-box;
+  max-width: 100%;
+  min-height: 2.5rem;
+}
+
+input[type="file"] {
+  margin-left: .875rem;
+  line-height: 2.5;
+
+  + label {
+    position: absolute;
+    top: 0;
+  }
+}
+
+.form-group {
+  position: relative;
+}
+
+.zuo-textbox {
+  width: 100%;
+  border: 0;
+  margin-top: 1rem;
+  border-bottom: 1px solid #e9ebee;
+  color: $neutral-1;
+  background: transparent;
+  transition: border-color 0.2s;
+  padding: 0rem 0rem .375rem 0rem;
+
+  &:focus {
+    border-color: $support-1;
+  }
+
+  &[disabled="disabled"] {
+    cursor: not-allowed;
+    color: #6e7c89;
+  }
+}
+
+label.zuo-floating-label {
+  position: absolute;
+  top: 1.25rem;
+  display: block;
+  transition: 0.2s;
+  font-size: .875rem;
+  line-height: 1;
+  font-weight: normal;
+  color: #6e7c89;
+  margin-bottom: 0;
+  pointer-events: none;
+}
+
+.zuo-floating-label.floating,
+.zuo-textbox:focus + .zuo-floating-label,
+select + .select2-container--open + .zuo-floating-label {
+  font-size: .75rem;
+  top: 0;
+}
+
+.zuo-textbox:focus + .zuo-floating-label,
+select + .select2-container--open + .zuo-floating-label {
+  color: $support-1;
+}
+
+
+.select2-container {
+  .select2-selection {
+      border: none;
+  }
+
+  .select2-dropdown {
+    border: 1px solid $neutral-shadow;
+    box-shadow: 0 1px 8px -1px $neutral-shadow;
+    border-radius: .25rem;
+    padding: .5rem 0;
+
+    .select2-results__option {
+      padding: .25rem .75rem;
+    }
+
+    .select2-results__option[aria-selected="true"] {
+      background-color: $support-1;
+      color: $neutral-4;
+    }
+
+    .select2-results__option--highlighted[aria-selected="false"] {
+      background-color: $neutral-3;
+      color: $neutral-1;
+    }
+  }
+
+  .select2-dropdown--below {
+    top: .5rem;
+  }
+}
+
+.select2-container--bootstrap {
+  .select2-selection {
+    box-shadow: none;
+    height: auto;
+    padding: 0 2rem .375rem 0;
+    margin-top: 1rem;
+    border-radius: 0;
+
+    &--multiple,
+    .select2-selection__rendered {
+      min-height: 1.25rem;
+    }
+
+    .select2-selection__choice {
+      margin: 0;
+      padding: 0;
+      padding-right: 1.25rem;
+      border: none;
+      position: relative;
+
+      .select2-selection__choice__remove {
+        width: 1rem;
+        height: 1rem;
+        font-size: .75rem;
+        line-height: 1;
+        position: absolute;
+        right: .25rem;
+        top: 3.5px;
+        text-align: center;
+        margin-right: 0;
+        border: 1px solid transparent;
+        font-weight: normal;
+
+        &:hover {
+          color: $support-1;
+          border-color: $support-1;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .select2-search--inline .select2-search__field {
+      height: unset;
+      padding-left: 0;
+    }
+
+    .select2-selection__arrow {
+      right: 0;
+      top: 4px;
+      width: 1.25rem;
+      line-height: 1;
+
+      &:before {
+        content: "\E90D";
+        font-family: webicons;
+        font-size: .75rem;
+        color: #a5a3b6;
+        transition: color .2s ease;
+      }
+
+      b {
+        display: none;
+      }
+    }
+  }
+
+  .select2-selection,
+  &.select2-container--focus .select2-selection,
+  &.select2-container--disabled .select2-selection {
+    border-bottom: 1px solid #e9ebee;
+  }
+
+  &.select2-container--open.select2-container--below .select2-selection {
+    border-bottom: 1px solid $support-1;
+
+    .select2-selection__arrow:before {
+      color: $support-1;
+    }
+  }
+
+  &.select2-container--disabled .select2-selection--single,
+  &.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
+    background-color: transparent;
+
+    .select2-selection__rendered {
+      color: #6e7c89;
+    }
+  }
+
+}
+
+.select2-container.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
+  box-shadow: none;
+}
+
+.select2-container .select2-selection--single .select2-selection__arrow b {
+  border-color: $neutral-1 transparent transparent transparent;
+}
+.select2-container.select2-container--open .select2-selection .select2-selection__arrow b {
+  border-color: transparent transparent $neutral-1 transparent;
+}

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

@@ -0,0 +1,40 @@
+.modal-dialog {
+  min-width: 800px;
+
+  .select_container {
+    display: inline-block;
+  }
+}
+
+.modal-body {
+  padding: 0;
+  margin: 1rem 1rem 0 1rem;
+
+  // Fixes first div's top-margin getting ignored.
+  // (same trick that .form-group uses)
+  div:first-child::before {
+    content: " ";
+    display: table;
+  }
+
+  > div {
+    position: relative;
+    margin-bottom: 1rem;
+  }
+}
+
+.modal-footer {
+  padding: 1rem;
+}
+
+.form-horizontal .checkbox {
+  padding-top: 0;
+}
+
+#z_hub_modal {
+  div.popover {
+    &.left, &.top {
+      max-width:500px;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+/* Content Tabs */
+
+.green-header {
+  padding: 1rem;
+  
+  h1 {
+    line-height: 26px;
+    margin: 0;
+  }
+}
+
+ul.tab-header{
+  padding: 0 1rem;
+  border-bottom: 2px solid $neutral-2;
+  
+  li {
+    display: inline-block;
+    
+    a {
+      // non-hover tab styling
+      background-color: transparent; // Override bootstrap default
+      font-weight: 600;
+      padding: .5rem;
+      margin-right: 2rem;
+      margin-bottom: -3px; // pulls bottom border under the navbar bottom border
+
+      &:hover, &:focus {
+        background-color: transparent;
+      }
+    }
+    
+    &.active a {
+      border-bottom: 4px solid $zuora-accent;
+      color: $neutral-1;
+    }
+    
+    &:not(.active) a:hover {
+      border-bottom: 2px solid $primary;
+      padding-bottom: 9px; // pushes bottom border onto tabbar border
+    }
+  }
+}

data/app/helpers/input_helper.rb

@@ -0,0 +1,6 @@
+# Helper methods for input tags
+module InputHelper
+  def zuo_floating_label_class(value)
+    "zuo-floating-label #{value.nil? || value.empty? ? '' : 'floating'}"
+  end
+end

data/app/views/partials/_admin_menu.html.erb

@@ -0,0 +1,22 @@
+<% if is_app_admin? %>
+  <div id='admin-menu' class="dropdown">
+    <% if defined?(peek_bar) && peek_bar %>
+      <%= render 'peek/bar' %>
+    <% else %>
+      <div id="peek" class="disabled">
+        <div class="wrapper">Peek is not enabled.</div>
+      </div>
+    <% end %>
+  <div id="admin-peek-btn" class="z-icon-dotted zuo-btn"></div>
+  <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Admin
+    <span class="z-icon-desc"></span>
+  </div>
+  <ul class="dropdown-menu">
+    <%= yield %>
+  </ul>
+<% end %>
+
+<% content_for :scripts do %>
+  $('#admin-peek-btn').on('click', () => $('#peek').toggleClass('active'));
+<% end %>

data/app/views/partials/_filters.html.erb

@@ -0,0 +1,34 @@
+<% placeholder = defined?(table_filter["placeholder"]) ? table_filter["placeholder"] : "" %>
+<% prompt = defined?(table_filter["prompt"]) ? table_filter["prompt"] : "" %>
+<% index = defined?(index) ? index : nil %>
+<% filter_count = defined?(filter_count) ? filter_count : nil %>
+<% width = defined?(table_filter["width"]) ? table_filter["width"] : "100%" %>
+<% allow_clear = defined?(table_filter["allow-clear"]) ? table_filter["allow-clear"] : true %>
+
+<% if table_filter["type"] == "checkbox" %>
+  <div class="btn-group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
+      <%= prompt %> <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" >
+      <li>
+        <% table_filter["values"].each do |type| %>
+          <div class="checkbox checkbox-success" style='margin-left: 15px;'>
+            <input type="checkbox" name='<%= table_filter["name"].parameterize('_') %>[]' <%= table_filter["selection"].include?(type) ? 'checked' : ''%> value="<%= type %>"><label for="<%= table_filter["name"].parameterize('_') %>"><%= type %></label>
+          </div>
+        <% end %>
+      </li>
+    </ul>
+  </div>
+<% elsif table_filter["type"] == "select" %>
+  <div class="btn-group <%= index > 0 ? 'select2-bootstrap-prepend' : '' %> <%= (index + 1 != filter_count && filter_count > 1) ? 'select2-bootstrap-append' : '' %>">
+    <%= select_tag(table_filter["name"].parameterize('_'), options_for_select( table_filter["values"], table_filter["selection"]), options = { :class => 'form-control input-sm', :prompt => prompt, :data =>{:placeholder => placeholder, "allow-clear" => allow_clear }, :style =>''}) %>
+  </div>
+  <% content_for :scripts do %>
+    $('#<%= "#{table_name}_content" %>').find('select[name="<%= table_filter["name"].parameterize('_') %>"]').select2({theme: "bootstrap", minimumResultsForSearch: Infinity, width: '<%= width %>', allowClear: <%= allow_clear %>})
+  <% end %>
+<% elsif table_filter["type"] == "boolean" %>
+  <div class="btn-group" style="margin-left:10px">
+    <input type="checkbox" value="true" name='<%= table_filter["name"].parameterize('_') %>' <%= table_filter["selection"] == "true" ? 'checked' : ''%>><label for="<%= table_filter["name"].parameterize('_') %>"><%= table_filter["name"] %></label>
+  </div>
+<% end %>