Vote #77121
未完了Make the Sidebar collapsible, stateful
0%
説明
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:
- https://www.redmine.org/plugins/sidebar_hide
- http://www.redmine.org/projects/redmine/wiki/PluginCollapse
- https://github.com/thambley/redmine-sidebar-hide
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 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: !collapsible_sidebar.png!
journals
+ 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).
--------------------------------------------------------------------------------
I made more tests and I found the attached issue Screen Shot 2016-01-29 at 00.20.06.png
--------------------------------------------------------------------------------
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..
--------------------------------------------------------------------------------
I made the tests on Redmine 3.2.0 with all the plugins removed, plugins_assets folder removed and cache cleared.
To reproduce:
# Open the projects page
# Hide the sidebar
# Observe that the horizontal scroll is available
# 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;
--------------------------------------------------------------------------------
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:
<pre>
#wrapper {
overflow: hidden;
}
</pre>
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..)
--------------------------------------------------------------------------------
Works fine for me. Thanks for this great patch. Sliding motion is pretty good.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
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*
<pre><code class="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);
</code></pre>
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.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
New patch, re-based on top of r15348 (didn't apply anymore).
--------------------------------------------------------------------------------
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?
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
@0001-Make-sidebar-collapsible-r15746.patch@ applies cleanly to @3.3-stable@ and current @trunk@
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Thanks Daniel for opening this issue and for working on your patch. Since we had implemented this feature in "Planio":https://plan.io/redmine-hosting 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.
--------------------------------------------------------------------------------
Jens Krämer, thanks for sharing the patch. I tried out the patch and it works fine.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
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:
# 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).
# 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.
# 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).
# 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).
--------------------------------------------------------------------------------
Thanks for your feedback, I'll have a look at fixing these issues.
--------------------------------------------------------------------------------
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/
--------------------------------------------------------------------------------
My workaround for IE8, of course it can be optimized
<pre>
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);
}
</pre>
--------------------------------------------------------------------------------
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?
--------------------------------------------------------------------------------
> 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?
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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?
--------------------------------------------------------------------------------
※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.
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
Has anyone considered mobile presentation? How should it look like and how should it behave?
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
Thank you for clarification, Jan!
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
This would be great. 99% of the time noone uses the sidebar here. This means that most of the time it's a waste of space.
Designs should steer away from such layouts with bars that are infinite, yet contain a tiny amount of information.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
I've reworked a little bit the patch posted by Jens Krämer in order to show 20px from the sidebar in state collapsed and to expand the sidebar on hover. The patch is not ready, it is only for demo purposes.
*1. State collapsed:*
!.collapsed.png!
*2. State expended:*
!expended.png!
*3. State expended on hover the collapsed sidebar:*
!expended_on_hover.png!
In this way, users will always have access to the sidebar content.
--------------------------------------------------------------------------------
This is really good, couldn't apply on latest revision, but I added a 18474 compatible version. I think however the bar should not be visible on the right side when collapsed, but I get the idea with a roll over state...
I think keeping it simple would be the best for the start, hence simple collapsing state. And then I think introducing a second button which could perhaps undock it entirely and turn it to the fly-out menu instead, and the other way around, I think Bernhard proposed something like that before.
--------------------------------------------------------------------------------
On issue edit page contextual link to add watchers still shown even though sidebar is collapsed.
!https://i.imgur.com/gHjTAGW.png!
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Keita K wrote:
> ※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.
Agree with this approach.
ccelis
--------------------------------------------------------------------------------
After years of lurking and learning, I created an account *solely* to comment on this issue.
My ten cents: this is a critical usability issue for anyone that actually wants to use their full screen. One of the best parts of Redmine for me is the ability to add issue fields and then create custom filters/sorts. Unfortunately, the fact that a full 25% of the screen is useless -- thank you, fixed sidebar! -- means that issue lists have a functional column limit.
I appreciate Jean-Phillipe's concern about the "awkwardness" of this solution, but given that the problem was solved for him 3 years ago, and given that in the intervening three years no other less awkward solution has magically come to life, it seems clear that we are cutting off our collective nose to spite our face. Can we use this as a first step?
tl/dr; this feature would be a *huge* usability improvement. I'd prefer awkward and functional over purist and incomplete. Can we get this request implemented? Pretty please?
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
+1
--------------------------------------------------------------------------------
+1
I've now joined just to comment on this as well.
Until this is added, when I need to use redmine where I am sharing my screen and need people to see the agile board in a usable way on my screen size (1920x1080), I use my browser's console window to hide the sidebar.
* @document.getElementById("sidebar").style.display="none";@
* or, @document.getElementById("sidebar").style.marginRight="-280px";@
After you can simply refresh the page to remove the style change.
This is silly to have to do with so much history and planning around this issue, but I thought this might be worth a post for others that are desperate to hide the panel sometimes.
--------------------------------------------------------------------------------
Anonymous wrote:
> This is really good, couldn't apply on latest revision, but I added a 18474 compatible version. I think however the bar should not be visible on the right side when collapsed, but I get the idea with a roll over state...
> I think keeping it simple would be the best for the start, hence simple collapsing state. And then I think introducing a second button which could perhaps undock it entirely and turn it to the fly-out menu instead, and the other way around, I think Bernhard proposed something like that before.
Thank you all for your help, this is a very helpful patch. We are using Redmine 4.2.1 so Anonymous's version did not work.
I don't know much about patching so this is what I could come up with. Besides making it work I also did some tweaking: eliminated the distance between content and sidebar; added simple CSS animation. I tested the applying of the patch and at least for us here, it works (on Chrome and Firefox bowsers, hehe).
I'm adding some print screens for anybody interested to see.
LE: I find this collapse addition really necessary with laptop/notebook sized screens.
--------------------------------------------------------------------------------
related_issues
relates,New,24671,Make the header fixed
relates,New,25686,Make the issues sidebar menu use accordion with JQuery
relates,Closed,32520,Issues activity gnats calendar tabs - too much real estate in high hand panel
duplicates,Closed,5746,Feature Request - Allow the sidebar to be collapsable
duplicates,Closed,12032,Collapsible Sidebar
duplicates,Closed,10525,A new button to hide/show the sidebar
Admin Redmine さんがほぼ2年前に更新
- カテゴリ を UI_10 にセット
- 対象バージョン を Candidate for next major release_32 にセット