Precompile icons in production mode

[jpmermoz]

Hi,

I'm having problems while precompiling wice_grid's assets in production mode.
By now, I've rewrited wice_grid css file to reference images using image-url tag, and that works for almost all images, except with 'calendar_view_month.png'.

This one is being used by wice_grid dinamically, and its path is being declared in wice_grid_config.rb initializer.

Is there a way to make rails recognize its precompiled url?
Thanks

[amey1908]

Hi jpmermoz,

I have a similar problem. The icons from wice_grid are not showing up for me on production. What did you do to reslolve this?

Thanks,
Ameya

[jpmermoz]

Hi Ameya,

I've downloaded all the icons and put them into the assets folder (app / assets / images / icons / grid / )

Then I rewrited my wice_grid.css.scss file to change the icon routes, here it is:

@mixin icon-dimensions {
  width: 16px;
  height: 16px;
}

.wg-detached-filter, .wice-grid{

  .text-filter-container {
    input{
      width:auto;
      margin-right: 10px;
      display: inline;
    }
  }

  a.date-label {text-decoration: none;}
  a.date-label:hover {text-decoration: line-through;}

  .clickable{
    cursor: pointer;
    margin-bottom: 2px;
    margin-right: 2px;
  }

  .ui-datepicker-trigger, .wg-detached-filter .ui-datepicker-trigger{
    cursor: pointer;
  }

  .custom-dropdown-container {

    .expand-multi-select-icon, .collapse-multi-select-icon{
      width: 10px;
      height: 10px;
      display: none;
      margin-left: 5px;
      vertical-align: top;
    }

    .collapse-multi-select-icon{
      background: transparent image-url("icons/grid/collapse.gif") no-repeat;
    }

    .expand-multi-select-icon{
      background: transparent image-url("icons/grid/expand.gif") no-repeat;
    }

  }
}

.wice-grid{


  .desc,  .asc{
    padding-right: 18px;
    text-decoration:none;
  }

  .desc {
    background: transparent image-url("icons/grid/arrow_down.gif") right no-repeat
  }
  .asc  {
    background: transparent image-url("icons/grid/arrow_up.gif")   right no-repeat
  }

  .submit.clickable{
    background: transparent image-url("icons/grid/table_refresh.png") no-repeat;
    @include icon-dimensions;
  }

  .reset.clickable{
    background: transparent image-url("icons/grid/table.png") no-repeat;
    @include icon-dimensions;
  }


  .wg-show-filter.clickable,
  .wg-hide-filter.clickable{
    background: transparent image-url("icons/grid/page_white_find.png") no-repeat;
    @include icon-dimensions;
  }


  .export-to-csv-button.clickable{
    background: transparent image-url("icons/grid/page_white_excel.png") no-repeat;
    @include icon-dimensions;
  }

  .clickable.select-all{
    background: transparent image-url("icons/grid/tick_all.png") no-repeat;
    @include icon-dimensions;
    float:left;
  }

  .clickable.deselect-all{
    background: transparent image-url("icons/grid/untick_all.png") no-repeat;
    @include icon-dimensions;
    float:left;
  }


  /* in case of twitter bootstrap :) 
  thead th select{
    width: auto;
  }*/

  .pagination{
    margin: 0px;
    float: left;
  }


  tr.wg-filter-row  input[type=text] {
    width: 100%;
  }

  .pagination_status {
    font-weight: bold;
    float: right;
  }

}

.wice-grid-query-panel{
  li {list-style-type: none; }

  ul {margin-left: 0 }

  a.wice-grid-delete-query .delete-icon{
    background: transparent image-url("icons/grid/delete.png") no-repeat;
    float: left;
    @include icon-dimensions;
  }
}

input.wice-grid-save-query-field{
  width: auto;
  display: inline-block;
  margin-right: 10px;
}

However, I just couldn't display correctly this icon: calendar_view_month.png
Hope it helps!

[amey1908]

Thanks, I will try that. But is this suppose to happen? I am sure there is a better and consistent way than downloading all assets. @leikind - Any recommendations?

[amey1908]

jpmermoz - Where did you get the icons from? Are they in this repository?

[leikind]

this is definitely a TO DO for me

[jpmermoz]

@amey1908 icons are here:

https://github.com/leikind/wice_grid/tree/rails3/vendor/assets/images/icons/grid

[badmanski]

Hello,

I fixed this problem by renaming wice_grid.css.scss to wice_grid.css.scss.erb and replacing icon urls with asset_path helper (e.g. <%= asset_path 'icons/grid/collapse.gif' %>).

Since path to calendar icon is described in wice_grid_config.rb, I found no other solution but place this icon to public/assets/icons/grid folder in my app.

Hope this will be helpful.

Regards,
Stanislav

[leikind]

thanks, I will take a look

[originalpete]

Hi @badmanski @jpmermoz @amey1908 – I'm still having this issue too in Rails 4.0.4.

Thank you @leikind for this great plugin, but unfortunately this plugin can't claim to be compatible with the asset pipeline while these issues persist! 😉

I've managed to get the images displaying correctly by following @jpmermoz's advice and converting the CSS to use image-url() instead of hard-coded url(). I also had to copy all the grid images into my local app under APP_ROOT/app/assets/images/icons/grid.

Following @badmanski's advice, I also solved the hard-coded calendar icon problem by copying the calendar_view_month.png into APP_ROOT/public/assets/icons (leaving the default wice_grid_config.rb settings in place).

However, this is only a work-around and is not a clean solution. I'd really like a separation between my app assets and 3rd party gem assets.

I'm happy to fix the bug and submit a pull request, but @leikind – I suspect it's going to require a re-engineering of the way you handle the calendar image.

There are a few things that need fixing:

• Fix the wice_grid generated CSS to use image-url instead of hard-coded url().
• Fix the wice_grid gem to properly register itself with Rails and identify as a Rails Engine so that its images get picked up by the asset pipeline. You definitely shouldn't need to hand-copy the icons/grid folder into each app. wice_grid does seem to subclass Rails::Engine, but this might be happening at the wrong place. Need to dig into it.
• Move WICE_GRID_ROOT/vendor/assets to WICE_GRID_ROOT/app/assets, since technically the assets are not 3rd party to the gem.
• Then the big one: refactor the use of Wice::Defaults::CALENDAR_ICON. Having a hard-coded URL is completely incompatible with the asset pipeline.

I don't know the right answer yet, but perhaps wice config should just take an image path & name, and use standard Rails image_path() to convert it into an asset-pipeline compatible path?

As I said, I'm happy to tackle this and submit a pull request, but I'd like @leikind's input first to make sure we're heading in the right directly.

Also, @jalada, have I got all this correct?

Finally, it looks like #72 is a dupe of this bug. I don't know why issue #72 is closed when it's technically still valid.

Cheers,

Pete

Pixie Labs
London, UK

[leikind]

I agree with your points. This plugin started long long time before the asset pipeline. In fact, even before Rails 2, and not everything has been made up-to-date, for instance, this ugly Wice::Defaults::CALENDAR_ICON . Unfortunately I do not have much time these days to work on it. Therefore I would appreciate any pull requests improving this sutuation.

[francistm]

Got this issue under Rails 4.1 in production env, too.

[leikind]

If anyone here is still working with WiceGrid, could you see if version 3.4.9 fixes your issues? Everything should be fine except for Wice::Defaults::CALENDAR_ICON, which is used as an argument to the jQuery Datepicker, so it cannot be placed into css: https://github.com/leikind/wice_grid/blob/rails3/lib/wice/helpers/js_calendar_helpers.rb#L19

[originalpete]

@swathik @guyboertje looks like there's a new version to try at HSA – might fix a couple of the issues that @jalada and I flagged?

[fibers]

@leikind I met the same problem after update the wice_grid to 3.4.9. Is that possible to call a assets helper function to generate the actual image url, like image-path( "calendar_view_month.png") .

[leikind]

@fibers

Here is an attempt to use the image_path or asset_path helper functions for calendar_view_month.png . image_path just won't find the image and it generates /images/calendar_view_month.png instead of /assets/calendar_view_month.png : 72cb43b

Images declared in css/sass are found, like before (in 3.4.9 I mean). If you have an idea, I'd be glad to try it.

[fibers]

@leikind I try to fix it by using the helper function "asset_path" to generate the actual image path. But it failed to generate the path with a digest in production environment.

[leikind]

You can notice that I tried asset_path as well : 72cb43b#diff-55bd685904f34367df325f09afd2dc53R23

[fibers]

Is the issue resolved in the newest version 3.4.10 ?

[leikind]

The issue is not closed. All the questions I posed here are unanswered. So no, not closed. And I have no idea how.. Here are my attempts: https://github.com/leikind/wice_grid/commits/rails-asset-pipeline-kills-me

[aliw77]

here is a thought - can the calendar image be part of scss and styled into the grid instead of a constant in .rb. Having it in scss would allow it to be precompiled.

[leikind]

Here is jquery datepicker API: http://api.jqueryui.com/datepicker/#option-buttonImage

Not possible

[originalpete]

The gon gem could help – it adds another dependency to the project, which is unfortunate, but it fixes the problem:

https://github.com/gazay/gon

[jpmermoz]

Probably not the best solution, but you can change this line in your wice grid initializer to look like this:

Wice::Defaults::CALENDAR_ICON = "https://raw.github.com/leikind/wice_grid/rails3/vendor/assets/images/icons/grid/calendar_view_month.png"

This will work on both development and production modes. Of course your app needs to be connected to the internet

[leikind]

mmm :-/

[dima4p]

I did another way. I moved file calendar_view_month.png to /public and set

Wice::Defaults::CALENDAR_ICON = '/calendar_view_month.png'

[leikind]

There no more png/jpg icons in the development branch 926b5be

[vovimayhem]

FWIW: Sent the CALENDAR_ICON setup to an :after_initialize block in the initializer:

ActiveSupport.on_load(:after_initialize) do
  # Icon to popup the calendar.
  Wice::Defaults::CALENDAR_ICON = ActionController::Base.helpers.asset_path("icons/grid/calendar_view_month.png")
end

[kris-luminar]

@vovimayhem 's solution worked for me.