active_material 1.4.2 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 9ce29513f9cdd29ec8931ecd0e11d747a966f1d2
-  data.tar.gz: fb36f571cb37af43376ba9e99b09c6ca98636232
+SHA256:
+  metadata.gz: 5d199f290d9505ddc520ac11343fd3dd45a174608691f30c50f6d53da7f94f81
+  data.tar.gz: a217138c6d68dcd47787ef2f9053baac7bfa1960d829de626d66280025c3d19d
 SHA512:
-  metadata.gz: 3f622eedd22b4676e398095aaa1e8ddd4cf33c372ef33ff23cc76516d8d5f32e8677af10f4cd9c7944484cae8c92b744ebca64a5ed384b4531adbd60a5e89a8e
-  data.tar.gz: 6903a9829ad94b5af962690bd4d053e00150f51e382f901318ce65f0fcc7144cd1ce01fcf74a6a2875965eefe78cc57c4e758af5cb4e0d0f6b6b924fe7e0fa0c
+  metadata.gz: 1f68d12ea2b2a4672184b69ab562593e585fd521ba939c08a4c68622c84f9f56be7522fcb628345294d924e93634cd15306b1324572bf9fc05100ac27b75ee0f
+  data.tar.gz: e32ee1cb4376485d5fcec9878a507b841f74524e8b2938bf20f0d162218d396ee78b1d23d7b2fa1d84768922769d362f3e2740892eca6c9224d88c4a8d654313

data/README.md

@@ -4,57 +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", git: "git@github.com:vigetlabs/active_material.git"
-```
-
-And then execute:
-
-```shell
-$ bundle
-```
+- 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)
 
-Or install it yourself as:
+NOTE: no need to pin the import in your application. That's handled internally by the gem.
 
-```shell
-$ gem install active_material
-```
+### 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
 
-## Usage
+## Options
 
-In `app/assets/stylesheets/active_admin.css.scss`, replace:
+### Change font
 
-`@import "active_admin/base";`
+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:
 
-with
+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`
 
-`@import "active_material";`
+### Other customizations
 
-## 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
-
-***
-
-<a href="http://code.viget.com">
-  <img src="http://code.viget.com/github-banner.png" alt="Code At Viget">
-</a>
-
-Visit [code.viget.com](http://code.viget.com) to see more projects from [Viget.](https://viget.com)
+See [CONTRIBUTING.md](./CONTRIBUTING.md)

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

@@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const actions = document.querySelectorAll("tbody .col-actions")
+
+  function waitForOutsideClick (el) {
+    const body = document.querySelector("body")
+    body.addEventListener("click", (e) => {
+      if (el.contains(e.currentTarget) === false) {
+        el.classList.remove('active')
+      }
+    })
+  }
+
+  actions.forEach((action) => {
+    // Make actions focusable
+    action.setAttribute('tabindex', 0)
+    action.setAttribute('role', 'button')
+
+    action.addEventListener('click', () => {
+      action.classList.add('active');
+      waitForOutsideClick(action);
+    })
+
+    action.addEventListener('keydown', (e) => {
+      const space = 32;
+      const enter = 13;
+      const escape = 27;
+
+      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 +1,4 @@
-//= require active_material/fonts
+
+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);
-  font-weight: 400;
-  line-height: am-sp(24);
+  @include am-font-size(16px);
+  font-weight: $am-font-weight-regular;
+  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);
-  font-weight: 600;
-  line-height: am-sp(24);
+  @include am-font-size(14px);
+  font-weight: $am-font-weight-semi-bold;
+  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);
-  font-weight: 400;
-  line-height: am-sp(20);
+  @include am-font-size(14px);
+  font-weight: $am-font-weight-regular;
+  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: 500;
+  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);
-  font-weight: 500;
+  @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/blank_slate.scss

@@ -8,7 +8,7 @@
   @include am-color(tertiary-text);
   @include am-type-body-1;
   @include am-type-smooth;
-  font-weight: 600;
+  font-weight: $am-font-weight-semi-bold;
   padding: am-unit(3) am-unit(2);
   text-align: center;
 }

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

@@ -8,7 +8,7 @@
 }
 
 .button,
-.cancel a {
+.cancel > a {
   @include am-btn;
 }
 

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

@@ -0,0 +1,28 @@
+/**
+ * Comments
+ * Active Admin comments
+ */
+
+div.active_admin_comment {
+  margin: 0 16px;
+
+  & + & {
+    border-top: 1px solid am-color(divider);
+    padding-top: am-unit(2);
+  }
+}
+
+.active_admin_comment_meta {
+  @include am-color(secondary-text);
+  @include am-type-caption;
+}
+
+.comments {
+  .pagination_information {
+    margin: 16px;
+  }
+
+  .empty {
+    margin: 16px;
+  }
+}

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

@@ -25,31 +25,50 @@ fieldset.inputs {
 
   &.string input,
   &.stringish input,
-  &.numberic input {
+  &.numeric input {
     @include am-textfield-input;
+
+    &[disabled="disabled"] {
+      @include am-textfield-input-disabled;
+    }
   }
 
   &.email input {
     @include am-textfield-input-email;
+
+    &[disabled="disabled"] {
+      @include am-textfield-input-disabled;
+    }
   }
 
   &.password input {
     @include am-textfield-input-password;
+
+    &[disabled="disabled"] {
+      @include am-textfield-input-disabled;
+    }
   }
 
   &.datepicker input {
     @include am-textfield-input-date;
+
+    &[disabled="disabled"] {
+      @include am-textfield-input-disabled;
+    }
   }
 
   &.text textarea {
     @include am-textfield-input;
     @include am-textfield-textarea;
+
+    &[disabled="disabled"] {
+      @include am-textfield-input-disabled;
+    }
   }
 
   select + input {
     margin-top: am-unit(2);
   }
-
 }
 
 .field_with_errors input {

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

@@ -4,7 +4,7 @@
  * the top of the page.
  */
 
-.header {
+#header {
   @include am-toolbar;
   @include am-toolbar-primary;
   padding-right: am-unit(8);

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

@@ -8,20 +8,38 @@
   clear: both;
 
   .pagination_information,
-  .download_links {
+  .download_links,
+  .pagination_per_page {
     @include am-type-caption;
     padding: am-unit(2);
   }
 
-  .pagination_information {
+  .pagination_information,
+  .pagination_per_page {
     float: left;
   }
 
+  .pagination_information {
+    clear: left;
+  }
+
   .download_links {
     line-height: am-unit(3);
     float: right;
     text-align: right;
   }
+
+  .pagination_per_page {
+    border-bottom: 1px solid #efefef;
+    padding: am-unit(1) am-unit(2);
+
+    select {
+      @include am-select-input;
+
+      height: 34px;
+      line-height: 30px;
+    }
+  }
 }
 
 

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

@@ -27,6 +27,15 @@ body.update #main_content > form {
   }
 }
 
+.admin_dashboard #wrapper #main_content{
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  .columns{
+    display: flex;
+  }
+}
+
 .panel {
   & + & {
     margin-top: 16px;

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

@@ -12,7 +12,7 @@
 
 .scope {
   font-size: 13px;
-  font-weight: 500;
+  font-weight: $am-font-weight-medium;
   margin-left: am-unit(2);
 
   a {

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

@@ -2,6 +2,7 @@
  * Basic Selects
  */
 
+.country,
 .select,
 .polymorphic_select {
 
@@ -9,6 +10,9 @@
     @include am-select-input;
   }
 
+  select[disabled="disabled"] {
+    @include am-select-input-disabled;
+  }
 }
 
 select[multiple] {

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/tables.scss

@@ -55,31 +55,39 @@
     }
   }
 
-  td.col-actions {
-    @include am-table-cell-actions;
-
-    .table_actions {
-      @include am-menu-list;
-      @include am-menu-list-right;
-      top: 50%;
-      margin-top: am-unit(-2);
-      margin-right: am-unit(2);
-
-      a {
-        @include am-menu-link;
-      }
-    }
+  // Styles for non-js actions
+  td.col-actions a {
+    padding: 0 4px
+  }
+
+  .am-js & {
+
+    td.col-actions {
+      @include am-table-cell-actions;
 
-    &:hover,
-    &:focus {
       .table_actions {
-        @include am-menu-list-open;
+        @include am-menu-list;
+        @include am-menu-list-right;
+        top: 50%;
+        margin-top: am-unit(-2);
+        margin-right: am-unit(2);
 
         a {
-          @include am-menu-item-open;
+          @include am-menu-link;
         }
       }
-    }
 
+      &:hover,
+      &.active {
+        .table_actions {
+          @include am-menu-list-open;
+
+          a {
+            @include am-menu-item-open;
+          }
+        }
+      }
+
+    }
   }
 }

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

@@ -7,11 +7,11 @@
   @include am-tabs;
   @include am-tabs-list;
 
-  > li {
+  > li.ui-tabs-tab {
     @include am-tabs-list-item;
   }
 
-  > li > a {
+  > li.ui-tabs-tab > a {
     @include am-tabs-btn;
   }
 

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);
@@ -17,6 +17,7 @@
   // Increase the hit region
   &:before {
     content: "";
+    cursor: pointer;
     position: absolute;
     width: 90px;
     height: 50px;
@@ -28,57 +29,49 @@
     color: #333;
   }
 
-  #current_user,
-  #logout {
+  > li {
+    &:first-child {
+      margin-top: 45px;
+
+      &:before {
+        content: "";
+        border: 7px solid transparent;
+        border-bottom-color: #fff;
+        top: -14px;
+        right: 12px;
+        position: absolute;
+      }
+    }
+
+    border-top: 1px solid #d9d9d9;
+    box-shadow: 0 1px 2px rgba(#000, 0.22);
+    width: 200px;
+    float: right;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    background: #efefef;
+    text-align: right;
     clip: rect(0, 0, 0, 0);
     opacity: 0;
+    visibility: hidden;
     transition: 0.28s all;
-  }
+    position: relative;
 
-  &:hover {
-    #current_user,
-    #logout {
-      clip: initial;
-      opacity: 1;
+    a {
+      @include am-btn;
     }
   }
-}
 
-#current_user {
-  box-shadow: 0 1px 2px rgba(#000, 0.22);
-  background: #fff;
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  padding: 16px;
-  height: 56px;
-  width: 200px;
-  position: absolute;
-  right: 0;
-  top: 48px;
-
-  &:before {
-    content: "";
-    border: 7px solid transparent;
-    border-bottom-color: #fff;
-    top: -14px;
-    right: 12px;
-    position: absolute;
+  #current_user {
+    background: #fff;
+    text-align: center;
   }
-}
-
-#logout {
-  border-top: 1px solid #d9d9d9;
-  box-shadow: 0 1px 2px rgba(#000, 0.22);
-  position: absolute;
-  width: 200px;
-  right: 0;
-  top: 104px;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  background: #efefef;
-  text-align: right;
 
-  a {
-    @include am-btn;
+  &:hover {
+    > li {
+      clip: initial;
+      opacity: 1;
+      visibility: visible;
+    }
   }
 }

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/button.scss

@@ -20,7 +20,7 @@ $am-btn-active-color: rgba(#999, 0.4) !default;
   text-transform: uppercase;
   transition: 0.25s all;
   user-select: none;
-  vertical-align: center;
+  vertical-align: middle;
 
   &:focus {
     outline: none;
@@ -37,7 +37,7 @@ $am-btn-active-color: rgba(#999, 0.4) !default;
   @include am-fill(primary);
   @include am-color(white);
   box-shadow: 0 0 2px rgba(#000, 0.12);
-  font-weight: 600;
+  font-weight: $am-font-weight-semi-bold;
   min-width: $am-btn-min-width;
 
   &:focus,