Move js & css into asset files

app/assets/javascripts/rails_admin/ra.horizontal-scroll-list.coffee

@@ -0,0 +1,16 @@
+(->
+ $ = jQuery
+
+ setFrozenColPositions = ->
+ $listForm = $('#bulk_form')
+ return unless $listForm.is('.ra-horizontal-scroll-list')
+ $listForm.find('table tr').each (index, tr) ->
+ firstPosition = 0
+ $(tr).find('.ra-horizontal-scroll-frozen').each (idx, td) ->
+ tdLeft = $(td).position().left
+ firstPosition = tdLeft if idx == 0
+ td.style.left = "#{tdLeft - firstPosition}px"
+
+ $(window).on('load', setFrozenColPositions) # Update after link icons load.
+ $(document).on('rails_admin.dom_ready', setFrozenColPositions)
+)()

app/assets/javascripts/rails_admin/rails_admin.js

@@ -15,5 +15,6 @@
 //= require 'rails_admin/ra.i18n'
 //= require 'rails_admin/bootstrap/bootstrap'
 //= require 'rails_admin/ra.widgets'
+//= require 'rails_admin/ra.horizontal-scroll-list'
 //= require 'rails_admin/ui'
 //= require 'rails_admin/custom/ui'

app/assets/stylesheets/rails_admin/ra.horizontal-scroll-table.scss

@@ -0,0 +1,29 @@
+.ra-horizontal-scroll-table {
+ margin-bottom: 20px;
+ overflow-x: auto;
+ .table {
+ margin-bottom: 0;
+ }
+
+ .ra-horizontal-scroll-frozen {
+ position: sticky;
+ }
+
+ // Remove transparency on frozen cells.
+ $table-bg-default: if($table-bg == transparent, if($body-bg == transparent, #fff, $body-bg), $table-bg) !default;
+ .table-striped > tbody > tr:nth-child(even) > td, .table-striped > thead > tr > th {
+ background-color: $table-bg-default;
+ }
+ $table-bg-header-sort: #e2eff6 !default;
+ .table .ra-horizontal-scroll-frozen {
+ &.headerSortUp, &.headerSortDown {
+ background-color: $table-bg-header-sort;
+ }
+ }
+
+ // border-right isn't sticky
+ .ra-horizontal-scroll-frozen-last {
+ box-shadow: -1px 0 0 0 $table-border-color inset;
+ padding-right: $table-condensed-cell-padding + 1px;
+ }
+}

app/assets/stylesheets/rails_admin/rails_admin.scss.erb

@@ -55,6 +55,7 @@
 @import "rails_admin/bootstrap-datetimepicker-build";
 @import "rails_admin/ra.filtering-multiselect";
 @import "rails_admin/ra.widgets";
+@import "rails_admin/ra.horizontal-scroll-table";
 @import "rails_admin/jquery.colorpicker";
 
 

app/views/rails_admin/main/index.html.haml

@@ -51,43 +51,11 @@
  jQuery(function($) {
  #{ordered_filter_string}
  });
-- if horiz_scroll_enabled && horiz_scroll_frozen_cols > 0
- :javascript
- (function(){
- if (window.rails_admin_horizontal_scroll_list) { return; } // Don't add this handler multiple times.
- window.rails_admin_horizontal_scroll_list = true;
- var $ = jQuery;
- var setFrozenColPositions = function(){
- var firstPosition, $td;
- $('#bulk_form').find('table tr').each(function(index, tr){
- $(tr).find('.scroll-frozen').each(function(idx, td){
- $td = $(td);
- if (idx === 0) {
- firstPosition = $td.position().left;
- }
- td.style.left = ($td.position().left-firstPosition)+'px';
- });
- });
- };
- $(window).on('load', setFrozenColPositions); // Update after link icons load.
- $(document).on('rails_admin.dom_ready', setFrozenColPositions);
- }());
 
 %style
  - properties.select{ |p| p.column_width.present? }.each do |property|
  = "#list th.#{property.css_class} { width: #{property.column_width}px; min-width: #{property.column_width}px; }"
  = "#list td.#{property.css_class} { max-width: #{property.column_width}px; }"
- - if horiz_scroll_enabled
- \.table-wrapper { margin-bottom: 20px; overflow-x: auto; }
- \.table-wrapper .table { margin-bottom: 0; }
- - if horiz_scroll_frozen_cols > 0
- \/* Remove transparency on frozen cells. */
- \.table-striped > tbody > tr:nth-child(even) > td.scroll-frozen, .table-striped > thead > tr > th.scroll-frozen { background-color: #fff; }
- body.rails_admin .table .headerSortUp.scroll-frozen, body.rails_admin .table .headerSortDown.scroll-frozen { background-color: #e2eff6; }
- \.scroll-frozen { position: sticky; }
- \.scroll-frozen-last { box-shadow: -1px 0 0 0 #ddd inset; } /* border-right isn't sticky */
- \.table-condensed th.scroll-frozen-last, .table-condensed td.scroll-frozen-last { padding-right: 6px; }
- = horiz_scroll_css
 
 #list
  = form_tag(index_path(params.except(*%w[page f query])), method: :get, class: "pjax-form form-inline") do
@@ -112,30 +80,30 @@
  %li{class: "#{'active' if scope.to_s == params[:scope] || (params[:scope].blank? && index == 0)}"}
  %a{href: index_path(params.merge(scope: scope, page: nil)), class: 'pjax'}= I18n.t("admin.scopes.#{@abstract_model.to_param}.#{scope}", default: I18n.t("admin.scopes.#{scope}", default: scope.to_s.titleize))
 
- = form_tag bulk_action_path(model_name: @abstract_model.to_param), method: :post, id: "bulk_form", class: "form" do
+ = form_tag bulk_action_path(model_name: @abstract_model.to_param), method: :post, id: "bulk_form", class: ["form", horiz_scroll_frozen_cols > 0 ? "ra-horizontal-scroll-list" : nil].compact.join(' ') do
  = hidden_field_tag :bulk_action
  - if description.present?
  %p
  %strong= description
 
- .table-wrapper
+ .table-wrapper{class: horiz_scroll_enabled && 'ra-horizontal-scroll-table'}
  %table.table.table-condensed.table-striped
  %thead
  %tr
  - horiz_scroll_i = horiz_scroll_frozen_cols
  - if checkboxes
- %th.shrink{class: [(horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last']}
+ %th.shrink{class: [(horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last']}
  %input.toggle{type: "checkbox"}
  - if horiz_scroll_enabled
- %th.last.shrink{class: [(horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last']}
+ %th.last.shrink{class: [(horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last']}
  - elsif other_left
  %th.other.left.shrink= "..."
  - properties.each do |property|
  - selected = (sort == property.name.to_s)
  - if property.sortable
  - sort_location = index_path params.except('sort_reverse').except('page').merge(sort: property.name).merge(selected && sort_reverse != "true" ? {sort_reverse: "true"} : {})
  - sort_direction = (sort_reverse == 'true' ? "headerSortUp" : "headerSortDown" if selected)
- %th{class: [property.sortable && "header pjax", property.sortable && sort_direction, property.css_class, property.type_css_class, (horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last'], :'data-href' => (property.sortable && sort_location), rel: "tooltip", title: "#{property.hint}"}= capitalize_first_letter(property.label)
+ %th{class: [property.sortable && "header pjax", property.sortable && sort_direction, property.css_class, property.type_css_class, (horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last'], :'data-href' => (property.sortable && sort_location), rel: "tooltip", title: "#{property.hint}"}= capitalize_first_letter(property.label)
  - unless horiz_scroll_enabled
  - if other_right
  %th.other.right.shrink= "..."
@@ -145,17 +113,17 @@
  - horiz_scroll_i = horiz_scroll_frozen_cols
  %tr{class: "#{@abstract_model.param_key}_row #{@model_config.list.with(object: object).row_css_class}"}
  - if checkboxes
- %td{class: [(horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last']}= check_box_tag "bulk_ids[]", object.id, false
+ %td{class: [(horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last']}= check_box_tag "bulk_ids[]", object.id, false
  - td_links = capture do
- %td.last.links{class: [(horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last']}
+ %td.last.links{class: [(horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last']}
  %ul.inline.list-inline= menu_for :member, @abstract_model, object, true
  - if horiz_scroll_enabled
  = td_links
  - elsif @other_left_link ||= other_left && index_path(params.except('set').merge(params[:set].to_i != 1 ? {set: (params[:set].to_i - 1)} : {}))
  %td.other.left= link_to "...", @other_left_link, class: 'pjax'
  - properties.map{ |property| property.bind(:object, object) }.each do |property|
  - value = property.pretty_value
- %td{class: [property.css_class, property.type_css_class, (horiz_scroll_i -= 1) > -1 && 'scroll-frozen', horiz_scroll_i == 0 && 'scroll-frozen-last' ], title: strip_tags(value.to_s)}= value
+ %td{class: [property.css_class, property.type_css_class, (horiz_scroll_i -= 1) > -1 && 'ra-horizontal-scroll-frozen', horiz_scroll_i == 0 && 'ra-horizontal-scroll-frozen-last' ], title: strip_tags(value.to_s)}= value
  - unless horiz_scroll_enabled
  - if @other_right_link ||= other_right && index_path(params.merge(set: (params[:set].to_i + 1)))
  %td.other.right= link_to "...", @other_right_link, class: 'pjax'

spec/integration/config/list/rails_admin_config_list_spec.rb

@@ -476,15 +476,9 @@
  end
 
  describe 'horizontal-scroll list option' do
- horiz_scroll_css = {
- enabled: '.table-wrapper { margin-bottom: 20px; overflow-x: auto; }',
- frozen_cols: '.scroll-frozen { position: sticky; }',
- last_col: '.scroll-frozen-last { box-shadow: -1px 0 0 0 #ddd inset; }',
- }
- js_include_test = "td.style.left = ($td.position().left-firstPosition)+'px';"
  all_team_columns = ['', '', 'Id', 'Created at', 'Updated at', 'Division', 'Name', 'Logo url', 'Team Manager', 'Ballpark', 'Mascot', 'Founded', 'Wins', 'Losses', 'Win percentage', 'Revenue', 'Color', 'Custom field', 'Main Sponsor', 'Players', 'Some Fans', 'Comments']
 
- it "displays all fields with on one page when true" do
+ it "displays all fields on one page when true" do
  RailsAdmin.config do |config|
  config.horizontal_scroll_list = true
  end
@@ -493,30 +487,12 @@
  cols = all('th').collect(&:text)
  expect(cols[0..4]).to eq(all_team_columns[0..4])
  expect(cols).to contain_exactly(*all_team_columns)
- expect(page).to have_selector('.table-wrapper')
- expect(page.html).to include(horiz_scroll_css[:enabled])
- expect(page.html).to include(horiz_scroll_css[:frozen_cols])
- expect(page.html).to include(horiz_scroll_css[:last_col])
- expect(page.html).to include(js_include_test)
- expect(all('.scroll-frozen').count).to eq(12)
- expect(all('th.scroll-frozen').count).to eq(3)
- expect(all('td.scroll-frozen').count).to eq(9)
- expect(all('.scroll-frozen-last').count).to eq(4)
- end
-
- it "displays all fields with custom css" do
- custom_css = '.scroll-frozen-last { box-shadow: none; }'
- RailsAdmin.config do |config|
- config.horizontal_scroll_list = {css: custom_css}
- end
- visit index_path(model_name: 'team')
- cols = all('th').collect(&:text)
- expect(cols[0..4]).to eq(all_team_columns[0..4])
- expect(cols).to contain_exactly(*all_team_columns)
- expect(page.html).to include(horiz_scroll_css[:enabled])
- expect(page.html).to include(horiz_scroll_css[:frozen_cols])
- expect(page.html).to include(custom_css)
- expect(page.html).to include(js_include_test)
+ expect(page).to have_selector('.table-wrapper.ra-horizontal-scroll-table')
+ expect(page).to have_selector('.ra-horizontal-scroll-list')
+ expect(all('.ra-horizontal-scroll-frozen').count).to eq(12)
+ expect(all('th.ra-horizontal-scroll-frozen').count).to eq(3)
+ expect(all('td.ra-horizontal-scroll-frozen').count).to eq(9)
+ expect(all('.ra-horizontal-scroll-frozen-last').count).to eq(4)
  end
 
  it "displays all fields with custom frozen columns" do
@@ -528,14 +504,12 @@
  cols = all('th').collect(&:text)
  expect(cols[0..4]).to eq(all_team_columns[0..4])
  expect(cols).to contain_exactly(*all_team_columns)
- expect(page.html).to include(horiz_scroll_css[:enabled])
- expect(page.html).to include(horiz_scroll_css[:frozen_cols])
- expect(page.html).to include(horiz_scroll_css[:last_col])
- expect(page.html).to include(js_include_test)
- expect(all('.scroll-frozen').count).to eq(8)
- expect(all('th.scroll-frozen').count).to eq(2)
- expect(all('td.scroll-frozen').count).to eq(6)
- expect(all('.scroll-frozen-last').count).to eq(4)
+ expect(page).to have_selector('.table-wrapper.ra-horizontal-scroll-table')
+ expect(page).to have_selector('.ra-horizontal-scroll-list')
+ expect(all('.ra-horizontal-scroll-frozen').count).to eq(8)
+ expect(all('th.ra-horizontal-scroll-frozen').count).to eq(2)
+ expect(all('td.ra-horizontal-scroll-frozen').count).to eq(6)
+ expect(all('.ra-horizontal-scroll-frozen-last').count).to eq(4)
  end
 
  it "displays all fields with no checkboxes" do
@@ -552,10 +526,10 @@
  cols = all('th').collect(&:text)
  expect(cols[0..3]).to eq(all_team_columns[1..4])
  expect(cols).to contain_exactly(*all_team_columns[1..-1])
- expect(all('.scroll-frozen').count).to eq(8)
- expect(all('th.scroll-frozen').count).to eq(2)
- expect(all('td.scroll-frozen').count).to eq(6)
- expect(all('.scroll-frozen-last').count).to eq(4)
+ expect(all('.ra-horizontal-scroll-frozen').count).to eq(8)
+ expect(all('th.ra-horizontal-scroll-frozen').count).to eq(2)
+ expect(all('td.ra-horizontal-scroll-frozen').count).to eq(6)
+ expect(all('.ra-horizontal-scroll-frozen-last').count).to eq(4)
  end
 
  it "displays all fields with no frozen columns" do
@@ -567,20 +541,20 @@
  cols = all('th').collect(&:text)
  expect(cols[0..4]).to eq(all_team_columns[0..4])
  expect(cols).to contain_exactly(*all_team_columns)
- expect(page.html).to include(horiz_scroll_css[:enabled])
- expect(page.html).not_to include(horiz_scroll_css[:frozen_cols])
- expect(page.html).not_to include(js_include_test)
- expect(all('.scroll-frozen').count).to eq(0)
- expect(all('.scroll-frozen-last').count).to eq(0)
+ expect(page).to have_selector('.table-wrapper.ra-horizontal-scroll-table')
+ expect(page).not_to have_selector('.ra-horizontal-scroll-list')
+ expect(all('.ra-horizontal-scroll-frozen').count).to eq(0)
+ expect(all('.ra-horizontal-scroll-frozen-last').count).to eq(0)
  end
 
  it "displays sets when not set" do
  visit index_path(model_name: 'team')
  expect(all('th').collect(&:text)).to eq ['', 'Id', 'Created at', 'Updated at', 'Division', 'Name', 'Logo url', '...', '']
- expect(page.html).not_to include(horiz_scroll_css[:enabled])
- expect(page.html).not_to include(horiz_scroll_css[:frozen_cols])
- expect(page.html).not_to include(horiz_scroll_css[:last_col])
- expect(page.html).not_to include(js_include_test)
+ expect(page).to have_selector('.table-wrapper')
+ expect(page).not_to have_selector('.table-wrapper.ra-horizontal-scroll-table')
+ expect(page).not_to have_selector('.ra-horizontal-scroll-list')
+ expect(all('.ra-horizontal-scroll-frozen').count).to eq(0)
+ expect(all('.ra-horizontal-scroll-frozen-last').count).to eq(0)
  end
  end
 end