diff --git a/.eslintrc.json b/.eslintrc.json
index 4c785e51..10b30c66 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,11 +4,9 @@
"es6": true,
"jquery": true
},
- "extends": [
- "eslint:recommended"
- ],
+ "extends": ["eslint:recommended"],
"parserOptions": {
- "ecmaVersion": 6,
+ "ecmaVersion": 11,
"sourceType": "module"
},
"rules": {
@@ -28,14 +26,8 @@
"allowTemplateLiterals": true
}
],
- "semi": [
- "error",
- "always"
- ],
- "init-declarations": [
- "error",
- "always"
- ],
+ "semi": ["error", "always"],
+ "init-declarations": ["error", "always"],
"no-undefined": "error"
}
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 514b5bfd..0d824f44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+### v0.23.1.pre
+
+* deprecations
+ * Remove `link_to_with_icon`
+ * `external_link` icon will no longer be automatically added on `target="_blank"` anchors
+
+* bug-fixes
+ * Minor style fixes
+ * Prevent checking custom styles when opening the app
+ * Remove unnecessary `URI.decode(signature)` call when validating open app request
+ * Remove unnecessary `terms` attribute from `Shop`
+ * Fix `#refresh_token` method when `client_credentials = true` is configured
+
+* features
+ * Add a middleware to automatically configure cockpit app headers
+ * Add `image_file_field` component to upload images and render a `placeholder` if there is no image
+ * Add `image_attachment_tag` component to render images
+ * Add styles for `.svg` images that include `.surface`, `.bubbles` and `.outline` classes
+
+* enhancements
+ * Allow to retrieve `client_credentials` token on any environment but `production`
+ * Add convenient `custom_styles?` and `client_credentials?` methods
+
### v0.23.0.pre
* deprecations
diff --git a/Gemfile.lock b/Gemfile.lock
index b0066642..d679dce9 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
- beyond_canvas (0.23.0.pre)
+ beyond_canvas (0.23.1.pre)
attr_encrypted (~> 3.1)
beyond_api (>= 0.18.0.pre)
bourbon (~> 7.0)
@@ -97,7 +97,7 @@ GEM
erubi (1.10.0)
faraday (0.17.4)
multipart-post (>= 1.2, < 3)
- ffi (1.15.3)
+ ffi (1.15.4)
globalid (0.5.2)
activesupport (>= 5.0)
htmlentities (4.3.4)
@@ -111,7 +111,7 @@ GEM
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
- jwt (2.2.3)
+ jwt (2.3.0)
loaf (0.10.0)
railties (>= 3.2)
loofah (2.12.0)
@@ -119,15 +119,15 @@ GEM
nokogiri (>= 1.5.9)
mail (2.7.1)
mini_mime (>= 0.1.1)
- marcel (1.0.1)
+ marcel (1.0.2)
method_source (1.0.0)
- mini_mime (1.1.1)
+ mini_mime (1.1.2)
minitest (5.14.4)
multipart-post (2.1.1)
nio4r (2.5.8)
- nokogiri (1.12.3-x86_64-darwin)
+ nokogiri (1.12.5-x86_64-darwin)
racc (~> 1.4)
- nokogiri (1.12.3-x86_64-linux)
+ nokogiri (1.12.5-x86_64-linux)
racc (~> 1.4)
parallel (1.20.1)
parser (3.0.2.0)
@@ -140,7 +140,7 @@ GEM
actionmailer (>= 3)
premailer (~> 1.7, >= 1.7.9)
public_suffix (4.0.6)
- racc (1.5.2)
+ racc (1.6.0)
rack (2.2.3)
rack-test (1.1.0)
rack (>= 1.0, < 3)
@@ -162,7 +162,7 @@ GEM
rails-dom-testing (2.0.3)
activesupport (>= 4.2.0)
nokogiri (>= 1.6)
- rails-html-sanitizer (1.4.1)
+ rails-html-sanitizer (1.4.2)
loofah (~> 2.3)
railties (6.1.4.1)
actionpack (= 6.1.4.1)
@@ -213,7 +213,7 @@ GEM
websocket-driver (0.7.5)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
- zeitwerk (2.4.2)
+ zeitwerk (2.5.1)
PLATFORMS
x86_64-darwin-20
@@ -224,4 +224,4 @@ DEPENDENCIES
rubocop-rails (~> 2.5)
BUNDLED WITH
- 2.2.26
+ 2.2.28
diff --git a/app/assets/images/icons/checkbox_checked.svg b/app/assets/images/icons/checkbox_checked.svg
deleted file mode 100644
index e6c72342..00000000
--- a/app/assets/images/icons/checkbox_checked.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/checkbox_unchecked.svg b/app/assets/images/icons/checkbox_unchecked.svg
deleted file mode 100644
index 2788c6e6..00000000
--- a/app/assets/images/icons/checkbox_unchecked.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/delete.svg b/app/assets/images/icons/delete.svg
new file mode 100644
index 00000000..cf3dbd6c
--- /dev/null
+++ b/app/assets/images/icons/delete.svg
@@ -0,0 +1 @@
+
diff --git a/app/assets/images/icons/external_link.svg b/app/assets/images/icons/external_link.svg
deleted file mode 100644
index cefd23ec..00000000
--- a/app/assets/images/icons/external_link.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/flash_checkbox.svg b/app/assets/images/icons/flash_checkbox.svg
deleted file mode 100644
index 8ae37f57..00000000
--- a/app/assets/images/icons/flash_checkbox.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/assets/images/icons/flash_close.svg b/app/assets/images/icons/flash_close.svg
deleted file mode 100644
index 280c4d05..00000000
--- a/app/assets/images/icons/flash_close.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/assets/images/icons/flash_error.svg b/app/assets/images/icons/flash_error.svg
deleted file mode 100644
index d452dac9..00000000
--- a/app/assets/images/icons/flash_error.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/assets/images/icons/flash_info.svg b/app/assets/images/icons/flash_info.svg
deleted file mode 100644
index fd42b952..00000000
--- a/app/assets/images/icons/flash_info.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/assets/images/icons/flash_warning.svg b/app/assets/images/icons/flash_warning.svg
deleted file mode 100644
index c9bcf20a..00000000
--- a/app/assets/images/icons/flash_warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/assets/images/icons/home.svg b/app/assets/images/icons/home.svg
deleted file mode 100644
index c3facba9..00000000
--- a/app/assets/images/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/placeholder.svg b/app/assets/images/icons/placeholder.svg
new file mode 100644
index 00000000..0d2c6220
--- /dev/null
+++ b/app/assets/images/icons/placeholder.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/app/assets/images/icons/radiobutton_checked.svg b/app/assets/images/icons/radiobutton_checked.svg
deleted file mode 100644
index 11d958f2..00000000
--- a/app/assets/images/icons/radiobutton_checked.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/radiobutton_unchecked.svg b/app/assets/images/icons/radiobutton_unchecked.svg
deleted file mode 100644
index e60f6e24..00000000
--- a/app/assets/images/icons/radiobutton_unchecked.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/toggle.svg b/app/assets/images/icons/toggle.svg
deleted file mode 100644
index dcaacafe..00000000
--- a/app/assets/images/icons/toggle.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/images/icons/toggle_checked.svg b/app/assets/images/icons/toggle_checked.svg
deleted file mode 100644
index e3cde878..00000000
--- a/app/assets/images/icons/toggle_checked.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/app/assets/images/icons/toggle_unchecked.svg b/app/assets/images/icons/toggle_unchecked.svg
deleted file mode 100644
index 742d8dd5..00000000
--- a/app/assets/images/icons/toggle_unchecked.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/app/assets/javascripts/beyond_canvas/base.js b/app/assets/javascripts/beyond_canvas/base.js
index 971fa915..390bbfd4 100644
--- a/app/assets/javascripts/beyond_canvas/base.js
+++ b/app/assets/javascripts/beyond_canvas/base.js
@@ -3,21 +3,22 @@
*/
//= require jquery3
//= require rails-ujs
+//= require beyond_canvas/common_functions
//= require_self
(function(factory) {
- typeof define === "function" && define.amd ? define([ "jquery" ], factory) : factory();
+ typeof define === 'function' && define.amd ? define([ 'jquery' ], factory) : factory();
})(function() {
- "use strict";
+ 'use strict';
var SPINNER_ANIMATION_TIMEOUT = 125;
- var BUTTON_SELECTORS = '[class^="button"]';
+ var BUTTON_SELECTORS = "[class^='button']";
(function($) {
var onDOMReady = function onDOMReady() {
- var inputs = $("input, textarea, select").not(":input[type=button], :input[type=submit], :input[type=reset]");
+ var inputs = $('input, textarea, select').not(':input[type=button], :input[type=submit], :input[type=reset]');
inputs.each(function() {
var input = $(this);
- input.bind("invalid", function(e) {
- if ($(input).is(":hidden")) {
+ input.bind('invalid', function(e) {
+ if ($(input).is(':hidden')) {
e.preventDefault();
}
$.restoreActionElements();
@@ -27,20 +28,20 @@
$(this).buildButton();
});
};
- $(document).on("confirm:complete", function() {
+ $(document).on('confirm:complete', function() {
$.restoreActionElements();
});
- $(document).on("click", BUTTON_SELECTORS, function(e) {
+ $(document).on('click', BUTTON_SELECTORS, function(e) {
var _e$target$attributes$;
var button = $(this);
- if (((_e$target$attributes$ = e.target.attributes.getNamedItem("target")) == null ? void 0 : _e$target$attributes$.value) === "_blank") return;
+ if (((_e$target$attributes$ = e.target.attributes.getNamedItem('target')) == null ? void 0 : _e$target$attributes$.value) === '_blank') return;
$.disableActionElements();
- if (!button.hasClass("button--no-spinner")) {
+ if (!button.hasClass('button--no-spinner')) {
$(this).showSpinner();
}
});
- $(document).on("ready page:load turbolinks:load", onDOMReady);
- $(document).on("beforeunload turbolinks:before-visit", function() {
+ $(document).on('ready page:load turbolinks:load', onDOMReady);
+ $(document).on('beforeunload turbolinks:before-visit', function() {
$.restoreActionElements();
});
})(jQuery);
@@ -49,144 +50,101 @@
setTimeout(function() {
$(BUTTON_SELECTORS).each(function(_, button) {
setTimeout(function() {
- $(button).find(".spinner").hide();
- $(button).width($(button).data("oldWidth"));
+ $(button).find('.spinner').hide();
+ $(button).width($(button).data('oldWidth'));
}, SPINNER_ANIMATION_TIMEOUT);
});
- $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
- $(this).removeClass("actions--disabled");
+ $("a, input[type='submit'], input[type='button'], input[type='reset'], button").each(function() {
+ $(this).removeClass('actions--disabled');
});
}, 100);
},
disableActionElements: function disableActionElements() {
- $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
- $(this).addClass("actions--disabled");
+ $("a, input[type='submit'], input[type='button'], input[type='reset'], button").each(function() {
+ $(this).addClass('actions--disabled');
});
}
});
- $.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
');
- }
- }
- 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));
- setTimeout(function() {
- button.find(".spinner").css("display", "inline-flex");
- }, 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() {
- $(this).css("right", -$(this).width() + "px");
- });
- setTimeout(function() {
- $(".flash").addClass("flash--shown");
- }, 100);
+ updateInputLabel();
+ initializeClearOnClickInputs();
+ addInputFocusClass();
+ removeInputFocusClass();
};
- $(document).on("click", ".flash__close", function() {
- $.closeAlert();
- });
- $(document).on("ready page:load turbolinks:load bc.flash.shown", onDOMReady);
- })(jQuery);
- $.extend({
- showFlash: function showFlash(status, message) {
- var flash = '\n \n
\n
\n ' + message + '\n
\n
\n
';
- $(document).trigger("bc.flash.show");
- $("#flash").html(flash);
- $(document).trigger("bc.flash.shown");
- },
- closeAlert: function closeAlert() {
- $(document).trigger("bc.flash.hide");
- $(".flash").removeClass("flash--shown").delay(700).queue(function() {
- $(this).remove();
+ var updateInputLabel = function updateInputLabel() {
+ $('form').on('change', 'input[type="file"]', function(_ref) {
+ var _input$files, _input$getAttribute, _input$value;
+ var input = _ref.currentTarget;
+ var label = $('.input__file__text.' + input.getAttribute('id'));
+ if (!label) return;
+ var noFileText = input.getAttribute('data-no-file-text');
+ var svgFileIcon = "\n ";
+ var fileName = ((_input$files = input.files) == null ? void 0 : _input$files.length) > 1 ? (_input$getAttribute = input.getAttribute('data-multiple-selection-text')) == null ? void 0 : _input$getAttribute.replace('{count}', input.files.length) : ((_input$value = input.value) == null ? void 0 : _input$value.split('\\').pop()) || '';
+ fileName ? label.html('' + svgFileIcon + fileName) : label.html(noFileText);
});
- $(document).trigger("bc.flash.hidden");
- }
- });
- (function($) {
- var onDOMReady = function onDOMReady() {
- $('input[type="file"]').each(function() {
- var $input = $(this), $label = $(".input__file__text." + $input.attr("id")), labelVal = $label.html();
- $input.on("change", function(e) {
- var fileName = "";
- if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "{count} files selected").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
- if (fileName) $label.html('' + fileName); else $label.html(labelVal);
- });
- $input.on("focus", function() {
- $input.addClass("has-focus");
- }).on("blur", function() {
- $input.removeClass("has-focus");
- });
+ };
+ var addInputFocusClass = function addInputFocusClass() {
+ $('form').on('focus', 'input[type="file"]', function(_ref2) {
+ var input = _ref2.currentTarget;
+ input.addClass('has-focus');
});
};
- $(document).on("ready page:load turbolinks:load", function() {
- var observer = new MutationObserver(function() {
- return onDOMReady();
+ var removeInputFocusClass = function removeInputFocusClass() {
+ $('form').on('blur', 'input[type="file"]', function(_ref3) {
+ var input = _ref3.currentTarget;
+ input.removeClass('has-focus');
});
- onDOMReady();
- observer.observe(document.body, {
- childList: true,
- subtree: true
+ };
+ var initializeClearOnClickInputs = function initializeClearOnClickInputs() {
+ $('form').on('click', 'input[type="file"][data-clear-on-click="true"]', function() {
+ var dt = new DataTransfer();
+ this.files = dt.files;
+ this.dispatchEvent(new Event('change', {
+ bubbles: true,
+ composed: true
+ }));
});
+ };
+ $(document).on('ready page:load turbolinks:load', function() {
+ return onDOMReady();
});
})(jQuery);
(function($) {
var onDOMReady = function onDOMReady() {
- $(".modal").each(function() {
- $(this).hide().css("visibility", "visible");
+ $('.modal').each(function() {
+ $(this).hide().css('visibility', 'visible');
});
};
- $(document).on("click", '[data-toggle="modal"]', function(e) {
+ $(document).on('click', '[data-toggle="modal"]', function(e) {
e.preventDefault();
- var dataTarget = $(this).attr("data-target");
+ var dataTarget = $(this).attr('data-target');
$.restoreActionElements();
$(dataTarget).showModal();
});
- $(document).on("click", '[data-dismiss="modal"]', function(e) {
+ $(document).on('click', '[data-dismiss="modal"]', function(e) {
e.preventDefault();
- var dataTarget = $(this).closest(".modal");
+ var dataTarget = $(this).closest('.modal');
$.restoreActionElements();
$(dataTarget).hideModal();
});
- $(document).on("ready page:load turbolinks:load", onDOMReady);
+ $(document).on('ready page:load turbolinks:load', onDOMReady);
})(jQuery);
$.fn.extend({
showModal: function showModal() {
var modal = $(this);
- modal.trigger("bc.modal.show");
+ modal.trigger('bc.modal.show');
$.restoreActionElements();
- modal.css("display", "flex");
- modal.trigger("bc.modal.shown");
+ modal.css('display', 'flex');
+ modal.trigger('bc.modal.shown');
},
hideModal: function hideModal() {
var modal = $(this);
- modal.trigger("bc.modal.hide");
+ modal.trigger('bc.modal.hide');
$.restoreActionElements();
modal.hide();
- modal.trigger("bc.modal.hidden");
+ modal.trigger('bc.modal.hidden');
}
});
+ const template = ``;
});
diff --git a/app/assets/javascripts/beyond_canvas/common_functions.js b/app/assets/javascripts/beyond_canvas/common_functions.js
new file mode 100644
index 00000000..80843f61
--- /dev/null
+++ b/app/assets/javascripts/beyond_canvas/common_functions.js
@@ -0,0 +1,136 @@
+var bc = (function (exports) {
+ 'use strict';
+
+ function _extends() {
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+ return target;
+ };
+ return _extends.apply(this, arguments);
+ }
+ function _unsupportedIterableToArray(o, minLen) {
+ if (!o) return;
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+ var n = Object.prototype.toString.call(o).slice(8, -1);
+ if (n === "Object" && o.constructor) n = o.constructor.name;
+ if (n === "Map" || n === "Set") return Array.from(o);
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+ }
+ function _arrayLikeToArray(arr, len) {
+ if (len == null || len > arr.length) len = arr.length;
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+ return arr2;
+ }
+ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+ if (it) return (it = it.call(o)).next.bind(it);
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+ if (it) o = it;
+ var i = 0;
+ return function () {
+ if (i >= o.length) return {
+ done: true
+ };
+ return {
+ done: false,
+ value: o[i++]
+ };
+ };
+ }
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+ }
+
+ /* exported previewImage */
+
+ function previewImage(e) {
+ var arr = Array.from(e.target.files);
+ var elementFather = $(e.target).parents('.relative').find('.js-images');
+ var figureElement = $(elementFather).find('figure');
+ var figurePlaceholderElement = $(e.target).parents('.relative').find('.js-placeholder').find('figure');
+ var imgAttr = getImagesAttributes(figureElement, figurePlaceholderElement);
+ var figureAttr = getAttributesFromFigureElements(figureElement, figurePlaceholderElement);
+ delete imgAttr.src;
+ delete figureAttr["class"];
+ delete figureAttr.style;
+ if ($(e.target).attr('multiple')) {
+ $(elementFather).children('attachment__placeholder, [preview]').each(function (_, img) {
+ return $(img).remove();
+ });
+ } else {
+ $(elementFather).find('figure').remove();
+ }
+ $(e.target).parents('.relative').find('.js-placeholder').hide();
+ arr.forEach(function (file) {
+ var reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = function () {
+ var figure = document.createElement('figure');
+ var img = document.createElement('img');
+ figure.classList.add('attachment', 'attachment--preview');
+ figure.setAttribute('preview', true);
+ img.setAttribute('src', reader.result);
+ setAttributesToElement(img, imgAttr);
+ setAttributesToElement(figure, figureAttr);
+ $(figure).append(img);
+ $(elementFather).append(figure);
+ };
+ });
+ }
+ var getImagesAttributes = function getImagesAttributes(figureImageElement, figurePlaceholderElement) {
+ return _extends({}, getImageAttributes($(figurePlaceholderElement)), getImageAttributes($(figureImageElement)));
+ };
+ var getAttributesFromFigureElements = function getAttributesFromFigureElements(figureImageElement, figurePlaceholderElement) {
+ return _extends({}, getAttributesFromElement($(figurePlaceholderElement)[0]), getAttributesFromElement($(figureImageElement)[0]));
+ };
+ var getImageAttributes = function getImageAttributes(figureElement) {
+ var svgElement = $(figureElement).find('svg')[0];
+ var imageElement = $(figureElement).find('img')[0];
+ if (imageElement) {
+ return getAttributesFromElement(imageElement);
+ }
+ return getAttributesFromSVG(svgElement);
+ };
+ var getAttributesFromElement = function getAttributesFromElement(element) {
+ var attributes = {};
+ if (!element) return attributes;
+ for (var _iterator = _createForOfIteratorHelperLoose(element.getAttributeNames()), _step; !(_step = _iterator()).done;) {
+ var attr = _step.value;
+ attributes[attr] = element.getAttribute(attr);
+ }
+ return attributes;
+ };
+ var getAttributesFromSVG = function getAttributesFromSVG(element) {
+ var svgAttrToExclude = ['xmlns', 'xmlns:xlink', 'version', 'id', 'x', 'y', 'viewBox', 'style', 'xml:space'];
+ var attributes = {};
+ if (!element) return attributes;
+ var svgAttr = element.getAttributeNames().filter(function (attr) {
+ return !svgAttrToExclude.includes(attr);
+ });
+ for (var _iterator2 = _createForOfIteratorHelperLoose(svgAttr), _step2; !(_step2 = _iterator2()).done;) {
+ var attr = _step2.value;
+ attributes[attr] = element.getAttribute(attr);
+ }
+ return attributes;
+ };
+ var setAttributesToElement = function setAttributesToElement(element, attributes) {
+ for (var attr in attributes) {
+ element.setAttribute(attr, attributes[attr]);
+ }
+ };
+
+ exports.getAttributesFromElement = getAttributesFromElement;
+ exports.getAttributesFromSVG = getAttributesFromSVG;
+ exports.getImageAttributes = getImageAttributes;
+ exports.previewImage = previewImage;
+ exports.setAttributesToElement = setAttributesToElement;
+
+ return exports;
+
+})({});
diff --git a/app/assets/stylesheets/beyond_canvas/base.scss b/app/assets/stylesheets/beyond_canvas/base.scss
index 6511158b..354be097 100644
--- a/app/assets/stylesheets/beyond_canvas/base.scss
+++ b/app/assets/stylesheets/beyond_canvas/base.scss
@@ -9,32 +9,16 @@
@import "utilities/functions";
@import "utilities/mixins";
-@import "components/action_bar"; // Done
-@import "components/actions"; // Done
-@import "components/breadcrumbs"; // Done
-@import "components/buttons";
-@import "components/cards";
-@import "components/collapse";
-@import "components/debug";
-@import "components/flash"; // Done
-@import "components/forms"; // Done
+@import "components/action_bar";
+@import "components/actions";
+@import "components/attachments";
@import "components/grids";
-@import "components/inputs";
-@import "components/layouts"; // Done
-@import "components/links";
+@import "components/layouts";
@import "components/main";
-@import "components/margins"; // Done
+@import "components/margins";
@import "components/markdown";
@import "components/menu";
-@import "components/modals"; // Done
-@import "components/notices"; // Done
-@import "components/relative"; // Done
-@import "components/scrollbox";
-@import "components/select2"; // Done
+@import "components/modals";
+@import "components/relative";
+@import "components/select2";
@import "components/sidebar";
-@import "components/spinner"; // Done
-@import "components/statuses"; // Done
-@import "components/step_list"; // Done
-@import "components/tables"; // Done
-@import "components/texts"; // Done
-@import "components/titles"; // Done
diff --git a/app/assets/stylesheets/beyond_canvas/components/_attachments.scss b/app/assets/stylesheets/beyond_canvas/components/_attachments.scss
new file mode 100644
index 00000000..1438351f
--- /dev/null
+++ b/app/assets/stylesheets/beyond_canvas/components/_attachments.scss
@@ -0,0 +1,89 @@
+.attachments {
+ margin-top: 10px;
+}
+
+.attachment {
+ background-color: $white;
+ border: $attachment-border;
+ border-radius: 3px;
+ display: inline-flex;
+ margin-bottom: 16px;
+ padding: 10px;
+ position: relative;
+
+ &__delete-icon {
+ position: absolute;
+ right: 12px;
+ top: 12px;
+
+ &:hover {
+ svg {
+ path{
+ fill: $attachment-delete-icon-hover-color;
+ }
+ }
+ }
+
+ svg {
+ filter: drop-shadow(0 1px 0 $white);
+
+ path {
+ fill: $attachment-delete-icon-color;
+ }
+ }
+
+ &s {
+ &:not(:last-child) {
+ margin-bottom: 30px;
+ }
+
+ .attachment {
+ &:not(:first-child) {
+ margin-top: 30px;
+ }
+ }
+ }
+ }
+
+ &__icon {
+ cursor: pointer;
+ height: 24px;
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ width: 24px;
+
+ svg {
+ filter: drop-shadow(0 1px 0 $white);
+
+ path {
+ fill: $attachment-delete-icon-color;
+ }
+ }
+
+ &s {
+ &:not(:last-child) {
+ margin-bottom: 30px;
+ }
+
+ .attachment {
+ &:not(:first-child) {
+ margin-top: 30px;
+ }
+ }
+ }
+ }
+
+ &__placeholder {
+ align-items: center;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ max-width: 100%;
+
+ svg {
+ height: 50%;
+ width: 50%;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss b/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss
deleted file mode 100644
index fc4777c9..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.breadcrumbs {
- font-size: 90%;
- margin-bottom: 30px;
-
- .home-icon {
- width: 12px;
- height: 12px;
- fill: var(--breadcrumb-icon);
- }
-
- .arrow-right {
- width: 8px;
- height: 8px;
- margin-left: 7px;
- margin-right: 7px;
- fill: var(--breadcrumb-text);
- }
-}
-
-.breadcrumb {
- &__item {
- color: var(--breadcrumb-link);
-
- &:hover {
- color: var(--breadcrumb-link-hover);
- }
-
- &--current {
- color: var(--breadcrumb-text);
- pointer-events: none;
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_buttons.scss b/app/assets/stylesheets/beyond_canvas/components/_buttons.scss
deleted file mode 100644
index b4f36d4d..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_buttons.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-%button {
- align-items: center;
- border-radius: var(--button-borderRadius);
- border-width: 0;
- cursor: pointer;
- display: inline-flex;
- font-weight: 700;
- justify-content: flex-end;
- line-height: 1;
- outline: none;
- padding: var(--button-horizontal-padding) 12px;
- transition: $main-transition;
- white-space: nowrap;
-}
-
-%button_disabled {
- border-color: var(--button-disabled-background);
- background-color: var(--button-disabled-background);
- pointer-events: none;
- color: var(--button-disabled-text);
- text-shadow: var(--button-disabled-textShadow);
- border-bottom-color: #aaaaaa;
-}
-
-@mixin button-border-bottom($border-bottom-color) {
- border-bottom: var(--button-borderBottom-width) solid var(#{$border-bottom-color});
-}
-
-@mixin button-solid($background, $background-hover, $color) {
- @include spinner($color);
-
- background-color: var(#{$background});
- color: var(#{$color});
-
- &:hover {
- background-color: var(#{$background-hover});
- }
-}
-
-@mixin button-transparent($background, $background-hover, $color) {
- @include spinner($color);
-
- background-color: var(#{$background});
- color: var(#{$color});
- padding: calc(var(--button-horizontal-padding) - var(--button-outline-border-width)) 12px var(--button-horizontal-padding);
- border: var(--button-outline-border-width) solid var(--button-outline-border-color);
-
- &:hover {
- background-color: var(#{$background-hover});
- }
-}
-
-@mixin spinner($background) {
- .spinner {
- display: none;
-
- > div {
- background-color: var(#{$background});
- }
- }
-}
-
-input[type=file][disabled] ~ .button__transparent--primary {
- @extend %button_disabled;
-}
-
-[class^='button__'] {
- &:disabled,
- &[disabled] {
- @extend %button_disabled;
- }
-}
-
-.button {
- &__solid {
- &--primary {
- @extend %button;
-
- @include button-solid(--button-primary-background, --button-primary-background-hover, --button-text);
- @include button-border-bottom(--button-primary-borderBottom-color);
- }
-
- &--secondary {
- @extend %button;
-
- @include button-solid(--button-default-background, --button-default-background-hover, --button-text);
- @include button-border-bottom(--button-default-borderBottom-color);
- }
-
- &--danger {
- @extend %button;
-
- @include button-solid(--button-danger-background, --button-danger-background-hover, --button-text);
- @include button-border-bottom(--button-danger-borderBottom-color);
- }
- }
-
- &__transparent {
- &--primary {
- @extend %button;
-
- @include button-transparent(--button-outline-background, --button-outline-background-hover, --button-outline-text);
- @include button-border-bottom(--button-primary-borderBottom-color);
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_cards.scss b/app/assets/stylesheets/beyond_canvas/components/_cards.scss
deleted file mode 100644
index be9729af..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_cards.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-%card {
- background: var(--card-background);
- border-radius: var(--card-borderRadius);
- box-shadow: var(--card-shadow);
-}
-
-%card_padding {
- @include padding(var(--card-padding));
-
- box-sizing: border-box;
-}
-
-.card {
- @extend %card;
-
- &:not(:last-child) {
- margin-bottom: 30px;
- }
-
- &--relative {
- position: relative;
- }
-
- &--padding {
- @extend %card_padding;
- }
-
- &__separator {
- @include margin(35px null);
-
- border-bottom: var(--card-divider-border);
- left: calc(-1 * var(--card-padding));
- position: relative;
- width: calc(100% + 2 * #{var(--card-padding)});
- }
-
- &__headline {
- color: var(--card-headline);
- font-size: 20px;
- margin-bottom: 20px;
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_collapse.scss b/app/assets/stylesheets/beyond_canvas/components/_collapse.scss
deleted file mode 100644
index 04b24fae..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_collapse.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.collapse {
-
- &:not(:last-child) {
- margin-bottom: 24px;
- }
-
- &__content {
- display: none;
- }
-
- &__button {
- color: var(--primary-color);
- font-weight: 700;
- cursor: pointer;
- display: block;
- line-height: 1;
- margin-bottom: 4px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- &__icon {
- @include size(10px);
-
- fill: var(--primary-color);
- margin-right: 2px;
-
- &--open {
- transform: rotate(90deg);
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_debug.scss b/app/assets/stylesheets/beyond_canvas/components/_debug.scss
deleted file mode 100644
index 25a4aad8..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_debug.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.debug_dump {
- margin: 50px auto 0;
- background-color: #dedede;
- max-width: 50%;
- width: 100%;
- border: 1px solid #666666;
- border-radius: 4px;
- padding: 20px;
- box-sizing: border-box;
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_flash.scss b/app/assets/stylesheets/beyond_canvas/components/_flash.scss
deleted file mode 100644
index f4b6291b..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_flash.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.flash {
- @include position(fixed, 70px null null null);
-
- background-color: var(--notification-background);
- border-radius: var(--notification-borderRadius);
- box-shadow: var(--notification-boxShadow);
- display: flex;
- overflow: hidden;
- transition: 0.7s linear;
- z-index: 999999;
-
- &--shown {
- // sass-lint:disable no-important
- right: 25px !important;
- // sass-lint:enable no-important
- transition: 0.4s linear;
- }
-
- &__icon {
- @include padding(11px 8px);
-
- display: flex;
-
- > svg {
- @include size(18px);
-
- fill: var(--notification-background);
- }
-
- &--success,
- &--notice {
- background-color: var(--notification-success);
- }
-
- &--info {
- background-color: var(--notification-info);
- }
-
- &--warning {
- background-color: var(--notification-warning);
- }
-
- &--error,
- &--alert {
- background-color: var(--notification-danger);
- }
- }
-
- &__message {
- @include padding(10px 15px);
-
- box-sizing: border-box;
- color: var(--notification-text);
- }
-
- &__close {
- @include padding(10px 15px);
-
- cursor: pointer;
-
- > svg {
- @include size(8px);
-
- fill: var(--notification-text);
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_forms.scss b/app/assets/stylesheets/beyond_canvas/components/_forms.scss
deleted file mode 100644
index c94d81e3..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_forms.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-%form__actions {
- overflow: hidden;
-}
-
-.form {
- &__row,
- &__actions {
- width: 100%;
-
- &:not(:last-of-type) {
- margin-bottom: 30px;
- }
- }
-
- &__actions {
- &--left {
- @extend %form__actions;
-
- > * {
- float: left;
-
- &:not(:first-child) {
- margin-left: 30px;
- }
- }
- }
-
- &--right {
- @extend %form__actions;
-
- > * {
- float: right;
-
- &:not(:first-child) {
- margin-right: 30px;
- }
- }
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_inputs.scss b/app/assets/stylesheets/beyond_canvas/components/_inputs.scss
deleted file mode 100644
index a001cd3f..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_inputs.scss
+++ /dev/null
@@ -1,296 +0,0 @@
-$controls: checkbox, radio;
-
-#{$all-text-inputs},
-select {
- background-color: var(--inputField-background);
- border: 1px solid var(--inputField-border);
- border-radius: var(--inputField-borderRadius);
- box-sizing: border-box;
- order: 2;
- outline: none;
- padding: 6px 8px;
- width: 100%;
-
- &:disabled {
- background-color: var(--inputField-background-disabled) !important;
- color: var(--inputField-text-disabled);
- opacity: 1;
- }
-}
-
-#{$all-text-inputs} {
- line-height: 1;
-}
-
-#{$all-text-inputs-focus},
-select:focus {
- border-color: var(--inputField-border-focus);
-}
-
-select {
- @include prefixer(appearance, none, ("webkit", "moz"));
-
- background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, $input-border-color, $input-border-color);
- background-position: calc(100% - 19px) calc(1em + -1px), calc(100% - 15px) calc(1em + -1px), calc(100% - 2.5em) 0.5em;
- background-size: 4px 4px, 4px 4px, 0 0;
- background-repeat: no-repeat;
-}
-
-textarea {
- min-height: 100px;
- resize: vertical;
-}
-
-#{$all-text-inputs},
-select {
- &.input__error {
- border-left: 2px solid var(--formGroup-validation-error);
-
- &:focus {
- border: 1px solid var(--inputField-border-focus);
- }
- }
-}
-
-.input {
- &__label {
- color: var(--formGroup-label);
- display: block;
- font-size: 13px;
- font-weight: bold;
-
- &--disabled {
- color: var(--check-disabled-text);
- }
- }
-
- &__hint {
- color: var(--inputField-hint-text);
- font-size: 13px;
- margin-top: 1px;
- }
-
- &__pre,
- &__post {
- background-color: var(--inputField-background-disabled);
- border: 1px solid var(--inputField-border);
- box-sizing: border-box;
- color: var(--inputField-text-disabled);
- line-height: 1;
- outline: none;
- padding: 6px 8px;
- }
-
- &__pre {
- border-bottom-left-radius: var(--inputField-borderRadius);
- border-top-left-radius: var(--inputField-borderRadius);
- border-right: 0;
- order: 1;
-
- ~ input,
- ~ select {
- @include border-left-radius(0);
- }
- }
-
- &__post {
- border-bottom-right-radius: var(--inputField-borderRadius);
- border-top-right-radius: var(--inputField-borderRadius);
- border-left: 0;
- order: 10;
-
- ~ input,
- ~ select {
- @include border-right-radius(0);
- }
- }
-
- @each $control in $controls {
-
- &__#{$control} {
-
- &__control {
- cursor: pointer;
- }
-
- &--unchecked {
- background: #fff;
-
- path {
- fill: var(--uncheck-color);
- }
- }
-
- &--checked {
- background: #fff;
-
- path {
- fill: var(--check-color);
- }
- }
-
- &:not(:checked) + .input__#{$control}__control .input__#{$control}--unchecked,
- &:checked + .input__#{$control}__control .input__#{$control}--checked {
- display: block !important;
- }
-
- &:disabled {
- ~ div .input__label,
- ~ div .input__hint {
- cursor: default;
- color: var(--check-disabled-text);
- }
-
- + .input__#{$control}__control .input__#{$control}--unchecked,
- + .input__#{$control}__control .input__#{$control}--checked {
- cursor: default;
-
- path {
- fill: var(--check-disabled-icon);
- }
- }
- }
-
- ~ div .input__label {
- padding-left: 7px;
- }
-
- ~ div .input__hint {
- padding-left: 7px;
- padding-top: 4px;
- }
-
- ~ div .input__label,
- ~ div .input__hint {
- line-height: 1;
- cursor: pointer;
- }
- }
- }
-
- &__toggle {
-
- &:checked + .input__toggle__control svg path:nth-of-type(1),
- &:not(:checked) + .input__toggle__control svg path:nth-of-type(2) {
- opacity: 1;
- }
-
- &:checked + .input__toggle__control svg path {
- transform: translateX(19.6px);
- }
-
- &:disabled {
- + .input__toggle__control {
- cursor: default;
-
- svg {
-
- rect {
- fill: var(--inputField-background-disabled);
- }
-
- path {
- fill: var(--check-disabled-icon);
- }
- }
- }
-
- ~ div .input__label,
- ~ div .input__hint {
- cursor: default;
- color: var(--check-disabled-text);
- }
- }
-
- &__control {
- cursor: pointer;
- width: 47px;
- height: 26px;
-
- svg {
- width: 47px;
- height: 26px;
-
- rect {
- stroke: var(--flipSwitch-border);
- fill: transparent;
- }
-
- path {
- transition: 0.3s;
- opacity: 0;
-
- &:nth-of-type(1) {
- fill: var(--flipSwitch-checked-background);
- }
-
- &:nth-of-type(2) {
- fill: var(--flipSwitch-unchecked-background);
- }
- }
- }
- }
-
- ~ div .input__label {
- color: var(--flipSwitch-label);
- }
-
- ~ div .input__hint {
- color: var(--flipSwitch-text);
- padding-top: 4px;
- }
-
- ~ div .input__label,
- ~ div .input__hint {
- padding-left: 10px;
- line-height: 1;
- cursor: pointer;
- }
- }
-
- &__file {
- display: flex;
- align-items: center;
-
- &__control {
- display: inline-block;
- }
-
- &__text {
- display: flex;
- margin-left: 20px;
- font-weight: 500;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 200px;
- }
-
- &__icon {
- color: $main-color;
- width: 14px;
- margin-right: 5px;
- }
- }
-}
-
-label.input__error {
- @include padding(5px 7px);
- @include position(absolute, calc(100% + 8px) null null 0);
-
- background-color: var(--formGroup-validation-error);
- border-radius: var(--formGroup-validation-borderRadius);
- color: var(--formGroup-validation-text);
- font-size: 13px;
- z-index: 1;
-
- &::before {
- @include position(absolute, null null 100% 8px);
- border-style: solid;
- height: 0;
- width: 0;
- border-color: transparent transparent var(--formGroup-validation-error);
- border-width: 0 6px 6px;
- content: '';
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_links.scss b/app/assets/stylesheets/beyond_canvas/components/_links.scss
deleted file mode 100644
index 1f51fff5..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_links.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-%link_disabled {
- @include color-darken($link-disabled-color, 10%);
-
- cursor: not-allowed;
- pointer-events: none;
-}
-
-%link {
- line-height: 1.2;
-}
-
-@mixin external($color) {
- background-image: url('data:image/svg+xml;utf8,\
- ');
-
- background-position-x: right;
- background-position-y: center;
- background-repeat: no-repeat;
- background-size: 12px;
- padding-right: 18px;
-
- @include recolor($color, 1);
-
- &:hover {
- @include recolor(darken($color, 10%), 1);
-
- transition: $main-transition;
- }
-}
-
-.link {
- &__icon--left,
- &__icon--right {
- @include size(14px);
- }
-
- &__icon--left {
- margin-right: 6px;
- }
-
- &__icon--right {
- margin-left: 6px;
- }
-
- &--primary {
- color: var(--primaryLink-color);
-
- @extend %link;
-
- &:hover {
- color: var(--primaryLink-hover-color);
- }
-
- &[target="_blank"] {
- @include external($link-primary-color)
- }
- }
-
- &--secondary {
- color: var(--defaultLink-color);
-
- @extend %link;
-
- &:hover {
- color: var(--defaultLink-hover-color);
- }
-
- &[target="_blank"] {
- @include external($link-secondary-color)
- }
- }
-
- &--danger {
- @include color-darken($link-danger-color, 10%);
-
- @extend %link;
-
- &[target="_blank"] {
- @include external($link-secondary-color)
- }
- }
-
- &--primary,
- &--secondary,
- &--danger {
- &:disabled,
- &[disabled] {
- @extend %link_disabled;
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_modals.scss b/app/assets/stylesheets/beyond_canvas/components/_modals.scss
index 3d299d4e..9c21b4cd 100644
--- a/app/assets/stylesheets/beyond_canvas/components/_modals.scss
+++ b/app/assets/stylesheets/beyond_canvas/components/_modals.scss
@@ -38,6 +38,20 @@
color: var(--notification-text);
}
+ &__body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-width: 100%;
+ max-height: 65vh;
+
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ }
+
&__close {
// SEE: https://newbedev.com/change-svg-fill-color-in-before-or-after-css
@include position(absolute, 20px 20px null null);
@@ -55,10 +69,6 @@
}
}
- &__body {
- @extend %scrollbox;
- }
-
&__footer {
margin-top: 35px;
}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_notices.scss b/app/assets/stylesheets/beyond_canvas/components/_notices.scss
deleted file mode 100644
index d30fbbf4..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_notices.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.notice {
- border-radius: var(--notification-borderRadius);
- border: 1px solid;
- box-sizing: border-box;
- display: flex;
-
- &--success {
- border-color: var(--notification-success);
-
- .notice__icon {
- background-color: var(--notification-success);
- }
- }
-
- &--info {
- border-color: var(--notification-info);
-
- .notice__icon {
- background-color: var(--notification-info);
- }
- }
-
- &--warning {
- border-color: var(--notification-warning);
-
- .notice__icon {
- background-color: var(--notification-warning);
- }
- }
-
- &--error {
- border-color: var(--notification-danger);
-
- .notice__icon {
- background-color: var(--notification-danger);
- }
- }
-
- &__icon {
- @include padding(10px 8px);
-
- display: flex;
-
- > svg {
- @include size(18px);
-
- fill: var(--notification-background);
- }
- }
-
- &__content {
- @include padding(8px 14px);
-
- color: var(--notification-text);
- display: block;
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss b/app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss
deleted file mode 100644
index ac2f20d0..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-%scrollbox {
- max-height: 65vh;
- overflow: auto;
- padding-right: 20px;
- width: 100%;
-
- -ms-overflow-style: none;
- scrollbar-width: none;
-
- background:
- /* Shadow covers */
- linear-gradient(white 30%, rgba(255,255,255,0)),
- linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-
- /* Shadows */
- radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
- radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
- background:
- /* Shadow covers */
- linear-gradient(white 30%, rgba(255,255,255,0)),
- linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-
- /* Shadows */
- radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
- radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
- background-repeat: no-repeat;
- background-color: white;
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-
- /* Opera doesn’t support this in the shorthand */
- background-attachment: local, local, scroll, scroll;
-}
-
-.scrollbox {
- @extend %scrollbox;
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_spinner.scss b/app/assets/stylesheets/beyond_canvas/components/_spinner.scss
deleted file mode 100644
index 97bbd8b6..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_spinner.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.spinner {
- display: flex;
- margin-right: 12px;
- width: 24px;
- text-align: center;
-
- > div {
- margin: 0 !important;
- width: 8px;
- height: 8px;
- border-radius: 100%;
- display: inline-block;
- -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
- animation: sk-bouncedelay 1.4s infinite ease-in-out both;
- }
-
- .bounce1 {
- -webkit-animation-delay: -0.32s;
- animation-delay: -0.32s;
- }
-
- .bounce2 {
- -webkit-animation-delay: -0.16s;
- animation-delay: -0.16s;
- }
-}
-
-@-webkit-keyframes sk-bouncedelay {
- 0%, 80%, 100% {
- -webkit-transform: scale(0);
- }
-
- 40% {
- -webkit-transform: scale(1);
- }
-}
-
-@keyframes sk-bouncedelay {
- 0%, 80%, 100% {
- -webkit-transform: scale(0);
- transform: scale(0);
- }
-
- 40% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_statuses.scss b/app/assets/stylesheets/beyond_canvas/components/_statuses.scss
deleted file mode 100644
index 6137c883..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_statuses.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.status {
- @include padding(4px 6px);
- font-size: 12px;
- border-radius: 3px;
- line-height: 1.2;
- font-weight: 500;
-
- &--good {
- background-color: var(--active-status-background);
- color: var(--active-status-text);
- }
-
- &--warning {
- background-color: var(--todo-status-background);
- color: var(--todo-status-text);
- }
-
- &--danger {
- background-color: var(--danger-status-background);
- color: var(--danger-status-text);
- }
-
- &--neutral {
- background-color: var(--outline-status-background);
- border: 1px solid var(--outline-status-border);
- color: var(--outline-status-text);
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_step_list.scss b/app/assets/stylesheets/beyond_canvas/components/_step_list.scss
deleted file mode 100644
index 5c1e0c51..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_step_list.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.step-list {
-
- &__container {
- background-color: var(--stepList-background);
- padding: 25px;
- }
-
- &__title {
- color: var(--stepList-headline);
- font-size: 20px;
- font-weight: bold;
- margin-bottom: 15px;
- margin-top: 0;
- }
-
- &__items {
- width: 100%;
- margin-left: -2px;
-
- tr:last-child td {
- padding-bottom: 0;
-
- &::after {
- height: 0;
- }
- }
-
- td {
- vertical-align: top;
- padding-bottom: 20px;
- position: relative;
- }
- }
-
- &__bubble-column {
- width: 35px;
- text-align: center;
-
- &::after {
- content: ' ';
- position: absolute;
- left: 10px;
- width: 2px;
- height: 100%;
- background-color: var(--stepList-bubble-line);
- }
- }
-
- &__bubble {
- width: 20px;
- height: 20px;
- border-radius: 10px;
- background-color: var(--stepList-bubble-background);
- color: var(--stepList-bubble-text);
- line-height: 19px;
- font-size: 11px;
- font-weight: bold;
- }
-
- &__headline {
- font-weight: bold;
- line-height: 1.2;
- margin-bottom: 5px;
- color: var(--stepList-headline);
- }
-
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_tables.scss b/app/assets/stylesheets/beyond_canvas/components/_tables.scss
deleted file mode 100644
index 7602cf92..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_tables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.table {
- border-collapse: collapse;
- table-layout: fixed;
- width: 100%;
-
- th, td {
- box-sizing: border-box;
- padding: 15px;
- text-align: left;
- }
-
- thead {
- tr {
- font-weight: 700;
-
- &:first-child {
- background-color: var(--table-header-background);
- }
-
- &:nth-child(2) {
- border-bottom: 2px solid var(--table-row-border);
- }
- }
- }
-
- tbody {
- tr {
- background-color: var(--table-row-background);
- border-bottom: var(--table-row-border);
-
- &:hover {
- background-color: var(--table-row-background-hover);
- }
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_texts.scss b/app/assets/stylesheets/beyond_canvas/components/_texts.scss
deleted file mode 100644
index a283b833..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_texts.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.text {
- &__align {
- &--left {
- text-align: left;
- }
-
- &--center {
- text-align: center;
- }
-
- &--right {
- text-align: right;
- }
- }
-}
diff --git a/app/assets/stylesheets/beyond_canvas/components/_titles.scss b/app/assets/stylesheets/beyond_canvas/components/_titles.scss
deleted file mode 100644
index a1735291..00000000
--- a/app/assets/stylesheets/beyond_canvas/components/_titles.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.title {
- margin-bottom: 25px;
- line-height: 1;
- font-weight: normal;
- font-size: 190%;
- color: var(--workspace-headline);
-}
diff --git a/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss b/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss
index 62a79e37..3f3157f4 100644
--- a/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss
+++ b/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss
@@ -19,24 +19,6 @@
--surfaceHover-color: #b3ecff;
/*
/* ---------------------------------------------------
- /* Card
- /* --------------------------------------------------- */
- --card-headline: #a3a3a3;
- --card-background: white;
- --card-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
- --card-divider-border: 1px solid #e6e6e6;
- --card-borderRadius: 3px;
- --card-padding: 40px;
- /*
- /* ---------------------------------------------------
- /* Breadcrumb
- /* --------------------------------------------------- */
- --breadcrumb-text: #787878;
- --breadcrumb-link: #787878;
- --breadcrumb-link-hover: #525252;
- --breadcrumb-icon: #787878;
- /*
- /* ---------------------------------------------------
/* Action bar
/* --------------------------------------------------- */
--workspace-toolbar-background: white;
@@ -44,18 +26,6 @@
--header-bar-height: 73px;
/*
/* ---------------------------------------------------
- /* Notification and Toast messages
- /* --------------------------------------------------- */
- --notification-background: white;
- --notification-text: gray;
- --notification-borderRadius: 4px;
- --notification-boxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
- --notification-success: #97c344;
- --notification-info: #999999;
- --notification-warning: #f3b547;
- --notification-danger: #da3c3c;
- /*
- /* ---------------------------------------------------
/* Modal
/* --------------------------------------------------- */
--modal-overlay-background: rgba(0, 0, 0, 0.75);
@@ -66,21 +36,6 @@
--modal-container-padding: 40px;
/*
/* ---------------------------------------------------
- /* Empty states
- /* --------------------------------------------------- */
- --emptyState-surface: #e3e3e3;
- --emptyState-bubbles: #dedede;
- --emptyState-outline: #575757;
- --emptyState-headline: #676767;
- --emptyState-help-text: gray;
- /*
- /* ---------------------------------------------------
- /* Loading spinner
- /* --------------------------------------------------- */
- --spinner-border: #c0c0c0;
- --spinner-border-highlighting: #676767;
- /*
- /* ---------------------------------------------------
/* States
/* --------------------------------------------------- */
--danger-color: #da3c3c;
@@ -89,54 +44,6 @@
--disabled-color: #d0d0d0;
--default-color: #999999;
/*
- /* ---------------------------------------------------
- /* Status bubbles
- /* --------------------------------------------------- */
- --todo-status-background: #f9dca7;
- --todo-status-text: #af740b;
- --active-status-background: #cde2a5;
- --active-status-text: #4e6721;
- --danger-status-background: #eeb3a7;
- --danger-status-text: #c72626;
- --outline-status-background: transparent;
- --outline-status-border: #b3b3b3;
- --outline-status-text: #808080;
- /*
- /* ---------------------------------------------------
- /* Link
- /* --------------------------------------------------- */
- --primaryLink-color: DeepSkyBlue;
- --primaryLink-hover-color: #0099cc;
- --defaultLink-color: #787878;
- --defaultLink-hover-color: #5e5e5e;
- /*
- /* ---------------------------------------------------
- /* Buttons
- /* --------------------------------------------------- */
- --button-text: white;
- --button-borderRadius: 4px;
- --button-borderBottom-width: 2px;
- --button-horizontal-padding: calc(8px - 2px / 2);
- --button-default-background: #999999;
- --button-default-background-hover: #7f7f7f;
- --button-default-borderBottom-color: #7f7f7f;
- --button-primary-background: Orange;
- --button-primary-background-hover: #cc8400;
- --button-primary-borderBottom-color: #cc8400;
- --button-danger-background: #da3c3c;
- --button-danger-background-hover: #ae3535;
- --button-danger-borderBottom-color: #ae3535;
- --button-disabled-background: #d0d0d0;
- --button-disabled-text: #909090;
- --button-disabled-textShadow: 1px 1px 0 #ffffff;
- --button-outline-border-color: Orange;
- --button-outline-border-width: 1px;
- --button-outline-background: transparent;
- --button-outline-background-hover: #ffedcc;
- --button-outline-text: #eb9800;
- --button-link-default-text: #787878;
- --button-link-primary-text: DeepSkyBlue;
- /*
/* ---------------------------------------------------
/* RichTextEditor
/* --------------------------------------------------- */
@@ -153,18 +60,6 @@
--textEditor-button-icon-disabled: #b3b3b3;
/*
/* ---------------------------------------------------
- /* Table
- /* --------------------------------------------------- */
- --table-row-border: 1px solid #e6e6e6;
- --table-row-background: white;
- --table-row-background-hover: #b3ecff;
- --table-header-background: #ebebeb;
- --table-header-link: #3e3e3e;
- --table-header-link-hover: #252525;
- --table-header-sort-icon-default: #b3b3b3;
- --table-header-sort-icon: currentColor;
- /*
- /* ---------------------------------------------------
/* Media queries
/* --------------------------------------------------- */
--screen-xs-max: 47.9375em;
@@ -177,38 +72,6 @@
--screen-xl: 112.5em;
/*
/* ---------------------------------------------------
- /* Form elements
- /* --------------------------------------------------- */
- --formGroup-label: gray;
- --formGroup-validation-error: #da3c3c;
- --formGroup-validation-text: white;
- --formGroup-validation-borderRadius: 3px;
- --inputField-borderRadius: 3px;
- --inputField-border: #d2d2d2;
- --inputField-border-focus: Orange;
- --inputField-text: #3e3e3e;
- --inputField-background: white;
- --inputField-background-focus: white;
- --inputField-background-disabled: #f5f5f5;
- --inputField-text-disabled: #9a9a9a;
- --inputField-placeholder-text: #a4a4a4;
- --inputField-hint-text: gray;
- --smartInputField-suggestion-active: #b3ecff;
- --smartInputField-value-background: #d9d9d9;
- --smartInputField-value-text: #666666;
- --smartInputField-value-icon: currentColor;
- --smartInputField-value-icon-hover: #4d4d4d;
- --smartInputField-value-borderRadius: 3px;
- /*
- /* ---------------------------------------------------
- /* Checkboxes and Radio buttons
- /* --------------------------------------------------- */
- --check-color: #97c344;
- --uncheck-color: #b3b3b3;
- --check-disabled-text: #c5c5c5;
- --check-disabled-icon: #d9d9d9;
- /*
- /* ---------------------------------------------------
/* FlipSwitch
/* --------------------------------------------------- */
--flipSwitch-unchecked-background: #b3b3b3;
@@ -218,15 +81,6 @@
--flipSwitch-text: silver;
/*
/* ---------------------------------------------------
- /* Step list
- /* --------------------------------------------------- */
- --stepList-background: #f0f0f0;
- --stepList-headline: #747474;
- --stepList-bubble-line: #808080;
- --stepList-bubble-background: #808080;
- --stepList-bubble-text: white;
- /*
- /* ---------------------------------------------------
/* Reseller logo
/* --------------------------------------------------- */
--logo-width: 238px;
diff --git a/app/assets/stylesheets/beyond_canvas/settings/_constant_variables.scss b/app/assets/stylesheets/beyond_canvas/settings/_constant_variables.scss
index c5b8705d..fc998b5c 100644
--- a/app/assets/stylesheets/beyond_canvas/settings/_constant_variables.scss
+++ b/app/assets/stylesheets/beyond_canvas/settings/_constant_variables.scss
@@ -37,96 +37,12 @@ $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxyge
$main-line-height: 1.5;
$main-font-size: 14px;
-// ************************************************************
-// Headlines
-// ************************************************************
-
-$headline-line-height: 1;
-
-// ************************************************************
-// Links
-// ************************************************************
-
-$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
-// ************************************************************
-
-$button-primary-background: $palette-primary !default;
-$button-primary-color: $white !default;
-
-$button-secondary-background: $palette-cancel !default;
-$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;
-$button-padding: 6px 12px 7px;
-
-// ************************************************************
-// Cards
-// ************************************************************
-
-$card-padding: 40px;
-$card-margin: 30px;
-$card-separator-spacing: 40px;
-
// ************************************************************
// Containers
// ************************************************************
$container-spacing: 30px;
-// ************************************************************
-// Inputs
-// ************************************************************
-
-$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
-// ************************************************************
-
-$checkbox-checked-color: #97C344 !default; // This value MUST be HEX
-$checkbox-checked-background: #ffffff !default; // This value MUST be HEX
-$checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
-$checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
-
-// ************************************************************
-// Toggles
-// ************************************************************
-
-$toggle-border-color: #cbc9ad !default;
-$toggle-disabled-background: #f5f4ef !default;
-$toggle-checked-background: #97c344 !default; // This value MUST be HEX
-$toggle-checked-color: #ffffff !default; // This value MUST be HEX
-$toggle-unchecked-background: #c2bf9d !default; // This value MUST be HEX
-$toggle-unchecked-color: #ffffff !default; // This value MUST be HEX
-
-// ************************************************************
-// Radiobuttons
-// ************************************************************
-
-$radio-checked-color: #97C344 !default; // This value MUST be HEX
-$radio-checked-background: #ffffff !default; // This value MUST be HEX
-$radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
-$radio-unchecked-background: #ffffff !default; // This value MUST be HEX
-
// ************************************************************
// Hints
// ************************************************************
@@ -147,20 +63,6 @@ $logo-margin-bottom-public: 34px;
$comment-background: rgb(246, 246, 243) !default;
$comment-color: rgb(170, 169, 156) !default;
-// ************************************************************
-// Breadcrums
-// ************************************************************
-
-$breadcrum-color: rgb(112, 110, 77) !default;
-$breadcrum-color-hover: rgb(67, 65, 46) !default;
-$breadcrum-color-current: rgb(112, 110, 77) !default;
-
-// ************************************************************
-// Titles
-// ************************************************************
-
-$title-color: rgb(122, 118, 76) !default;
-
// ************************************************************
// Menu
// ************************************************************
@@ -226,8 +128,10 @@ $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
-// ************************************************************
+//************************************************************
+// Attachments
+//************************************************************
-$collapsible-color: $palette-primary !default;
+$attachment-border: 1px solid #d9d8c3;
+$attachment-delete-icon-color: #706e4d;
+$attachment-delete-icon-hover-color: #525038;
diff --git a/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss b/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss
index c5b8705d..6e0977a3 100644
--- a/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss
+++ b/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss
@@ -37,96 +37,12 @@ $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxyge
$main-line-height: 1.5;
$main-font-size: 14px;
-// ************************************************************
-// Headlines
-// ************************************************************
-
-$headline-line-height: 1;
-
-// ************************************************************
-// Links
-// ************************************************************
-
-$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
-// ************************************************************
-
-$button-primary-background: $palette-primary !default;
-$button-primary-color: $white !default;
-
-$button-secondary-background: $palette-cancel !default;
-$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;
-$button-padding: 6px 12px 7px;
-
-// ************************************************************
-// Cards
-// ************************************************************
-
-$card-padding: 40px;
-$card-margin: 30px;
-$card-separator-spacing: 40px;
-
// ************************************************************
// Containers
// ************************************************************
$container-spacing: 30px;
-// ************************************************************
-// Inputs
-// ************************************************************
-
-$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
-// ************************************************************
-
-$checkbox-checked-color: #97C344 !default; // This value MUST be HEX
-$checkbox-checked-background: #ffffff !default; // This value MUST be HEX
-$checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
-$checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
-
-// ************************************************************
-// Toggles
-// ************************************************************
-
-$toggle-border-color: #cbc9ad !default;
-$toggle-disabled-background: #f5f4ef !default;
-$toggle-checked-background: #97c344 !default; // This value MUST be HEX
-$toggle-checked-color: #ffffff !default; // This value MUST be HEX
-$toggle-unchecked-background: #c2bf9d !default; // This value MUST be HEX
-$toggle-unchecked-color: #ffffff !default; // This value MUST be HEX
-
-// ************************************************************
-// Radiobuttons
-// ************************************************************
-
-$radio-checked-color: #97C344 !default; // This value MUST be HEX
-$radio-checked-background: #ffffff !default; // This value MUST be HEX
-$radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
-$radio-unchecked-background: #ffffff !default; // This value MUST be HEX
-
// ************************************************************
// Hints
// ************************************************************
@@ -147,20 +63,6 @@ $logo-margin-bottom-public: 34px;
$comment-background: rgb(246, 246, 243) !default;
$comment-color: rgb(170, 169, 156) !default;
-// ************************************************************
-// Breadcrums
-// ************************************************************
-
-$breadcrum-color: rgb(112, 110, 77) !default;
-$breadcrum-color-hover: rgb(67, 65, 46) !default;
-$breadcrum-color-current: rgb(112, 110, 77) !default;
-
-// ************************************************************
-// Titles
-// ************************************************************
-
-$title-color: rgb(122, 118, 76) !default;
-
// ************************************************************
// Menu
// ************************************************************
@@ -225,9 +127,3 @@ $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;
diff --git a/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss b/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss
index 221735c5..21ad93f7 100644
--- a/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss
+++ b/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss
@@ -31,30 +31,3 @@
background-color: lighten($color, $percent);
transition: $main-transition;
}
-
-// SEE: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/62880368#62880368
-@mixin recolor($color: #000, $opacity: 1) {
- $r: red($color) / 255;
- $g: green($color) / 255;
- $b: blue($color) / 255;
- $a: $opacity;
-
- // grayscale fallback if SVG from data url is not supported
- $lightness: lightness($color);
- filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
-
- // color filter
- $svg-filter-id: "recolor";
- filter: url('data:image/svg+xml;utf8,\
- \
- ##{$svg-filter-id}');
-}
diff --git a/app/controllers/beyond_canvas/application_controller.rb b/app/controllers/beyond_canvas/application_controller.rb
index 1ac0203a..17bdd62c 100644
--- a/app/controllers/beyond_canvas/application_controller.rb
+++ b/app/controllers/beyond_canvas/application_controller.rb
@@ -6,7 +6,6 @@ class ApplicationController < ActionController::Base # :nodoc:
include ::BeyondCanvas::StatusCodes
include ::BeyondCanvas::AuthenticationsHelper
- include ::BeyondCanvas::DebugHelper
include ::BeyondCanvas::ControllerHelper
end
end
diff --git a/app/controllers/beyond_canvas/authentications_controller.rb b/app/controllers/beyond_canvas/authentications_controller.rb
index bef3e9b5..40c8a3d7 100644
--- a/app/controllers/beyond_canvas/authentications_controller.rb
+++ b/app/controllers/beyond_canvas/authentications_controller.rb
@@ -9,6 +9,8 @@ class AuthenticationsController < ApplicationController # :nodoc:
include ::BeyondCanvas::Authentication
include ::BeyondCanvas::CustomStyles
+ skip_before_action :check_custom_styles!
+
before_action :validate_app_installation_request!,
only: :new,
unless: -> { Rails.env.development? && BeyondCanvas.configuration.client_credentials }
@@ -61,6 +63,8 @@ def preinstall
@shop = Shop.create_or_find_by(beyond_api_url: params[:api_url])
@shop.http_host = request.env['HTTP_HOST']
@shop.authenticate(params[:code])
+ @shop.valid?
+ @shop.save
@shop.subscribe_to_beyond_webhooks
redirect_to after_preinstallation_path
@@ -72,8 +76,10 @@ def open_app(shop)
reset_session
log_in shop
+ set_iframe_ancestor_url
+
cookies.delete(:custom_styles_url)
- set_custom_styles_url shop if BeyondCanvas.configuration.cockpit_app
+ set_custom_styles_url shop if BeyondCanvas.configuration.custom_styles?
redirect_to after_sign_in_path
end
@@ -81,5 +87,9 @@ def open_app(shop)
def clear_locale_cookie
cookies.delete :locale if BeyondCanvas.configuration.cockpit_app
end
+
+ def set_iframe_ancestor_url
+ session[:iframe_ancestor_url] = request.referer
+ end
end
end
diff --git a/app/controllers/concerns/beyond_canvas/custom_styles.rb b/app/controllers/concerns/beyond_canvas/custom_styles.rb
index 40ce9bdc..386c0702 100644
--- a/app/controllers/concerns/beyond_canvas/custom_styles.rb
+++ b/app/controllers/concerns/beyond_canvas/custom_styles.rb
@@ -5,7 +5,7 @@ module CustomStyles
extend ActiveSupport::Concern
included do
- before_action :check_custom_styles!, if: -> { BeyondCanvas.configuration.cockpit_app } # rubocop:disable Rails/LexicallyScopedActionFilter
+ before_action :check_custom_styles!
end
private
@@ -15,6 +15,8 @@ module CustomStyles
# styles url and stores it on `custom_styles_url` cookie.
#
def check_custom_styles!
+ cookies.delete(:custom_styles_url) and return unless BeyondCanvas.configuration.custom_styles?
+
return if valid_custom_styles_stylesheet?(cookies[:custom_styles_url])
set_custom_styles_url
@@ -44,7 +46,11 @@ def set_custom_styles_url(shop = nil)
return if shop.blank?
+ shop.refresh_token_if_needed
+
reseller = shop.to_session.shop.current[:reseller_name]
+ custom_styles_url = shop.url("cockpit/assets/reseller-styles/#{reseller}-variables.css")
+ reseller = 'base' unless existing_url?(custom_styles_url)
cookies[:custom_styles_url] = {
value: shop.url("cockpit/assets/reseller-styles/#{reseller}-variables.css")
diff --git a/app/controllers/concerns/beyond_canvas/locale_management.rb b/app/controllers/concerns/beyond_canvas/locale_management.rb
index 40972129..90d9c295 100644
--- a/app/controllers/concerns/beyond_canvas/locale_management.rb
+++ b/app/controllers/concerns/beyond_canvas/locale_management.rb
@@ -22,8 +22,6 @@ def switch_locale(&action)
end
I18n.with_locale(cookies[:locale], &action)
-
- logger.debug "[BeyondCanvas] Locale set to: #{cookies[:locale]}".yellow if debug_mode?
end
#
diff --git a/app/controllers/concerns/beyond_canvas/request_validation.rb b/app/controllers/concerns/beyond_canvas/request_validation.rb
index cc7cfa25..ee8b631d 100644
--- a/app/controllers/concerns/beyond_canvas/request_validation.rb
+++ b/app/controllers/concerns/beyond_canvas/request_validation.rb
@@ -29,9 +29,11 @@ def app_installation_data
end
def valid_signature?(signature, data, secret)
+ signature = CGI.unescape(signature) unless base64?(signature)
digest = OpenSSL::Digest.new('SHA1')
hmac = OpenSSL::HMAC.digest(digest, secret, data)
- URI.decode(signature) == Base64.encode64(hmac).chop
+
+ signature == Base64.encode64(hmac).chop
end
def signature_params
@@ -39,5 +41,9 @@ def signature_params
data << ":#{request.body.read}" if request.body.read.present?
data
end
+
+ def base64?(value)
+ value.is_a?(String) && Base64.strict_encode64(Base64.decode64(value)) == value
+ end
end
end
diff --git a/app/form_builders/beyond_canvas/form_builder.rb b/app/form_builders/beyond_canvas/form_builder.rb
deleted file mode 100644
index b70de373..00000000
--- a/app/form_builders/beyond_canvas/form_builder.rb
+++ /dev/null
@@ -1,124 +0,0 @@
-# frozen_string_literal: true
-
-module BeyondCanvas
- class FormBuilder < ActionView::Helpers::FormBuilder # :nodoc:
- %i[email_field text_field number_field password_field text_area].each do |method|
- define_method method do |attribute, args = {}|
- field_wrapper(attribute, args) do
- super(attribute, args)
- end
- end
- end
-
- def select(attribute, choices, options = {}, args = {})
- field_wrapper(attribute, args) do
- super(attribute, choices, options, args)
- end
- end
-
- def check_box(attribute, args = {}, checked_value = '1', unchecked_value = '0')
- filed_identifyer = filed_identifyer(attribute)
-
- inline_wrapper(attribute, args, filed_identifyer) do
- args.merge!(id: filed_identifyer)
- .merge!(hidden: true)
- .merge!(class: 'input__checkbox')
-
- super(attribute, args, checked_value, unchecked_value) +
- @template.content_tag(:label, class: 'input__checkbox__control', for: filed_identifyer) do
- @template.inline_svg_tag('icons/checkbox_checked.svg', style: 'display: none;', class: 'input__checkbox--checked') +
- @template.inline_svg_tag('icons/checkbox_unchecked.svg', style: 'display: none;', class: 'input__checkbox--unchecked')
- end
- end
- end
-
- def radio_button(attribute, value, args = {})
- filed_identifyer = filed_identifyer(attribute)
-
- inline_wrapper(attribute, args, filed_identifyer) do
- args.merge!(id: filed_identifyer)
- .merge!(hidden: true)
- .merge!(class: 'input__radio')
-
- super(attribute, value, args) +
- @template.content_tag(:label, class: 'input__radio__control', for: filed_identifyer) do
- @template.inline_svg_tag('icons/radiobutton_checked.svg', style: 'display: none;', class: 'input__radio--checked') +
- @template.inline_svg_tag('icons/radiobutton_unchecked.svg', style: 'display: none;', class: 'input__radio--unchecked')
- end
- end
- end
-
- def file_field(attribute, args = {})
- field_wrapper(attribute, args) do
- filed_identifyer = filed_identifyer(attribute)
-
- args.merge!(id: filed_identifyer)
- .merge!(style: 'visibility: hidden; position: absolute;')
-
- custom_attributes = { data: { multiple_selection_text: '{count} files selected' } }
- args = custom_attributes.merge!(args)
-
- @template.content_tag(:div, class: 'input__file') do
- super(attribute, args) +
- @template.content_tag(:label,
- for: filed_identifyer,
- class: 'input__file__control button__transparent--primary') do
- args[:data][:button_text] || 'Choose file'
- end +
- @template.content_tag(:span,
- args[:data][:no_file_text] || 'No file chosen',
- class: "input__file__text #{filed_identifyer}")
- end
- end
- end
-
- private
-
- def field_wrapper(attribute, args, &block)
- label = args.delete(:label)&.html_safe
- hint = args.delete(:hint)&.html_safe
- pre = args.delete(:pre)
- post = args.delete(:post)
-
- errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
-
- @template.content_tag(:div, class: 'form__row') do
- [
- (@template.content_tag(:label, label, class: 'input__label') if label.present?),
- (@template.content_tag(:div, class: 'relative', style: "#{'display: flex;' if pre || post}") do
- [
- (@template.content_tag(:span, pre, class: 'input__pre') if pre.present?),
- (@template.content_tag(:span, post, class: 'input__post') if post.present?),
- block.call,
- (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
- ].compact.inject(:+)
- end),
- (@template.content_tag(:div, hint, class: 'input__hint') if hint.present?)
- ].compact.inject(:+)
- end
- end
-
- def inline_wrapper(attribute, args, filed_identifyer, &block)
- label = args.delete(:label)&.html_safe
- hint = args.delete(:hint)&.html_safe
- errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
-
- @template.content_tag(:div, class: 'form__row') do
- @template.content_tag(:div, class: 'relative', style: 'display: flex; align-items: center;') do
- block.call +
- (@template.content_tag(:div) do
- [
- (@template.content_tag(:label, label, class: "input__label", for: filed_identifyer) if label.present?),
- (@template.content_tag(:label, hint, class: 'input__hint', for: filed_identifyer) if hint.present?)
- ].compact.inject(:+)
- end if label.present? || hint.present?) +
- (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
- end
- end
- end
-
- def filed_identifyer(attribute)
- "#{attribute}_#{DateTime.now.strftime('%Q') + rand(10_000).to_s}"
- end
- end
-end
diff --git a/app/helpers/beyond_canvas/application_helper.rb b/app/helpers/beyond_canvas/application_helper.rb
index 9f8957df..ed2d311a 100644
--- a/app/helpers/beyond_canvas/application_helper.rb
+++ b/app/helpers/beyond_canvas/application_helper.rb
@@ -5,27 +5,7 @@ module ApplicationHelper # :nodoc:
def full_title(page_title = '')
base_title = BeyondCanvas.configuration.site_title
- page_title.empty? ? base_title : page_title + ' | ' + base_title
- end
-
- def link_to_with_icon(name = nil, options = nil, fa_class = nil, html_options = nil)
- options ||= {}
-
- html_options = convert_options_to_data_attributes(options, html_options)
-
- url = url_for(options)
- html_options['href'] ||= url
-
- content_tag('a', name || url, html_options) do
- (fa_class.nil? ? '' : content_tag('i', nil, class: ['link__icon ' + fa_class])) +
- name
- end
- end
-
- %i[success info warning error].each do |method|
- define_method :"notice_#{method}" do |name = nil, html_options = nil, &block|
- notice_render(method, name, html_options, &block)
- end
+ page_title.empty? ? base_title : "#{page_title} | #{base_title}"
end
def logo_image_tag(logo_path, options = {})
@@ -37,81 +17,5 @@ def logo_image_tag(logo_path, options = {})
image_tag logo_path, html_options
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', title: name, 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
-
- def step_list(title, steps = [])
- content_tag('div', class: 'step-list__container') do
- content_tag('h4', title, class: 'step-list__title') +
- content_tag('table', class: 'step-list__items') do
- content_tag('tbody') do
- steps.each_with_index.collect do |step, index|
- content_tag('tr') do
- content_tag('td', class: 'step-list__bubble-column') do
- content_tag('div', index + 1, class: 'step-list__bubble')
- end +
- content_tag('td') do
- content_tag('strong', step.dig(:headline)&.html_safe, class: 'step-list__headline') +
- content_tag('p', step.dig(:description)&.html_safe, class: 'step-list__description')
- end
- end
- end.join.html_safe
- end
- 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'
- inline_svg_tag 'icons/flash_checkbox.svg'
- when 'info'
- inline_svg_tag 'icons/flash_info.svg'
- when 'warning'
- inline_svg_tag 'icons/flash_warning.svg'
- when 'error', 'alert'
- inline_svg_tag 'icons/flash_error.svg'
- else
- inline_svg_tag 'icons/flash_info.svg'
- end
- end
-
- def notice_render(method, name = nil, html_options = nil, &block)
- if block_given?
- html_options = name
- name = block
- end
-
- html_options ||= {}
-
- html_options.merge!(class: "notice notice--#{method}") { |_key, old_val, new_val| [new_val, old_val].join(' ') }
-
- content_tag('div', html_options) do
- content_tag('div', class: 'notice__icon') do
- get_flash_icon(method.to_s)
- end + content_tag('span', block_given? ? capture(&name) : name, class: 'notice__content')
- end
- end
end
end
diff --git a/app/helpers/beyond_canvas/debug_helper.rb b/app/helpers/beyond_canvas/debug_helper.rb
deleted file mode 100644
index 3b079060..00000000
--- a/app/helpers/beyond_canvas/debug_helper.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-
-module BeyondCanvas
- module DebugHelper # :nodoc:
- def debug_mode?
- Rails.env.development? && BeyondCanvas.configuration.debug_mode
- end
- end
-end
diff --git a/app/helpers/beyond_canvas/form_tag_helper.rb b/app/helpers/beyond_canvas/form_tag_helper.rb
index 5fade095..26cc69fa 100644
--- a/app/helpers/beyond_canvas/form_tag_helper.rb
+++ b/app/helpers/beyond_canvas/form_tag_helper.rb
@@ -2,127 +2,80 @@
module BeyondCanvas
module FormTagHelper
- %i[email_field_tag text_field_tag password_field_tag text_area_tag].each do |method|
- define_method method do |name, value = nil, options = {}|
- field_wrapper(name, options) do
- super(name, value, options)
- end
- end
- end
-
- def select_tag(name, option_tags = nil, options = {})
+ def text_area_tag(name, content = nil, options = {})
field_wrapper(name, options) do
- super(name, option_tags, options)
+ super(name, content, options)
end
end
- def check_box_tag(name, value = 1, checked = false, options = {})
- filed_identifyer = filed_identifyer(name)
-
- inline_wrapper(name, options, filed_identifyer) do
-
- options.merge!(id: filed_identifyer)
- .merge!(hidden: true)
- .merge!(class: 'input__checkbox')
-
- super(name, value, checked, options) +
- content_tag(:label, class: 'input__checkbox__control', for: filed_identifyer) do
- inline_svg_tag('icons/checkbox_checked.svg', style: 'display: none;', class: 'input__checkbox--checked') +
- inline_svg_tag('icons/checkbox_unchecked.svg', style: 'display: none;', class: 'input__checkbox--unchecked')
- end
- end
+ def hidden_field_tag(name, value = nil, options = {})
+ tag :input,
+ { type: :text, name: name, id: sanitize_to_id(name),
+ value: value }.update(options.stringify_keys.merge(type: :hidden))
end
- def radio_button_tag(name, value, checked = false, options = {})
- filed_identifyer = filed_identifyer(name)
-
- inline_wrapper(name, options, filed_identifyer) do
+ def image_attachment_tag(blob, delete_url = nil, args = {})
+ if blob
+ figure_options = {
+ class: ['attachment', "attachment--#{blob.representable? ? 'preview' : 'file'}",
+ "attachment--#{blob.filename.extension}"]
+ }
- options.merge!(id: filed_identifyer)
- .merge!(hidden: true)
- .merge!(class: 'input__radio')
-
- super(name, value, checked, options) +
- content_tag(:label, class: 'input__radio__control', for: filed_identifyer) do
- inline_svg_tag('icons/radiobutton_checked.svg', style: 'display: none;', class: 'input__radio--checked') +
- inline_svg_tag('icons/radiobutton_unchecked.svg', style: 'display: none;', class: 'input__radio--unchecked')
+ tag.figure(figure_options) do
+ if blob.representable?
+ [
+ image_tag(args.present? && args[:transformations].present? ? blob.representation(args[:transformations]) : blob),
+ (if delete_url.present?
+ link_to(inline_svg_tag('icons/delete.svg'), delete_url,
+ { class: 'attachment__delete-icon', method: :delete }.merge(args[:link_html_options].to_h))
+ end)
+ ].compact.inject(:+)
end
+ end
end
end
- def toggle_tag(name, value = 1, checked = false, options = {})
- filed_identifyer = filed_identifyer(name)
-
- inline_wrapper(name, options, filed_identifyer) do
-
- options.merge!(id: filed_identifyer)
- .merge!(hidden: true)
- .merge!(class: 'input__toggle')
+ def image_placeholder_tag(options)
+ placeholder_with = 300
+ placeholder_height = 300
+ placeholder_with, placeholder_height = options[:size].split('x') if options[:size].present?
- html_options = { type: 'checkbox', name: name, value: value }.update(options.stringify_keys)
- html_options['checked'] = 'checked' if checked
+ figure_options = {
+ class: "attachment attachment__placeholder #{options.fetch(:class, '')}",
+ style: "#{options.fetch(:style, '')};width:#{placeholder_with}px;height:#{placeholder_height}px;",
+ data: options[:data]
+ }
- tag(:input, html_options) +
- content_tag(:label, class: 'input__toggle__control', for: filed_identifyer) do
- inline_svg_tag('icons/toggle.svg')
- end
- end
- end
-
- def hidden_field_tag(name, value = nil, options = {})
- tag :input, { type: :text, name: name, id: sanitize_to_id(name), value: value }.update(options.stringify_keys.merge(type: :hidden))
- end
-
- def number_field_tag(name, value = nil, options = {})
- field_wrapper(name, options) do
- options = options.stringify_keys
- if (range = options.delete('in') || options.delete('within'))
- options.update(min: range.min, max: range.max)
- end
- tag :input, { type: 'number', name: name, id: sanitize_to_id(name), value: value }.update(options.stringify_keys)
+ tag.figure(figure_options) do
+ [
+ inline_svg_tag('icons/placeholder.svg', options.fetch(:image_html_options, {}))
+ ].compact.inject(:+)
end
end
private
- def field_wrapper(attribute, args, &block)
- label = args.delete(:label)&.html_safe
- hint = args.delete(:hint)&.html_safe
+ def field_wrapper(_attribute, args, &block)
+ label = sanitize(args.delete(:label))
+ hint = sanitize(args.delete(:hint))
pre = args.delete(:pre)
post = args.delete(:post)
- content_tag(:div, class: 'form__row') do
+ tag.div(class: 'form__row') do
[
- (content_tag(:label, label, class: 'input__label') if label.present?),
- (content_tag(:div, class: 'relative', style: "#{'display: flex;' if pre || post}") do
+ (tag.label(label, class: 'input__label') if label.present?),
+ (tag.div(class: 'relative', style: ('display: flex;' if pre || post).to_s) do
[
- (content_tag(:span, pre, class: 'input__pre') if pre.present?),
- (content_tag(:span, post, class: 'input__post') if post.present?),
+ (tag.span(pre, class: 'input__pre') if pre.present?),
+ (tag.span(post, class: 'input__post') if post.present?),
block.call
].compact.inject(:+)
end),
- (content_tag(:div, hint, class: 'input__hint') if hint.present?)
+ (tag.div(hint, class: 'input__hint') if hint.present?)
].compact.inject(:+)
end
end
- def inline_wrapper(attribute, args, filed_identifyer, &block)
- label = args.delete(:label)&.html_safe
- hint = args.delete(:hint)&.html_safe
-
- content_tag(:div, class: 'form__row') do
- content_tag(:div, class: 'relative', style: 'display: flex; align-items: center;') do
- block.call +
- (content_tag(:div) do
- [
- (content_tag(:label, label, class: "input__label", for: filed_identifyer) if label.present?),
- (content_tag(:label, hint, class: 'input__hint', for: filed_identifyer) if hint.present?)
- ].compact.inject(:+)
- end if label.present? || hint.present?)
- end
- end
- end
-
def filed_identifyer(attribute)
"#{attribute.to_s.delete('[]')}_#{DateTime.now.strftime('%Q') + rand(10_000).to_s}"
end
diff --git a/app/helpers/beyond_canvas/locale_switch_helper.rb b/app/helpers/beyond_canvas/locale_switch_helper.rb
index 9aa73bd9..d83b1def 100644
--- a/app/helpers/beyond_canvas/locale_switch_helper.rb
+++ b/app/helpers/beyond_canvas/locale_switch_helper.rb
@@ -10,7 +10,6 @@ def translate_locale(locale)
if I18n.exists?("locales.#{locale}")
I18n.t("locales.#{locale}")
else
- logger.debug "[BeyondCanvas] Missing translation: #{I18n.locale}.locales.#{locale}".yellow if debug_mode?
locale
end
end
diff --git a/app/helpers/beyond_canvas/statuses_helper.rb b/app/helpers/beyond_canvas/statuses_helper.rb
deleted file mode 100644
index 4427af75..00000000
--- a/app/helpers/beyond_canvas/statuses_helper.rb
+++ /dev/null
@@ -1,26 +0,0 @@
-# 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
diff --git a/app/javascript/beyond_canvas/base.js b/app/javascript/beyond_canvas/base.js
index fa3ffcdd..95862c6c 100644
--- a/app/javascript/beyond_canvas/base.js
+++ b/app/javascript/beyond_canvas/base.js
@@ -1,6 +1,2 @@
import 'jquery';
-import './initializers/buttons';
-import './initializers/collapse';
-import './initializers/flash';
-import './initializers/inputs';
import './initializers/modals';
diff --git a/app/javascript/beyond_canvas/initializers/buttons.js b/app/javascript/beyond_canvas/initializers/buttons.js
deleted file mode 100644
index 4eef6f70..00000000
--- a/app/javascript/beyond_canvas/initializers/buttons.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const SPINNER_ANIMATION_TIMEOUT = 125;
-const BUTTON_SELECTORS = '[class^="button"]';
-
-(function ($) {
- const onDOMReady = function () {
- const inputs = $('input, textarea, select').not(
- ':input[type=button], :input[type=submit], :input[type=reset]'
- );
-
- inputs.each(function () {
- var input = $(this);
-
- input.bind('invalid', function (e) {
- if ($(input).is(':hidden')) {
- e.preventDefault();
- }
- $.restoreActionElements();
- });
- });
-
- $(BUTTON_SELECTORS).each(function () {
- $(this).buildButton();
- });
- };
-
- $(document).on('confirm:complete', function () {
- $.restoreActionElements();
- });
-
- $(document).on('click', BUTTON_SELECTORS, function (e) {
- var button = $(this);
-
- if(e.target.attributes.getNamedItem('target')?.value === '_blank') return;
-
- $.disableActionElements();
-
- if (!button.hasClass('button--no-spinner')) {
- $(this).showSpinner();
- }
- });
-
- $(document).on('ready page:load turbolinks:load', onDOMReady);
-
- $(document).on('beforeunload turbolinks:before-visit', function () {
- $.restoreActionElements();
- });
-})(jQuery);
-
-$.extend({
- restoreActionElements: function () {
- setTimeout(function () {
- // Hide spinners
- $(BUTTON_SELECTORS).each(function (_, button) {
- setTimeout(function () {
- // Hide the spinner
- $(button).find('.spinner').hide();
- // Adjust the width of the button
- $(button).width($(button).data('oldWidth'));
- }, SPINNER_ANIMATION_TIMEOUT);
- });
-
- // Enable action elements
- $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function () {
- $(this).removeClass('actions--disabled');
- });
- }, 100);
- },
- disableActionElements: function () {
- $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function () {
- $(this).addClass('actions--disabled');
- });
- }
-});
-
-$.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(`
- `);
- }
- }
-
- // 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);
-
- // Adjust the width of the button
- button.width(
- button.width() + $('.spinner').outerWidth(true)
- );
-
- // Show the spinner
- setTimeout(function () {
- button.find('.spinner').css('display', 'inline-flex');
- }, SPINNER_ANIMATION_TIMEOUT);
- }
-});
diff --git a/app/javascript/beyond_canvas/initializers/collapse.js b/app/javascript/beyond_canvas/initializers/collapse.js
deleted file mode 100644
index 6cde4a4e..00000000
--- a/app/javascript/beyond_canvas/initializers/collapse.js
+++ /dev/null
@@ -1,8 +0,0 @@
-(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);
diff --git a/app/javascript/beyond_canvas/initializers/flash.js b/app/javascript/beyond_canvas/initializers/flash.js
deleted file mode 100644
index 5391ff5d..00000000
--- a/app/javascript/beyond_canvas/initializers/flash.js
+++ /dev/null
@@ -1,48 +0,0 @@
-(function ($) {
- const onDOMReady = function () {
- $('.flash').each(function () {
- $(this).css('right', -$(this).width() + 'px');
- });
-
- setTimeout(function () {
- $('.flash').addClass('flash--shown');
- }, 100);
- };
-
- $(document).on('click', '.flash__close', function () {
- $.closeAlert();
- });
-
- $(document).on('ready page:load turbolinks:load bc.flash.shown', onDOMReady);
-})(jQuery);
-
-$.extend({
- showFlash: function(status, message) {
- const flash = `
- `;
-
- $(document).trigger('bc.flash.show');
- $('#flash').html(flash);
- $(document).trigger('bc.flash.shown');
- },
- closeAlert: function() {
- $(document).trigger('bc.flash.hide');
- $('.flash')
- .removeClass('flash--shown')
- .delay(700)
- .queue(function () {
- $(this).remove();
- });
- $(document).trigger('bc.flash.hidden');
- }
-});
diff --git a/app/javascript/beyond_canvas/initializers/inputs.js b/app/javascript/beyond_canvas/initializers/inputs.js
deleted file mode 100644
index 2d12bb44..00000000
--- a/app/javascript/beyond_canvas/initializers/inputs.js
+++ /dev/null
@@ -1,42 +0,0 @@
-(function ($) {
- const onDOMReady = function () {
- $('input[type="file"]').each(function () {
- const $input = $(this),
- $label = $(`.input__file__text.${$input.attr('id')}`),
- labelVal = $label.html();
-
- $input.on('change', function (e) {
- let fileName = '';
-
- if (this.files && this.files.length > 1)
- fileName = (this.getAttribute('data-multiple-caption') || '{count} files selected').replace(
- '{count}',
- this.files.length
- );
- else if (e.target.value) fileName = e.target.value.split('\\').pop();
-
- if (fileName)
- $label.html(
- `${fileName}`
- );
- else $label.html(labelVal);
- });
-
- // Firefox bug fix
- $input
- .on('focus', function () {
- $input.addClass('has-focus');
- })
- .on('blur', function () {
- $input.removeClass('has-focus');
- });
- });
- };
-
- $(document).on('ready page:load turbolinks:load', () => {
- const observer = new MutationObserver(() => onDOMReady());
-
- onDOMReady();
- observer.observe(document.body, { childList: true, subtree: true });
- });
-})(jQuery);
diff --git a/app/javascript/beyond_canvas/lib/common_functions.js b/app/javascript/beyond_canvas/lib/common_functions.js
new file mode 100644
index 00000000..6d888421
--- /dev/null
+++ b/app/javascript/beyond_canvas/lib/common_functions.js
@@ -0,0 +1,101 @@
+/* exported previewImage */
+
+export function previewImage(e) {
+ const arr = Array.from(e.target.files);
+ const elementFather = $(e.target).parents('.relative').find('.js-images');
+ const figureElement = $(elementFather).find('figure');
+ const figurePlaceholderElement = $(e.target).parents('.relative').find('.js-placeholder').find('figure');
+
+ const imgAttr = getImagesAttributes(figureElement, figurePlaceholderElement);
+ const figureAttr = getAttributesFromFigureElements(figureElement, figurePlaceholderElement);
+
+ delete imgAttr.src;
+ delete figureAttr.class;
+ delete figureAttr.style;
+
+ if($(e.target).attr('multiple')) {
+ $(elementFather).children('attachment__placeholder, [preview]').each((_, img) => $(img).remove());
+ } else {
+ $(elementFather).find('figure').remove();
+ }
+
+ $(e.target).parents('.relative').find('.js-placeholder').hide();
+
+ arr.forEach(file => {
+ const reader = new FileReader();
+
+ reader.readAsDataURL(file);
+ reader.onload = function () {
+ const figure = document.createElement('figure');
+ const img = document.createElement('img');
+
+ figure.classList.add('attachment', 'attachment--preview');
+ figure.setAttribute('preview', true);
+ img.setAttribute('src', reader.result);
+
+ setAttributesToElement(img, imgAttr);
+ setAttributesToElement(figure, figureAttr);
+
+ $(figure).append(img);
+ $(elementFather).append(figure);
+ };
+ });
+}
+
+const getImagesAttributes = (figureImageElement, figurePlaceholderElement) => {
+ return {
+ ...getImageAttributes($(figurePlaceholderElement)),
+ ...getImageAttributes($(figureImageElement))
+ };
+};
+
+const getAttributesFromFigureElements = (figureImageElement, figurePlaceholderElement) => {
+ return {
+ ...getAttributesFromElement($(figurePlaceholderElement)[0]),
+ ...getAttributesFromElement($(figureImageElement)[0])
+ };
+};
+
+export const getImageAttributes = (figureElement) => {
+ const svgElement = $(figureElement).find('svg')[0];
+ const imageElement = $(figureElement).find('img')[0];
+
+ if(imageElement) {
+ return getAttributesFromElement(imageElement);
+ }
+
+ return getAttributesFromSVG(svgElement);
+};
+
+export const getAttributesFromElement = (element) => {
+ const attributes = {};
+
+ if(!element) return attributes;
+
+ for (const attr of element.getAttributeNames()) {
+ attributes[attr] = element.getAttribute(attr);
+ }
+
+ return attributes;
+};
+
+export const getAttributesFromSVG = (element) => {
+ const svgAttrToExclude = ['xmlns', 'xmlns:xlink', 'version', 'id', 'x', 'y', 'viewBox', 'style', 'xml:space'];
+ const attributes = {};
+
+ if(!element) return attributes;
+
+ const svgAttr = element.getAttributeNames().filter(attr=> !svgAttrToExclude.includes(attr));
+
+ for (const attr of svgAttr) {
+ attributes[attr] = element.getAttribute(attr);
+ }
+
+ return attributes;
+};
+
+export const setAttributesToElement = (element, attributes) => {
+ for (const attr in attributes) {
+ element.setAttribute(attr, attributes[attr]);
+ }
+};
diff --git a/app/views/beyond_canvas/authentications/new.html.erb b/app/views/beyond_canvas/authentications/new.html.erb
index abf8b953..96aca7f2 100644
--- a/app/views/beyond_canvas/authentications/new.html.erb
+++ b/app/views/beyond_canvas/authentications/new.html.erb
@@ -3,7 +3,7 @@
- <%= form_with(url: callback_path, method: :post, scope: :shop, model: @shop, local: true, builder: BeyondCanvas::FormBuilder) do |f| %>
+ <%= form_with(url: main_app.callback_path, method: :post, scope: :shop, model: @shop, local: true, builder: BeyondCanvas::FormBuilder) do |f| %>
<%= I18n.t('headline', app_name: app_name, scope: i18n_scope) %>
diff --git a/app/views/beyond_canvas/shared/_breadcrumbs.html.erb b/app/views/beyond_canvas/shared/_breadcrumbs.html.erb
deleted file mode 100644
index 8c03fdbe..00000000
--- a/app/views/beyond_canvas/shared/_breadcrumbs.html.erb
+++ /dev/null
@@ -1,17 +0,0 @@
-<% if is_cockpit_app? && breadcrumb_trail.count.positive? %>
-
-
-
- <%= 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 i == breadcrumb_trail.count || crumb.current? %><%= inline_svg_tag 'icons/arrow_right.svg' %><% end %>
- <% i += 1 %>
- <% end %>
-
-
-
-<% end %>
diff --git a/app/views/beyond_canvas/shared/_flash.html.erb b/app/views/beyond_canvas/shared/_flash.html.erb
deleted file mode 100644
index 3b5f5c2d..00000000
--- a/app/views/beyond_canvas/shared/_flash.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
- <% flash.each do |key, value| %>
-
- <% unless value.blank? %>
-
-
-
-
- <%= get_flash_icon(key) %>
-
-
-
- <%= value %>
-
-
-
- <%= inline_svg_tag 'icons/flash_close.svg' %>
-
-
-
-
- <% end %>
-
- <% end %>
-
-
diff --git a/app/views/beyond_canvas/shared/_head.html.erb b/app/views/beyond_canvas/shared/_head.html.erb
index f25489e0..7e831427 100644
--- a/app/views/beyond_canvas/shared/_head.html.erb
+++ b/app/views/beyond_canvas/shared/_head.html.erb
@@ -16,7 +16,7 @@
<% end %>
<% end %>
- <% if BeyondCanvas.configuration.cockpit_app %>
+ <% if BeyondCanvas.configuration.custom_styles? %>
<%= stylesheet_link_tag cookies[:custom_styles_url] %>
<% end %>
diff --git a/app/views/beyond_canvas/shared/_locales.html.erb b/app/views/beyond_canvas/shared/_locales.html.erb
index 29bbeb56..4c62cef1 100644
--- a/app/views/beyond_canvas/shared/_locales.html.erb
+++ b/app/views/beyond_canvas/shared/_locales.html.erb
@@ -1,5 +1,5 @@
<% if show_locale_switch? && !is_cockpit_app? %>
- <%= form_for :system, url: update_locale_path, method: :put do |f| %>
+ <%= form_for :system, url: main_app.update_locale_path, method: :put do |f| %>
<%= f.select :locale, I18n.available_locales.collect { |l| [translate_locale(l), l] },
{ selected: cookies[:locale] },
class: 'select--locale',
diff --git a/app/views/layouts/beyond_canvas/application.html.erb b/app/views/layouts/beyond_canvas/application.html.erb
index bb4b742f..f77ae854 100644
--- a/app/views/layouts/beyond_canvas/application.html.erb
+++ b/app/views/layouts/beyond_canvas/application.html.erb
@@ -9,19 +9,14 @@
--<%= params[:action] %>">
- <%= render 'beyond_canvas/shared/flash' %>
<%= render 'beyond_canvas/shared/locales' %>
<%= render 'beyond_canvas/shared/menu' %>
<%= render 'beyond_canvas/shared/action_bar' %>
style="max-width: <%= yield :max_width %>"<% end %>>
- <%= render 'beyond_canvas/shared/breadcrumbs' %>
-
<%= yield %>
- <%= debug(params) if debug_mode? %>
-
diff --git a/app/views/layouts/beyond_canvas/blank.html.erb b/app/views/layouts/beyond_canvas/blank.html.erb
new file mode 100644
index 00000000..dd2564a3
--- /dev/null
+++ b/app/views/layouts/beyond_canvas/blank.html.erb
@@ -0,0 +1,19 @@
+
+
+
+<%= render 'beyond_canvas/shared/head' %>
+
+
+
+
--<%= params[:action] %>">
+
+ style="max-width: <%= yield :max_width %>"<% end %>>
+
+ <%= yield %>
+
+
+
+
+
+
+
diff --git a/app/views/layouts/beyond_canvas/public.html.erb b/app/views/layouts/beyond_canvas/public.html.erb
index aef61f1f..d9774aed 100644
--- a/app/views/layouts/beyond_canvas/public.html.erb
+++ b/app/views/layouts/beyond_canvas/public.html.erb
@@ -7,7 +7,6 @@
--<%= params[:action] %>">
- <%= render 'beyond_canvas/shared/flash' %>
<%= render 'beyond_canvas/shared/locales' %>
@@ -18,8 +17,6 @@
- <%= debug(params) if debug_mode? %>
-