Merge pull request #1961 from tvdeyen/select2-v3-asset

Load select2 from assets folder
AlchemyCMS · Nov 16, 2020 · c7f81dc · c7f81dc
2 parents e6b07e0 + cbf467a
commit c7f81dc
Show file tree

Hide file tree

Showing 7 changed files with 4,492 additions and 23 deletions.
diff --git a/alchemy_cms.gemspec b/alchemy_cms.gemspec
@@ -37,7 +37,6 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency 'request_store',                    ['~> 1.2']
   gem.add_runtime_dependency 'responders',                       ['>= 2.0', '< 4.0']
   gem.add_runtime_dependency 'sassc-rails',                      ['~> 2.1']
-  gem.add_runtime_dependency 'select2-rails',                    ['>= 3.5.9.1', '< 4.0']
   gem.add_runtime_dependency 'simple_form',                      ['>= 4.0', '< 6']
   gem.add_runtime_dependency 'sprockets',                        ['>= 3.0', '< 5']
   gem.add_runtime_dependency 'turbolinks',                       ['>= 2.5']

diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
@@ -13,7 +13,6 @@
 //= require clipboard.min
 //= require keymaster
 //= require requestAnimationFrame
-//= require select2
 //= require handlebars
 //= require alchemy/templates
 //= require alchemy/alchemy.base

diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss
@@ -1,6 +1,5 @@
 /*  Alchemy CMS Sprockets Manifest
  *  -------------------------------
- *= require select2
  *= require_self
  */
 

diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss
@@ -1,13 +1,16 @@
+@import "alchemy_admin/select2";
+
 select {
   @include button-defaults(
     $background-color: $form-field-background-color,
     $hover-color: $form-field-background-color,
     $hover-border-color: darken($default-border-color, 10%),
-    $padding: 0 2*$default-padding,
+    $padding: 0 2 * $default-padding,
     $border: 1px solid $default-border-color,
     $box-shadow: none,
     $color: $text-color,
-    $margin: 0);
+    $margin: 0
+  );
   height: $form-field-height;
   padding: 0.4em 0.6em;
   max-width: 100%;
@@ -32,7 +35,8 @@ select {
         $border: 1px solid $default-border-color,
         $box-shadow: none,
         $color: $text-color,
-        $margin: 0);
+        $margin: 0
+      );
       background-image: none;
       display: block;
       font-weight: normal;
@@ -79,14 +83,13 @@ select {
     }
 
     &.select2-container-active {
-
-      .select2-choice, .select2-choices {
+      .select2-choice,
+      .select2-choices {
         @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
     }
 
     &.select2-container-disabled {
-
       &:hover {
         + .with-hint > .hint-bubble {
           @include hint-hover-style;
@@ -98,7 +101,8 @@ select {
         top: 0;
       }
 
-      .select2-choice, .select2-choice:hover {
+      .select2-choice,
+      .select2-choice:hover {
         background-image: none;
         background-color: $light-gray;
         box-shadow: none;
@@ -108,7 +112,9 @@ select {
         .select2-arrow {
           border-color: $border-inset-color;
 
-          b { color: $border-inset-color; }
+          b {
+            color: $border-inset-color;
+          }
         }
       }
     }
@@ -142,7 +148,6 @@ select {
     margin-top: 0 !important;
 
     &.select2-container-active {
-
       .select2-choices {
         @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
@@ -214,7 +219,8 @@ select {
       }
     }
 
-    .select2-no-results, .select2-searching {
+    .select2-no-results,
+    .select2-searching {
       padding: 8px;
       margin: 0;
     }
@@ -235,41 +241,39 @@ select {
 
   .select2-more-results,
   .select2-ajax-error {
-    padding: 2*$default-padding;
+    padding: 2 * $default-padding;
     margin-bottom: 0;
   }
 }
 
-.window_form, #filter_bar {
-
+.window_form,
+#filter_bar {
   .select2-container {
     width: 100%;
   }
 }
 
 .select_with_label {
-  margin: 0 3*$default-margin;
+  margin: 0 3 * $default-margin;
   display: inline-block;
   vertical-align: middle;
 
   label {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 2*$default-margin;
+    margin-right: 2 * $default-margin;
   }
 }
 
 // overriding important of select2 default style for retina screens
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-       only screen and (min-resolution: 2dppx) {
-
+  only screen and (min-resolution: 2dppx) {
   #alchemy {
-
     .select2-search input,
     .select2-search-choice-close,
     .select2-container .select2-choice abbr,
     .select2-container .select2-choice .select2-arrow b {
-       background-image: none !important;
+      background-image: none !important;
     }
   }
 }
diff --git a/lib/alchemy_cms.rb b/lib/alchemy_cms.rb
@@ -21,7 +21,6 @@
 require "responders"
 require "sassc-rails"
 require "simple_form"
-require "select2-rails"
 require "turbolinks"
 require "userstamp"
 require "webpacker"