Feature #10525: A new button to hide/show the sidebar - Redmine

Actions

Copy link

Feature #10525

closed

A new button to hide/show the sidebar

Added by Jérôme BATAILLE about 12 years ago. Updated over 4 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Category:

Target version:

Start date:

Due date:

% Done:

Estimated time:

Resolution:

Duplicate

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

Files

Download all files

maximize.ico (1.66 KB) maximize.ico		Jérôme BATAILLE, 2012-03-22 16:55
minimize.ico (1.66 KB) minimize.ico		Jérôme BATAILLE, 2012-03-22 16:55
redmine_smile_togglesidebar_V1.0.tgz (9.57 KB) redmine_smile_togglesidebar_V1.0.tgz		Jérôme BATAILLE, 2013-04-25 15:47
diamonds.png (1.36 KB) diamonds.png		Vladimir Pitin, 2013-08-14 11:59
close.png (1.31 KB) close.png		Vladimir Pitin, 2013-08-14 11:59

Related issues

Actions

Copy link

Updated by Jérôme BATAILLE about 12 years ago

File maximize.ico maximize.ico added
File minimize.ico minimize.ico added

Actions

Copy link

Updated by Yuri Makarov about 12 years ago

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

Actions

Copy link

Updated by Jean-Philippe Lang almost 12 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.

Actions

Copy link

Updated by Daniel Felix about 11 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

Actions

Copy link

Updated by Jérôme BATAILLE about 11 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.

Actions

Copy link

Updated by Daniel Felix about 11 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. :-)

Actions

Copy link

Updated by Jérôme BATAILLE about 11 years ago

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

Actions

Copy link

Updated by Jérôme BATAILLE almost 11 years ago

File redmine_smile_togglesidebar_V1.0.tgz redmine_smile_togglesidebar_V1.0.tgz added

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).

Actions

Copy link

Updated by Vladimir Pitin over 10 years ago

File diamonds.png diamonds.png added
File close.png close.png added

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);
  }

Actions

Copy link

#10

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

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

Actions

Copy link

#11

Updated by Jean-Philippe Lang over 10 years ago

Target version changed from 2.4.0 to Candidate for next major release

2.4 feature freeze

Actions

Copy link

#12

Updated by Jérôme BATAILLE over 10 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).

Actions

Copy link

#13

Updated by Jérôme BATAILLE almost 10 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.

Actions

Copy link

#14

Updated by Sebastian Paluch over 8 years ago

Actions

Copy link

#15

Updated by Kirill Bezrukov (RedmineUP) over 8 years ago

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

Actions

Copy link

#16

Updated by Jérôme BATAILLE over 8 years 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 ?

Actions

Copy link

#17

Updated by Go MAEDA over 8 years ago

Has duplicate Feature #8982: Hide right panel added

Actions

Copy link

#18

Updated by Daniel Ritz over 8 years ago

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

Actions

Copy link

#19

Updated by Jérôme BATAILLE about 8 years 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.

Actions

Copy link

#20

Updated by Daniel Ritz about 8 years 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...

Actions

Copy link

#21

Updated by Jérôme BATAILLE about 8 years 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.

Actions

Copy link

#22

Updated by Daniel Ritz about 8 years 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...

Actions

Copy link

#23

Updated by Jérôme BATAILLE about 8 years 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.

Actions

Copy link

#24