Jump to content

4.50.50 That's just lovely... is there a option to toggle navbar expansion closed by default?


chef

Recommended Posts

Some extremely welcoming additions to the Server Dashboard.

I didn't even know that I wanted to have have an expansion toggle on  each navbar section until I got it. That makes things much tidier. Very nice...😉!

 

Is there an option somewhere, that I can enable, that would have the sections 'closed' by default on load? 

I don't even care if it's in the javascript somewhere. I'm sure I'll find it sooner or later, but maybe there is an option.

 

Thanks for the hard work on the new options in the UI. All the little things that make it great.

 

 

 

 

Link to comment
Share on other sites

Happy2Play

I know it was added in 4.5.0.21 and removed from the dashboard after that version.  But I know this is all beyond me but would look in \system\dashboard-ui\modules\navdrawer.

  • Thanks 1
Link to comment
Share on other sites

Oh... ticky, tricky... 😆

 

Inside "navdrawercontent.js" the nav has a data attribute 

data-expanded="true"

 

this must be set to:

data-expanded="false"

 

And it will load the dashboard with everything collapsed.

 

I'm gonna put a conditional in there to load them all collapsed, except for "Server".

 

 

 

 

Link to comment
Share on other sites

 I did this to change all navbar sections collapsed except "Server" on load :)

 

From:

data-expanded="true"

To:

data-expanded='+(item.name=="Server"?"true":"false")+'

This makes sense because the dashboard loads on the "Dashboard" navbar item, which is under the heading "Server", so this should be open, with "Dashboard" highlighted.

Perfect!

 

Edited by chef
Link to comment
Share on other sites

Hey @Happy2Play check this out. this is how my dashboard loads now. 

But the best part, I switched material icons to material  SVG icons, and now it scales really nicely. 👍

It was little tricky to find everything, but I found most of it. I put most of the code in js file that can be thrown into the root after an update to remake the changes. Cool eh  :)

 

 

DashboardEdits.png

Edited by chef
  • Like 1
Link to comment
Share on other sites

PenkethBoy

cant seem to get the dashboard to be expanded with the Server query?

[edit]

can you be selective with which element is collapsed?

@chef

Edited by PenkethBoy
Link to comment
Share on other sites

1 hour ago, PenkethBoy said:

cant seem to get the dashboard to be expanded with the Server query?

[edit]

can you be selective with which element is collapsed?

@chef

Yes you can be selective.

this is the snippet code taken from the navdrawercontent.js in it's default mode

menuHtml+='<div is="emby-collapse" title="'+item.name+'" data-expanded="true" class="navDrawerCollapseSection" 

 

If we look at the navbar we can see each section has a title:

navTitles.png.999eb4f265d2f86d2f7c7ca3cd0605b1.png

 

Which is the:

title="'+item.name+'"

 

The nav sections are being created in a loop, which is grabbing the "item.name" (the "Title" for each section)

Since we know it gets created there, we can create a conditional which will target the "item.name" in the loop and set the "data-expanded" as needed.

The new code would look like this:

menuHtml+='<div is="emby-collapse" title="'+item.name+'" data-expanded=' + (item.name == "Server" ? "true" : "false") +' class="navDrawerCollapseSection" 

We can do it for each section, by lengthening the conditional statement

menuHtml+='<div is="emby-collapse" title="'+item.name+'" data-expanded=' + (item.name == "Server" || item.name == "Admin" ? "true" : "false") +' class="navDrawerCollapseSection" 

which would keep only Server, and Admin open with the rest closed.

 

Let me know if I've made sense :) 

 

Or we could be like Luke and start using "!0" or "!1" as boolean values all over, LOL!

!0  = "not false" = "true"

!1 = "not true" = "false"

We almost have DeMorgans law there... LOL!

Edited by chef
  • Like 3
Link to comment
Share on other sites

  • 2 months later...
29 minutes ago, cochize1 said:

ok, so is it still working in 4.5.4.0 or am I missing something?

Still works. You may need to clear the cache/cookies from the last hour. That's what I do and then it works

  • Like 1
Link to comment
Share on other sites

cochize1
22 minutes ago, kaj said:

Still works. You may need to clear the cache/cookies from the last hour. That's what I do and then it works

of course it works, I was modifying the 'Colections' part of the scrpt by mistake, thanks for answering

  • Haha 1
Link to comment
Share on other sites

  • 1 month later...
cochize1

@chefI was trying it by myslef but it's above my pay grade. How do I set My Media under the hamburger button to always start expanded and everything else collapsed?

Link to comment
Share on other sites

cochize1
On 9/24/2020 at 5:46 AM, chef said:

We can do it for each section, by lengthening the conditional statement


menuHtml+='<div is="emby-collapse" title="'+item.name+'" data-expanded=' + (item.name == "Server" || item.name == "Admin" ? "true" : "false") +' class="navDrawerCollapseSection" 

which would keep only Server, and Admin open with the rest closed.

Sorry, missed this bit. Question answered.

Link to comment
Share on other sites

1 hour ago, cochize1 said:

Sorry, missed this bit. Question answered.

So you're good? 😀

  • Like 1
Link to comment
Share on other sites

cochize1

yup, even changed Collections to be always expanded by switching false to true. I am so proud of myslef:)

Now I will try to play around with other bit of your code and switch drawer icons, If I'll need help, I'll kindly ask for it in different topic. Thanks!

Link to comment
Share on other sites

Just now, cochize1 said:

yup, even changed Collections to be always expanded by switching false to true. I am so proud of myslef:)

Now I will try to play around with other bit of your code and switch drawer icons, If I'll need help, I'll kindly ask for it in different topic. Thanks!

I wrote a thread somewhere which edited the draw icons in the custom css. It hid the default ones and added svg icons for each draw link.

Not only are the scalable, but they load immediately when the dashboard loads.

No call out to google material for icons.

Let me know if I can help.

Link to comment
Share on other sites

cochize1
On 1/20/2021 at 3:56 PM, cochize1 said:

yup, even changed Collections to be always expanded by switching false to true. I am so proud of myslef:)

I have noticed that the expanded 'Server' works ok in Firefox but in the main drawer switching from false to true for the My Media section does not expand that and you still have to do it manually (it works in Chrome though). Any ideas why?

Link to comment
Share on other sites

  • 2 years later...
cochize1

So, is changing from false to true in "data-expanded" in navdrawercontent.js still working for i.e. Collections in server 4.7.13 or am I missing somerthing again?

 

Link to comment
Share on other sites

4 hours ago, cochize1 said:

So, is changing from false to true in "data-expanded" in navdrawercontent.js still working for i.e. Collections in server 4.7.13 or am I missing somerthing again?

 

HI, your custom css may require some adjustment from one release to the next.

Link to comment
Share on other sites

cochize1

Hi Luke, yes, I know that about css code and I have redesigned mine completely after the update. But this part reffers only to modyfying navdrawercontent.js file, not css. It was simple as that if you changed value 'false' to 'true' you could have had any section in the drawer expanded but right now it seem to make to effect. Hence my question, what should I modify to have my Collectiions expanded in the drawer and leave Lists collapsed (as it is already)?

Link to comment
Share on other sites

cochize1

Ok, scratch that. It was just a matter of clearing my cookies in the browser. Everything is working fine as it should.

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...