wallaby 5.0.1 → 5.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 97bd9fc25767069f94fd6d5dd0a594bfd068a8bf
-  data.tar.gz: 5462ca0cd790f6bfc5d01d13a4e3da7d5c72cd15
+  metadata.gz: 918ba41ac5ba7f6971332674647888cc6f989126
+  data.tar.gz: 44c4f9006a6628ea19d26134d1fa9d8acd1e1511
 SHA512:
-  metadata.gz: f105ad40cbaa96f3f143a0f8c7aa4075e55f1b1fe2e38a0b99d2cd4e811d83aeafff524e934dd3f377b7b7cba9cadbf76751d1d37febb2389ae7b84f7f51ecde
-  data.tar.gz: 7f0f06a3c6291364a99e68a81b7f5d59d6dd560126205c4f999fe018c34566fffe57cbdabd5f638cd652ca06c6d5e86e43efd8b566ac2e2a4881c195fdc4cf62
+  metadata.gz: dfddc7545545924c353c5c41a000ed5f9a97c986c9713898c13c0e82abbec0df36652445aa38540241ca8c08c7f937c917b6d43449764c99c55639a74fe49465
+  data.tar.gz: 0170cdf8218bb7881a5fa56fb8605520f2e1358b9719e0296825f9f063021af0b9f6c8feb63c2eb8407b203a6a4f0a0ecdd4f7a9554d4d16c368a091744d14a6

data/Rakefile

@@ -14,10 +14,8 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
-APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+APP_RAKEFILE = File.expand_path('../spec/dummy/Rakefile', __FILE__)
 load 'rails/tasks/engine.rake'
-
-
 load 'rails/tasks/statistics.rake'
 
 Bundler::GemHelper.install_tasks

data/app/assets/javascripts/wallaby/application.js

@@ -1,15 +1 @@
-//= require jquery
-//= require jquery_ujs
-//= require bootstrap-sprockets
-jQuery(function ($) {
-  $('[data-toggle="tooltip"]').tooltip({ html: true })
-
-  $('.search-form').each(function () {
-    var $this = $(this)
-    $(this).find('input:visible').on('focus', function () {
-      $this.addClass('focus')
-    }).on('blur', function () {
-      $this.removeClass('focus')
-    })
-  })
-})
+//= require wallaby/base

data/app/assets/javascripts/wallaby/auto_select.js

@@ -0,0 +1,77 @@
+'use strict';
+
+jQuery.fn.extend({
+  auto_select: function (typeahead_options, engine_options) {
+    var $this = jQuery(this),
+        $input = jQuery('div input', this),
+        $template = jQuery('<li><input type="hidden" /><a href="javascript:,"></a></li>'),
+        name = $input.attr('name'),
+        multiple = $input.attr('multiple');
+
+    var recreate_typeahead = function () {
+      var data = $this.data(),
+          options = jQuery.extend({
+            highlight: true,
+            hint: true,
+            minLength: 1
+          }, typeahead_options || {}),
+          source_options = {
+            name: data.source,
+            display: 'label',
+            source: new Bloodhound(jQuery.extend({
+              remote: {
+                url: data.url,
+                wildcard: data.wildcard
+              },
+              queryTokenizer: Bloodhound.tokenizers.whitespace,
+              datumTokenizer: Bloodhound.tokenizers.whitespace
+            }, engine_options || {}))
+          };
+      $input.typeahead('destroy')
+      $input.typeahead(options, source_options);
+    };
+    $this.off('reload.auto_select')
+      .on('reload.auto_select', recreate_typeahead)
+      .trigger('reload.auto_select');
+
+    var disable_typeahead_on_single_selection = function () {
+      $input.prop('disabled', !multiple && $this.find('a').length === 1);
+      $this.find('.auto_select__count span').text($this.find('a').length);
+    };
+    $this.off('update.auto_select')
+      .on('update.auto_select', disable_typeahead_on_single_selection)
+      .trigger('update.auto_select');
+
+    $input.removeAttr('name').removeAttr('multiple'); // some clean up for the input
+
+    var append_and_focus_on_selection = function (event, suggestion) {
+      var $a,
+          $existing = $this.find('input[value=' + suggestion.id + ']');
+      if ($existing.length) {
+        $a = $existing.next();
+      } else {
+        var $new_item = $template.clone();
+        $new_item.find('input').attr('name', name).val(suggestion.id);
+        $this.find('ul').append($new_item);
+        $a = $new_item.find('a').text(suggestion.label);
+        $this.trigger('update.auto_select');
+      }
+      if (multiple) { $a.focus(); }
+      $input.typeahead('val', '');
+    };
+    var ignore_tab_and_enter = function (e) {
+      var k = e.keyCode || e.which;
+      if (k === 13) { return false; }
+    };
+    $input.off('typeahead:select').off('typeahead:change')
+      .on('typeahead:select typeahead:autocomplete', append_and_focus_on_selection)
+      .on('keypress', ignore_tab_and_enter);
+
+    var remove_selection = function () {
+      jQuery(this).parent().remove();
+      $this.trigger('update.auto_select');
+    };
+    $this.off('click.auto_select').
+      on('click.auto_select', 'a', remove_selection);
+  }
+});

data/app/assets/javascripts/wallaby/base.js

@@ -0,0 +1,17 @@
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap-sprockets
+//= require moment
+//= require bootstrap-datetimepicker
+//= require summernote
+//= require codemirror
+//= require codemirror/addons/mode/overlay
+//= require codemirror/modes/ruby
+//= require codemirror/modes/javascript
+//= require codemirror/modes/markdown
+//= require codemirror/modes/gfm
+//= require codemirror/modes/xml
+//= require twitter/typeahead
+//= require jquery.minicolors
+//= require wallaby/auto_select
+//= require wallaby/setup

data/app/assets/javascripts/wallaby/setup.js.erb

@@ -0,0 +1,60 @@
+window.readyPrefix = function readyPrefix(eventName) {
+  return '<%= Wallaby.configuration.features.turbolinks_enabled ? "turbolinks:load" : "ready" %>' + eventName;
+}
+
+jQuery(document).off(readyPrefix('.wallaby')).on(readyPrefix('.wallaby'), function () {
+  'use strict';
+
+  jQuery('[data-toggle="tooltip"]').tooltip({ html: true, container:'body' })
+  jQuery('#imodal').on('show.bs.modal', function (event) {
+    var $button = jQuery(event.relatedTarget),
+        $this = jQuery(this);
+    $this.find('.modal-title').html($button.siblings('.modaler__title').html());
+    $this.find('.modal-body').html($button.siblings('.modaler__body').html());
+  })
+
+  jQuery('.index').each(function() {
+    jQuery('.query', this).each(function () {
+      var $this = jQuery(this);
+      jQuery('input:visible', this).on('focus.modifier', function () {
+        $this.addClass('query--focus');
+      }).on('blur', function () {
+        $this.removeClass('query--focus');
+      })
+    })
+
+    jQuery('.resources').each(function () {
+      var $this = jQuery(this);
+
+      // let's clone the actions, just for styling
+      jQuery('.resources__data', this).each(function () {
+        var $actions_table = jQuery('<table></table>').addClass('resources__actions'),
+            $thead = jQuery('<thead><tr><th>&nbsp;</th></tr></thead>'),
+            $tbody = jQuery('<tbody></tbody>'),
+            $tr = jQuery('<tr></tr>');
+
+        jQuery('.resource__actions', this).each(function () {
+          $tbody.append($tr.clone().append(jQuery(this).clone()));
+        })
+
+        $actions_table.append($thead, $tbody);
+        jQuery('> section', $this).append($actions_table);
+      })
+
+      // to show double arrows
+      jQuery('.resources__container').on('scroll', function () {
+        var $container = jQuery(this),
+            $th = jQuery('.resources__actions thead th', $this),
+            $data_table = jQuery('.resources__data', $this);
+
+        $th.toggleClass('resources--backward', $container.scrollLeft() > 0);
+        $th.toggleClass('resources--forward', $container.scrollLeft() + $container.width() < $data_table.width());
+      }).trigger('scroll');
+    })
+  })
+
+  if (CodeMirror) {
+    CodeMirror.defaults.theme = "mdn-like";
+    CodeMirror.defaults.lineNumbers = true;
+  }
+})

data/app/assets/stylesheets/wallaby/application.scss

@@ -1,51 +1 @@
-/*
- * "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
-*/
-@import "bootstrap-sprockets";
-@import "bootstrap";
-@import 'base/_vars';
-@import 'base/_mixins';
-@import 'base/_functions';
-@import 'base/_normalize';
-@import 'base/_reset';
-@import 'base/_layout';
-@import 'components/_text';
-@import 'components/_nav';
-@import 'components/_tables';
-@import 'components/_forms';
-@import 'components/_pagination';
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-}
-
-nav.top-nav {
-  margin-bottom: 0px;
-}
-
-section.fields {
-  padding: 10px;
-}
-
-div.page-header {
-  margin-top: 0px;
-}
-
-h1 {
-  margin-top: 5px;
-}
-
-ul.text-danger {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  padding-left: 25px;
-}
-
-.color-square {
-  display: inline-block;
-  margin-right: 3px;
-  width: 17px;
-  height: 17px;
-  border: 1px solid #eeeeee;
-  vertical-align: text-top;
-}
+@import 'wallaby/base';

data/app/assets/stylesheets/wallaby/base/_layout.scss

@@ -1,14 +1,262 @@
-main {
-  padding: 15px;
+body {
+  background-color: $background-color;
+  color: $font-color;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  padding-top: 142px;
+
+  &.index {
+    padding-top: 161px;
+  }
+
+  small {
+    font-size: 95%;
+  }
+
+  a {
+    color: $light-primary-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $default-primary-color;
+      text-decoration: none;
+    }
+  }
 }
 
-img.user-portrait {
-  margin: -5px 0;
-  width: 30px;
-  height: 30px;
+header {
+  .container-fluid {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  nav.navbar {
+    @extend .navbar-default, .navbar-fixed-top;
+    background-color: white;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.175);
+
+    img.user-portrait {
+      border-radius: 3px;
+      height: 30px;
+      margin: -5px 0;
+      width: 30px;
+    }
+
+    i.user-portrait {
+      font-size: 20px;
+      vertical-align: bottom;
+    }
+  }
+
+  .navbar-header {
+    position: relative;
+
+    a.navbar-brand {
+      color: $light-red-color;
+      &:hover {
+        color: $default-red-color;
+      }
+    }
+
+    button.navbar-toggle {
+      border: none;
+      float: none;
+      line-height: 16px;
+      margin-top: -18px;
+      padding: 8px 9px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+
+      &:hover, &:focus {
+        background-color: #444;
+        .fa-bars {
+          color: white;
+          font-size: 20px;
+        }
+      }
+
+      .fa-bars {
+        color: $font-color;
+        font-size: 20px;
+      }
+    }
+  }
+
+  #top-menu {
+    ul.navbar-nav {
+      ul.dropdown-menu {
+        ul.dropdown-menu {
+          display: block;
+          position: inherit;
+          margin-top: 0;
+          padding-left: 0;
+          padding-top: 0;
+          border: none;
+          box-shadow: none;
+
+          li {
+            position: relative;
+
+            &:before {
+              @extend .fa, .fa-caret-right;
+              position: absolute;
+              left: 30px;
+              top: 50%;
+              margin-top: -7px;
+            }
+
+            a {
+              padding-left: 43px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
-i.user-portrait {
-  font-size: 20px;
-  vertical-align: bottom;
+main {
+  margin: 0 10px;
+
+  section {
+    font-size: 12px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  .alert {
+    margin-bottom: 10px;
+  }
+
+  .resources, .resource {
+    &__container {
+      overflow: auto;
+      background-color: $white;
+    }
+  }
+
+  .resources__header, .resource__header {
+    background-color: $background-color;
+    border-bottom: none;
+    left: 0;
+    margin: 0 10px;
+    padding: 11px 0 0;
+    position: fixed;
+    right: 0;
+    top: 51px;
+    z-index: 10;
+
+    h1 {
+      color: $default-primary-color;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 24px;
+      line-height: 30px;
+      margin: 0 0 1px -1px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    span > a {
+      position: relative;
+      display: inline-block;
+      color: $light-primary-color;
+      text-decoration: none;
+      transition: 0.2s;
+
+      &:hover {
+        color: $default-primary-color;
+      }
+    }
+  }
+
+  .resources__header {
+    height: 109px;
+  }
+
+  .resource__header {
+    height: 90px;
+
+    nav {
+      bottom: 10px;
+      left: 0;
+      position: absolute;
+    }
+
+    ul, li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      float: left;
+    }
+
+    a {
+      @extend .fa;
+
+      background-color: $light-blue-color;
+      display: inline-block;
+      padding: 5px 8px;
+      width: 30px;
+      line-height: 20px;
+      margin-right: 6px;
+      text-align: center;
+      border-radius: 2px;
+      color: $white;
+      text-decoration: none;
+
+      &:hover {
+        color: $white;
+        background-color: $default-blue-color;
+      }
+    }
+
+    .resources__index {
+      @extend .fa-list;
+    }
+
+    .resource {
+      &__show {
+        @extend .fa-info;
+      }
+
+      &__create {
+        @extend .fa-plus;
+        background-color: $light-green-color;
+
+        &:hover {
+          background-color: $default-green-color;
+        }
+      }
+
+      &__update {
+        @extend .fa-pencil;
+        background-color: $light-yellow-color;
+
+        &:hover {
+          background-color: $default-yellow-color;
+        }
+      }
+
+      &__destroy {
+        @extend .fa-remove;
+        background-color: $light-red-color;
+
+        &:hover {
+          background-color: $default-red-color;
+        }
+      }
+    }
+  }
+
+  .modaler {
+    &__title,
+    &__body {
+      display: none;
+    }
+  }
 }
+
+@import '_layout_desktop';

data/app/assets/stylesheets/wallaby/base/_layout_desktop.scss

@@ -0,0 +1,53 @@
+@media (min-width: $screen-sm-min) {
+  body {
+    padding-top: 131px;
+
+    header .container-fluid {
+      padding: 0 30px;
+    }
+
+    main {
+      margin: 0 30px;
+
+      section {
+        margin-bottom: 30px;
+      }
+
+      .resources__header, .resource__header {
+        height: 80px;
+        margin: 0 30px;
+      }
+
+      .resource__header {
+        padding-top: 25px;
+
+        h1 {
+          margin-right: 122px;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        nav {
+          bottom: auto;
+          left: auto;
+          margin-top: -15px;
+          right: -6px;
+          top: 50%;
+          transition: 0.5s;
+        }
+      }
+
+      .query {
+        bottom: auto;
+        left: 65%;
+        margin-top: -15px;
+        top: 50%;
+        transition: 0.5s;
+
+        &.query--focus {
+          left: 50%;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/wallaby/base/_mixins.scss

@@ -0,0 +1,119 @@
+@mixin dropdown ($left_or_right: "left") {
+  position: relative;
+
+  &.open {
+    > ul, > form {
+      display: block;
+    }
+  }
+
+  > ul, > form {
+    @if $left_or_right == "left" { left: 0 }
+    @if $left_or_right == "right" { right: 0 }
+    @if $left_or_right == "middle" { left: -93px; }
+    background-clip: padding-box;
+    background-color: $white;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    display: none;
+    float: left;
+    list-style: none;
+    margin: 2px 0 0;
+    min-width: 160px;
+    padding: 5px 0;
+    position: absolute;
+    text-align: left;
+    top: 100%;
+    z-index: 100000;
+
+    em, label {
+      color: $light-grey-color;
+      display: block;
+      font-style: normal;
+      font-weight: normal;
+      padding: 3px 20px;
+      text-decoration: none;
+    }
+
+    a {
+      color: $font-color;
+      display: block;
+      font-style: normal;
+      font-weight: normal;
+      padding: 3px 20px;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+@mixin arrow ($icon_font: $fa-var-angle-down, $icon_font_open: $fa-var-angle-up, $light: $light-red-color, $dark: $dark-red-color, $left_or_right: "right", $padding_size: 11px) {
+  > a {
+    @if $left_or_right == "left" { padding-left: $padding_size }
+    @if $left_or_right == "right" { padding-right: $padding_size }
+    display: inline-block;
+    position: relative;
+
+    &:after {
+      @if $left_or_right == "left" { left: 0 }
+      @if $left_or_right == "right" { right: 0 }
+      @extend .fa;
+      color: $light;
+      content: $icon_font;
+      font-size: 12px;
+      margin-top: -6px;
+      position: absolute;
+      top: 50%;
+    }
+
+    &:hover:after {
+      color: $dark;
+    }
+  }
+
+  &.open > a {
+    &:after {
+      @extend .fa;
+      content: $icon_font_open;
+    }
+  }
+}
+
+@mixin divider ($color: $light-grey-color) {
+  position: relative;
+  margin-left: 10px;
+  padding-left: 10px;
+
+  &:before {
+    background-color: $color;
+    content: '';
+    height: 10px;
+    left: 0;
+    margin-top: -5px;
+    position: absolute;
+    top: 50%;
+    width: 1px;
+  }
+
+  &:first-of-type {
+    margin: 0;
+    padding: 0;
+
+    &:before {
+      display: none;
+    }
+  }
+}
+
+@mixin light_link {
+  color: $light-blue-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $default-blue-color;
+  }
+}