active_material 1.5.2 → 2.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca3864bcf2764b20496dca32ba97717a95a635785d390cb592f1f157dfd85ba1
-  data.tar.gz: 12b62f11d7293fe15b20b4cc845c48db6a372049634564e502d9dcac3539e907
+  metadata.gz: 93275c327756af4eafee3c5542609ec05715b93c493640a1f9762a2222afcf10
+  data.tar.gz: 2ad339e7948a534d497c2c41fec43aca0aca8abfc04f51e1c710b25121d77ef8
 SHA512:
-  metadata.gz: e2cfd53f7e9745300daafeca924f57f71d81a663df55eb47831a98a6b07c0ed3c1879b25a378b53d06590871af9e8c411aec4b8b133607d38c3c1fade3a2dccf
-  data.tar.gz: d152695ac2fe97ea2ba97bf3a5bd8ad3258d784d8c3954eba81b64e22ca3df50340ca23b63f67840117010eb4258ee6323b42ce576c053fa39f8d32b1cf57730
+  metadata.gz: 9824e96641f906684578de15c16fbda84188897cf22e40a260cf12f4fdb632c277e3647a6f253030f3fbf5be2fe7da4ae81d78bfbb9fa07ae5cfc35b7175d95b
+  data.tar.gz: 7e745b586892691b733a7a001fd495e0724a84bf8eb31d5e4456d97829a4603a02002c1540c90fcd1a443de5d56bab763767f424ed7f42dbca251bfa9702760d

data/README.md

@@ -4,61 +4,35 @@ An ActiveAdmin skin based on Google's Material Design.
 
 <img src="http://i.imgur.com/kDkGzYe.png">
 
-1. [Installation](#installation)
-2. [Usage](#usage)
-3. [Customization](#customization)
-4. [Contributing](#contributing)
-
 ## Installation
+### Importmap
 
-Add this line to your application's Gemfile:
-
-```ruby
-gem "active_material", github: "vigetlabs/active_material"
-```
-
-And then execute:
-
-```shell
-$ bundle
-```
-
-Or install it yourself as:
+- Add `gem 'active_material'` to `Gemfile` and run `bundle install`
+- Add `import "active_material"` to JS entrypoint (a JS file that is included for activeadmin)
+- Add `@import "active_material";` in your CSS style file (the active_material SCSS files are included in the asset path automatically, but you will need to have SCSS build capabilities, using dartsass-rails or similar)
 
-```shell
-$ gem install active_material
-```
+NOTE: no need to pin the import in your application. That's handled internally by the gem.
 
-## Usage
+### npm
+- `npm install --save active_material` or `yarn add active_material`
+- Add `import "active_material"` to your JS pack file
+- Add `@import "active_material/app/assets/stylesheets/active_material.scss";` to your CSS style file
 
-In `app/assets/stylesheets/active_admin.css.scss`, replace:
+## Options
 
-`@import "active_admin/base";`
+### Change font
 
-with
+By default, this gem will load the Roboto font from google APIs and use it in the SCSS. If you would like to change that behavior, you have a few options:
 
-`@import "active_material";`
+1. If you want to change to another font:
+    - In your application config, set `config.active_material.font_url` to your font url
+    - In your SCSS file, just before `@import "active_material";`, add `$am-font-sans: 'Roboto';`, replacing `Roboto` with your font name.
+2. If you want to disable font loading altogether, you can use `config.active_material.load_font = true`
 
-Additionally, ActiveMaterial comes with an optional JavaScript bundle that adds a few additional features. It should be included right after the active_admin base script.
+### Other customizations
 
-In app/assets/javascripts/active_admin.js, add:
-
-```
-//= require active_material
-```
-
-## Customization
-
-Refer to the [Customization Guide](./docs/customization.md).
+For other customization options, see [customization.md](./docs/customization.md)
 
 ## Contributing
 
-1. Fork it ( https://github.com/[my-github-username]/active_material/fork )
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am "Add some feature"`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create a new Pull Request
-
-### Issue and PR reviews
-
-Another way you can help is by reviewing issues, trying to reproduce bugs, and providing feedback on PRs.
+See [CONTRIBUTING.md](./CONTRIBUTING.md)

data/app/assets/javascripts/active_material/actions-toggle.js

@@ -1,36 +1,38 @@
-$(function() {
-  var actions = $("tbody .col-actions");
+document.addEventListener("DOMContentLoaded", () => {
+  const actions = document.querySelectorAll("tbody .col-actions")
 
   function waitForOutsideClick (el) {
-
-    $("body").on('click.toggle', function(e) {
+    const body = document.querySelector("body")
+    body.addEventListener("click", (e) => {
       if (el.contains(e.currentTarget) === false) {
-        actions.removeClass('active');
-        $("body").off("click.toggle");
+        el.classList.remove('active')
       }
-    });
+    })
   }
 
-  // Make actions focusable
-  actions.attr('tabindex', 0).attr('role', 'button');
+  actions.forEach((action) => {
+    // Make actions focusable
+    action.setAttribute('tabindex', 0)
+    action.setAttribute('role', 'button')
 
-  actions.on('click', function() {
-    $(this).addClass('active');
-    waitForOutsideClick(this);
-  });
+    action.addEventListener('click', () => {
+      action.classList.add('active');
+      waitForOutsideClick(action);
+    })
 
-  actions.on('keydown', function(e) {
-    var space = 32;
-    var enter = 13;
-    var escape = 27;
+    action.addEventListener('keydown', (e) => {
+      const space = 32;
+      const enter = 13;
+      const escape = 27;
 
-    if (e.keyCode == space || e.keyCode == enter) {
-      e.preventDefault();
-      $(this).addClass('active');
-      waitForOutsideClick(this);
-    } else if (e.keyCode == escape) {
-      e.preventDefault();
-      $(this).removeClass('active');
-    }
-  });
-});
+      if (e.keyCode == space || e.keyCode == enter) {
+        e.preventDefault()
+        action.classList.add('active')
+        waitForOutsideClick(action)
+      } else if (e.keyCode == escape) {
+        e.preventDefault()
+        action.classList.remove('active')
+      }
+    })
+  })
+})

data/app/assets/javascripts/active_material.js

@@ -1,4 +1,4 @@
-//= require active_material/fonts
-//= require active_material/actions-toggle
+
+import "active_material/actions-toggle"
 
 document.querySelector('html').className += ' am-js'

data/app/assets/stylesheets/active_material/atoms/type.scss

@@ -7,43 +7,43 @@
 
 /// Applies rules for subheader text.
 @mixin am-type-subheader {
-  @include am-font-size(16);
+  @include am-font-size(16px);
   font-weight: $am-font-weight-regular;
-  line-height: am-sp(24);
+  line-height: am-sp(24px);
   letter-spacing: am-tracking(10);
 }
 
 /// Applies rules for heavier, more emphasized, body text.
 @mixin am-type-body-2 {
-  @include am-font-size(14);
+  @include am-font-size(14px);
   font-weight: $am-font-weight-semi-bold;
-  line-height: am-sp(24);
+  line-height: am-sp(24px);
   letter-spacing: am-tracking(10);
 }
 
 /// Applies rules for standard body text.
 @mixin am-type-body-1 {
-  @include am-font-size(14);
+  @include am-font-size(14px);
   font-weight: $am-font-weight-regular;
-  line-height: am-sp(20);
+  line-height: am-sp(20px);
   letter-spacing: am-tracking(10);
 }
 
 /// Applies rules for caption text.
 @mixin am-type-caption {
-  @include am-font-size(12);
+  @include am-font-size(12px);
   font-style: normal;
   font-weight: $am-font-weight-medium;
   letter-spacing: am-tracking(20);
-  line-height: am-sp(12);
+  line-height: am-sp(12px);
 }
 
 /// Applies rules for button text.
 @mixin am-type-btn {
-  @include am-font-size(14);
+  @include am-font-size(14px);
   font-weight: $am-font-weight-medium;
   letter-spacing: am-tracking(10);
-  line-height: am-sp(12);
+  line-height: am-sp(12px);
   text-transform: uppercase;
 }
 

data/app/assets/stylesheets/active_material/components/sortable.scss

@@ -6,7 +6,7 @@
 ////
 
 /// The icon displayed within a sortable element's drag handle
-$am-sortable-icon: asset-url("active_material/icons/reorder.svg") !default;
+$am-sortable-icon: url('data:image/svg+xml;utf8,<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/> </svg>') !default;
 // The size of the draggable handle
 $am-sortable-handle-size: am-unit(7);
 

data/app/assets/stylesheets/active_material/components/utility_nav.scss

@@ -4,7 +4,7 @@
  */
 
 #utility_nav {
-  background: asset-url("active_material/icons/account_circle.svg") no-repeat;
+  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQ4cHgiIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNCw0QzEyLjk1LDQsNCwxMi45NSw0LDI0czguOTUsMjAsMjAsMjBzMjAtOC45NSwyMC0yMFMzNS4wNSw0LDI0LDR6IE0yNCwxMGMzLjMxMSwwLDYsMi42OSw2LDYgYzAsMy4zMi0yLjY4OSw2LTYsNmMtMy4zMSwwLTYtMi42OC02LTZDMTgsMTIuNjksMjAuNjksMTAsMjQsMTB6IE0yNCwzOC40Yy01LjAxLDAtOS40MS0yLjU2MS0xMi02LjQ0YzAuMDUtMy45Nyw4LjAxLTYuMTYsMTItNi4xNiBzMTEuOTM5LDIuMTksMTIsNi4xNkMzMy40MSwzNS44NCwyOS4wMSwzOC40LDI0LDM4LjR6Ii8+IDwvc3ZnPg==') no-repeat;
   background-size: am-unit(5);
   width: am-unit(5);
   height: am-unit(5);

data/app/assets/stylesheets/active_material/generators/functions.scss

@@ -6,16 +6,7 @@
 /// @param {number} $amount - An integer value, such as 100
 /// @return {number} The amount of letter-spacing in ems.
 @function am-tracking($amount) {
-  @return ($amount / 1000) + 0em;
-}
-
-
-/// Removes units (px, em, etc...) from a given number.
-///
-/// @param {number} $number - The numeric value to strip units from.
-/// @return {number} A unitless number value.
-@function am-strip-units($number) {
-  @return $number / ($number * 0 + 1);
+  @return calc($amount / 1000) + 0em;
 }
 
 
@@ -31,7 +22,7 @@
 /// @param {number} $baseline [16] - The assumed base font size.
 /// @return {number} Scalable pixel value in rems.
 @function am-sp($value, $baseline:16) {
-  @return (am-strip-units($value) / $baseline) + rem;
+  @return calc($value / $baseline) + rem;
 }
 
 

data/app/assets/stylesheets/active_material/generators/mixins.scss

@@ -9,16 +9,6 @@
 /// in older browsers.
 /// @param {number} $size - Font size in pixels
 @mixin am-font-size($size) {
-  font-size: am-strip-units($size) + 0px;
+  font-size: $size;
   font-size: am-sp($size);
 }
-
-/// When using the Webfont.js font loader, only show the loaded font-family
-/// when the loader indicates it is active (via the .wf-active) class.
-@mixin am-web-font($family, $fallback: sans-serif) {
-  font-family: $fallback;
-
-  .wf-active & {
-    @include am-font-family($family);
-  }
-}

data/app/assets/stylesheets/active_material/global/foundation.scss

@@ -21,7 +21,7 @@ body {
 body {
   @include am-type-body-1;
   @include am-color(text);
-  @include am-web-font(sans);
+  @include am-font-family(sans);
   margin: 0;
 }
 

data/app/assets/stylesheets/active_material/prototypes/dialog.scss

@@ -45,7 +45,7 @@ $am-dialog-title-padding: am-unit(4) am-unit(3) am-unit(1) !default;
 
 @mixin am-dialog-close {
   @include am-btn-icon;
-  background: asset_url("active_material/icons/clear.svg") 50% 50% no-repeat;
+  background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.54" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12 L19,6.41z"/> </svg>') 50% 50% no-repeat;
   margin: 0;
   padding: 0;
   position: absolute;

data/app/assets/stylesheets/active_material/prototypes/menu.scss

@@ -39,7 +39,7 @@ $am-menu-carat-size: 5px !default;
   border-color: am-color(primary) transparent transparent;
   content: "";
   height: 0;
-  margin-top: $am-menu-carat-size / -2;
+  margin-top: calc($am-menu-carat-size / -2);
   position: absolute;
   right: -15px;
   top: 50%;

data/app/assets/stylesheets/active_material/prototypes/select.scss

@@ -11,8 +11,8 @@
 }
 
 @mixin am-select-input {
-  @include am-font-size(14);
-  background: #fafafa asset-url("active_material/icons/arrow-dropdown.svg") no-repeat calc(100% - 4px) 50%;
+  @include am-font-size(14px);
+  background: #fafafa url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve"> <path opacity="0.4" d="M5,8l4,4l4-4H5z"/> </svg>') no-repeat calc(100% - 4px) 50%;
   border: 1px solid #d3d3d3;
   border-radius: 3px;
   box-shadow: inset 0 1px 0 rgba(#fff, 0.8);

data/app/assets/stylesheets/active_material/prototypes/snackbar.scss

@@ -31,7 +31,7 @@ $am-snackbar-duration: 9s !default;
   color: $am-snackbar-color;
   font-weight: 300;
   font-size: 14px;
-  line-height: am-sp(20);
+  line-height: am-sp(20px);
   margin: am-unit(2);
   min-width: $am-snackbar-min-width;
   max-width: $am-snackbar-max-width;

data/app/assets/stylesheets/active_material/prototypes/subheader.scss

@@ -5,7 +5,7 @@
  */
 
 @mixin am-subheader {
-  @include am-font-size(14);
+  @include am-font-size(14px);
   @include am-color(secondary-text);
   font-weight: $am-font-weight-medium;
   padding: am-unit(2);

data/app/assets/stylesheets/active_material/prototypes/table.scss

@@ -112,7 +112,7 @@ $am-table-border-color: am-color(divider);
 }
 
 @mixin am-table-cell-actions {
-  background: asset_url("active_material/icons/more.svg") 25% 50% no-repeat;
+  background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path fill="none" d="M0,0h24v24H0V0z"/> <path opacity="0.875" d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2 c1.1,0,2-0.9,2-2C14,10.9,13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"/> </svg>') 25% 50% no-repeat;
   position: relative;
   width: am-unit(6);
 }

data/app/assets/stylesheets/active_material/prototypes/textfield.scss

@@ -5,9 +5,9 @@
 ////
 
 /// Textfield input typography.
-$am-textfield-input-type: normal am-sp(14)/24px $am-font-sans !default;
+$am-textfield-input-type: normal am-sp(14px)/24px $am-font-sans !default;
 /// Textfield label typography.
-$am-textfield-label-type: $am-font-weight-regular am-sp(12)/am-unit(2) $am-font-sans !default;
+$am-textfield-label-type: $am-font-weight-regular am-sp(12px)/am-unit(2) $am-font-sans !default;
 /// Textfield margin.
 $am-textfield-margin: am-unit(1) 0 !default;
 /// Textfield padding.
@@ -19,11 +19,12 @@ $am-textfield-color: rgba(#000, 0.70) !default;
 /// Textfield highlight color.
 $am-textfield-primary: am-color(primary) !default;
 /// Icon for email fields.
-$am-textfield-email-icon: asset-url("active_material/icons/email.svg") !default;
+$am-textfield-email-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.3" enable-background="new    " d="M20,4H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6 C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/> </svg>') !default;
 /// Icon for password fields.
-$am-textfield-password-icon: asset-url("active_material/icons/secret.svg") !default;
+$am-textfield-password-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.4" d="M12.65,10C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6c0,3.311,2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H17v4h4v-4h2 v-4H12.65z M7,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C9,13.1,8.1,14,7,14z"/> </svg>') !default;
 /// Icon for date fields.
-$am-textfield-date-icon: asset-url("active_material/icons/event.svg") !default;
+$am-textfield-date-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.4" d="M17,12h-5v5h5V12z M16,1v2H8V1H6v2H5C3.89,3,3.01,3.9,3.01,5L3,19c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5 c0-1.1-0.9-2-2-2h-1V1H16z M19,19H5V8h14V19z"/> </svg>') !default;
+
 
 @mixin am-textfield {
   color: $am-textfield-color;
@@ -69,7 +70,7 @@ $am-textfield-date-icon: asset-url("active_material/icons/event.svg") !default;
 
 @mixin am-textfield-textarea {
   border-radius: 2px;
-  height: am-sp(am-unit(7));
+  height: am-sp(7px);
   padding: am-unit(1);
 }
 
@@ -79,7 +80,7 @@ $am-textfield-date-icon: asset-url("active_material/icons/event.svg") !default;
 }
 
 @mixin am-textfield-label {
-  @include am-font-size(13);
+  @include am-font-size(13px);
   @include am-color(secondary-text);
   display: block;
   line-height: 16px;

data/app/assets/stylesheets/active_material/prototypes/toolbar.scss

@@ -3,8 +3,8 @@
  * A basic navigation element, primary used for top level navigation
  */
 
-$am-toolbar-base-font-size  : am-sp(14) !default;
-$am-toolbar-title-font-size : am-sp(20) !default;
+$am-toolbar-base-font-size  : am-sp(14px) !default;
+$am-toolbar-title-font-size : am-sp(20px) !default;
 $am-toolbar-keyline-small   : am-unit(7) !default;
 $am-toolbar-keyline-medium  : $am-toolbar-keyline-small + 8px !default;
 

data/app/assets/stylesheets/active_material/values/fonts.scss

@@ -3,13 +3,13 @@
 ////
 
 /// The default sans-serif font
-$am-font-sans: 'RobotoDraft', sans-serif !default;
+$am-font-sans: 'Roboto', sans-serif !default;
 
 /// The weight of bold type
 $am-font-weight-bold: 700;
 
 /// The weight of semi-bold type
-$am-font-weight-semi-bold: 600;
+$am-font-weight-semi-bold: 500;
 
 /// The weight of medium type
 $am-font-weight-medium: 500;

data/app/assets/stylesheets/active_material.scss

@@ -2,7 +2,7 @@
 /// Active Material
 /// A redesign of ActiveAdmin that follows Material Design standards
 /// www.google.com/design/spec/material-design/introduction.html
-/// @author Viget Labs
+/// @author Derek Kniffin
 ////
 
 /// $variables, these should always end with !default
@@ -12,25 +12,77 @@
 @import "active_material/values/fonts";
 @import "active_material/values/breakpoints";
 @import "active_material/values/elevation";
-@import "active_material/values/*";
 
 /// Generators describe functions, mixins, and classes
 /// intended for extension. More or less, they are "style builders"
 /// instead of "style descriptors"
 @import "active_material/generators/functions";
 @import "active_material/generators/mixins";
-@import "active_material/generators/*";
 
 /// Atoms are individual styles to enhance reusability
-@import "active_material/atoms/*";
+@import "active_material/atoms/clearfix";
+@import "active_material/atoms/color";
+@import "active_material/atoms/family";
+@import "active_material/atoms/fill";
+@import "active_material/atoms/hidden";
+@import "active_material/atoms/links";
+@import "active_material/atoms/lists";
+@import "active_material/atoms/paper";
+@import "active_material/atoms/type";
 
 /// Foundational rules that setup the page
 @import "active_material/global/foundation";
-@import "active_material/global/*";
 
 /// Prototypes are collections of mixins that allow for css design
 /// without the constraints of limiting ActiveAdmin selectors
-@import "active_material/prototypes/*";
+@import "active_material/prototypes/actions-footer";
+@import "active_material/prototypes/avatar";
+@import "active_material/prototypes/btn-icon";
+@import "active_material/prototypes/button";
+@import "active_material/prototypes/datepicker";
+@import "active_material/prototypes/dialog";
+@import "active_material/prototypes/menu";
+@import "active_material/prototypes/multiselect";
+@import "active_material/prototypes/select";
+@import "active_material/prototypes/snackbar";
+@import "active_material/prototypes/subheader";
+@import "active_material/prototypes/table";
+@import "active_material/prototypes/tabs";
+@import "active_material/prototypes/tag";
+@import "active_material/prototypes/textfield";
+@import "active_material/prototypes/toolbar";
+@import "active_material/prototypes/underlay";
 
 /// Components describe actual implementation within Active Admin
-@import "active_material/components/*";
+@import "active_material/components/avatar";
+@import "active_material/components/blank_slate";
+@import "active_material/components/breadcrumbs";
+@import "active_material/components/buttons";
+@import "active_material/components/checkbox";
+@import "active_material/components/clearfix";
+@import "active_material/components/comments";
+@import "active_material/components/date-select";
+@import "active_material/components/datepicker";
+@import "active_material/components/dialog";
+@import "active_material/components/dropdown";
+@import "active_material/components/featured-blocks";
+@import "active_material/components/filter";
+@import "active_material/components/flash";
+@import "active_material/components/footer";
+@import "active_material/components/forms";
+@import "active_material/components/header";
+@import "active_material/components/hidden";
+@import "active_material/components/login";
+@import "active_material/components/overlay";
+@import "active_material/components/pagination";
+@import "active_material/components/panels";
+@import "active_material/components/photo_select";
+@import "active_material/components/scopes";
+@import "active_material/components/select";
+@import "active_material/components/sortable";
+@import "active_material/components/structure";
+@import "active_material/components/tables";
+@import "active_material/components/tabs";
+@import "active_material/components/tag";
+@import "active_material/components/title_bar";
+@import "active_material/components/utility_nav";

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "active_material"
+pin "active_material/actions-toggle"

data/lib/active_material/font_loader.rb

@@ -0,0 +1,12 @@
+module ActiveMaterial
+  module FontLoader
+    def build_active_admin_head
+      within super do
+        uri = URI.parse(ActiveMaterial::Rails::Engine.config.active_material.font_url)
+        link(rel: "preconnect", href: uri.origin)
+        link(rel: "preconnect", href: uri.origin, crossorigin: true)
+        link(rel: "stylesheet", href: uri.to_s)
+      end
+    end
+  end
+end

data/lib/active_material/version.rb

@@ -1,3 +1,3 @@
-module ActiveMaterial
-  VERSION = "1.5.2"
-end
+module ActiveMaterial
+  VERSION = "2.1.1"
+end

data/lib/active_material.rb

@@ -1,8 +1,33 @@
 require "active_material/version"
+require "active_material/font_loader"
 
 module ActiveMaterial
   module Rails
     class Engine < ::Rails::Engine
+      config.active_material = ActiveSupport::OrderedOptions.new
+      config.active_material.load_font = true
+      config.active_material.font_url = "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+
+      initializer "active_material" do |app|
+        if app.config.active_material.load_font
+          ActiveAdmin.before_load do
+            ActiveAdmin::Views::Pages::Base.prepend ActiveMaterial::FontLoader
+          end
+        end
+      end
+
+      initializer "active_material.precompile" do |app|
+        app.config.assets.paths << self.root.join("app/javascripts")
+        app.config.assets.paths << self.root.join("app/stylesheets")
+        app.config.assets.precompile << "active_material.js"
+      end
+
+      initializer "active_material.importmap", before: "importmap" do |app|
+        # Skip if importmap-rails is not installed
+        next unless app.config.respond_to?(:importmap)
+
+        app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+      end
     end
   end
 end

data/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "active_material",
+  "version": "2.1.1",
+  "description": "ActiveAdmin skin based on Google's Material Design.",
+  "main": "src/javascripts/active_material.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dkniffin/active_material.git"
+  },
+  "author": "Derek Kniffin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dkniffin/active_material/issues"
+  },
+  "homepage": "https://github.com/dkniffin/active_material#readme",
+  "dependencies": {},
+  "devDependencies": {}
+}

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_material
 version: !ruby/object:Gem::Version
-  version: 1.5.2
+  version: 2.1.1
 platform: ruby
 authors:
-- Nate Hunzaker
-- David Eisinger
+- Derek Kniffin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-18 00:00:00.000000000 Z
+date: 2024-07-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -55,28 +54,15 @@ dependencies:
         version: '0'
 description: ActiveAdmin skin based on Google's Material Design.
 email:
-- nate.hunzaker@viget.com
-- david.eisinger@viget.com
+- derek.kniffin@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
-- app/assets/images/active_material/icons/account_circle.svg
-- app/assets/images/active_material/icons/arrow-dropdown.svg
-- app/assets/images/active_material/icons/arrow_down.svg
-- app/assets/images/active_material/icons/clear.svg
-- app/assets/images/active_material/icons/create.svg
-- app/assets/images/active_material/icons/email.svg
-- app/assets/images/active_material/icons/event.svg
-- app/assets/images/active_material/icons/more.svg
-- app/assets/images/active_material/icons/reorder.svg
-- app/assets/images/active_material/icons/search.svg
-- app/assets/images/active_material/icons/secret.svg
 - app/assets/javascripts/active_material.js
 - app/assets/javascripts/active_material/actions-toggle.js
-- app/assets/javascripts/active_material/fonts.js
 - app/assets/stylesheets/active_material.scss
 - app/assets/stylesheets/active_material/atoms/clearfix.scss
 - app/assets/stylesheets/active_material/atoms/color.scss
@@ -144,8 +130,11 @@ files:
 - app/assets/stylesheets/active_material/values/elevation.scss
 - app/assets/stylesheets/active_material/values/fonts.scss
 - app/assets/stylesheets/active_material/values/units.scss
+- config/importmap.rb
 - lib/active_material.rb
+- lib/active_material/font_loader.rb
 - lib/active_material/version.rb
+- package.json
 homepage: ''
 licenses:
 - MIT
@@ -165,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.3.26
 signing_key:
 specification_version: 4
 summary: ActiveAdmin skin based on Google's Material Design.

data/app/assets/images/active_material/icons/account_circle.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
-<path fill="#FFFFFF" d="M24,4C12.95,4,4,12.95,4,24s8.95,20,20,20s20-8.95,20-20S35.05,4,24,4z M24,10c3.311,0,6,2.69,6,6
-	c0,3.32-2.689,6-6,6c-3.31,0-6-2.68-6-6C18,12.69,20.69,10,24,10z M24,38.4c-5.01,0-9.41-2.561-12-6.44c0.05-3.97,8.01-6.16,12-6.16
-	s11.939,2.19,12,6.16C33.41,35.84,29.01,38.4,24,38.4z"/>
-</svg>

data/app/assets/images/active_material/icons/arrow-dropdown.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
-<path opacity="0.4" d="M5,8l4,4l4-4H5z"/>
-</svg>

data/app/assets/images/active_material/icons/arrow_down.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.5" d="M7.41,7.84L12,12.42l4.59-4.58L18,9.25l-6,6l-6-6L7.41,7.84z"/>
-</svg>

data/app/assets/images/active_material/icons/clear.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.54" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12
-	L19,6.41z"/>
-</svg>

data/app/assets/images/active_material/icons/create.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.54" d="M3,17.25V21h3.75L17.811,9.94l-3.75-3.75L3,17.25z M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34
-	c-0.39-0.39-1.021-0.39-1.41,0l-1.83,1.83l3.75,3.75L20.71,7.04z"/>
-</svg>

data/app/assets/images/active_material/icons/email.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.3" enable-background="new    " d="M20,4H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6
-	C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/>
-</svg>

data/app/assets/images/active_material/icons/event.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.4" d="M17,12h-5v5h5V12z M16,1v2H8V1H6v2H5C3.89,3,3.01,3.9,3.01,5L3,19c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5
-	c0-1.1-0.9-2-2-2h-1V1H16z M19,19H5V8h14V19z"/>
-</svg>

data/app/assets/images/active_material/icons/more.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path fill="none" d="M0,0h24v24H0V0z"/>
-<path opacity="0.875" d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2
-	c1.1,0,2-0.9,2-2C14,10.9,13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"/>
-</svg>

data/app/assets/images/active_material/icons/reorder.svg

@@ -1,4 +0,0 @@
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/>
-</svg>

data/app/assets/images/active_material/icons/search.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.54" d="M15.5,14h-0.79l-0.28-0.27C15.41,12.59,16,11.11,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5S5.91,16,9.5,16
-	c1.61,0,3.09-0.59,4.23-1.57L14,14.71v0.79l5,4.99L20.49,19L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5
-	S11.99,14,9.5,14z"/>
-</svg>

data/app/assets/images/active_material/icons/secret.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<path opacity="0.4" d="M12.65,10C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6c0,3.311,2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H17v4h4v-4h2
-	v-4H12.65z M7,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C9,13.1,8.1,14,7,14z"/>
-</svg>

data/app/assets/javascripts/active_material/fonts.js

@@ -1,21 +0,0 @@
-/**
- * Fonts.js
- * Material design uses the Roboto Family. This script is responsible
- * for pulling it in asynchronously.
- *
- * http://www.google.com/design/spec/style/typography.html#typography-typeface
- */
-
-WebFontConfig = {
-  google: { families: [ 'RobotoDraft:regular,medium,bold,italic:latin' ] }
-};
-
-(function() {
-  var wf = document.createElement('script');
-  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-  wf.type = 'text/javascript';
-  wf.async = 'true';
-  var s = document.getElementsByTagName('script')[0];
-  s.parentNode.insertBefore(wf, s);
-})();