beyond_canvas 0.19.0.pre → 0.22.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8497d52ad577ad1bd0cdebd09e869d11ea2887a31fdc989b1bef6a17857dc2c8
-  data.tar.gz: cb77eecd56a81ab9bfc2f222e6899f9c689f5ede39d1b4410d7c45074dbd4e96
+  metadata.gz: 7a4ead3a43e09b4b3e09f2b34189ae10000390b92cc9114311229b3b7564cdd7
+  data.tar.gz: b1f7cf8af577809cff6869bb70e5dae13b79ba9af101e462e41b1ab6bafa3d8d
 SHA512:
-  metadata.gz: ee33312698d87e1449db902b91374a5b35f17d872f6e3c132a4bf758676f05a4574fee66fbfdf7dbce3f67b43f8dc524579dbe687307c72f8f21711770bbf93c
-  data.tar.gz: 2869d5f1ab74828a384dc090d745497542739729d6874b4cf8c913a01fee58be62205e08d93d1abcfcda41eba0337d97db758fe3531fb555b38758e11609af2d
+  metadata.gz: 53c3c8df6355da6859e55458b3cec85b6caaf1dac8fcce848e5dd590636d42c1018f9765fd5f8b8e478bc2d79c6d503b9fa8211fdccb317b9af1ab509cf26a51
+  data.tar.gz: a29c6b62aae56c8a3dc379252a22c6b84f8c014a38011669b5b2d3939009927631eae03f2b2663b688703c17b736e0cf2431fcc10003641e404cc97998128144

data/README.md

@@ -3,59 +3,17 @@
 ![Gem Version](https://img.shields.io/gem/v/beyond_canvas?label=gem%20version)
 ![License](https://img.shields.io/github/license/ePages-de/beyond_canvas)
 
-## Installation
-
-1. Add this line to your application's Gemfile:
-
-    ```ruby
-    gem "beyond_canvas"
-    ```
-
-1. Then execute:
-
-    ```bash
-    $ bundle install
-    ```
-
-1. Restart your server and rename `application.css` to `application.scss` or `application.sass` (in case you prefer to use the `sass` syntax):
-
-    ```bash
-    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
-    ```
-
-1. Delete _all_ Sprockets directives in `application.scss` (`require`, `require_tree` and `require_self`) and use Sass’s native `@import` instead ([Here's why?](https://content.pivotal.io/blog/structure-your-sass-files-with-import)).
-
-1. Import Beyond Canvas at the beginning of `application.scss`. Any other styles must be imported after Beyond Canvas to avoid issues:
-
-    ```scss
-    @import 'beyond_canvas'
-    ```
-
-1. Add the following to `application.js`:
-
-    ```js
-    //= require beyond_canvas
-    ```
-
-1. Run the generator:
-
-    ```bash
-    $ rails g beyond_canvas:install
-    ```
-
-    This will generate `config/initializers/beyond_canvas.rb` file, used for general Beyond Canvas configuration. Read [this wiki entry](https://github.com/ePages-de/beyond_canvas/wiki/Initializer) to get more information about the different configuration options.
-
 ## Documentation
 
-TBD
+Please see the [Beyond Canvas wiki](https://github.com/ePages-de/beyond_canvas/wiki) for additional information about the gem and its features.
 
 ## Contributing
 
 Please see [CONTRIBUTING](https://github.com/ePages-de/beyond_canvas/blob/master/CONTRIBUTING.md).
 
-## Changelog
+## Change log
 
-Beyond Canvas's changelog is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
+Beyond Canvas's change log is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
 
 ## License
 

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

@@ -23,25 +23,18 @@
         });
       });
       $(BUTTON_SELECTORS).each(function() {
-        var button = $(this);
-        button.width(button.width());
-        button.data("oldWidth", button.width());
-        if (button.find(".spinner").length == 0) {
-          button.prepend('\n          <div class="spinner">\n            <div class="bounce1"></div>\n            <div class="bounce2"></div>\n            <div class="bounce3"></div>\n          </div>');
-        }
-        button.closest("form").on("ajax:success", function() {
-          $.restoreActionElements();
-        }).on("ajax:error", function() {
-          $.restoreActionElements();
-        });
+        $(this).buildButton();
       });
     };
     $(document).on("confirm:complete", function() {
       $.restoreActionElements();
     });
     $(document).on("click", BUTTON_SELECTORS, function() {
+      var button = $(this);
       $.disableActionElements();
-      $(this).showSpinner();
+      if (!button.hasClass("button--no-spinner")) {
+        $(this).showSpinner();
+      }
     });
     $(document).on("ready page:load turbolinks:load", onDOMReady);
   })(jQuery);
@@ -64,6 +57,23 @@
     }
   });
   $.fn.extend({
+    buildButton: function buildButton() {
+      var button = $(this);
+      if (button.is("[class^=button]")) {
+        if (!button.hasClass("button--no-spinner")) {
+          button.width(button.width());
+          button.data("oldWidth", button.width());
+          if (button.find(".spinner").length == 0) {
+            button.prepend('\n          <div class="spinner">\n            <div class="bounce1"></div>\n            <div class="bounce2"></div>\n            <div class="bounce3"></div>\n          </div>');
+          }
+        }
+        button.closest("form").on("ajax:success", function() {
+          $.restoreActionElements();
+        }).on("ajax:error", function() {
+          $.restoreActionElements();
+        });
+      }
+    },
     showSpinner: function showSpinner() {
       var button = $(this);
       button.width(button.width() + $(".spinner").outerWidth(true));
@@ -72,6 +82,13 @@
       }, SPINNER_ANIMATION_TIMEOUT);
     }
   });
+  (function($) {
+    $(document).on("click", "[data-toggle='collapse']", function(e) {
+      e.preventDefault();
+      $($(this).attr("data-target")).slideToggle();
+      $(this).find(".collapse__icon").toggleClass("collapse__icon--open");
+    });
+  })(jQuery);
   (function($) {
     var onDOMReady = function onDOMReady() {
       $(".flash").each(function() {
@@ -81,7 +98,7 @@
         $(".flash").addClass("flash--shown");
       }, 100);
     };
-    $(document).on("click", ".flash", function() {
+    $(document).on("click", ".flash__close", function() {
       closeAlert();
     });
     $(document).on("ready page:load turbolinks:load", onDOMReady);

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

@@ -8,12 +8,13 @@
 @import "utilities/functions";
 @import "utilities/mixins";
 
+@import "components/action_bar";
 @import "components/actions";
 @import "components/breadcrumbs";
 @import "components/buttons";
 @import "components/cards";
+@import "components/collapse";
 @import "components/comments";
-@import "components/containers";
 @import "components/debug";
 @import "components/flash";
 @import "components/forms";
@@ -24,14 +25,15 @@
 @import "components/main";
 @import "components/margins";
 @import "components/markdown";
-@import "components/action_bar";
+@import "components/menu";
 @import "components/modals";
 @import "components/notices";
 @import "components/relative";
 @import "components/scrollbox";
+@import "components/select2";
 @import "components/sidebar";
 @import "components/spinner";
-@import "components/menu";
+@import "components/statuses";
 @import "components/tables";
-@import "components/titles";
 @import "components/texts";
+@import "components/titles";

data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss

@@ -21,6 +21,10 @@
   &__item {
     color: $breadcrum-color-current;
 
+    &:hover {
+      color: $breadcrum-color-hover
+    }
+
     &--current {
       color: $breadcrum-color;
       pointer-events: none;

data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss

@@ -18,6 +18,16 @@
   transition: $main-transition;
 }
 
+%button_disabled {
+  border-color: $button-disabled-background;
+  background-color: $button-disabled-background;
+  pointer-events: none;
+  color: $button-disabled-color;
+  text-shadow: $button-disabled-text-shadow;
+  border-bottom-color: #aaaaaa;
+}
+
+
 @mixin button-solid($background, $color) {
   @include background-color-darken($background, 10%);
 
@@ -63,6 +73,10 @@
   }
 }
 
+input[type=file][disabled] ~ .button__transparent--primary {
+  @extend %button_disabled;
+}
+
 .button {
   &__solid {
     &--primary {
@@ -70,6 +84,11 @@
 
       @include button-solid($button-primary-background, $button-primary-color);
       @include button-border($button-primary-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
 
     &--secondary {
@@ -77,6 +96,11 @@
 
       @include button-solid($button-secondary-background, $button-secondary-color);
       @include button-border($button-secondary-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
 
     &--danger {
@@ -84,6 +108,11 @@
 
       @include button-solid($button-danger-background, $button-danger-color);
       @include button-border($button-danger-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
   }
 
@@ -93,6 +122,11 @@
 
       @include button-transparent($button-primary-background);
       @include button-border($button-primary-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
 
     &--secondary {
@@ -100,6 +134,11 @@
 
       @include button-transparent($button-secondary-background);
       @include button-border($button-secondary-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
 
     &--danger {
@@ -107,6 +146,11 @@
 
       @include button-transparent($button-danger-background);
       @include button-border($button-danger-background);
+
+      &:disabled,
+      &[disabled] {
+        @extend %button_disabled;
+      }
     }
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_collapse.scss

@@ -0,0 +1,30 @@
+.collapse {
+
+  &:not(:last-child) {
+    margin-bottom: 24px;
+  }
+
+  &__content {
+    display: none;
+  }
+
+  &__button {
+    color: $palette-primary;
+    font-weight: 700;
+    cursor: pointer;
+    display: table;
+    line-height: 1;
+    margin-bottom: 4px;
+  }
+
+  &__icon {
+    @include size(10px);
+
+    fill: $palette-primary;
+    margin-right: 2px;
+
+    &--open {
+      transform: rotate(90deg);
+    }
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_flash.scss

@@ -40,7 +40,8 @@
       background-color: $flash-warning;
     }
 
-    &--error {
+    &--error,
+    &--alert {
       background-color: $flash-error;
     }
   }

data/app/assets/stylesheets/beyond_canvas/components/_grids.scss

@@ -1,8 +1,8 @@
 .grid {
   &__container {
     display: grid;
-  gap: 40px;
-  grid-template-columns: repeat(auto-fill, 385px);
+    gap: 40px;
+    grid-template-columns: repeat(auto-fill, 385px);
   }
 
   &__item {

data/app/assets/stylesheets/beyond_canvas/components/_inputs.scss

@@ -9,6 +9,12 @@ select {
   outline: none;
   padding: 6px 8px;
   width: 100%;
+
+  &:disabled {
+    background-color: $input-disabled-background !important;
+    color: $input-disabled-color;
+    opacity: 1;
+  }
 }
 
 #{$all-text-inputs} {

data/app/assets/stylesheets/beyond_canvas/components/_links.scss

@@ -1,17 +1,45 @@
+%link_disabled {
+  @include color-darken($link-disabled-color, 10%);
+
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+%link {
+  line-height: 1.2;
+}
+
 .link {
   &__icon {
-    margin-right: 10px;
+    @include size(14px);
+
+    margin-right: 6px;
   }
 
   &--primary {
     @include color-darken($link-primary-color, 10%);
+
+    @extend %link;
   }
 
   &--secondary {
     @include color-darken($link-secondary-color, 10%);
+
+    @extend %link;
   }
 
   &--danger {
     @include color-darken($link-danger-color, 10%);
+
+    @extend %link;
+  }
+
+  &--primary,
+  &--secondary,
+  &--danger {
+    &:disabled,
+    &[disabled] {
+      @extend %link_disabled;
+    }
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_margins.scss

@@ -1,4 +1,8 @@
 .margin {
+  &--clear {
+    margin: 0 !important;
+  }
+
   &--top {
     margin-top: 30px;
   }

data/app/assets/stylesheets/beyond_canvas/components/_menu.scss

@@ -15,14 +15,24 @@
     height: $menu-logo-height;
   }
 
+  &--left {
+    display: inherit;
+  }
+
   &--center {
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
+    display: inherit;
+  }
+
+  &--right {
+    display: inherit;
   }
 
   &__item {
     @include margin(0 15px);
+    line-height: 1;
     color: $menu-item-color;
 
     &:hover {

data/app/assets/stylesheets/beyond_canvas/components/_modals.scss

@@ -1,10 +1,10 @@
 .modal {
 
   &__background {
+    @include position(fixed, 0 0 0 0);
     width: 100%;
     height: 100%;
     background-color: $modal-background-color;
-    position: absolute;
     z-index: 99999;
     justify-content: center;
     align-items: center;

data/app/assets/stylesheets/beyond_canvas/components/_notices.scss

@@ -52,7 +52,6 @@
     @include padding(8px 14px);
 
     color: $notice-color;
-    display: flex;
-    align-items: center;
+    display: block;
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_select2.scss

@@ -0,0 +1,70 @@
+.beyond-canvas {
+
+  .select2-dropdown--above {
+    border-top: 1px solid $select2-border-color-focus !important;
+  }
+
+  .select2-container--default .select2-selection--multiple {
+    border: 1px solid $select2-border-color;
+    border-radius: 3px;
+  }
+
+  .select2-container--default.select2-container--focus .select2-selection--multiple{
+    border: 1px solid $select2-border-color-focus;
+  }
+
+  .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
+  .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-color: $select2-border-color-focus;
+  }
+
+  .select2-container--default.select2-container--disabled .select2-selection--multiple {
+    background-color: $select2-disabled-background;
+    pointer-events: none;
+  }
+
+  .select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: $select2-option-hover-background;
+    color: $select2-option-hover-color;
+  }
+
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: $select2-tag-background;
+    color: $select2-tag-color;
+    font-weight: bold;
+    font-size: 11px;
+    border-radius: 3px;
+    border: none;
+    padding: 3px 7px 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    margin-left: 8px;
+    color: $select2-close-icon-color;
+    font-size: 18px;
+    line-height: 0;
+
+    &:hover {
+      color: $select2-close-icon-color-hover;
+    }
+  }
+
+  .select2-dropdown{
+    border: 1px solid $input-border-color-focus;
+    border-top: none;
+    z-index: 9999999;
+  }
+
+  .select2-results__option {
+    font-weight: 700;
+  }
+
+  .select2-results__option[aria-selected=true] {
+    display: none;
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_statuses.scss

@@ -0,0 +1,27 @@
+.status {
+  @include padding(4px 6px);
+  font-size: 12px;
+  border-radius: 3px;
+  line-height: 1.2;
+  font-weight: 500;
+
+  &--good {
+    background-color: $status-good-background;
+    color: $status-good-color;
+  }
+
+  &--warning {
+    background-color: $status-warning-background;
+    color: $status-warning-color;
+  }
+
+  &--danger {
+    background-color: $status-danger-background;
+    color: $status-danger-color;
+  }
+
+  &--neutral {
+    border: 1px solid $status-neutral-background;
+    color: $status-neutral-color;
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_texts.scss

@@ -1,7 +1,15 @@
 .text {
   &__align {
+    &--left {
+      text-align: left;
+    }
+
     &--center {
       text-align: center;
     }
+
+    &--right {
+      text-align: right;
+    }
   }
 }

data/app/assets/stylesheets/beyond_canvas/settings/_variables.scss

@@ -40,6 +40,7 @@ $headline-line-height: 1;
 $link-primary-color: darken($palette-primary, 10%) !default;
 $link-secondary-color: darken($palette-cancel, 10%) !default;
 $link-danger-color: darken($palette-danger, 10%) !default;
+$link-disabled-color: rgb(208,208,208) !default;
 
 // ************************************************************
 // Buttons
@@ -54,6 +55,10 @@ $button-secondary-color: $white !default;
 $button-danger-background: $palette-danger !default;
 $button-danger-color: $white !default;
 
+$button-disabled-background: rgb(208,208,208) !default;
+$button-disabled-color: rgb(144,144,144) !default;
+$button-disabled-text-shadow: 1px 1px 0 $white !default;
+
 $button-border-radius: 3px !default;
 $button-box-shadow: true !default;
 $button-font-weight: 700;
@@ -68,7 +73,7 @@ $card-box-shadow: 0 2px 7px rgba($black, 0.2) !default;
 $card-padding: 40px;
 $card-margin: 30px;
 $card-separator-color: rgb(222, 222, 222) !default;
-$card-separator-spacing: 50px;
+$card-separator-spacing: 40px;
 $card-title-color: rgb(247, 133, 96) !default;
 
 // ************************************************************
@@ -90,6 +95,8 @@ $label-color: rgb(128, 128, 128) !default;
 $input-border-color: rgb(217, 216, 195) !default;
 $input-border-color-focus: $palette-primary !default;
 $input-errors-color: $palette-danger !default;
+$input-disabled-background: rgb(245,244,239) !default;
+$input-disabled-color: rgb(163,161,137) !default;
 
 // ************************************************************
 // Checkboxes
@@ -161,12 +168,26 @@ $notice-error-background: rgb(218, 60, 60) !default;
 $notice-border-radius: 4px !default;
 $notice-color: rgb(153, 153, 153) !default;
 
+// ************************************************************
+// Status
+// ************************************************************
+
+$status-good-background: rgb(205,225,165) !default;
+$status-good-color: rgb(85,110,41) !default;
+$status-warning-background: rgb(249,220,166) !default;
+$status-warning-color: rgb(178,120,18) !default;
+$status-danger-background: rgb(247,174,163) !default;
+$status-danger-color: rgb(164,35,34) !default;
+$status-neutral-background: rgb(224,223,205) !default;
+$status-neutral-color: rgb(155,151,100) !default;
+
 // ************************************************************
 // Breadcrums
 // ************************************************************
 
-$breadcrum-color: rgb(122, 118, 76) !default;
-$breadcrum-color-current: rgb(61, 149, 137) !default;
+$breadcrum-color: rgb(112, 110, 77) !default;
+$breadcrum-color-hover: rgb(67, 65, 46) !default;
+$breadcrum-color-current: rgb(112, 110, 77) !default;
 
 // ************************************************************
 // Titles
@@ -224,3 +245,23 @@ $modal-padding: 10px;
 $modal-width: 650px;
 $modal-close-icon-color: #8b8b8b !default;
 $modal-background-color: rgba(0, 0, 0, 0.5) !default;
+
+// ************************************************************
+// Select2
+// ************************************************************
+
+$select2-border-color: $input-border-color !default;
+$select2-border-color-focus: $input-border-color-focus !default;
+$select2-close-icon-color: #79764b !default;
+$select2-close-icon-color-hover: darken($select2-close-icon-color, 15%) !default;
+$select2-tag-background: rgb(223, 222, 204) !default;
+$select2-tag-color: rgb(122, 118, 76) !default;
+$select2-disabled-background: rgb(245, 244, 239) !default;
+$select2-option-hover-background: rgb(229, 241, 240) !default;
+$select2-option-hover-color: rgb(62, 62, 62) !default;
+
+// ************************************************************
+// Collapsibles
+// ************************************************************
+
+$collapsible-color: $palette-primary !default

data/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss

@@ -12,6 +12,15 @@
   color: $color;
   transition: $main-transition;
 
+  svg {
+    fill: $color;
+
+    &:hover {
+      fill: darken($color, $percent);
+      transition: $main-transition;
+    }
+  }
+
   &:hover {
     color: darken($color, $percent);
     transition: $main-transition;

data/app/controllers/beyond_canvas/application_controller.rb

@@ -7,5 +7,6 @@ module BeyondCanvas
     include ::BeyondCanvas::StatusCodes
     include ::BeyondCanvas::AuthenticationsHelper
     include ::BeyondCanvas::DebugHelper
+    include ::BeyondCanvas::ControllerHelper
   end
 end

data/app/helpers/beyond_canvas/application_helper.rb

@@ -36,8 +36,29 @@ module BeyondCanvas
       end
     end
 
+    def collapse(name, html_options = nil, &block)
+      html_options ||= {}
+      id = unique_id(:collapse)
+
+      html_options.merge!(class: 'collapse__content') { |_key, old_val, new_val| [new_val, old_val].join(' ') }
+      html_options.merge!(id: id)
+
+      content_tag('div', class: 'collapse') do
+        content_tag('a', class: 'collapse__button', data: { toggle: 'collapse', target: "##{id}" }) do
+          (inline_svg_tag('icons/arrow_right.svg', class: 'collapse__icon') + name).html_safe
+        end +
+        content_tag('div', html_options) do
+          yield block if block_given?
+        end
+      end
+    end
+
     private
 
+    def unique_id(attribute)
+      "#{attribute}_#{DateTime.now.strftime('%Q') + rand(10_000).to_s}"
+    end
+
     def get_flash_icon(key)
       case key
       when 'success', 'notice'
@@ -46,7 +67,7 @@ module BeyondCanvas
         inline_svg_tag 'icons/flash_info.svg'
       when 'warning'
         inline_svg_tag 'icons/flash_warning.svg'
-      when 'error'
+      when 'error', 'alert'
         inline_svg_tag 'icons/flash_error.svg'
       else
         inline_svg_tag 'icons/flash_info.svg'

data/app/helpers/beyond_canvas/controller_helper.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module BeyondCanvas
+  module ControllerHelper # :nodoc:
+    def beyond_canvas_controller?
+      self.class.const_defined?(:BeyondCanvas)
+    end
+  end
+end

data/app/helpers/beyond_canvas/statuses_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module BeyondCanvas
+  module StatusesHelper # :nodoc:
+    %i[good warning danger neutral].each do |method|
+      define_method :"status_#{method}" do |name = nil, html_options = nil, &block|
+        status_render(method, name, html_options, &block)
+      end
+    end
+
+    private
+
+    def status_render(method, name = nil, html_options = nil, &block)
+      if block_given?
+        html_options = name
+        name = block
+      end
+
+      html_options ||= {}
+
+      html_options.merge!(class: "status status--#{method}") { |_key, old_val, new_val| [new_val, old_val].join(' ') }
+
+      content_tag('span', block_given? ? capture(&name) : name, html_options)
+    end
+  end
+end

data/app/javascript/beyond_canvas/base.js

@@ -1,6 +1,7 @@
 import 'jquery';
 
 import './initializers/buttons';
+import './initializers/collapse';
 import './initializers/flash';
 import './initializers/inputs';
 import './initializers/modals';

data/app/javascript/beyond_canvas/initializers/buttons.js

@@ -2,7 +2,7 @@ const SPINNER_ANIMATION_TIMEOUT = 125;
 const BUTTON_SELECTORS = '[class^="button"]';
 
 (function ($) {
-  const onDOMReady = function (e) {
+  const onDOMReady = function () {
     const inputs = $('input, textarea, select').not(
       ':input[type=button], :input[type=submit], :input[type=reset]'
     );
@@ -19,31 +19,7 @@ const BUTTON_SELECTORS = '[class^="button"]';
     });
 
     $(BUTTON_SELECTORS).each(function () {
-      var button = $(this);
-
-      // Add width attribute and save old width
-      button.width(button.width());
-      button.data('oldWidth', button.width());
-
-      // Add the spinner
-      if (button.find('.spinner').length == 0) {
-        button.prepend(`
-          <div class="spinner">
-            <div class="bounce1"></div>
-            <div class="bounce2"></div>
-            <div class="bounce3"></div>
-          </div>`);
-      }
-
-      // Bind ajax:success and ajax:error to the form the button belongs to
-      button
-        .closest('form')
-        .on('ajax:success', function () {
-          $.restoreActionElements();
-        })
-        .on('ajax:error', function () {
-          $.restoreActionElements();
-        });
+      $(this).buildButton();
     });
   };
 
@@ -52,8 +28,13 @@ const BUTTON_SELECTORS = '[class^="button"]';
   });
 
   $(document).on('click', BUTTON_SELECTORS, function () {
+    var button = $(this);
+
     $.disableActionElements();
-    $(this).showSpinner();
+
+    if (!button.hasClass('button--no-spinner')) {
+      $(this).showSpinner();
+    }
   });
 
   $(document).on('ready page:load turbolinks:load', onDOMReady);
@@ -84,6 +65,37 @@ $.extend({
 });
 
 $.fn.extend({
+  buildButton: function() {
+    var button = $(this);
+
+    if (button.is('[class^=button]')) {
+      if (!button.hasClass('button--no-spinner')) {
+        // Add width attribute and save old width
+        button.width(button.width());
+        button.data('oldWidth', button.width());
+
+        // Add the spinner
+        if (button.find('.spinner').length == 0) {
+          button.prepend(`
+          <div class="spinner">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
+          </div>`);
+        }
+      }
+
+      // Bind ajax:success and ajax:error to the form the button belongs to
+      button
+        .closest('form')
+        .on('ajax:success', function () {
+          $.restoreActionElements();
+        })
+        .on('ajax:error', function () {
+          $.restoreActionElements();
+        });
+    }
+  },
   showSpinner: function () {
     var button = $(this);
 

data/app/javascript/beyond_canvas/initializers/collapse.js

@@ -0,0 +1,8 @@
+(function ($) {
+  $(document).on('click', "[data-toggle='collapse']", function (e) {
+    e.preventDefault();
+
+    $($(this).attr('data-target')).slideToggle();
+    $(this).find('.collapse__icon').toggleClass('collapse__icon--open');
+  });
+})(jQuery);

data/app/javascript/beyond_canvas/initializers/flash.js

@@ -9,7 +9,7 @@
     }, 100);
   };
 
-  $(document).on('click', '.flash', function () {
+  $(document).on('click', '.flash__close', function () {
     closeAlert();
   });
 

data/app/views/beyond_canvas/shared/_breadcrumbs.html.erb

@@ -1,12 +1,15 @@
-<% if is_cockpit_app? %>
+<% if is_cockpit_app? && breadcrumb_trail.count.positive? %>
 
   <div class='breadcrumbs'>
 
     <%= inline_svg_tag 'icons/home.svg' %>
 
+    <% i = 1 %>
+
     <% breadcrumb_trail do |crumb| %>
       <%= link_to crumb.name, crumb.url, class: "breadcrumb__item#{ '--current' if crumb.current? }" %>
-      <% unless crumb.current? %><%= inline_svg_tag 'icons/arrow_right.svg' %><% end %>
+      <% unless i ==  breadcrumb_trail.count || crumb.current? %><%= inline_svg_tag 'icons/arrow_right.svg' %><% end %>
+      <% i += 1 %>
     <% end %>
 
   </div>

data/app/views/layouts/beyond_canvas/application.html.erb

@@ -3,7 +3,7 @@
 <html>
 <%= render 'beyond_canvas/shared/head' %>
 
-<body class="body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
+<body class="beyond-canvas body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
 
   <%= render 'beyond_canvas/shared/sidebar' %>
 

data/lib/beyond_canvas/engine.rb

@@ -24,13 +24,10 @@ module BeyondCanvas
         include ::BeyondCanvas::StatusCodes
         include ::BeyondCanvas::AuthenticationsHelper
         include ::BeyondCanvas::DebugHelper
+        include ::BeyondCanvas::ControllerHelper
 
         ::ActionController::Base.helper BeyondCanvas::Engine.helpers
       end
-
-      ActiveSupport.on_load :action_mailer do
-        layout 'beyond_canvas/mailer'
-      end
     end
   end
 end

data/lib/beyond_canvas/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BeyondCanvas
-  VERSION = '0.19.0.pre'
+  VERSION = '0.22.0.pre'
 end

data/lib/generators/beyond_canvas/controller/controller_generator.rb

@@ -1,18 +1,14 @@
 # frozen_string_literal: true
 
-require 'rails/generators/active_record'
-
 module BeyondCanvas
   module Generators
     class ControllerGenerator < Rails::Generators::Base # :nodoc:
       desc 'Creates an inherited Beyond Canvas controller in the app/controllers folder'
 
-      argument :scope, required: true, desc: 'The scope to create the controller, e.g. shops, users'
-
       source_root File.expand_path('templates', __dir__)
 
       def create_controller
-        template 'controller.erb', "app/controllers/#{scope}_controller.rb"
+        template 'shops_controller.rb', "app/controllers/shops_controller.rb"
       end
     end
   end

data/lib/generators/beyond_canvas/controller/templates/{controller.erb → shops_controller.rb}

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class <%= scope.camelize %>Controller < BeyondCanvas::AuthenticationsController
+class ShopsController < BeyondCanvas::AuthenticationsController
   # before_action :configure_params, only: [:install]
 
   # def new

data/lib/generators/beyond_canvas/custom_menu/templates/beyond_canvas_custom_menu.html.erb

@@ -7,25 +7,25 @@
   <div class="menu--center">
 
 <%
-=begin
+=begin %>
     Add here your menu links. You can use `menu__item` as class name and add
     `menu__item--selected` as secondary class for selected menu item. E.g:
 
     <%= link_to 'About us', about_us_path, class: "menu__item #{ 'menu__item--selected' if params[:controller] == 'about_us' }" %>
     <%= link_to 'Support', support_path, class: "menu__item #{ 'menu__item--selected' if params[:controller] == 'support' }" %>
-=end
-%>
+<%
+=end %>
 
   </div>
 
   <div class="menu--right">
 
 <%
-=begin
+=begin %>
     You can also add here some content that will be right-aligned, like a user
     avatar image or a dropdown account menu.
-=end
-%>
+<%
+=end %>
 
   </div>
 

data/lib/generators/beyond_canvas/custom_styles/templates/beyond_canvas_custom_styles.scss

@@ -47,6 +47,10 @@
 // $button-danger-background: $palette-danger;
 // $button-danger-color: $white;
 
+// $button-disabled-background: rgb(208,208,208);
+// $button-disabled-color: rgb(144,144,144);
+// $button-disabled-text-shadow: 1px 1px 0 $white;
+
 // $button-border-radius: 3px;
 // $button-box-shadow: true;
 
@@ -77,6 +81,8 @@
 // $input-border-color: rgb(217, 216, 195);
 // $input-border-color-focus: $palette-primary;
 // $input-errors-color: $palette-danger;
+// $input-disabled-background: rgb(245,244,239);
+// $input-disabled-color: rgb(163,161,137);
 
 // ************************************************************
 // Checkboxes
@@ -148,6 +154,19 @@
 // $notice-border-radius: 4px;
 // $notice-color: rgb(153, 153, 153);
 
+// ************************************************************
+// Status
+// ************************************************************
+
+// $status-good-background: rgb(205,225,165);
+// $status-good-color: rgb(85,110,41);
+// $status-warning-background: rgb(249,220,166);
+// $status-warning-color: rgb(178,120,18);
+// $status-danger-background: rgb(247,174,163);
+// $status-danger-color: rgb(164,35,34);
+// $status-neutral-background: rgb(224,223,205);
+// $status-neutral-color: rgb(155,151,100);
+
 // ************************************************************
 // Breadcrums
 // ************************************************************
@@ -197,3 +216,17 @@
 
 // $modal-close-icon-color: #8b8b8b;
 // $modal-background-color: rgba(0, 0, 0, 0.5);
+
+// ************************************************************
+// Select2
+// ************************************************************
+
+// $select2-border-color: $input-border-color;
+// $select2-border-color-focus: $input-border-color-focus;
+// $select2-close-icon-color: #79764b;
+// $select2-close-icon-color-hover: darken($select2-close-icon-color, 15%);
+// $select2-tag-background: rgb(223, 222, 204);
+// $select2-tag-color: rgb(122, 118, 76);
+// $select2-disabled-background: rgb(245, 244, 239);
+// $select2-option-hover-background: rgb(229, 241, 240);
+// $select2-option-hover-color: rgb(62, 62, 62);

data/lib/generators/beyond_canvas/install/templates/beyond_canvas.rb.erb

@@ -83,7 +83,7 @@ BeyondCanvas.setup do |config|
   #
   <% unless @skip_webpacker %># <% end %>config.skip_webpacker = <%= @skip_webpacker %>
 
-  # ==> Authentication with ePages Beyond API
+  # ==> Database encryption
 
   config.encryption_key = '<%= SecureRandom.hex(32) %>'
 end

data/lib/models/concerns/utils.rb

@@ -40,15 +40,16 @@ module BeyondCanvas
           #
           def to_session
             BeyondApi::Session.new(api_url: beyond_api_url,
-                                    access_token: beyond_access_token,
-                                    refresh_token: beyond_refresh_token)
+                                   access_token: beyond_access_token,
+                                   refresh_token: beyond_refresh_token)
           end
 
           #
           # Returns the shop url
           #
-          def url
-            "https://#{URI.parse(beyond_api_url).host}"
+          def url(path = nil, params = nil)
+            path = path[1..-1] if path&.chr == '/'
+            "https://#{URI.parse(beyond_api_url).host}/#{path}#{'?' +params&.to_query if params.present?}"
           end
 
           def has_scope?(scope)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond_canvas
 version: !ruby/object:Gem::Version
-  version: 0.19.0.pre
+  version: 0.22.0.pre
 platform: ruby
 authors:
 - Unai Abrisketa
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-09 00:00:00.000000000 Z
+date: 2020-12-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: attr_encrypted
@@ -235,8 +235,8 @@ files:
 - app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss
 - app/assets/stylesheets/beyond_canvas/components/_buttons.scss
 - app/assets/stylesheets/beyond_canvas/components/_cards.scss
+- app/assets/stylesheets/beyond_canvas/components/_collapse.scss
 - app/assets/stylesheets/beyond_canvas/components/_comments.scss
-- app/assets/stylesheets/beyond_canvas/components/_containers.scss
 - app/assets/stylesheets/beyond_canvas/components/_debug.scss
 - app/assets/stylesheets/beyond_canvas/components/_flash.scss
 - app/assets/stylesheets/beyond_canvas/components/_forms.scss
@@ -252,8 +252,10 @@ files:
 - app/assets/stylesheets/beyond_canvas/components/_notices.scss
 - app/assets/stylesheets/beyond_canvas/components/_relative.scss
 - app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss
+- app/assets/stylesheets/beyond_canvas/components/_select2.scss
 - app/assets/stylesheets/beyond_canvas/components/_sidebar.scss
 - app/assets/stylesheets/beyond_canvas/components/_spinner.scss
+- app/assets/stylesheets/beyond_canvas/components/_statuses.scss
 - app/assets/stylesheets/beyond_canvas/components/_tables.scss
 - app/assets/stylesheets/beyond_canvas/components/_texts.scss
 - app/assets/stylesheets/beyond_canvas/components/_titles.scss
@@ -275,10 +277,13 @@ files:
 - app/helpers/beyond_canvas/application_helper.rb
 - app/helpers/beyond_canvas/authentications_helper.rb
 - app/helpers/beyond_canvas/cockpit_app_helper.rb
+- app/helpers/beyond_canvas/controller_helper.rb
 - app/helpers/beyond_canvas/debug_helper.rb
 - app/helpers/beyond_canvas/locale_switch_helper.rb
+- app/helpers/beyond_canvas/statuses_helper.rb
 - app/javascript/beyond_canvas/base.js
 - app/javascript/beyond_canvas/initializers/buttons.js
+- app/javascript/beyond_canvas/initializers/collapse.js
 - app/javascript/beyond_canvas/initializers/flash.js
 - app/javascript/beyond_canvas/initializers/inputs.js
 - app/javascript/beyond_canvas/initializers/modals.js
@@ -317,7 +322,7 @@ files:
 - lib/generators/beyond_canvas/assets/templates/beyond_canvas.scss
 - lib/generators/beyond_canvas/beyond_api/beyond_api_generator.rb
 - lib/generators/beyond_canvas/controller/controller_generator.rb
-- lib/generators/beyond_canvas/controller/templates/controller.erb
+- lib/generators/beyond_canvas/controller/templates/shops_controller.rb
 - lib/generators/beyond_canvas/custom_menu/custom_menu_generator.rb
 - lib/generators/beyond_canvas/custom_menu/templates/beyond_canvas_custom_menu.html.erb
 - lib/generators/beyond_canvas/custom_styles/custom_styles_generator.rb

data/app/assets/stylesheets/beyond_canvas/components/_containers.scss

@@ -1,37 +0,0 @@
-$columns: 2, 3, 4;
-
-.container {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-
-  &--center {
-    justify-content: center;
-  }
-
-  &__column {
-
-    @each $column in $columns {
-
-      &--#{$column} {
-        width: 100%;
-
-        @media (min-width: $laptop) {
-          width: calc((100% - (#{$column} - 1) * #{$container-spacing}) / #{$column});
-
-          &:not(:last-child) {
-            margin-right: $container-spacing;
-          }
-        }
-
-        &:not(:last-child) {
-          margin-bottom: $container-spacing;
-
-          @media (min-width: $laptop) {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}