rails_admin 2.1.0 → 3.0.0.beta

data/src/rails_admin/i18n.js

@@ -0,0 +1,19 @@
+import moment from "moment";
+
+export default {
+  locale: null,
+  translations: null,
+  init(locale, translations) {
+    this.locale = locale;
+    this.translations = translations;
+    moment.locale(this.locale);
+    if (typeof this.translations === "string") {
+      this.translations = JSON.parse(this.translations);
+    }
+  },
+  t(key) {
+    var humanize;
+    humanize = key.charAt(0).toUpperCase() + key.replace(/_/g, " ").slice(1);
+    return this.translations[key] || humanize;
+  },
+};

data/src/rails_admin/nested-form-hooks.js

@@ -0,0 +1,100 @@
+import jQuery from "jquery";
+
+(function ($) {
+  $(document).ready(function () {
+    return (window.nestedFormEvents.insertFields = function (
+      content,
+      assoc,
+      link
+    ) {
+      var tab_content;
+      tab_content = $(link).closest(".controls").siblings(".tab-content");
+      tab_content.append(content);
+      return tab_content.children().last();
+    });
+  });
+
+  $(document).on("nested:fieldAdded", "form", function (content) {
+    var controls, field, nav, new_tab, one_to_one, parent_group, toggler;
+    field = content.field
+      .addClass("tab-pane")
+      .attr("id", "unique-id-" + new Date().getTime());
+    new_tab = $("<li></li>").append(
+      $("<a></a>")
+        .attr("data-toggle", "tab")
+        .attr("href", "#" + field.attr("id"))
+        .text(field.children(".object-infos").data("object-label"))
+    );
+    parent_group = field.closest(".control-group");
+    controls = parent_group.children(".controls");
+    one_to_one = controls.data("nestedone") !== void 0;
+    nav = controls.children(".nav");
+    content = parent_group.children(".tab-content");
+    toggler = controls.find(".toggler");
+    nav.append(new_tab);
+
+    const event = new CustomEvent("rails_admin.dom_ready", { detail: field });
+    document.dispatchEvent(event);
+
+    new_tab.children("a").tab("show");
+    if (!one_to_one) {
+      nav.filter(":hidden").show("slow");
+    }
+    content.filter(":hidden").show("slow");
+    toggler
+      .addClass("active")
+      .removeClass("disabled")
+      .children("i")
+      .addClass("fa-chevron-down")
+      .removeClass("fa-chevron-right");
+    if (one_to_one) {
+      controls
+        .find(".add_nested_fields")
+        .removeClass("add_nested_fields")
+        .text(field.children(".object-infos").data("object-label"));
+    }
+  });
+
+  $(document).on("nested:fieldRemoved", "form", function (content) {
+    var add_button,
+      controls,
+      current_li,
+      field,
+      nav,
+      one_to_one,
+      parent_group,
+      toggler;
+    field = content.field;
+    nav = field
+      .closest(".control-group")
+      .children(".controls")
+      .children(".nav");
+    current_li = nav.children("li").has('a[href="#' + field.attr("id") + '"]');
+    parent_group = field.closest(".control-group");
+    controls = parent_group.children(".controls");
+    one_to_one = controls.data("nestedone") !== void 0;
+    toggler = controls.find(".toggler");
+    (current_li.next().length ? current_li.next() : current_li.prev())
+      .children("a:first")
+      .tab("show");
+    current_li.remove();
+    if (nav.children().length === 0) {
+      nav.filter(":visible").hide("slow");
+      toggler
+        .removeClass("active")
+        .addClass("disabled")
+        .children("i")
+        .removeClass("fa-chevron-down")
+        .addClass("fa-chevron-right");
+    }
+    if (one_to_one) {
+      add_button = toggler.next();
+      add_button
+        .addClass("add_nested_fields")
+        .html(add_button.data("add-label"));
+    }
+    field.find("[required]").each(function () {
+      $(this).prop("required", false);
+    });
+  });
+})(jQuery);

data/src/rails_admin/remote-form.js

@@ -0,0 +1,190 @@
+import Rails from "@rails/ujs";
+import jQuery from "jquery";
+import "jquery-ui/ui/widget";
+
+(function ($) {
+  $.widget("ra.remoteForm", {
+    _create: function () {
+      var widget = this;
+      var dom_widget = widget.element;
+
+      var edit_url =
+        dom_widget.find("select").first().data("options") &&
+        dom_widget.find("select").first().data("options")["edit-url"];
+      if (typeof edit_url != "undefined" && edit_url.length) {
+        dom_widget.on(
+          "dblclick",
+          ".ra-multiselect option:not(:disabled)",
+          function (e) {
+            widget._bindModalOpening(e, edit_url.replace("__ID__", this.value));
+          }
+        );
+      }
+
+      dom_widget
+        .find(".create")
+        .unbind()
+        .bind("click", function (e) {
+          widget._bindModalOpening(e, $(this).data("link"));
+        });
+
+      dom_widget
+        .find(".update")
+        .unbind()
+        .bind("click", function (e) {
+          var value = dom_widget.find("select").val();
+          if (value) {
+            widget._bindModalOpening(
+              e,
+              $(this).data("link").replace("__ID__", value)
+            );
+          } else {
+            e.preventDefault();
+          }
+        });
+    },
+
+    _bindModalOpening: function (e, url) {
+      e.preventDefault();
+      var widget = this;
+      if ($("#modal").length) return false;
+
+      var dialog = this._getModal();
+
+      setTimeout(function () {
+        // fix race condition with modal insertion in the dom (Chrome => Team/add a new fan => #modal not found when it should have). Somehow .on('show') is too early, tried it too.
+        $.ajax({
+          url: url,
+          beforeSend: function (xhr) {
+            xhr.setRequestHeader("Accept", "text/javascript");
+          },
+          success: function (data, status, xhr) {
+            dialog.find(".modal-body").html(data);
+            widget._bindFormEvents();
+          },
+          error: function (xhr, status, error) {
+            dialog.find(".modal-body").html(xhr.responseText);
+          },
+          dataType: "text",
+        });
+      }, 200);
+    },
+
+    _bindFormEvents: function () {
+      var widget = this,
+        dialog = this._getModal(),
+        form = dialog.find("form"),
+        saveButtonText = dialog.find(":submit[name=_save]").html(),
+        cancelButtonText = dialog.find(":submit[name=_continue]").html();
+      dialog.find(".form-actions").remove();
+
+      form.attr("data-remote", true).attr("data-type", "json");
+      dialog.find(".modal-header-title").text(form.data("title"));
+      dialog
+        .find(".cancel-action")
+        .unbind()
+        .click(function () {
+          dialog.modal("hide");
+          return false;
+        })
+        .html(cancelButtonText);
+
+      dialog
+        .find(".save-action")
+        .unbind()
+        .click(function () {
+          Rails.fire(form[0], "submit");
+          return false;
+        })
+        .html(saveButtonText);
+
+      const event = new CustomEvent("rails_admin.dom_ready", { detail: form });
+      document.dispatchEvent(event);
+
+      form.bind("ajax:complete", function (event) {
+        var data = event.detail[0],
+          status = event.detail[1];
+        if (status == "OK") {
+          var json = $.parseJSON(data.responseText);
+          var option =
+            '<option value="' +
+            json.id +
+            '" selected>' +
+            json.label +
+            "</option>";
+          var select = widget.element.find("select").filter(":hidden");
+
+          if (widget.element.find(".filtering-select").length) {
+            // select input
+            var input = widget.element
+              .find(".filtering-select")
+              .children(".ra-filtering-select-input");
+            input.val(json.label);
+            if (!select.find("option[value=" + json.id + "]").length) {
+              // not a replace
+              select.html(option).val(json.id);
+              widget.element.find(".update").removeClass("disabled");
+            }
+          } else {
+            // multi-select input
+            var input = widget.element.find(".ra-filtering-select-input");
+            var multiselect = widget.element.find(".ra-multiselect");
+            if (multiselect.find("option[value=" + json.id + "]").length) {
+              // replace
+              select.find("option[value=" + json.id + "]").text(json.label);
+              multiselect
+                .find("option[value= " + json.id + "]")
+                .text(json.label);
+            } else {
+              // add
+              select.append(option);
+              multiselect
+                .find("select.ra-multiselect-selection")
+                .append(option);
+            }
+          }
+          widget._trigger("success");
+          dialog.modal("hide");
+        } else {
+          dialog.find(".modal-body").html(data.responseText);
+          widget._bindFormEvents();
+        }
+      });
+    },
+
+    _getModal: function () {
+      var widget = this;
+      if (!widget.dialog) {
+        widget.dialog = $(
+          '<div id="modal" class="modal fade">\
+            <div class="modal-dialog">\
+            <div class="modal-content">\
+            <div class="modal-header">\
+              <a href="#" class="close" data-dismiss="modal">&times;</a>\
+              <h3 class="modal-header-title">...</h3>\
+            </div>\
+            <div class="modal-body">\
+              ...\
+            </div>\
+            <div class="modal-footer">\
+              <a href="#" class="btn cancel-action">...</a>\
+              <a href="#" class="btn btn-primary save-action">...</a>\
+            </div>\
+            </div>\
+            </div>\
+          </div>'
+        )
+          .modal({
+            keyboard: true,
+            backdrop: true,
+            show: true,
+          })
+          .on("hidden.bs.modal", function () {
+            widget.dialog.remove(); // We don't want to reuse closed modals
+            widget.dialog = null;
+          });
+      }
+      return this.dialog;
+    },
+  });
+})(jQuery);

data/src/rails_admin/sidescroll.js

@@ -0,0 +1,20 @@
+"use strict";
+
+{
+  document.addEventListener("rails_admin.dom_ready", () => {
+    const scroller = document.getElementById("sidescroll");
+    if (!scroller) {
+      return;
+    }
+
+    scroller.querySelectorAll("tr").forEach((tr, index) => {
+      let firstPosition;
+      tr.querySelectorAll("th.sticky, td.sticky").forEach((td, idx) => {
+        if (idx === 0) {
+          firstPosition = td.offsetLeft;
+        }
+        td.style.left = `${td.offsetLeft - firstPosition}px`;
+      });
+    });
+  });
+}

data/{app/assets/stylesheets/rails_admin → src/rails_admin/styles}/base/theming.scss

@@ -6,7 +6,6 @@
 $avatar-size: 30px;
 
 body.rails_admin {
-
   .thumbnail {
     display: inline-block;
   }
@@ -26,6 +25,13 @@ body.rails_admin {
           margin-left: ($avatar-size + 5px);
         }
       }
+
+      > span {
+        color: $navbar-default-link-color;
+        line-height: $navbar-height;
+        padding-left: $navbar-padding-horizontal;
+        padding-right: $navbar-padding-horizontal;
+      }
     }
   }
 
@@ -71,7 +77,7 @@ body.rails_admin {
   .form-horizontal {
     /* hide hidden fields controls by default */
     .control-group .hidden_type {
-      display:none;
+      display: none;
     }
 
     .control-group {
@@ -87,7 +93,7 @@ body.rails_admin {
     }
 
     legend {
-      cursor:pointer;
+      cursor: pointer;
       i {
         vertical-align: inherit !important;
       }
@@ -100,7 +106,7 @@ body.rails_admin {
       }
       .remove_nested_fields,
       .remove_nested_one_fields {
-        position:absolute;
+        position: absolute;
       }
       p {
         font-size: 12px;
@@ -109,7 +115,8 @@ body.rails_admin {
       .help-block {
         // margin-top: 0px;
       }
-      .input-prepend, .input-append {
+      .input-prepend,
+      .input-append {
         margin-bottom: 0px;
         label {
           margin-bottom: 0px;
@@ -121,14 +128,15 @@ body.rails_admin {
     }
 
     /* We want input size to be used, unfixate input width */
-    input, textarea {
-      width:auto;
+    input,
+    textarea {
+      width: revert;
     }
     .help-block {
-      clear:left;
+      clear: left;
     }
-    input[type=file] {
-      display:block;
+    input[type="file"] {
+      display: block;
     }
 
     /* nested forms */
@@ -151,13 +159,13 @@ body.rails_admin {
 
         & > .remove_nested_fields,
         & > .remove_nested_one_fields {
-          display:block;
+          display: block;
           opacity: 0;
           position: absolute;
           top: 0px;
           left: 5px;
-          -webkit-transition: opacity .15s ease;
-          transition: opacity .15s ease;
+          -webkit-transition: opacity 0.15s ease;
+          transition: opacity 0.15s ease;
         }
         &:hover > .remove_nested_fields,
         &:hover > .remove_nested_one_fields,
@@ -179,7 +187,7 @@ body.rails_admin {
 
     /* triple nesting!*/
     .tab-content .tab-content .tab-content .tab-pane {
-      border-color:lighten(#049cdb, 30%);
+      border-color: lighten(#049cdb, 30%);
       margin-left: 20px;
 
       .form-group {
@@ -188,8 +196,8 @@ body.rails_admin {
     }
 
     /* totally awesome! nesting on 4 levels! */
-    .tab-content .tab-content .tab-content  .tab-content .tab-pane {
-      border-color:lighten(#049cdb, 40%);
+    .tab-content .tab-content .tab-content .tab-content .tab-pane {
+      border-color: lighten(#049cdb, 40%);
       margin-left: 30px;
 
       .form-group {
@@ -206,13 +214,13 @@ body.rails_admin {
   /* nested nav */
   .nav {
     .nav-level-1 {
-      padding-left:30px;
+      padding-left: 30px;
     }
     .nav-level-2 {
-      padding-left:60px;
+      padding-left: 60px;
     }
     .nav-level-3 {
-      padding-left:90px;
+      padding-left: 90px;
     }
   }
 
@@ -225,6 +233,14 @@ body.rails_admin {
     }
   }
 
+  #sidescroll {
+    margin-bottom: 20px;
+    overflow-x: auto;
+    .table {
+      margin-bottom: 0;
+    }
+  }
+
   /* Table cells behaviour */
   .table {
     // Cells
@@ -238,18 +254,21 @@ body.rails_admin {
       }
     }
     .thumbnail {
-      float:left;
+      float: left;
       & + * {
-        clear:left;
+        clear: left;
       }
     }
     /* backport of Bootstrap 1.4 table headers */
     .header {
       cursor: pointer;
+      padding-right: 18px;
       &:after {
         content: "";
         float: right;
         margin-top: 7px;
+        margin-left: 8px;
+        margin-right: -16px;
         border-width: 0 4px 4px;
         border-style: solid;
         border-color: #000 transparent;
@@ -258,18 +277,18 @@ body.rails_admin {
     }
     .headerSortUp,
     .headerSortDown {
-      background-color: rgba(141,192,219,.25);
-      text-shadow: 0 1px 1px rgba(255,255,255,.75);
+      background-color: rgba(141, 192, 219, 0.25);
+      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
     }
     .header:hover {
       &:after {
-        visibility:visible;
+        visibility: visible;
       }
     }
     .headerSortDown,
     .headerSortDown:hover {
       &:after {
-        visibility:visible;
+        visibility: visible;
         @include opacity(60);
       }
     }
@@ -279,44 +298,84 @@ body.rails_admin {
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
         border-top: 4px solid #000;
-        visibility:visible;
+        visibility: visible;
         @include box-shadow(none);
         @include opacity(60);
       }
     }
 
+    th {
+      white-space: nowrap;
+    }
+
     /* text-overflow when cell content > 150px */
     td {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width:150px;
+      max-width: 150px;
+    }
+
+    th,
+    td {
+      padding: 5px 10px;
+    }
+
+    .sticky {
+      position: sticky;
+    }
+
+    th.last,
+    td.last {
+      position: sticky;
+      right: 0px;
     }
 
     /* icons */
     td.links {
       max-width: none;
       .list-inline {
-        margin:0px;
-        li { display:inline-block; }
+        margin: 0px;
+        li {
+          display: inline-block;
+        }
       }
     }
 
     /* Shrink to content width */
     .shrink {
-      width:1px;
-      white-space:nowrap;
+      width: 1px;
+      white-space: nowrap;
     }
 
     /* History */
     th.created_at {
-      width:160px;
+      width: 160px;
     }
     th.username {
-      width:140px;
+      width: 140px;
     }
     th.item {
-      width:60px;
+      width: 60px;
+    }
+  }
+
+  // Remove transparency on sticky cells.
+  $table-bg-default: if(
+    $table-bg == transparent,
+    if($body-bg == transparent, #fff, $body-bg),
+    $table-bg
+  ) !default;
+  .table-striped > tbody > tr:nth-child(even) > td,
+  .table-striped > thead > tr > th {
+    background-color: $table-bg-default;
+  }
+  $table-bg-header-sort: #e2eff6 !default;
+  .table .sticky,
+  .table .last {
+    &.headerSortUp,
+    &.headerSortDown {
+      background-color: $table-bg-header-sort;
     }
   }
 }

data/src/rails_admin/styles/base.scss

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+/***  Variables  ***/
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/_variables";
+@import "base/variables";
+@import "themes/default/variables";
+
+/***  Mixins  ***/
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "base/mixins";
+@import "themes/default/mixins";
+
+/***  Libraries  ***/
+
+@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build";
+@import "./filtering-select";
+@import "./filtering-multiselect";
+@import "./widgets";
+
+/*** Font-awesome ***/
+
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+
+/***  Bootstrap Theming  ***/
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
+
+/***  RailsAdmin Theming  ***/
+
+@import "base/theming";
+@import "themes/default/theming";