Patch #21808

Make the Sidebar collapsible, stateful

Added by Daniel Ritz over 1 year ago. Updated 3 months ago.

Status:Needs feedbackStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:Candidate for next major release

Description

This adds a button to the sidebar to make it collapsible. The state is preserved between requests with a cookie.

This seems to be a feature that is missed. There's a few plugins that implement something similar. Some of them:

And there are related issues, at least: #12032, #10525

Because of high demand from my users, I did something similar in a theme at work. This is basically that plus it's stateful now.

This patch:
  • Adds the relative URL root as a meta property in the head tag
  • Adds a simple <a> to the sidebar as collapse/expand button
  • Makes the .content a BFC taking the remaining width
  • Few lines of javascript to toggle CSS and set a cookie
  • Sidebar is hidden by setting its margin-right
  • Nice hiding animation using CSS for browsers that support it
  • The state of the sidebar is read from the cookie and applied on page load
  • Good theming support since it's mostly just CSS

Based on r15095, passes all tests with Ruby 2.1.5. Tested on FF, Chrome, Safari (+ an earlier, stateless version on IE11)

Screenshot: Screenshot

0001-Make-sidebar-collapsible.patch Magnifier (6.16 KB) Daniel Ritz, 2016-01-23 21:49

collapsible_sidebar.png - Screenshot (16.1 KB) Daniel Ritz, 2016-01-23 21:54

Screen Shot 2016-01-29 at 00.20.06.png (78.7 KB) Marius BALTEANU, 2016-01-28 23:20

0001-Make-sidebar-collapsible-r15348.patch Magnifier - Re-based on top of r15348 (6.16 KB) Daniel Ritz, 2016-04-23 18:33

0001-Make-sidebar-collapsible-r15746.patch Magnifier - Rebased for 3.3-stable as of r15746 (5.19 KB) Daniel Ritz, 2016-08-20 20:20

0001-make-the-sidebar-collapsible-with-per-page-state.patch Magnifier - local storage based solution with per page sidebar state (5.55 KB) Jens Krämer, 2016-09-01 02:39

before.png (94.2 KB) Marius BALTEANU, 2016-09-07 20:44

after.png (96.9 KB) Marius BALTEANU, 2016-09-07 20:44

0001-make-the-sidebar-collapsible-with-per-page-state.patch Magnifier - updated version of the patch addressing the issues from comment 20 (6.71 KB) Jens Krämer, 2016-10-11 06:14


Related issues

Related to Redmine - Patch #12032: Collapsible Sidebar New
Related to Redmine - Feature #10525: A new button to hide/show the sidebar New
Related to Redmine - Feature #24671: Make the header fixed New
Duplicated by Redmine - Feature #5746: Feature Request - Allow the sidebar to be collapsable Closed 2010-06-24

History

#1 Updated by Marius BALTEANU about 1 year ago

+ 1

It works great on Redmine 3.2.0. Maybe the design is a little bit to obvious for the default Redmine theme, but overall it will be nice to have this available along with the UI changes planned for 3.3.0. In addition to the plugins mentioned in the description, there are also many custom themes that implement this feature (unfortunately not so good).

#2 Updated by Marius BALTEANU about 1 year ago

I made more tests and I found the attached issue Screen Shot 2016-01-29 at 00.20.06.png

#3 Updated by Daniel Ritz about 1 year ago

Marius Balteanu wrote:

I made more tests and I found the attached issue Screen Shot 2016-01-29 at 00.20.06.png

It looks like like the <body> gets too wide for some reason. What exactly did you do to get to this state? Do you have any plugins installed that might mess with the CSS? What browser were you using? I'll try to reproduce and fix..

#4 Updated by Marius BALTEANU about 1 year ago

I made the tests on Redmine 3.2.0 with all the plugins removed, plugins_assets folder removed and cache cleared.
To reproduce:
  1. Open the projects page
  2. Hide the sidebar
  3. Observe that the horizontal scroll is available
  4. Scroll to right.

Tested on Windows 10 & OSX environments with latest Chrome version.

Regarding the "technical" solution, we already integrated your patch on our staging environment and we changed a little bit the way in which we hide the sidebar in order to fix the bug. Instead of margin-right: -22% we added a margin-right: 0, width:30px (we use our own theme with a wider sidebar) and overflow: hidden;

#5 Updated by Daniel Ritz about 1 year ago

Thanks for the feedback. Found the problem..the "Redmine 3.2" is why it breaks and shows the horizontal scroll bar. I only tested it on current trunk. To make it work in 3.2, you need this in the CSS as well:

#wrapper {
  overflow: hidden;
}

This got added in r15067 (#20632).

margin-right:0; width:30px; will cause the sidebar to re-flow during animation and change it's layout (and it doesn't make the horizontal scroll bar disappear for me, but then again I didn't really test on 3.2, just changed some CSS rules back and possibly missed some..)

#6 Updated by Go MAEDA about 1 year ago

  • Target version set to 3.3.0

Works fine for me. Thanks for this great patch. Sliding motion is pretty good.

#7 Updated by Go MAEDA about 1 year ago

  • Target version deleted (3.3.0)

#8 Updated by Martin P. about 1 year ago

This is how i tweak Redmine to hide/show the sidebar:

I just add the following lines at the bottom of the file

./public/javascripts/application.js

var sidebarIsHidden = new Boolean(false);

function changeSidebar(){
    if(sidebarIsHidden == false){
        sidebarIsHidden = new Boolean(true);
        hideSidebar();
    } else {
        sidebarIsHidden = new Boolean(false);
        showSidebar();
    }
}

function showSidebar(){
  document.getElementById("sidebar").style.visibility = "visible";
  document.getElementById("content").style.width = "80%";
  document.getElementById("sidebarButton").value = ">";
}

function hideSidebar(){
  document.getElementById("sidebar").style.visibility = "hidden";
  document.getElementById("content").style.width = "98.5%";
  document.getElementById("sidebarButton").value = "<";
}

function myInit() {
  document.getElementById("content").style.width = "80%";
  document.getElementById("sidebar").style.width = "18%";
  var div = document.createElement('div');
    div.className = 'sidebarHideShow';
    div.id = 'sidebarHideShowButton';
    div.innerHTML = '<input type="button" value=">" onclick="changeSidebar()" id="sidebarButton" style="position:absolute; right:1px; top:105px; z-index:10; width:25px;" />';
  document.getElementById('content').appendChild(div);

}

$(document).ready(myInit);

Yes, might be a dirty hack but it works for me with the default and the classic theme.

Maybe it helps one or two of you without the need to install any plugin.

#9 Updated by Toshi MARUYAMA about 1 year ago

#10 Updated by Toshi MARUYAMA about 1 year ago

  • Related to Feature #10525: A new button to hide/show the sidebar added

#11 Updated by Daniel Ritz about 1 year ago

New patch, re-based on top of r15348 (didn't apply anymore).

#12 Updated by Marius BALTEANU 10 months ago

Go MAEDA wrote:

Works fine for me. Thanks for this great patch. Sliding motion is pretty good.

@Go MAEDA, is there any change to have this patch prioritised in 3.4.0?

#13 Updated by Sebastian Paluch 10 months ago

+1

#15 Updated by Daniel Ritz 8 months ago

0001-Make-sidebar-collapsible-r15746.patch applies cleanly to 3.3-stable and current trunk

#16 Updated by Go MAEDA 8 months ago

  • Duplicated by Feature #5746: Feature Request - Allow the sidebar to be collapsable added

#17 Updated by Jens Krämer 8 months ago

Thanks Daniel for opening this issue and for working on your patch. Since we had implemented this feature in Planio a while ago, I thought we can share our implementation as well which takes a slightly different approach:

We store sidebar state in localStorage, separately for each controller/action combination. We think this is reasonable because e.g. one might always want to see the sidebar on the issues detail page, but not on the issue list. Or the other way around. The localStorage API is widely supported in browsers nowadays. Our solution simply degrades to a non-persistent collapsible sidebar in case it isn't available - you can hide it but it will be visible again after page reload. localStorage has the advantage of not enlarging request headers and of keeping all state on the client – since the server does not have to know about the sidebar state at all.

From comparing both patches it looks we're a little bit less invasive in terms of CSS / DOM changes, and if no Javascript is enabled for whatever reason, the 'hide sidebar' UI element will not be shown at all.

I hope this isn't coming too late – we should have shared our version earlier, sorry – but I'd be in favour of our patch for above reasons.

#18 Updated by Go MAEDA 8 months ago

Jens Krämer, thanks for sharing the patch. I tried out the patch and it works fine.

#19 Updated by Go MAEDA 8 months ago

  • Target version set to 3.4.0

#20 Updated by Marius BALTEANU 8 months ago

Thanks for prioritising this feature in 3.4.0.

I tested now the patch uploaded by Jens Krämer and I think that it is very useful to save the sidebar state per controller/action.

Below are some points that I want to address here regarding the patch:
  1. After the patch is applied, the sidebar becomes wider and also the space between the left part of the sidebar and its content (see before.png and after.png).
  2. When the sidebar is in state collapsed and you reload the page, you can observe that first the sidebar is shown as expanded (for less than 1 sec) and after that the collapse action is triggered.
  3. When the page is loading, the contextual icons have a position and after the sidebar-switch-panel element is added to the DOM from JS, the initial position changes a little bit to the left (shakes).
  4. The space between contextual link (Add issue for example) and >> from sidebar-switch-panel is to small and you can easily click on the Add issue link instead of >> if you are not too careful.

I know that points 2 and 3 are generated by the Javascript solution and they are not so big issues, but they are disturbing for the eye (from my point of view and as QA).

Also, maybe is a good idea to make the >> element sticky in order to be able to collapse/expand the sidebar regardless your position in page (there are often cases when you scroll down).

#21 Updated by Jens Krämer 8 months ago

Thanks for your feedback, I'll have a look at fixing these issues.

#22 Updated by Alexander Movchikov 7 months ago

Thank you for 0001-make-the-sidebar-collapsible-with-per-page-state.patch
Works in modern browser, in IE9 and up

Unfortunately my users still use IE8 and this path not works. Moreover issue filter is broken because of javascript error.
You may open internet explorer, press F12 and select IE8 comparability mode to test this.

Problem is in file public\javascripts\application.js

localStorageKey = '-' + bodyClass.split(/\s/).filter(function(s){
return s.match(/(action|controller)-.*/);
}).sort().join('-');

you have to change
bodyClass.split(/\s+/)
to
$(bodyClass.split(/\s+/))

and still could not solve problem with
s.match(/(action|controller)-.*/);

This is a snippet for debugging
https://jsfiddle.net/movcale/xbkgw8wf/1/

#23 Updated by Alexander Movchikov 7 months ago

My workaround for IE8, of course it can be optimized

      if(bodyClass){
//        localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){
//          return s.match(/(action|controller)-.*/);
//        }).sort().join('-');
          var allItems  = bodyClass.split(/\s+/);
          var filterItems  = [];
          for(i in allItems){
              if(allItems[i].indexOf("action-") > -1 || allItems[i].indexOf("controller-") > -1){
                  filterItems.push(allItems[i]);
              }
          }
          for(i in filterItems.sort()){
              localStorageKey += filterItems[i] + "-";
          }
          localStorageKey = localStorageKey.substring(0, localStorageKey.length -1);
      }

#24 Updated by Go MAEDA 7 months ago

Alexander Movchikov wrote:

Unfortunately my users still use IE8 and this path not works. Moreover issue filter is broken because of javascript error.

Since support for IE8 has been discontinued by Microsoft on January 12, 2016.
https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support

Does Readmine really have to support IE8?

#25 Updated by Jean-Philippe Lang 7 months ago

When the sidebar is in state collapsed and you reload the page, you can observe that first the sidebar is shown as expanded (for less than 1 sec) and after that the collapse action is triggered.

I'm experiencing this issue with Chrome (not with Firefox or IE). This is really annoying, is there anything we can do to prevent this?

#26 Updated by Jan from Planio www.plan.io 7 months ago

Jean-Philippe Lang wrote:

When the sidebar is in state collapsed and you reload the page, you can observe that first the sidebar is shown as expanded (for less than 1 sec) and after that the collapse action is triggered.

I'm experiencing this issue with Chrome (not with Firefox or IE). This is really annoying, is there anything we can do to prevent this?

We had this bug in Planio as well and it was fixed, so I assume the bugfix just didn't carry over in Jens' patch. We will have a look.

#27 Updated by Jens Krämer 7 months ago

Sorry for the delay. I uploaded an updated version of the patch that should address the issues raised in comment 20.

I don't have IE8 handy but now the code should fall back to a shared global persistent state on this browser instead yielding a JS error. I'm reluctant to add any more than this simple fallback for this ancient browser.

#28 Updated by Marius BALTEANU 7 months ago

Jens Krämer wrote:

Sorry for the delay. I uploaded an updated version of the patch that should address the issues raised in comment 20.

I don't have IE8 handy but now the code should fall back to a shared global persistent state on this browser instead yielding a JS error. I'm reluctant to add any more than this simple fallback for this ancient browser.

Hi Jens,

Thanks for the new version of the patch. I tested it now and it works very well.

#29 Updated by Jean-Philippe Lang 4 months ago

  • Status changed from New to Needs feedback
  • Target version deleted (3.4.0)

I'd prefer not to add this to the core. I find it awkward to toggle some part of the UI. If there are some views where the sidebar content does not need to be always visible, then we should use something else, like a dropdown.
For example on the issue list, we could move the list of queries to a drop down list in order to remove the sidebar and save the space for the content.

#30 Updated by Sebastian Paluch 4 months ago

Collapse-able sidebar (as plugin) is extremely useful stuff on all kind of views, not only issues but also many others delivered by plugins.
Sidebar is there, and most likely will be there for very, very, very long time. Until it is gone, having this patch in core would be great improvement.

#31 Updated by Go MAEDA 4 months ago

Could you please reconsider adding this feature? The plugin "Hide Sidebar" is second most popular in http://www.redmine.org/plugins and so many people longing for this feature (please see comments and watchers of #21808, #12032, #10525 and #5746).

I'd prefer not to add this to the core. I find it awkward to toggle some part of the UI.

I don't think it is awkward. Toggling sidebar is very common (Google Maps, right sidebar in Slack, and so on). And there are no negative effect on those who don't want to hide sidebar.

#32 Updated by pasquale [:dedalus] 4 months ago

Go MAEDA wrote:

I don't think it is awkward. Toggling sidebar is very common (Google Maps, right sidebar in Slack, and so on).
And there are no negative effect on those who don't want to hide sidebar.

+1

#33 Updated by Marius BALTEANU 4 months ago

I really think that adding this patch to the core will be a great UI improvement. In addition to Sebastian Paluch and Go Maeda notes, many maintained themes (eg: Abacus, Circle, Purple Mine2, Alex Skin) implement this feature (but without storing the sidebar state which is very cool) and we do also in our custom theme.

I'd prefer not to add this to the core. I find it awkward to toggle some part of the UI.

If you still consider awkward, what about adding this to the core but with the toggle button hidden in the default themes? In this way, each Redmine instance administrator can decide from their theme to enable/disable the feature.

For example on the issue list, we could move the list of queries to a drop down list in order to remove the sidebar and save the space for the content.

Indeed, the custom queries can be moved from the sidebar in other place (above or under the filters for example), but I don't think that the dropdown is the best solution because it requires two clicks each time when you want to use a custom query. But this is another discussion.

#34 Updated by Robert Schneider 4 months ago

I find it also not perfect to have the collapsible sidebar. Okay, it's better than having a fixed bar. IMHO the hover effect would be more suitable for such things.

I've just created another feature request #24671 which might bring the issue into another direction. If we would have an always visible header the sidebar entries could be moved to the navigation/menu.

What do you think about this idea?

#35 Updated by Keita K 4 months ago

※Comment for the first time. I'm studying English. So please be patient if I make some mistakes.

A) Users who want to hide sidebar.
The main content area can be expanded.

B) Users who don't want to hide sidebar.
They have no negative effect. Because it is the same as before.

C = A & B) Users who want to show or hide the sidebar, It's me!
The sidebar content may not need to be always visible, but may need to be always visible.
I hope it to be able to choose either, depending on the situation.

I believe that collapsible sidebar is choosable for user.

Thank you for Redmine.

#36 Updated by Akipii Oga 4 months ago

+1

#37 Updated by Go MAEDA 4 months ago

  • Target version set to Candidate for next major release

As we can see in the comments of #5746, #10525, #12032 and this issue, many users looking forward to this feature.
I am setting target version again, to "Candidate for next major release".

Jean-Phillipe, could you please consider again? As I wrote on #21808#note-31, there are no negative effect on those who don't want to hide sidebar.

#38 Updated by Robert Schneider 3 months ago

Has anyone considered mobile presentation? How should it look like and how should it behave?

#39 Updated by Jan from Planio www.plan.io 3 months ago

Robert Schneider wrote:

Has anyone considered mobile presentation? How should it look like and how should it behave?

Yes of course. On mobile, the sidebar is always hidden by default to save space. The sidebar can be expanded by clicking on the ≡ icon.

#40 Updated by Robert Schneider 3 months ago

Thank you for clarification, Jan!

#41 Updated by Toshi MARUYAMA 3 months ago

Also available in: Atom PDF