arctic_admin 3.3.0 → 4.0.0.alpha

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6941e04a5fe35cb8dfb68e36db36ab2099a29c556b2bfb439442c87387c6827
-  data.tar.gz: d6723be6be3dbbf41c762bf864408a902c989229ad6ea527a6619094b4f04d28
+  metadata.gz: d80f79149e44a52c1d586e425e82313f2d83aea8455d59eaba12a72fb94abc30
+  data.tar.gz: ff9b250756327bb54eb0ee374d4cacb0a9cb7b6090da861ee85beceda2534f62
 SHA512:
-  metadata.gz: 3f4305722258dc1735b389db444cb32cf987818b6ee9e110353b814a4245a2930ac234c714f147dd4dab4fc73734e0f6e69bcff4c3c4b892bd165afbf07be1f9
-  data.tar.gz: 25ea935c291845e8d52ec6e34689785ca1e13866e6b4a4994ac68129bda1b9311ea47f1f46a628ef2305ad6f5ee6b928d4bda40494d1461476a6d965a382f3db
+  metadata.gz: 6844d6c0fbd22ce592aa64c9f5f27e93033564f44bd7856a3e9d2f3f0ab52ffb5c8a44c106ec9eac85e7dd50c6213649930bfa303a451b4ea867405bc9ded0fd
+  data.tar.gz: 159bce7c3570d89754af6964c035497b6adbc0a87f6f709a06fa556c4ddfdd924a48866518336e6424a81cd0efa6ae87df472c3e9f8442d10bf4ef846bb62548

data/Readme.md

@@ -14,8 +14,6 @@ Simple theme for ActiveAdmin :ok_hand:
 
 ## Installation
 
->**⚠️ If you are using webpacker (Standard with Rails 6) look below**
-
 - Add this to your Gemfile:
 
 ```ruby
@@ -81,10 +79,10 @@ In your `active_admin.js`, include the js file:
 
 ### 1 - Preparation
 
-Install the needed assets with npm or yarn:
+Install the assets from npm or yarn
 
 ```
-yarn add arctic_admin @fortawesome/fontawesome-free
+yarn add arctic_admin
 ```
 
 
@@ -105,24 +103,26 @@ Remove:
 
 ### 3 - JS
 
-Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:  
+In your `app/javascript/packs/active_admin.js`, add the line:
 
 ```js
-import "@fortawesome/fontawesome-free/css/all.css";
 import 'arctic_admin'
 ```
 
 
 ### Customization
 
-For this, you need to use SASS to customize the theming.
+For this, you need to use sass to custom the theme.
+
+You can even change basic color of the theme by placing some other variables:
 
-Right now you can change the primary color of the theme by placing the following variable in your `active_admin.scss` file:
+If you use the [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
+`active_admin.scss` file:
 
 ```scss
 $primary-color: #2dbb43;
 
-@import "~arctic_admin/src/scss/main";
+@import "arctic_admin/base";
 ```
 
 If you use the
@@ -132,7 +132,7 @@ add this to your `active_admin.sass` file:
 ```sass
 $primary-color: #2dbb43
 
-@import ~arctic_admin/src/scss/main
+@import arctic_admin/base
 ```
 
 Then restart your webserver if it was previously running.

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

@@ -1,4 +1,2 @@
-//= require jquery
-//= require jquery_ujs
 //= require active_admin/base
 //= require ./main

data/app/assets/javascripts/arctic_admin/main.js

@@ -1,99 +1,50 @@
-$(function () {
-  var animationFilterDone = true
-  $(document).on('click touchstart', '#sidebar', function (e) {
-    if (animationFilterDone == true) {
-      var position = $(this).position()
-      var width = $(this).width()
-      var target = e.target
-      if (
-        e.pageX < position.left &&
-        target.tagName != 'SELECT' &&
-        target.tagName != 'OPTION'
-      ) {
-        if ($(this).css('right') == '0px') {
-          $(this).css('position', 'fixed')
-          $(this).animate(
-            {
-              right: '-=' + width
-            },
-            600,
-            function () {
-              $(this).removeAttr('style')
-              animationFilterDone = true
-            }
-          )
-        } else {
-          $(this).animate(
-            {
-              right: '+=' + width
-            },
-            600,
-            function () {
-              $(this).css('position', 'absolute')
-              animationFilterDone = true
-            }
-          )
-        }
-      }
-    }
-  })
+document.addEventListener('DOMContentLoaded', () => {
 
-  var animationDone = true
-  $(document).on('click touchstart', '#utility_nav', function (e) {
-    var position = $(this).position()
-    var tabs = $('#tabs')    
-    var width = (tabs.length==0)? 0 : Math.round(tabs[0].getBoundingClientRect().width)    
-    if (e.pageX < position.left + 40) {
-      if (animationDone == true) {
-        animationDone = false
-        if (tabs.css('left') == '0px') {
-          tabs.animate(
-            {
-              left: '-=' + width
-            },
-            400,
-            function () {
-              animationDone = true
-            }
-          )
-        } else {
-          tabs.animate(
-            {
-              left: '+=' + width
-            },
-            400,
-            function () {
-              animationDone = true
-            }
-          )
-        }
+  // right filter sidebar
+  const sidebar = document.querySelector('#sidebar')
+  if (sidebar) {
+    sidebar.addEventListener('click', event => {
+      const insideSection = document.querySelector('#filters_sidebar_section')
+      if (!(event.target === insideSection || insideSection.contains(event.target))) {
+        sidebar.classList.toggle('sidebar_open')
       }
+    })
+  }
+
+  const menuButton = document.querySelector('#utility_nav')
+  const menu = document.querySelector('#tabs')
+
+  // toggle menu sidebar with the menu button
+  menuButton.addEventListener('click', event => {
+    const currentUser = document.querySelector('#current_user')
+    const logout = document.querySelector('#logout')
+    const forbiddenLinks = event.target === logout ||
+        logout.contains(event.target) ||
+        event.target === currentUser ||
+        currentUser.contains(event.target)
+    if (!forbiddenLinks) {
+      menu.classList.toggle('tabs_open')
     }
   })
 
-  $(document).on('click touchstart', 'body', function (e) {
-    var tabs = $('#tabs')
-    var width = (tabs.length==0)? 0 : Math.round(tabs[0].getBoundingClientRect().width)
-    if (tabs.css('left') == '0px') {
-      if (e.pageX > width && e.pageY > 60) {
-        if (animationDone == true) {
-          animationDone = false
-          tabs.animate(
-            {
-              left: '-=' + width
-            },
-            400,
-            function () {
-              animationDone = true
-            }
-          )
-        }
-      }
+  // close left menu sidebar on any click outside
+  document.body.addEventListener('click', event => {
+    const forbiddenLinks = event.target === menu ||
+        menu.contains(event.target) ||
+        event.target === menuButton ||
+        menuButton.contains(event.target)
+    if (menu.classList.contains('tabs_open') && !forbiddenLinks) {
+      menu.classList.remove('tabs_open')
     }
   })
 
-  $(document).on('click', '#tabs .has_nested', function (e) {
-    e.stopPropagation()
-    $(this).toggleClass('open')
-  })
+  // toggle of nested menu items
+  const nestedMenuItem = document.querySelector('#tabs .has_nested')
+  if (nestedMenuItem) {
+    nestedMenuItem.addEventListener('click', (e) => {
+      e.stopPropagation()
+      nestedMenuItem.classList.toggle('open')
+    })
+  }
+
 })

data/app/assets/stylesheets/arctic_admin/layouts/_filter.scss

@@ -49,6 +49,11 @@
     .filter_date_range input {
       width: 45%;
       display: inline-block;
+
+      // consistent look of all filters
+      &:nth-child(2) {
+        float: right;
+      }
     }
 
     input[type="submit"] {
@@ -56,9 +61,21 @@
       line-height: 31px;
       margin-right: 10px;
     }
+
+    &.panel {
+      position: relative;
+    }
   }
 
   #search-status-_sidebar_section {
     font-size: 14px;
   }
-}
+
+  // 'Filter' and 'Clear Filters' buttons
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+  }
+}

data/app/assets/stylesheets/arctic_admin/layouts/_sidebar.scss

@@ -8,6 +8,12 @@
   z-index: 1;
   overflow: auto;
   left: - $header-width;
+  transition: .5s;
+  transition-timing-function: ease-in-out;
+
+  &.tabs_open {
+    left: 0;
+  }
 
   @media screen and (min-width: $sm-width) {
     top: 60px;
@@ -95,7 +101,7 @@
           }
         }
 
-        & > ul {
+        ul {
           display: block;
         }
       }

data/app/assets/stylesheets/arctic_admin/pages/_index.scss

@@ -39,10 +39,6 @@ body.index {
       position: absolute;
       z-index: 1;
     }
-
-    .indexes.table_tools_segmented_control {
-      text-align: right;
-    }
   }
 
   .paginated_collection_contents {
@@ -93,17 +89,19 @@ body.index {
   .scopes {
     .scope {
       @include group-button($primary-color);
-
-      a {
-        margin-right: .25rem;
-      }
     }
   }
 
   #sidebar {
     position: fixed;
+    transition: .5s;
+    transition-timing-function: ease-in-out;
     right: - $filter-width;
 
+    &.sidebar_open {
+      right: 0;
+    }
+
     @media screen and (min-width: $x-lg-width) {
       right: - $lg-filter-width;
     }

data/lib/arctic_admin/version.rb

@@ -1,3 +1,3 @@
 module ArcticAdmin
-  VERSION = "3.3.0"
+  VERSION = "4.0.0.alpha"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: arctic_admin
 version: !ruby/object:Gem::Version
-  version: 3.3.0
+  version: 4.0.0.alpha
 platform: ruby
 authors:
 - Clément Prod'homme
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-07 00:00:00.000000000 Z
+date: 2020-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -58,20 +58,6 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '3.0'
-- !ruby/object:Gem::Dependency
-  name: jquery-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: font-awesome-sass
   requirement: !ruby/object:Gem::Requirement
@@ -168,9 +154,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.0.3
 signing_key: