Add collapsible sidebar by roland-d · Pull Request #4197 · joomla/joomla-cms

roland-d · 2014-08-29T18:36:49Z

This is an attempt to bring collapsible sidebars into Joomla!

What problem is being solved

The problem that is being solved is that of the sidebar using too much screen space while at the same time maintain the usefulness of the sidebar. This is a spin-off from the discussion in PR #4178.

Proof of concept

Currently this PR only deals with the articles list as a proof of concept. Once we have reached a mutual agreement I will implement the needed code in all applicable views.

How to test

Apply this PR and navigate to Content -> Article manager. You will see an icon above the sidebar.
Click on the icon to collapse the sidebar
Close the sidebar
Navigate to another page
Go back to the articles list
Check that the sidebar is still collapsed

Todo

Test with RTL
Disable functionality on small (phone) screen devices

Questions

JavaScript code is currently embedded in the articles page. Can this be moved to core.js?
How can we check for small screen devices in PHP or JS to disable this option?
Is this icon OK or is another icon preferred?
Is the JavaScript code OK or can it be optimized?

Before

After

dbhurley · 2014-08-29T18:38:48Z

Great concept, in my opinion this needs better UI. Icon should be different and overall "sidebar" be more obviously a "panel" .

roland-d · 2014-08-29T18:41:04Z

All suggestions on how to improve are welcome. As I am a coder and not a designer, help in this department would be greatly appreciated.

peterlose · 2014-08-29T19:09:56Z

Perhaps a button could be placed next to the search tools?

brianteeman · 2014-08-29T19:16:13Z

Great start. Probably the wrong icon - I think that one is usually for
power standby - but that's a minor issue.
On 29 Aug 2014 20:09, "Peter Lose" notifications@github.com wrote:

Perhaps a button could be placed next to the search tools?

[image: skaermbillede 2014-08-29 kl 21 07 24]
https://cloud.githubusercontent.com/assets/1738811/4095120/f1b99b4e-2faf-11e4-8a33-cdc40a382870.png

[image: skaermbillede 2014-08-29 kl 21 08 31]
https://cloud.githubusercontent.com/assets/1738811/4095119/f1b75140-2faf-11e4-96b7-ce8e080276aa.png

—
Reply to this email directly or view it on GitHub
#4197 (comment).

roland-d · 2014-08-29T19:32:06Z

@losedk Which icon is that in your screenshot?

peterlose · 2014-08-29T19:33:24Z

@roland-d it's icon-list-2

roland-d · 2014-08-29T20:13:36Z

@losedk Updated the PR to reflect the proposed button change before the searchbox. Looks and works pretty good I think.

peterlose · 2014-08-29T20:32:19Z

@roland-d looks cool!

Just a few comments:

The value of the localstorage is changed on click, but it isn't stored
There's a alignment issue when removing span2 from the sidebar:
When fixed there is a need to change the paddings of the toolbar:
It would be nice to add a tooltip explaining what the button do

roland-d · 2014-08-29T21:06:35Z

@losedk Thanks for testing.

The value of the localstorage is changed on click, but it isn't stored

What makes you think that? The code:

localStorage.setItem('com_content_sidebar_visible', jQuery('#sidebar').is(":visible"));

stores the value or not?

There's a alignment issue when removing span2 from the sidebar:

I don't see the issue, can you explain what to look for? Here are my open and closed shots.

Open

Closed

The tooltip has been added. Changes to the wording are welcome.

brianteeman · 2014-08-29T21:12:18Z

administrator/language/en-GB/en-GB.ini

Well it cant hide it if it is hidden or show it if is shown so this really needs simplifying.

"toggles the sidebar"?

Or two different based on the state:

Hide sidebar menu

Show sidebar menu

peterlose · 2014-08-29T21:14:18Z

@roland-d when refreshing the page the previous setting isn't applied. In my test when uncollapsing the sidebar and refreshing the sidebar remains collapsed.

Regarding the alignments:

roland-d · 2014-08-29T22:10:42Z

@losedk The state should be remembered now. Can you please check?

As for the alignments, the body never aligns with the toolbar buttons. Not before or after my change. This is the page using the current staging branch.

The language string depending on status, can be done but requires more JavaScript. We don't have any similar string anywhere in Joomla?

coolbung · 2014-08-30T06:57:14Z

Shouldn't we be using a cookie instead of localstorage to ensure browsers that don't have localstorage don't break ? Shouldn't there be a check as well to find out if localstorage is available ?

As for the icon I feel icon-arrow-right-4 & icon-arrow-left-4 would be more apt.

roland-d · 2014-08-30T07:29:16Z

@coolbung Cookies are possible too, just at first localStorage was suggested. How long should the cookie life be?

I will have a look at those icons as well.

coolbung · 2014-08-30T07:33:39Z

I'd suggest to use localstorage if available (that way the setting can be indefinitely remembered, unless cleared), otherwise use a cookie that has a 2 year validity.

Bakual · 2014-08-30T07:35:04Z

Browsersupport for localstorage seems to be good enough to use it:
http://caniuse.com/#search=localstorage

Bakual · 2014-08-30T07:36:21Z

Browsersupport of Joomla: http://docs.joomla.org/Joomla_Browser_Support
The browsers we support all support localstorage. So no need for a cookie.

…them state aware.

roland-d · 2014-08-30T08:00:17Z

@Bakual Thanks for that info Thomas.

Just made an update:

Using the icons proposed by @coolbung This looks better I think.
Made the icons state aware
Updated the language strings
Made the language strings state aware, we now have 1 string per state as proposed by @losedk

brianteeman · 2014-08-30T08:38:04Z

Tested everything I can think of and it works really well and I hope this will be accepted and applied to ALL views

The only small issue I have found is that using arrows doesnt work in RTL - they point in the wrong direction

roland-d · 2014-08-30T08:45:12Z

@brianteeman Thanks for testing. Good point on the arrows, I will take a look at that.

brianteeman · 2014-08-30T08:49:37Z

Maybe something that indicates expand and contract
icomoon-expand-3 icomoon-contract-3

roland-d · 2014-09-30T18:08:45Z

@JoomliC & @phproberto The new icons are in place.

Only thing I did not change was the placement of the X icon.

cyrez · 2014-09-30T18:28:46Z

@phproberto : i prefer to give idea and/or help. It is Roland idea and work (a good one!) ;-)
@roland-d : attached my css edit to give a similar styling with my screen capture (note: all 0px replace by 0, and i've added soft hover styling)

#j-sidebar-container {
    margin-right: 10px;
}
div#j-sidebar-container.j-toggle-hidden {
    width: 0;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button {
    position: absolute;
    color: #111;
    padding: 6px 4px 0 6px;
    border-radius: 0 4px 4px 0;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button {
    position: relative;
    color: #999;
    padding: 2px 5px;
    border-radius: 4px 4px 0 0;
    text-align: right;
    border-bottom: 1px solid #d3d3d3;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
#j-toggle-sidebar-button {
    left: 0;
    border-left: 0;
    background: #e1e1e1;
    margin-top: 0;
    cursor: pointer;
    height: 23px;
}
#sidebar {
    padding: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: linear-gradient(top,#ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);
    border-right: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0 0 4px 4px;
}
.j-toggle-visible #j-toggle-sidebar-icon {
    margin-top: 6px;
    margin-left: 4px;
}

cyrez · 2014-09-30T18:44:44Z

@roland-d : i've just updated my previous message by changing sidebar background to a gradient one (the same as subhead class (toolbar)) + a border-bottom for close icon header
;-)

roland-d · 2014-09-30T19:50:01Z

@JoomliC The changes look pretty neat. We need a fix for RTL. Check these images:

The regular button looks good:

With RTL the button needs to be mirrored:

Please have a look at that :)

cyrez · 2014-09-30T23:22:37Z

@roland-d : just needs to change border-radius for RTL
There my RTL version :

#j-sidebar-container {
    margin-left: 10px;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden {
    width: 0;
    margin-right: 0;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button {
    position: absolute;
    color: #111;
    padding: 6px 2px 0 4px;
    border-radius: 4px 0 0 4px;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button {
    position: relative;
    color: #999;
    padding: 2px 5px;
    border-radius: 4px 4px 0 0;
    text-align: left;
    border-bottom: 1px solid #d3d3d3;
}
div#j-sidebar-container.j-toggle-hidden #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
div#j-sidebar-container.j-toggle-visible #j-toggle-sidebar-button:hover {
    color: #555;
    background: #e6e6e6;
}
#j-toggle-sidebar-button {
    right: 0;
    left: auto;
    border-right: 0;
    background: #e1e1e1;
    margin-top: 0;
    cursor: pointer;
    height: 23px;
}
#sidebar {
    padding: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(top,#ffffff 0%,#ededed 100%);
    background: linear-gradient(top,#ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);
    border-right: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0 0 4px 4px;
}
.j-toggle-visible #j-toggle-sidebar-icon {
    margin-top: 6px;
    margin-right: 4px;
}
#j-main-container.expanded {
    margin-right: 0;
}

I don't know why css classes are splitted in your template-rtl.css ? Is there a specific reason ?

roland-d · 2014-10-01T07:04:29Z

@JoomliC Thanks that works. Tested it on both Windows and Mac.

I don't know why css classes are splitted in your template-rtl.css ? Is there a specific reason ?

It is because of the CSS generator. It takes the template.less and glues the template-rtl.less after that. This way any specific settings override the default ones.

infograf768 · 2014-10-01T07:46:14Z

Nice new icons

wilsonge · 2014-10-04T23:05:57Z

There's issues with the sidebar pushing content down on some installs. I got this on my laptop and noticed it on another at the bug squad session at #JD14UK

Can't get it consistently across all components but it's definitely an issue

roland-d · 2014-10-05T06:35:05Z

@wilsonge Are you commenting on this PR or you mean to comment on #4450 where things are changed again?

wilsonge · 2014-10-05T08:20:08Z

I mean this one - I was doing an unrelated test on the staging branch and discovered this

infograf768 · 2014-10-05T08:42:47Z

@wilsonge
it is pushed down if the class is id="sidebar-container" instead of id="j-sidebar-container"

@RemcoJanssen

Move button before searchbox Add tooltip Fix remembering state. Simplify language string. Layout fixes. Updated icons, made them state aware. Updated language strings, made them state aware. Updated icons, alpha ordered language file, added grey background to the sidebar. Make the code abstract Added check if localStorage is available. Added code change to compressed core.js. Added toggle button to all views. Generated CSS files based on less generator. Fixed toggle buttons on user views. Update template-rtl.less. Fixed toggle button being activated on enter in filter field. Moved button to the sidebar file. Added transition changes. Cleanup banners Cleanup banners Further cleanup Further cleanup Simplify hiding the sidebar Keep the button visible Add missing empty line Updated the sidepanel. Many thanks to @RemcoJanssen Fixed Plugin view using the wrong div ID Updated CSS for RTL languages Change the icons used for closing and opening. Updated CSS for RTL.

@RemcoJanssen

Move button before searchbox Add tooltip Fix remembering state. Simplify language string. Layout fixes. Updated icons, made them state aware. Updated language strings, made them state aware. Updated icons, alpha ordered language file, added grey background to the sidebar. Make the code abstract Added check if localStorage is available. Added code change to compressed core.js. Added toggle button to all views. Generated CSS files based on less generator. Fixed toggle buttons on user views. Update template-rtl.less. Fixed toggle button being activated on enter in filter field. Moved button to the sidebar file. Added transition changes. Cleanup banners Cleanup banners Further cleanup Further cleanup Simplify hiding the sidebar Keep the button visible Add missing empty line Updated the sidepanel. Many thanks to @RemcoJanssen Fixed Plugin view using the wrong div ID Updated CSS for RTL languages Change the icons used for closing and opening. Updated CSS for RTL.

gwsdesk · 2014-11-20T10:31:27Z

@test I love it and it works cool as per perception. Nice job and I would definitely merge this into J3.4 (!)

infograf768 · 2014-11-20T10:34:12Z

This has already been merged ages ago.
rather look at #5141

gwsdesk · 2014-11-20T10:36:31Z

Well I have not seen that...... I am sorry but thanks for correcting...
Will test that one rapidly and feed-back
On 11/20/2014 5:34 PM, infograf768 wrote:

This has already been merged ages ago.
rather look at #5141 #5141

—
Reply to this email directly or view it on GitHub
#4197 (comment).

http://gws-deals.today

parthlawate · 2015-02-04T05:24:16Z

If we can it would be great to have some kind of panels with the words 'Sidebar menu' or something on it instead of the icon.. Just reviewed this while writing the marketing copy for it.. It will be much more intuitive than just an arrow..

gwsdesk · 2015-02-04T06:13:06Z

I believe that this is a past station since this was extensively discussed above in October 2014 and we should not reopen that discussion I believe

parthlawate · 2015-02-04T06:34:17Z

@gwsdesk Yup sorry i came late to the party.. but should be considered for future releases.

brianteeman · 2015-02-04T09:27:20Z

If you want it to be considered then commenting on a CLOSED issue is not the best way for people to see it

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/4197.}

parthlawate · 2015-02-04T17:33:21Z

Sorry @brianteeman will add it a new issue. Was thinking of keeping things in context which is why i commented here. Did not know that it is bad practice..

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/4197.}

brianteeman · 2015-02-04T17:47:05Z

It is not about bad practice it is just that unless you are watching all PR via email no one will see this

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/4197.}

Add collapsible sidebar

c9e501f

jissues-bot added the PR-staging label Aug 29, 2014

roland-d mentioned this pull request Aug 29, 2014

Added icon support for JHtmlSidebar::addEntry #4178

Closed

Move button before searchbox

a1490a3

Add tooltip

c7422c5

peterlose mentioned this pull request Aug 29, 2014

[#31862] [JUX][05] Automatically show toolbar buttons depending on selected items... #2111

Closed

brianteeman reviewed Aug 29, 2014
View reviewed changes

Fix remembering state. Simplify language string.

fcc9c56

Layout fixes.

d756fdd

Updated icons, made them state aware. Updated language strings, made …

3394049

…them state aware.

Updated CSS for RTL.

3b95837

phproberto closed this in 641241e Oct 2, 2014

zero-24 mentioned this pull request Oct 5, 2014

[staging] Add collapsible sidebar && Update to sidebar toggle styling joomlagerman/joomla#52

Merged

cyrez mentioned this pull request Oct 5, 2014

Update to sidebar toggle styling #4450

Closed

dgrammatiko mentioned this pull request Nov 25, 2014

New update to sidebar toggle styling #5141

Closed

roland-d deleted the toggle-sidebar branch May 6, 2015 06:16

zero-24 removed the RTC This Pull Request is Ready To Commit label Oct 14, 2015

Bakual mentioned this pull request Apr 21, 2017

[4.0] Concept for sidebar navigation #15430

Merged

Uh oh!

Conversation

roland-d commented Aug 29, 2014

What problem is being solved

Proof of concept

How to test

Todo

Questions

Before

After

Uh oh!

dbhurley commented Aug 29, 2014

Uh oh!

roland-d commented Aug 29, 2014

Uh oh!

peterlose commented Aug 29, 2014

Uh oh!

brianteeman commented Aug 29, 2014

Uh oh!

roland-d commented Aug 29, 2014

Uh oh!

peterlose commented Aug 29, 2014

Uh oh!

roland-d commented Aug 29, 2014

Uh oh!

peterlose commented Aug 29, 2014

Uh oh!

roland-d commented Aug 29, 2014

Uh oh!

brianteeman Aug 29, 2014

Choose a reason for hiding this comment

Uh oh!

Bakual Aug 29, 2014

Choose a reason for hiding this comment

Uh oh!

peterlose Aug 29, 2014

Choose a reason for hiding this comment

Uh oh!

peterlose commented Aug 29, 2014

Uh oh!

roland-d commented Aug 29, 2014

Uh oh!

coolbung commented Aug 30, 2014

Uh oh!

roland-d commented Aug 30, 2014

Uh oh!

coolbung commented Aug 30, 2014

Uh oh!

Bakual commented Aug 30, 2014

Uh oh!

Bakual commented Aug 30, 2014

Uh oh!

roland-d commented Aug 30, 2014

Uh oh!

brianteeman commented Aug 30, 2014

Uh oh!

roland-d commented Aug 30, 2014

Uh oh!

brianteeman commented Aug 30, 2014

Uh oh!

roland-d commented Sep 30, 2014

Uh oh!

cyrez commented Sep 30, 2014

Uh oh!

cyrez commented Sep 30, 2014

Uh oh!

roland-d commented Sep 30, 2014

Uh oh!

cyrez commented Sep 30, 2014

Uh oh!

roland-d commented Oct 1, 2014

Uh oh!

infograf768 commented Oct 1, 2014

Uh oh!

wilsonge commented Oct 4, 2014

Uh oh!

roland-d commented Oct 5, 2014

Uh oh!

wilsonge commented Oct 5, 2014

Uh oh!