activeadmin_materialize_theme 0.1.4 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0335e4467d41b420ae51d5f670bd8c112b2caf2a4f6b59d3e417c9802db976b8
-  data.tar.gz: 643e6978620b3f680118669d61bc25488e5f60b01475ef690c0268492eaf3fe7
+  metadata.gz: 2d4a0962cd3c5fca64ec8d18faa9594c718ab9ba80e146771afc8af2e52f658a
+  data.tar.gz: 0ab1b5ff558625a74bc6425e2bcd1e0a888e3112acae49fd59daa8fc930697d3
 SHA512:
-  metadata.gz: 1b4d6a75e3967b1447be97167f0de47342cccb0ce707f8e94b99859c8c2fcaf641781fa69f30a52d5a8aba9e9a673069126290e58bbf437584cf26533c5084e0
-  data.tar.gz: c44687eae71031414fc9d0481a4f0d86f75c203402bbf0ccad29379b2c48317d4699ab7f25c278e58c76421f169d85146041339a4ace31689e41d1cb1429bb5d
+  metadata.gz: 5e28637e8587c48759e6e3670f13ced06d8ffe56be49a4780acb2027e34ac523139c3f838768f4207ef469df18dff7939d2c21e19271c352f4cc4dea230806b7
+  data.tar.gz: 2256e2d5e4f2a3a55bd4495386e78fb6b18e6786b0f1bd5e546c5e18c039fe1b331099f50295c4f371d05e5dac3edaabb0d51937a712f1e14519485c2c02bbdf

data/README.md

@@ -1,9 +1,11 @@
-# Active Admin Materialize Theme [![Gem Version](https://badge.fury.io/rb/activeadmin_materialize_theme.svg)](https://badge.fury.io/rb/activeadmin_materialize_theme)
-A theme for Active Admin based on Materialize framework.
+# Active Admin Materialize Theme
+[![Gem Version](https://badge.fury.io/rb/activeadmin_materialize_theme.svg)](https://badge.fury.io/rb/activeadmin_materialize_theme) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_materialize_theme.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_materialize_theme)
 
-> NOTICE: this is still a beta version
+A theme for Active Admin based on Materialize framework.
 
 ## Installation
+Turbolinks is not supported at the moment.
+
 - Add to the Gemfile: `gem 'activeadmin_materialize_theme'` (and execute `bundle`)
 - In _app/assets/stylesheets/active_admin.scss_) leave only this import line:
 ```scss
@@ -18,16 +20,20 @@ A theme for Active Admin based on Materialize framework.
 //= require activeadmin_materialize_theme
 ```
 
-## Screenshot
-![form](extra/screenshot.png)
+## Screenshots
+Index page (with scopes and filters):
+![index_page](extra/screenshot.png)
+
+Edit page (with a nested form):
+![edit_page](extra/screenshot2.png)
 
 ## Do you like it? Star it!
-If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
+If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other [Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
 
-Take a look at [other Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
+Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
 
 ## Contributors
-[Mattia Roccoberton](http://blocknot.es): author
+- [Mattia Roccoberton](http://blocknot.es): author
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -1,34 +1,16 @@
 # frozen_string_literal: true
 
-begin
-  require 'bundler/setup'
-rescue LoadError
-  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
-end
-
-require 'rdoc/task'
-
-RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'ActiveadminMaterializeTheme'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.md')
-  rdoc.rdoc_files.include('lib/**/*.rb')
-end
-
-APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
-load 'rails/tasks/engine.rake'
-
-load 'rails/tasks/statistics.rake'
-
 require 'bundler/gem_tasks'
 
-require 'rake/testtask'
+begin
+  require 'rspec/core/rake_task'
+
+  RSpec::Core::RakeTask.new(:spec) do |t|
+    # t.ruby_opts = %w[-w]
+    t.rspec_opts = ['--color', '--format documentation']
+  end
 
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
-  t.verbose = false
+  task default: :spec
+rescue LoadError
+  puts '! LoadError: no RSpec available'
 end
-
-task default: :test

data/app/assets/javascripts/activeadmin_materialize_theme.js

@@ -1,10 +1,12 @@
 //= require ./materialize/bin/materialize
 
 (function () {
+  'use strict'
+
   // --- functions -------------------------------------------------------------
-  function addClassToElements(class_name, elements) {
+  function addClassToElements(elements, class_name) {
     document.querySelectorAll(elements).forEach(
-      (el) => el.className += ' ' + class_name
+      (el) => el.classList.add(class_name)
     )
   }
 
@@ -13,55 +15,93 @@
       const checkbox = el.querySelector('[type="checkbox"]')
       const label = document.createElement('label')
       const span = document.createElement('span')
+      span.className = 'aa_mt_checkbox'
       label.appendChild(span)
       el.appendChild(label)
       label.insertBefore(checkbox, span)
     })
+    const selector = 'body.active_admin .resource_selection_toggle_cell >label, body.active_admin .choices >label'
+    document.querySelectorAll(selector).forEach((el) => prepareCheckbox(el))
   }
 
   function initDropdowns() {
     let cnt = 0;
     document.querySelectorAll('body.active_admin .dropdown_menu').forEach((el) => {
       cnt += 1
-      button = el.querySelector('.dropdown_menu_button')
+      const button = el.querySelector('.dropdown_menu_button')
       button.className += ' dropdown-trigger'
       button.setAttribute('data-target', `#dropdown-${cnt}`)
       button.setAttribute('href', 'Javascript:void(0)')
-      list_wrapper = el.querySelector('.dropdown_menu_list_wrapper')
+      const list_wrapper = el.querySelector('.dropdown_menu_list_wrapper')
       list_wrapper.className += ' dropdown-content'
       list_wrapper.setAttribute('id', `#dropdown-${cnt}`)
     })
   }
 
   function initFormFields() {
-    addClassToElements('input-field', 'body.active_admin .formtastic .input')
-    addClassToElements('materialize-textarea', 'body.active_admin .formtastic textarea')
-    document.querySelectorAll('body.active_admin .input-field.boolean > label').forEach((el) => {
-      const text = el.lastChild
-      if (text.nodeType == Node.TEXT_NODE) {
-        const span = document.createElement('span')
-        span.innerHTML = text.textContent
-        text.replaceWith(span)
-      }
+    addClassToElements('body.active_admin .formtastic .input', 'input-field')
+    addClassToElements('body.active_admin .formtastic textarea', 'materialize-textarea')
+    document.querySelectorAll('body.active_admin .input-field.boolean > label').forEach((el) => prepareCheckbox(el))
+  }
+
+  function initNestedEditors() {
+    document.querySelectorAll('body.active_admin .has_many_container').forEach((el) => {
+      const observer = new MutationObserver((_mutationsList, _observer) => {
+        initFormFields()
+      })
+      observer.observe(el, { childList: true, subtree: true });
+    })
+  }
+
+  function initNestedMenu() {
+    let nested_menu_cnt = 0
+    addClassToElements('body.active_admin .menu_item.has_nested >ul', 'dropdown-content')
+    document.querySelectorAll('.menu_item.has_nested').forEach((el) => {
+      nested_menu_cnt += 1
+      el.childNodes.forEach((node) => {
+        if(node.tagName == 'A') {
+          node.className += ' dropdown-trigger'
+          node.setAttribute('data-target', `nested-menu-${nested_menu_cnt}`)
+        }
+        else if(node.tagName == 'UL') {
+          node.setAttribute('id', `nested-menu-${nested_menu_cnt}`)
+        }
+      })
     })
   }
 
+  function initTabs() {
+    document.querySelectorAll('body.active_admin .formtastic >.tabs').forEach(
+      (el) => el.classList.remove('tabs')
+    )
+    addClassToElements('body.active_admin .formtastic .nav-tabs', 'tabs')
+    addClassToElements('body.active_admin .formtastic .nav-tabs >li', 'tab')
+  }
+
+  function prepareCheckbox(el) {
+    const text = el.lastChild
+    if (text.nodeType == Node.TEXT_NODE) {
+      const span = document.createElement('span')
+      span.innerHTML = text.textContent
+      span.className = 'aa_mt_checkbox'
+      text.replaceWith(span)
+    }
+  }
+
   function setup() {
-    addClassToElements('no-autoinit', 'body.active_admin #header >.tabs')
+    addClassToElements('body.active_admin #header >.tabs', 'no-autoinit')
     initCheckboxes()
     initDropdowns()
     initFormFields()
+    initNestedMenu()
+    initTabs()
     M.AutoInit()
+    initNestedEditors()
   }
 
   // --- events ----------------------------------------------------------------
-  document.addEventListener('DOMContentLoaded', () => {
-    setup()
-    document.querySelectorAll('body.active_admin .has_many_container').forEach((el) => {
-      const observer = new MutationObserver((_mutationsList, _observer) => {
-        initFormFields()
-      })
-      observer.observe(el, { childList: true, subtree: true });
-    })
-  })
+  document.addEventListener('DOMContentLoaded', setup)
+
+  // TODO: check theme loading with Turbolinks
+  // document.addEventListener('turbolinks:load', setup)
 })()

data/app/assets/stylesheets/activeadmin_materialize_theme/base.scss

@@ -10,17 +10,25 @@ body.active_admin {
     @extend .btn;
   }
 
+  .aa_mt_checkbox {
+    padding-left: 2.5rem;
+    padding-right: 1.5rem;
+    vertical-align: middle;
+  }
+
   .col-selectable {
     text-align: center;
   }
 
   .dropdown_menu_button {
-    border: 1px solid #ccc;
-    padding: 0.5rem 0.6rem;
+    @extend .btn, .btn-small;
+
+    vertical-align: middle;
 
     &::after {
       content: ' ≡';
-      font-size: 2rem;
+      font-size: 1.8rem;
+      padding-left: 0.5rem;
     }
   }
 
@@ -57,6 +65,29 @@ body.active_admin {
     }
   }
 
+  .pagination {
+    background: transparent;
+    box-shadow: none;
+    color: #000;
+    height: auto;
+    line-height: initial;
+    margin-bottom: 1.5rem;
+    text-align: center;
+
+    a {
+      color: $link-color;
+    }
+
+    >span {
+      display: inline-block;
+      padding: 0.5rem;
+    }
+
+    >.current {
+      background: #eee;
+    }
+  }
+
   .sorted-asc::after {
     content: ' ↑';
   }
@@ -65,11 +96,6 @@ body.active_admin {
     content: ' ↓';
   }
 
-  .resource_selection_cell span {
-    padding: 0 1rem;
-    vertical-align: middle;
-  }
-
   .ui-dialog {
     @extend .modal;
 
@@ -103,6 +129,12 @@ body.active_admin {
     &.without_sidebar #main_content_wrapper {
       @extend .col, .s12;
     }
+
+    >#sidebar {
+      @extend .col, .s3;
+
+      padding-left: 0 !important;
+    }
   }
 
   #dashboard_default_message {
@@ -111,6 +143,16 @@ body.active_admin {
     text-align: center;
   }
 
+  #main_content {
+    @extend .card;
+
+    margin-top: 0.75rem;
+
+    >.panel {
+      padding: 2rem !important;
+    }
+  }
+
   #wrapper {
     @extend .container;
 

data/app/assets/stylesheets/activeadmin_materialize_theme/components/form.scss

@@ -6,13 +6,17 @@ body.active_admin {
   }
 
   .formtastic {
-    padding: 1rem;
+    padding: 2rem;
 
     fieldset {
-      @extend .row;
-
       border: none;
       margin: 0;
+      padding: 0;
+    }
+
+    h3 {
+      font-size: 2.2rem;
+      margin: 0.4rem 0 0 0;
     }
 
     .actions ol, .inputs ol {
@@ -22,8 +26,7 @@ body.active_admin {
     }
 
     .actions {
-      margin-top: 1.4rem;
-      padding: 0;
+      margin: 2rem 0 0.5rem 0 !important;
 
       a {
         @extend .btn;
@@ -57,6 +60,15 @@ body.active_admin {
       }
     }
 
+    >.errors {
+      @extend .z-depth-2;
+
+      background: color('red', 'base');
+      color: #fff;
+      margin: 0.7rem 0;
+      padding: 1rem;
+    }
+
     .field_with_errors {
       >input {
         border-bottom: 1px solid color('materialize-red', 'base');
@@ -72,19 +84,13 @@ body.active_admin {
       margin: 0;
     }
 
-    >.inputs {
-      @extend .card;
-
-      padding-bottom: 1rem;
-      padding-top: 3rem;
+    .inputs {
       position: relative;
+      margin-bottom: 2rem;
 
       >legend {
         display: block;
-        font-size: 1.8rem;
-        left: 1rem;
-        position: absolute;
-        top: 1rem;
+        font-size: 2.2rem;
       }
     }
 
@@ -111,17 +117,12 @@ body.active_admin {
     }
 
     .has_many_container {
-      @extend .card;
+      @extend .z-depth-1;
 
       margin: 1.4rem -0.7rem 0 -0.8rem;
-      padding: 1rem;
+      padding: 2rem;
       position: relative;
 
-      >h3 {
-        font-size: 2.2rem;
-        margin: 0.4rem 0 0 0;
-      }
-
       >.has_many_add {
         background-color: color('cyan', 'base');
         margin-top: 0.4rem;
@@ -132,9 +133,14 @@ body.active_admin {
       }
 
       >.inputs {
-        margin: 0;
-        padding: 0.8rem;
+        margin-bottom: 2rem;
       }
     }
+
+    .nav-tabs {
+      @extend .z-depth-1;
+
+      margin-bottom: 2rem;
+    }
   }
 }

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

@@ -12,6 +12,14 @@ body.active_admin .header {
     display: inline-block;
   }
 
+  .dropdown-content {
+    background: darken($header-bg-color, 10%);
+
+    a:hover {
+      background: darken($header-bg-color, 10%);
+    }
+  }
+
   #site_title {
     @extend .col, .s3;
 

data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_index.scss

@@ -22,11 +22,37 @@ body.active_admin.index {
       padding-bottom: 0.3rem !important;
       padding-top: 0.3rem !important;
     }
+
+    .aa_mt_checkbox {
+      padding: 0 1rem !important;
+    }
   }
 
-  .paginated_collection {
-    @extend .row;
+  .index_as_grid {
+    >table {
+      display: block;
+
+      tbody {
+        display: block;
+      }
+
+      tr {
+        display: flex;
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+  }
 
+  .index_as_block {
+    .resource_selection_cell {
+      display: inline-block;
+    }
+  }
+
+  .paginated_collection {
     margin-bottom: 0;
   }
 
@@ -35,10 +61,39 @@ body.active_admin.index {
   }
 
   .table_tools {
-    @extend .row;
-
     >.batch_actions_selector {
-      @extend .col, .s12;
+      display: inline-block;
+      margin-bottom: 1rem;
+      margin-right: 2rem;
+    }
+
+    >.scopes {
+      display: inline-block;
+    }
+
+    .table_tools_segmented_control {
+      border: 1px solid #ddd;
+      border-radius: 0.5rem;
+      display: inline-block;
+      margin: 0 0 0 2rem;
+      vertical-align: middle;
+
+      >li {
+        display: inline-block;
+        padding: 0.2rem 1rem;
+
+        &:first-child {
+          border-radius: 0.6rem 0 0 0.6rem;
+        }
+
+        &:last-child {
+          border-radius: 0 0.6rem 0.6rem 0;
+        }
+
+        &.selected {
+          background: #eee;
+        }
+      }
     }
   }
 
@@ -47,9 +102,7 @@ body.active_admin.index {
   }
 
   #index_footer {
-    @extend .col, .s12;
-
-    margin-top: 1rem;
+    margin-top: 1.5rem;
 
     .download_links {
       display: inline-block;
@@ -61,16 +114,6 @@ body.active_admin.index {
     }
   }
 
-  #main_content {
-    @extend .card;
-  }
-
-  #sidebar {
-    @extend .col, .s3;
-
-    padding-left: 0 !important;
-  }
-
   &.admin_comments {
     .paginated_collection {
       padding: 0 1.5rem 1.5rem 1.5rem;

data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_show.scss

@@ -1,11 +1,10 @@
 body.active_admin.show {
   .active_admin_comment {
     margin-top: 1rem;
+    padding: 0;
   }
 
   #main_content {
-    @extend .card;
-
     .attributes_table {
       tr >th {
         width: 30rem;
@@ -13,6 +12,7 @@ body.active_admin.show {
 
       td, th {
         padding: 0.5rem;
+        word-break: break-word;
       }
     }
 

data/app/assets/stylesheets/activeadmin_materialize_theme/components/sidebar.scss

@@ -28,6 +28,8 @@ body.active_admin .sidebar {
   .sidebar_section {
     @extend .card;
 
+    margin-top: 0.75rem;
+
     >.panel_contents {
       @extend .card-content;
 

data/lib/activeadmin_materialize_theme.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require 'activeadmin'
 require 'activeadmin_materialize_theme/engine'
 
 module ActiveadminMaterializeTheme

data/lib/activeadmin_materialize_theme/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ActiveadminMaterializeTheme
-  VERSION = '0.1.4'
+  VERSION = '0.2.6'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_materialize_theme
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.6
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-10 00:00:00.000000000 Z
+date: 2021-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -24,6 +24,160 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: activestorage
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.33'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.33'
+- !ruby/object:Gem::Dependency
+  name: pry
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.13'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+- !ruby/object:Gem::Dependency
+  name: rspec_junit_formatter
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.4'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.90'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.90'
+- !ruby/object:Gem::Dependency
+  name: sassc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+- !ruby/object:Gem::Dependency
+  name: selenium-webdriver
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.142'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.142'
+- !ruby/object:Gem::Dependency
+  name: sprockets-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
 description: A theme for Active Admin based on Materialize framework.
 email:
 - mat@blocknot.es
@@ -124,7 +278,7 @@ files:
 - lib/activeadmin_materialize_theme.rb
 - lib/activeadmin_materialize_theme/engine.rb
 - lib/activeadmin_materialize_theme/version.rb
-homepage: https://blocknot.es
+homepage: https://github.com/blocknotes/activeadmin_materialize_theme
 licenses:
 - MIT
 metadata: {}