activeadmin 1.1.0 → 2.5.0

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

@@ -0,0 +1,509 @@
+/**
+ * Warning: This file is auto-generated, do not modify. Instead, make your changes in 'app/javascript/active_admin/' and run `yarn build`
+ */
+//= require jquery3
+//= require jquery-ui/widgets/datepicker
+//= require jquery-ui/widgets/dialog
+//= require jquery-ui/widgets/sortable
+//= require jquery-ui/widgets/tabs
+//= require jquery-ui/widget
+//= require jquery_ujs
+//= require_self
+
+(function(factory) {
+  typeof define === "function" && define.amd ? define([ "jquery", "jquery-ui/ui/widgets/datepicker", "jquery-ui/ui/widgets/dialog", "jquery-ui/ui/widgets/sortable", "jquery-ui/ui/widgets/tabs", "jquery-ui/ui/widget", "jquery-ujs" ], factory) : factory();
+})(function() {
+  "use strict";
+  $.fn.serializeObject = function() {
+    return this.serializeArray().reduce(function(obj, item) {
+      obj[item.name] = item.value;
+      return obj;
+    }, {});
+  };
+  $.ui.dialog.prototype._focusTabbable = function() {
+    this.uiDialog.focus();
+  };
+  function ModalDialog(message, inputs, callback) {
+    var html = '<form id="dialog_confirm" title="' + message + '"><ul>';
+    for (var name in inputs) {
+      var elem, opts, wrapper;
+      var type = inputs[name];
+      if (/^(datepicker|checkbox|text|number)$/.test(type)) {
+        wrapper = "input";
+      } else if (type === "textarea") {
+        wrapper = "textarea";
+      } else if ($.isArray(type)) {
+        var _ref = [ "select", "option", type, "" ];
+        wrapper = _ref[0];
+        elem = _ref[1];
+        opts = _ref[2];
+        type = _ref[3];
+      } else {
+        throw new Error("Unsupported input type: {" + name + ": " + type + "}");
+      }
+      var klass = type === "datepicker" ? type : "";
+      html += "<li>\n      <label>" + (name.charAt(0).toUpperCase() + name.slice(1)) + "</label>\n      <" + wrapper + ' name="' + name + '" class="' + klass + '" type="' + type + '">' + (opts ? function() {
+        var result = [];
+        opts.forEach(function(v) {
+          var $elem = $("<" + elem + "/>");
+          if ($.isArray(v)) {
+            $elem.text(v[0]).val(v[1]);
+          } else {
+            $elem.text(v);
+          }
+          result.push($elem.wrap("<div>").parent().html());
+        });
+        return result;
+      }().join("") : "") + ("</" + wrapper + ">") + "</li>";
+      var _ref2 = [];
+      wrapper = _ref2[0];
+      elem = _ref2[1];
+      opts = _ref2[2];
+      type = _ref2[3];
+      klass = _ref2[4];
+    }
+    html += "</ul></form>";
+    var form = $(html).appendTo("body");
+    $("body").trigger("modal_dialog:before_open", [ form ]);
+    form.dialog({
+      modal: true,
+      open: function open(event, ui) {
+        $("body").trigger("modal_dialog:after_open", [ form ]);
+      },
+      dialogClass: "active_admin_dialog",
+      buttons: {
+        OK: function OK() {
+          callback($(this).serializeObject());
+          $(this).dialog("close");
+        },
+        Cancel: function Cancel() {
+          $(this).dialog("close").remove();
+        }
+      }
+    });
+  }
+  var onDOMReady = function onDOMReady() {
+    $(".batch_actions_selector li a").off("click confirm:complete");
+    $(".batch_actions_selector li a").on("click", function(event) {
+      var _this = this;
+      var message;
+      event.stopPropagation();
+      event.preventDefault();
+      if (message = $(this).data("confirm")) {
+        ModalDialog(message, $(this).data("inputs"), function(inputs) {
+          $(_this).trigger("confirm:complete", inputs);
+        });
+      } else {
+        $(this).trigger("confirm:complete");
+      }
+    });
+    $(".batch_actions_selector li a").on("confirm:complete", function(event, inputs) {
+      var val;
+      if (val = JSON.stringify(inputs)) {
+        $("#batch_action_inputs").removeAttr("disabled").val(val);
+      } else {
+        $("#batch_action_inputs").attr("disabled", "disabled");
+      }
+      $("#batch_action").val($(this).data("action"));
+      $("#collection_selection").submit();
+    });
+    if ($(".batch_actions_selector").length && $(":checkbox.toggle_all").length) {
+      if ($(".paginated_collection table.index_table").length) {
+        $(".paginated_collection table.index_table").tableCheckboxToggler();
+      } else {
+        $(".paginated_collection").checkboxToggler();
+      }
+      $(document).on("change", ".paginated_collection :checkbox", function() {
+        if ($(".paginated_collection :checkbox:checked").length && $(".dropdown_menu_list").children().length) {
+          $(".batch_actions_selector").each(function() {
+            $(this).aaDropdownMenu("enable");
+          });
+        } else {
+          $(".batch_actions_selector").each(function() {
+            $(this).aaDropdownMenu("disable");
+          });
+        }
+      });
+    }
+  };
+  $(document).ready(onDOMReady).on("page:load turbolinks:load", onDOMReady);
+  var CheckboxToggler = function() {
+    function CheckboxToggler(options, container) {
+      this.options = options;
+      this.container = container;
+      this._init();
+      this._bind();
+    }
+    var _proto = CheckboxToggler.prototype;
+    _proto.option = function option(key, value) {};
+    _proto._init = function _init() {
+      if (!this.container) {
+        throw new Error("Container element not found");
+      } else {
+        this.$container = $(this.container);
+      }
+      if (!this.$container.find(".toggle_all").length) {
+        throw new Error('"toggle all" checkbox not found');
+      } else {
+        this.toggle_all_checkbox = this.$container.find(".toggle_all");
+      }
+      this.checkboxes = this.$container.find(":checkbox").not(this.toggle_all_checkbox);
+    };
+    _proto._bind = function _bind() {
+      var _this = this;
+      this.checkboxes.change(function(event) {
+        return _this._didChangeCheckbox(event.target);
+      });
+      this.toggle_all_checkbox.change(function() {
+        return _this._didChangeToggleAllCheckbox();
+      });
+    };
+    _proto._didChangeCheckbox = function _didChangeCheckbox(checkbox) {
+      var numChecked = this.checkboxes.filter(":checked").length;
+      var allChecked = numChecked === this.checkboxes.length;
+      var someChecked = numChecked > 0 && numChecked < this.checkboxes.length;
+      this.toggle_all_checkbox.prop({
+        checked: allChecked,
+        indeterminate: someChecked
+      });
+    };
+    _proto._didChangeToggleAllCheckbox = function _didChangeToggleAllCheckbox() {
+      var setting = this.toggle_all_checkbox.prop("checked");
+      this.checkboxes.prop({
+        checked: setting
+      });
+      return setting;
+    };
+    return CheckboxToggler;
+  }();
+  $.widget.bridge("checkboxToggler", CheckboxToggler);
+  (function($) {
+    $(document).on("focus", "input.datepicker:not(.hasDatepicker)", function() {
+      var input = $(this);
+      if (input[0].type === "date") {
+        return;
+      }
+      var defaults = {
+        dateFormat: "yy-mm-dd"
+      };
+      var options = input.data("datepicker-options");
+      input.datepicker($.extend(defaults, options));
+    });
+  })(jQuery);
+  var DropdownMenu = function() {
+    function DropdownMenu(options, element) {
+      this.options = options;
+      this.element = element;
+      this.$element = $(this.element);
+      var defaults = {
+        fadeInDuration: 20,
+        fadeOutDuration: 100,
+        onClickActionItemCallback: null
+      };
+      this.options = $.extend(defaults, this.options);
+      this.isOpen = false;
+      this.$menuButton = this.$element.find(".dropdown_menu_button");
+      this.$menuList = this.$element.find(".dropdown_menu_list_wrapper");
+      this._buildMenuList();
+      this._bind();
+    }
+    var _proto = DropdownMenu.prototype;
+    _proto.open = function open() {
+      this.isOpen = true;
+      this.$menuList.fadeIn(this.options.fadeInDuration);
+      this._position();
+      return this;
+    };
+    _proto.close = function close() {
+      this.isOpen = false;
+      this.$menuList.fadeOut(this.options.fadeOutDuration);
+      return this;
+    };
+    _proto.destroy = function destroy() {
+      this.$element = null;
+      return this;
+    };
+    _proto.isDisabled = function isDisabled() {
+      return this.$menuButton.hasClass("disabled");
+    };
+    _proto.disable = function disable() {
+      this.$menuButton.addClass("disabled");
+    };
+    _proto.enable = function enable() {
+      this.$menuButton.removeClass("disabled");
+    };
+    _proto.option = function option(key, value) {
+      if ($.isPlainObject(key)) {
+        return this.options = $.extend(true, this.options, key);
+      } else if (key != null) {
+        return this.options[key];
+      } else {
+        return this.options[key] = value;
+      }
+    };
+    _proto._buildMenuList = function _buildMenuList() {
+      this.$nipple = $('<div class="dropdown_menu_nipple"></div>');
+      this.$menuList.prepend(this.$nipple);
+      this.$menuList.hide();
+    };
+    _proto._bind = function _bind() {
+      var _this = this;
+      $("body").click(function() {
+        if (_this.isOpen) {
+          _this.close();
+        }
+      });
+      this.$menuButton.click(function() {
+        if (!_this.isDisabled()) {
+          if (_this.isOpen) {
+            _this.close();
+          } else {
+            _this.open();
+          }
+        }
+        return false;
+      });
+    };
+    _proto._position = function _position() {
+      this.$menuList.css("top", this.$menuButton.position().top + this.$menuButton.outerHeight() + 10);
+      var button_left = this.$menuButton.position().left;
+      var button_center = this.$menuButton.outerWidth() / 2;
+      var button_right = button_left + button_center * 2;
+      var menu_center = this.$menuList.outerWidth() / 2;
+      var nipple_center = this.$nipple.outerWidth() / 2;
+      var window_right = $(window).width();
+      var centered_menu_left = button_left + button_center - menu_center;
+      var centered_menu_right = button_left + button_center + menu_center;
+      if (centered_menu_left < 0) {
+        this.$menuList.css("left", button_left);
+        this.$nipple.css("left", button_center - nipple_center);
+      } else if (centered_menu_right > window_right) {
+        this.$menuList.css("right", window_right - button_right);
+        this.$nipple.css("right", button_center - nipple_center);
+      } else {
+        this.$menuList.css("left", centered_menu_left);
+        this.$nipple.css("left", menu_center - nipple_center);
+      }
+    };
+    return DropdownMenu;
+  }();
+  $.widget.bridge("aaDropdownMenu", DropdownMenu);
+  var onDOMReady$1 = function onDOMReady() {
+    return $(".dropdown_menu").aaDropdownMenu();
+  };
+  $(document).ready(onDOMReady$1).on("page:load turbolinks:load", onDOMReady$1);
+  function hasTurbolinks() {
+    return typeof Turbolinks !== "undefined" && Turbolinks.supported;
+  }
+  function turbolinksVisit(params) {
+    var path = [ window.location.pathname, "?", toQueryString(params) ].join("");
+    Turbolinks.visit(path);
+  }
+  function queryString() {
+    return (window.location.search || "").replace(/^\?/, "");
+  }
+  function queryStringToParams() {
+    var decode = function decode(value) {
+      return decodeURIComponent((value || "").replace(/\+/g, "%20"));
+    };
+    return queryString().split("&").map(function(pair) {
+      return pair.split("=");
+    }).map(function(_ref) {
+      var key = _ref[0], value = _ref[1];
+      return {
+        name: decode(key),
+        value: decode(value)
+      };
+    });
+  }
+  function toQueryString(params) {
+    var encode = function encode(value) {
+      return encodeURIComponent(value || "");
+    };
+    return params.map(function(_ref2) {
+      var name = _ref2.name, value = _ref2.value;
+      return [ encode(name), encode(value) ];
+    }).map(function(pair) {
+      return pair.join("=");
+    }).join("&");
+  }
+  var Filters = function() {
+    function Filters() {}
+    Filters._clearForm = function _clearForm(event) {
+      var regex = /^(q\[|q%5B|q%5b|page|utf8|commit)/;
+      var params = queryStringToParams().filter(function(_ref) {
+        var name = _ref.name;
+        return !name.match(regex);
+      });
+      event.preventDefault();
+      if (hasTurbolinks()) {
+        turbolinksVisit(params);
+      } else {
+        window.location.search = toQueryString(params);
+      }
+    };
+    Filters._disableEmptyInputFields = function _disableEmptyInputFields(event) {
+      var params = $(this).find(":input").filter(function(i, input) {
+        return input.value === "";
+      }).prop({
+        disabled: true
+      }).end().serializeArray();
+      if (hasTurbolinks()) {
+        event.preventDefault();
+        turbolinksVisit(params);
+      }
+    };
+    Filters._setSearchType = function _setSearchType() {
+      $(this).siblings("input").prop({
+        name: "q[" + this.value + "]"
+      });
+    };
+    return Filters;
+  }();
+  (function($) {
+    $(document).on("click", ".clear_filters_btn", Filters._clearForm).on("submit", ".filter_form", Filters._disableEmptyInputFields).on("change", ".filter_form_field.select_and_search select", Filters._setSearchType);
+  })(jQuery);
+  $(function() {
+    $(document).on("click", "a.button.has_many_remove", function(event) {
+      event.preventDefault();
+      var parent = $(this).closest(".has_many_container");
+      var to_remove = $(this).closest("fieldset");
+      recompute_positions(parent);
+      parent.trigger("has_many_remove:before", [ to_remove, parent ]);
+      to_remove.remove();
+      return parent.trigger("has_many_remove:after", [ to_remove, parent ]);
+    });
+    $(document).on("click", "a.button.has_many_add", function(event) {
+      var before_add;
+      event.preventDefault();
+      var parent = $(this).closest(".has_many_container");
+      parent.trigger(before_add = $.Event("has_many_add:before"), [ parent ]);
+      if (!before_add.isDefaultPrevented()) {
+        var index = parent.data("has_many_index") || parent.children("fieldset").length - 1;
+        parent.data({
+          has_many_index: ++index
+        });
+        var regex = new RegExp($(this).data("placeholder"), "g");
+        var html = $(this).data("html").replace(regex, index);
+        var fieldset = $(html).insertBefore(this);
+        recompute_positions(parent);
+        return parent.trigger("has_many_add:after", [ fieldset, parent ]);
+      }
+    });
+    $(document).on("change", '.has_many_container[data-sortable] :input[name$="[_destroy]"]', function() {
+      recompute_positions($(this).closest(".has_many"));
+    });
+    init_sortable();
+    $(document).on("has_many_add:after", ".has_many_container", init_sortable);
+  });
+  var init_sortable = function init_sortable() {
+    var elems = $(".has_many_container[data-sortable]:not(.ui-sortable)");
+    elems.sortable({
+      items: "> fieldset",
+      handle: "> ol > .handle",
+      start: function start(ev, ui) {
+        ui.item.css({
+          opacity: .3
+        });
+      },
+      stop: function stop(ev, ui) {
+        ui.item.css({
+          opacity: 1
+        });
+        recompute_positions($(this));
+      }
+    });
+    elems.each(recompute_positions);
+  };
+  var recompute_positions = function recompute_positions(parent) {
+    parent = parent instanceof jQuery ? parent : $(this);
+    var input_name = parent.data("sortable");
+    var position = parseInt(parent.data("sortable-start") || 0, 10);
+    parent.children("fieldset").each(function() {
+      var destroy_input = $(this).find("> ol > .input > :input[name$='[_destroy]']");
+      var sortable_input = $(this).find("> ol > .input > :input[name$='[" + input_name + "]']");
+      if (sortable_input.length) {
+        sortable_input.val(destroy_input.is(":checked") ? "" : position++);
+      }
+    });
+  };
+  var PerPage = function() {
+    function PerPage(element) {
+      this.element = element;
+    }
+    var _proto = PerPage.prototype;
+    _proto.update = function update() {
+      var params = queryStringToParams().filter(function(_ref) {
+        var name = _ref.name;
+        return name != "per_page" || name != "page";
+      });
+      params.push({
+        name: "per_page",
+        value: this.element.value
+      });
+      if (hasTurbolinks()) {
+        turbolinksVisit(params);
+      } else {
+        window.location.search = toQueryString(params);
+      }
+    };
+    PerPage._jQueryInterface = function _jQueryInterface(config) {
+      return this.each(function() {
+        var $this = $(this);
+        var data = $this.data("perPage");
+        if (!data) {
+          data = new PerPage(this);
+          $this.data("perPage", data);
+        }
+        if (config === "update") {
+          data[config]();
+        }
+      });
+    };
+    return PerPage;
+  }();
+  (function($) {
+    $(document).on("change", ".pagination_per_page > select", function(event) {
+      PerPage._jQueryInterface.call($(this), "update");
+    });
+    $.fn["perPage"] = PerPage._jQueryInterface;
+    $.fn["perPage"].Constructor = PerPage;
+  })(jQuery);
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
+  }
+  var TableCheckboxToggler = function(_CheckboxToggler) {
+    _inheritsLoose(TableCheckboxToggler, _CheckboxToggler);
+    function TableCheckboxToggler() {
+      return _CheckboxToggler.apply(this, arguments) || this;
+    }
+    var _proto = TableCheckboxToggler.prototype;
+    _proto._bind = function _bind() {
+      var _this = this;
+      _CheckboxToggler.prototype._bind.apply(this, arguments);
+      this.$container.find("tbody td").click(function(event) {
+        if (event.target.type !== "checkbox") {
+          _this._didClickCell(event.target);
+        }
+      });
+    };
+    _proto._didChangeCheckbox = function _didChangeCheckbox(checkbox) {
+      _CheckboxToggler.prototype._didChangeCheckbox.apply(this, arguments);
+      $(checkbox).parents("tr").toggleClass("selected", checkbox.checked);
+    };
+    _proto._didChangeToggleAllCheckbox = function _didChangeToggleAllCheckbox() {
+      this.$container.find("tbody tr").toggleClass("selected", _CheckboxToggler.prototype._didChangeToggleAllCheckbox.apply(this, arguments));
+    };
+    _proto._didClickCell = function _didClickCell(cell) {
+      $(cell).parent("tr").find(":checkbox").click();
+    };
+    return TableCheckboxToggler;
+  }(CheckboxToggler);
+  $.widget.bridge("tableCheckboxToggler", TableCheckboxToggler);
+  var onDOMReady$2 = function onDOMReady() {
+    return $("#active_admin_content .tabs").tabs();
+  };
+  $(document).ready(onDOMReady$2).on("page:load turbolinks:load", onDOMReady$2);
+});

data/app/assets/stylesheets/active_admin/_base.scss

@@ -1,36 +1,36 @@
 /* Active Admin CSS */
 // Normalize
-@import "active_admin/normalize";
+@import "./normalize";
 
 // Partials
-@import "active_admin/typography";
-@import "active_admin/header";
-@import "active_admin/forms";
-@import "active_admin/components/comments";
-@import "active_admin/components/flash_messages";
-@import "active_admin/components/date_picker";
-@import "active_admin/components/tables";
-@import "active_admin/components/batch_actions";
-@import "active_admin/components/modal_dialog";
-@import "active_admin/components/blank_slates";
-@import "active_admin/components/breadcrumbs";
-@import "active_admin/components/dropdown_menu";
-@import "active_admin/components/buttons";
-@import "active_admin/components/grid";
-@import "active_admin/components/links";
-@import "active_admin/components/pagination";
-@import "active_admin/components/panels";
-@import "active_admin/components/columns";
-@import "active_admin/components/scopes";
-@import "active_admin/components/status_tags";
-@import "active_admin/components/table_tools";
-@import "active_admin/components/index_list";
-@import "active_admin/components/unsupported_browser";
-@import "active_admin/components/tabs";
-@import "active_admin/pages/logged_out";
-@import "active_admin/structure/footer";
-@import "active_admin/structure/main_structure";
-@import "active_admin/structure/title_bar";
+@import "./typography";
+@import "./header";
+@import "./forms";
+@import "./components/comments";
+@import "./components/flash_messages";
+@import "./components/date_picker";
+@import "./components/tables";
+@import "./components/batch_actions";
+@import "./components/modal_dialog";
+@import "./components/blank_slates";
+@import "./components/breadcrumbs";
+@import "./components/dropdown_menu";
+@import "./components/buttons";
+@import "./components/grid";
+@import "./components/links";
+@import "./components/pagination";
+@import "./components/panels";
+@import "./components/columns";
+@import "./components/scopes";
+@import "./components/status_tags";
+@import "./components/table_tools";
+@import "./components/index_list";
+@import "./components/unsupported_browser";
+@import "./components/tabs";
+@import "./pages/logged_out";
+@import "./structure/footer";
+@import "./structure/main_structure";
+@import "./structure/title_bar";
 
 body {
   @include sans-family;

data/app/assets/stylesheets/active_admin/_forms.scss

@@ -85,18 +85,7 @@ form {
       padding: 0;
       margin-bottom: 0;
 
-      legend {
-        position:absolute;
-        width:95%;
-        padding-top:0.1em;
-        left: 0px;
-        font-size: 100%;
-        font-weight: normal;
-        span { position:absolute; }
-        &.label label { position:absolute; }
-      }
-
-      &:not(.has_many_fields) ol {
+      &:not(.inputs) ol {
         float: left;
         width: 74%;
         margin: 0;
@@ -108,7 +97,7 @@ form {
         }
       }
 
-      &.has_many_fields ol {
+      &.inputs ol {
         float: left;
         width: 100%;
         margin: 0;
@@ -241,7 +230,7 @@ form {
     input[type=submit], input[type=button], button { margin-right: 10px; }
   }
 
-  .buttons .actions .create_another {
+  .actions .create_another {
     float: none;
     margin-bottom: 10px;
 
@@ -335,4 +324,3 @@ form.filter_form {
   }
   a.clear_filters_btn { @include light-button; }
 }
-

data/app/assets/stylesheets/active_admin/_header.scss

@@ -1,5 +1,3 @@
-//= depend_on_asset "active_admin/nested_menu_arrow.gif"
-//= depend_on_asset "active_admin/nested_menu_arrow_dark.gif"
 // ----------------------------------- Header
 #header {
   @include primary-gradient;
@@ -75,12 +73,12 @@
       }
 
       &.has_nested > a {
-        background: image-url('active_admin/nested_menu_arrow.gif') no-repeat calc(100% - 7px) 50%;
+        background: url($menu-arrow-light-icon-url) no-repeat calc(100% - 7px) 50%;
         padding-right: 20px;
       }
 
       &.has_nested.current > a {
-        background: $current-menu-item-background image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
+        background: $current-menu-item-background url($menu-arrow-dark-icon-url) no-repeat calc(100% - 7px) 50%;
         padding-right: 20px;
       }
 
@@ -92,7 +90,7 @@
       &.has_nested:hover > a {
         @include rounded-top(10px);
         border-bottom: 5px solid $hover-menu-item-background;
-        background: $hover-menu-item-background image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
+        background: $hover-menu-item-background url($menu-arrow-dark-icon-url) no-repeat calc(100% - 7px) 50%;
         z-index: 1020;
       }
 

data/app/assets/stylesheets/active_admin/_mixins.scss

@@ -1 +1 @@
-@import "active_admin/mixins/all";
+@import "./mixins/all";

data/app/assets/stylesheets/active_admin/components/_scopes.scss

@@ -6,5 +6,8 @@
       font-size: 0.9em;
       line-height: 10px;
     }
+    &:first-child a {
+      margin-left: 10px;
+    }
   }
 }

data/app/assets/stylesheets/active_admin/components/_status_tags.scss

@@ -6,11 +6,6 @@
   padding: 3px 5px 2px 5px;
   font-size: 0.8em;
 
-  // TODO: deprecated, remove in a v2 release
-  &.ok, &.published, &.complete, &.completed, &.green { background: #8daa92; }
-  &.warn, &.warning, &.orange { background: #e29b20; }
-  &.error, &.errored, &.red { background: #d45f53; }
-
   &.yes { background: #6090DB }
   &.no  { background: grey }
 

data/app/assets/stylesheets/active_admin/components/_tables.scss

@@ -1,4 +1,3 @@
-//= depend_on_asset "active_admin/orderable.png"
 // ----------------------------------- Tables
 
 table tr {
@@ -33,7 +32,7 @@ table.index_table {
     }
 
     &.sortable a {
-      background: image-url('active_admin/orderable.png') no-repeat 0 4px; padding-left: 13px;
+      background: url($orderable-icon-url) no-repeat 0 4px; padding-left: 13px;
     }
 
     &.sorted-asc a { background-position: 0 -27px; }