Feature #10525

A new button to hide/show the sidebar

Added by Jérôme BATAILLE about 5 years ago. Updated 6 months ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:Candidate for next major release
Resolution:

Description

On small screens (Netnooks, laptops) the sidebar take some place that is not necessary all the time.

Here are 2 html snippets :
The first to insert just before the closing h1 or h2 tag of the page title :


<span style="float:right"><a href="#" onclick="$('main').toggleClassName('nosidebar');if($('sidebar_view').src.split('/').pop() == 'minimize.ico'){$('sidebar_view').src='/images/maximize.ico';}else{$('sidebar_view').src='/images/minimize.ico';};"><img src="/images/maximize.ico" id="sidebar_view" /></a></span>

And a second when there are links on the right top corner :


<span><a href="#" onclick="$('main').toggleClassName('nosidebar');if($('sidebar_view').src.split('/').pop() == 'minimize.ico'){$('sidebar_view').src='/images/maximize.ico';}else{$('sidebar_view').src='/images/minimize.ico';};"><img src="/images/maximize.ico" id="sidebar_view" /></a></span>

The 2 icons are to put in public/images


maximize.ico (1.66 KB) Jérôme BATAILLE, 2012-03-22 16:55

minimize.ico (1.66 KB) Jérôme BATAILLE, 2012-03-22 16:55

redmine_smile_togglesidebar_V1.0.tgz (9.57 KB) Jérôme BATAILLE, 2013-04-25 15:47

diamonds.png (1.36 KB) Vladimir Pitin, 2013-08-14 11:59

close.png (1.31 KB) Vladimir Pitin, 2013-08-14 11:59


Related issues

Related to Redmine - Patch #12032: Collapsible Sidebar New
Related to Redmine - Patch #21808: Make the Sidebar collapsible, stateful Needs feedback
Duplicated by Redmine - Feature #1294: Gantt Chart: Show/Hide Right Menu Closed 2008-05-24
Duplicated by Redmine - Feature #8982: Hide right panel Closed 2011-08-04

History

#1 Updated by Jérôme BATAILLE about 5 years ago

#2 Updated by Yuri Makarov about 5 years ago

+1

Additionally,
it would be nice if the size of the sidebar has been fixed.

#3 Updated by Jean-Philippe Lang about 5 years ago

Although this feature is desirable, we just can't add this code to all views. It must be handled by the layout.
Also, hardcoded reference with absolute path to the images won't work with redmine in a sub-uri. It should be handled in the stylesheet.

#4 Updated by Daniel Felix about 4 years ago

  • Category set to UI
  • Target version set to 2.4.0

#12032 has some additional information regarding this issue.

I have implemented a plain JavaScript solution for this in my theme. But this won't be the best solution, as I just safe the sidebar state in a cookie. Which means, that the user have to close the sidebar every time he starts his browser (if he remove cookies after closing or if he use the inPrivate mode).

The better solution would be, to store this information in the session store or in the user profile itself.

Maybe I could provide another patch for this.

I've seen many requests like this, which could be solved with this implementation. This one would be a really small fix, which give a good improvement for smaller screens or for bigger diagrams.

Best regards,
Daniel

#5 Updated by Jérôme BATAILLE about 4 years ago

I have developped a session like memorization, I'll provide a patch.

But the two issues are still available :
- absolute path to the images
- we must modify each view that needs the button, because me must put it a very precise place with particular parameters if there is a context dependent menu in the view.

#6 Updated by Daniel Felix about 4 years ago

Jérôme BATAILLE wrote:

I have developped a session like memorization, I'll provide a patch.

This would be great.

Jérôme BATAILLE wrote:

But the two issues are still available :
- absolute path to the images

This could be fixed. There could be the same image path implementation as with all the other images in Redmine. :-)

- we must modify each view that needs the button, because me must put it a very precise place with particular parameters if there is a context dependent menu in the view.

Well I don't think so. What about just position the sidebar Button directly left beneath the sidebar to let them collapse and the expand button could be moved to the outmost right of the page. The div#content could be manipulated to stretch to the right, where the sidebar resides.
Maybe this would be helpfully.

Maybe you can provide the memorization and I will try to port my scripts to be able to run with trunk instead of the theme. :-)

#7 Updated by Jérôme BATAILLE about 4 years ago

I'll see if I have the time to fix these before to provide the patch.

#8 Updated by Jérôme BATAILLE about 4 years ago

Here is a plugin.

Tested with Rails 2 and 3.

There is still a manipulation to be done to edit the base layout, to add the button (see the configuration page of the plugin).

#9 Updated by Vladimir Pitin over 3 years ago

I would like to share the code that we use to hide / show the sidebar

JS-file

  var close_sidebar = $('<a/>', {href: '#',
                                 class: 'R close_sidebar icon',
                                 click: function(){
                                  if($(this).hasClass('close_sidebar'))
                                    {
                                    $('#sidebar').hide()
                                    $(this).addClass('show_sidebar')
                                    $(this).removeClass('close_sidebar')
                                    $('#content').data('margin-right', $('#content').css('margin-right'))
                                    $('#content').css('margin-right', '16px')
                                    $('#sidebar').before($(this))
                                    }
                                  else
                                    {
                                    $('#sidebar').show()
                                    $(this).removeClass('show_sidebar')
                                    $(this).addClass('close_sidebar')
                                    $('#content').css('margin-right',  $('#content').data('margin-right'))
                                    $('#sidebar').prepend($(this))                                      
                                    }

                                  }
                                })
  $('#sidebar').prepend(close_sidebar)

CSS - file

a.close_sidebar, a.show_sidebar
  {

  background-repeat: no-repeat;
  background-position: 100% 0%;
  width: 16px;
  height: 16px;
  }

a.close_sidebar
  {
  background-image: url(../images/close.png);
  }
a.show_sidebar
  {
  background-image: url(../images/diamonds.png);
  }

#10 Updated by Jérôme BATAILLE over 3 years ago

Hi, what enhancements do you add (except different button images ?)

#11 Updated by Jean-Philippe Lang over 3 years ago

  • Target version changed from 2.4.0 to Candidate for next major release

2.4 feature freeze

#12 Updated by Jérôme BATAILLE over 3 years ago

We have been using the plugin for almost a year, with no embarrassing issue.

The only annoying thing is that if you open the same controller/action in different tabs, the open/closed state of the sidebar will be inconsistent (fixed with a refresh).

#13 Updated by Jérôme BATAILLE almost 3 years ago

Here is the plugin that we have developed and have been using for more than a year :
https://github.com/Smile-SA/redmine_smile_togglesidebar

It's stable and compatible with all versions.

#14 Updated by Sebastian Paluch over 1 year ago

+1

#15 Updated by Kirill Bezrukov over 1 year ago

We implemented this feature in our free theme Circle without any plugins requirement

#16 Updated by Jérôme BATAILLE over 1 year ago

Kirill Bezrukov wrote:

We implemented this feature in our free theme Circle without any plugins requirement

Hi, do you memorize the sidebar state by controller / action ?

#17 Updated by Go MAEDA over 1 year ago

#18 Updated by Daniel Ritz over 1 year ago

Please have a look at Patch #21808. I implemented a collapsible sidebar from scratch, minimalistic but stateful.

#19 Updated by Jérôme BATAILLE over 1 year ago

Pleased to see that you had the time to re-develop something that I have already developped and just as a patch !

I will not take the time to look at your patch unless you explain to me that you have added new features.

#20 Updated by Daniel Ritz over 1 year ago

Jérôme BATAILLE wrote:

Pleased to see that you had the time to re-develop something that I have already developped and just as a patch !

I'm sorry you feel offended.

I will not take the time to look at your patch unless you explain to me that you have added new features.

My patch is a lot simpler (under 1h to develop) and far less intrusive, requires no additional controller or view (hence less to test, I write tests when the general direction is accepted), features a smooth CSS animation and is done with just a tiny addition in the layout, as requested by JPL. It uses the cookie method like this plugin https://github.com/bdemirkir/sidebar_hide, but with a lot less code, which also means it's only stateful within a session. But that's enough for the normal use case...

Also, plugins that lack tests cannot be installed in our productive system by policy. Something so simple as a collapsible sidebar should be core Redmine, so...

#21 Updated by Jérôme BATAILLE over 1 year ago

Daniel Ritz wrote:

I'm sorry you feel offended.

Never mind, with your explanations I understand quite well your motivations.

My patch is a lot simpler (under 1h to develop) and far less intrusive, requires no additional controller or view (hence less to test, I write tests when the general direction is accepted), features a smooth CSS animation and is done with just a tiny addition in the layout, as requested by JPL.

I will look at your implementation to see if I can take benefit of it in my plugin.
By the way, how did you get your requests from JPL ?

It uses the cookie method like this plugin https://github.com/bdemirkir/sidebar_hide, but with a lot less code, which also means it's only stateful within a session. But that's enough for the normal use case...

Also, plugins that lack tests cannot be installed in our productive system by policy. Something so simple as a collapsible sidebar should be core Redmine, so...

Testing this part seems complicated to me, but I will take the time to add tests.

#22 Updated by Daniel Ritz over 1 year ago

Jérôme BATAILLE wrote:

Daniel Ritz wrote:

I'm sorry you feel offended.

Never mind, with your explanations I understand quite well your motivations.

My patch is a lot simpler (under 1h to develop) and far less intrusive, requires no additional controller or view (hence less to test, I write tests when the general direction is accepted), features a smooth CSS animation and is done with just a tiny addition in the layout, as requested by JPL.

I will look at your implementation to see if I can take benefit of it in my plugin.
By the way, how did you get your requests from JPL ?

Ah no...I was just referring to comment 3 here. That also reminded me to take care of sub-uri. I actually have it deployed at /redmine, but that slips so easily because stuff works just fine with a cookie's path at / instead of /redmine...

It uses the cookie method like this plugin https://github.com/bdemirkir/sidebar_hide, but with a lot less code, which also means it's only stateful within a session. But that's enough for the normal use case...

Also, plugins that lack tests cannot be installed in our productive system by policy. Something so simple as a collapsible sidebar should be core Redmine, so...

Testing this part seems complicated to me, but I will take the time to add tests.

I guess just the controller with its views should be fine, the JS part would be Capybara with PhantomJS and stuff...I wouldn't worry too much about that. I always use simplecov to make sure I get good coverage...and in turn use simplecov on all other plugins just to get an idea if the tests at least run all code...

#23 Updated by Jérôme BATAILLE over 1 year ago

Daniel Ritz wrote:

Ah no...I was just referring to comment 3 here. That also reminded me to take care of sub-uri. I actually have it deployed at /redmine, but that slips so easily because stuff works just fine with a cookie's path at / instead of /redmine...

I have to test my plugin against that.

I guess just the controller with its views should be fine, the JS part would be Capybara with PhantomJS and stuff...I wouldn't worry too much about that. I always use simplecov to make sure I get good coverage...and in turn use simplecov on all other plugins just to get an idea if the tests at least run all code...

Thanks for these informations that will be helpful.

#24 Updated by Jérôme BATAILLE over 1 year ago

I have developped a new version that does not need anymore changing the layout view.

Feel free to test it : https://github.com/Smile-SA/redmine_smile_togglesidebar

#25 Updated by Jérôme BATAILLE about 1 year ago

I have added full tests in new version (1.0.4)

This plugin has been used for more than 2 years in our company and the button appears correctly in all the pages.

#26 Updated by Toshi MARUYAMA about 1 year ago

  • Related to Patch #21808: Make the Sidebar collapsible, stateful added

#27 Updated by Jérôme BATAILLE 6 months ago

Hi,

You can close this issue as we have provided a plugin that is totally compliant with all Redmine versions (tested with last Redmine 3.3.1)

Also available in: Atom PDF