beyond_canvas 0.21.0.pre → 0.22.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8090819de67a4cd59730d513d833430cb0314693d92614a40b150603e9e569bc
-  data.tar.gz: 447fc7161eda427ad167d616265322f33db7f42bf232c9dd642f900f730a1afa
+  metadata.gz: 7a4ead3a43e09b4b3e09f2b34189ae10000390b92cc9114311229b3b7564cdd7
+  data.tar.gz: b1f7cf8af577809cff6869bb70e5dae13b79ba9af101e462e41b1ab6bafa3d8d
 SHA512:
-  metadata.gz: e99a7527ad594aa9c3805d6d422c13030252e0c8b9d614bc3bef1c29bbef358093bebfffe80f6dad4e1799345ce38835ed2398e70eed6b4eef5babb5c5ffba5c
-  data.tar.gz: 7f725871fca780a660973273cae8b4102d98f1f9f49633e4b9ed2a496e23388a7aac61e8940575f023ab213cca894be65d6e6e2ca1e4db16577a30997091d435
+  metadata.gz: 53c3c8df6355da6859e55458b3cec85b6caaf1dac8fcce848e5dd590636d42c1018f9765fd5f8b8e478bc2d79c6d503b9fa8211fdccb317b9af1ab509cf26a51
+  data.tar.gz: a29c6b62aae56c8a3dc379252a22c6b84f8c014a38011669b5b2d3939009927631eae03f2b2663b688703c17b736e0cf2431fcc10003641e404cc97998128144

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() {

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

@@ -13,8 +13,8 @@
 @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";

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/_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/_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/_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

@@ -1,5 +1,9 @@
 .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;
@@ -53,6 +57,7 @@
   .select2-dropdown{
     border: 1px solid $input-border-color-focus;
     border-top: none;
+    z-index: 9999999;
   }
 
   .select2-results__option {

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
@@ -72,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;
 
 // ************************************************************
@@ -184,8 +185,9 @@ $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
@@ -257,3 +259,9 @@ $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/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'

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/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/lib/beyond_canvas/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BeyondCanvas
-  VERSION = '0.21.0.pre'
+  VERSION = '0.22.0.pre'
 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.21.0.pre
+  version: 0.22.0.pre
 platform: ruby
 authors:
 - Unai Abrisketa
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-13 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
@@ -283,6 +283,7 @@ files:
 - 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

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;
-          }
-        }
-      }
-    }
-  }
-}