Customizing Nav Drawer in Boost

Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Yanıt sayısı: 32
Plugin developers 'ın resmi

I am interested in learning where and how the new nav drawer is formed and displayed. 

 I'd like to prototype implementing the ability to click on checkboxes in theme admin to show/hide menu items that appear above the course topics/week list.

I'd also like to customize the menu that appears below the course list where it shows the list of courses and other items.  Just wondering how these get built and where I can inject new items?

Anyone care to help?

Thanks, 

Chris

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Mary Cooch (personal account) -
Documentation writers 'ın resmi Testers 'ın resmi

There are  conversations here that discuss some of it:

https://moodle.org/mod/forum/discuss.php?d=344068#p1387267

 https://moodle.org/mod/forum/discuss.php?d=345184 - not sure if they are  helpful.

Mary Cooch (personal account) yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Thanks Mary.  The first link was helpful.  I'm not quite sure how to tackle this so I'm going to try and better understand it first.

  • Where are the links built?  
  • What files are used to build and display flatnav?
  • How are they added to flatnav?

Ideally, I could manipulate the items that show up in a function that checks capability first before showing the link in the nav.  I just got experience doing this by adding This Course dropdown menu to Fordson theme.

Hopefully I can figure it out later this week.

In another post it was strongly discouraged from modifying this area of Boost.  However, I think a theme admin page which does the following would be highly desirable:

  • Checkboxes to show/hide main menu items
  • Cabability checks on items when needed
  • Possibly extend main items to include links to other common areas our teachers recommend as being useful
  • Ability to add menu items like you can with custom links and the text box.

Well, this is my pie in the sky.  We will see how far I get.

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Rafiq Muhammad -

Hi Chris,

If you don't mind hacking the code, you can find the codes that build the flatnav in lib/navigationlib.php

Look for

class flat_navigation extends navigation_node_collection

In the intialise function, all the codes that build the flatnav happen

This link is also useful

https://docs.moodle.org/dev/Boost_Navigation

Apparently, from what I understood, when Moodle build the navigation link, it flags those navigation links which are suppose to appear in the flat navigation. In the intialise function it basically loop through all the navigation links and add to the flat navigation if the value of

$coursenode->showinflatnavigation = true;

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan p p -

Hi Chris,

Did you get any further on this?

I would like to add the administration block to the nav drawer, or at least add a link to edit the course (but only if the admin is logged on)


Best regards,

Paul


p p yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan p p -

Don't know if this will help anyone but I eddited the lib/navigationlib.php

And added the following code:


if($this->page->course->id != 1){

       if ($admin) {

            $flat = new flat_navigation_node(navigation_node::create('Edit this course', 'edit.php?id='.$course->id), 0);

            $flat->set_showdivider(true);

            $flat->key = 'sitesettings';

            $this->add($flat);

}

}


This looks if the page id is not 1 (which is the homepage)

And then  creates an edit course button.

p p yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Not really.  I don't want to hack core files.

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan p p -

Yeah me nether but I couldn't find any other way üzgün

I would love to know if you find some kind of way to do it without a core hack 

p p yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

GOOD NEWS FOLKS... I found a local plugin that allows you to remove items from the Nav Drawer.  It's great by itself but can be much better when integrated with a theme.  

With integration in a theme we can introduce additional logic to control when to customize the menu.  For instance, you may want the default menu items on the site homepage but hidden once inside a course.  With the current setup I can hide the Dashboard, Private FIles, Calendar, and My Courses with simple checkboxes in the Fordson Theme Admin.  

I plan on adding the ability to further customize the Nav Drawer by adding your own links in a textbox kinda like the custom menu option.  So when I am done you will be able to hide the default items and add in your own items. 

The other thing I have in the works is a "My Course" drop-down that appears with the language drop down in custom menu area at the top of the page. This would be very useful if you turn off the My Courses from the nav drawer.  

The one area I am not looking at changing is the main course menu that appears when you are inside a course with topics, participants, etc.  

Look for this 1.3.0 version of Fordson https://moodle.org/plugins/theme_fordson

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Scott Hardwick -

Chris --- 

You are doing exciting work! 

You mentioned:

"The other thing I have in the works is a "My Course" drop-down that appears with the language drop down in custom menu area at the top of the page. This would be very useful if you turn off the My Courses from the nav drawer."

Is this something you think you will be releasing as part of a local plugin, or will it only be available within your theme?

Thanks!

Scott

Scott Hardwick yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

I am going to include it with the theme. It is ready to go and on Github.  Although github will change before release.  

There are three main areas where Fordson controls the menus:

* This Course drop-down

* Boost Navdrawer - Remove defaults and add new menu items

* My Courses dropdown

All settings are on the Menu Tab of the Fordson administration.


The current holdup is a new enrollment plugin we are developing that will be integrated (but not required) with Fordson.  Imagine being able to type a 6 digit code into a searchbox and instantly be enrolled into a course and the associated group!  This functions just like Google Classroom and Edmodo.  

Also imagine being able to have a child/parent scan a QR code via a camera such as a those on a chromebook and instantly be enrolled into a course! (Requires SSL on server)

As soon as we get a working enrollment plugin integrated with the theme we will be publishing the next release of Fordson which will also include the MyCourses dropdown.  Hopefully before the end of the week.

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan p p -

Hi Chris,

Great news! I've been looking into the Fordson Theme and it looks great!

I think the Idea to put the "Turn editing on" button back to the top is a good idea, I've implemented this into the nav drawer(but ofcourse with a core hack üzgün )

I've made my theme just for the company I work for so I can't really share anything.


Would love to keep up-to-date on the developments of the Fordson theme, what would be the best way to follow the progress?


Best regards,


Paul

p p yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Glad to hear you like Fordson.  If you like the theme the best way to show the developer is to make it a favorite in the plugin directory.  

I post about our progress and direction of Fordson right here in the forums. Usually in the discussion thread linked from the plugin page.  

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Randy Thornton -

Chris,

Thanks so much for the ability to hide the items in the Nav Drawer, that solves one of two of the biggest complaints with Boost I have gotten from users.

The other is to put back a direct Course administration link - in the Nav Drawer above Site administration would be perfect, and/or somewhere in the header alongside the This course button or the Turn editing on button you've rescued.

Unfortunately the course admin URL requires the course id parameter, so it's not possible to add it to your cool ability to put custom urls on the Nav Drawer.


Basically every teacher and course designer I work with detests the new course admin layout and all they want is one simple button that will show the entire flat course admin menu with one click.


Thanks

Randy

Randy Thornton yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Randy,

Great idea!  What if I put it as a custom option in the This Course drop down menu?  

I can probably get it into the nav drawer like you suggested as well.  Let me get a link working and I will see about adding it into the various areas.

You are referring to the page that loads when you click More in the edit gear correct?

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Randy Thornton -

Chris,

Yes, it's the page that loads when you do Gear > More,  the link structure is %wwwroot%/course/admin.php?courseid=#

The goal, as with restoring the Turn editing on button, is to reduce the clicks to one. 

Adding it to Nav Drawer is great. But when the drawer is closed then having it somewhere else it is constantly available like the Turn editing on button would be perfect. 

The idea is: avoid dropdowns and multi-clicks and restore the same type of direct access as the Admin block -- actually better, because the new flat menu style for Admin menus shows so much more at once and makes many tasks quicker and more direct than the Admin block where submenus had to be opened a lot. But it takes more work to get to the flat menu now.

I've tried showing people the 'This course' menu in the theme but most people react to it with 'That's good but it's yet another place' meaning there are now four places to have to go - Gear, Gear + More, Nav Drawer, This course - and each has different but somewhat over lapping options. It's too confusing.

Having a constant and standard access via the Nav Drawer and one other button to the course admin menu would be clean and simple.


Randy Thornton yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Randy,

This makes sense to me.  I will see where it might make most sense to put the link.  I have a few projects to get off my plate but will get this as part of the next release.

Chris

Randy Thornton yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Eric Bryant -

This is a really important issue we are facing at our institution too.  I'd like to have simple (e.g. one click) access to turn editing on.

Eric Bryant yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Fordson for Moodle 3.4 and 3.5 has the edit button always visible in the top navbar.  It also keeps the user on the same part of the page after editing is toggled.  We also put course management into a modal window with all the links organized for teachers.  This can be accessed at anytime from any page.

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Becky Borello -

Hi Chris,


I am very interested in your summer workshop.  I am now following you on Twitter so I will look forward to a tweet about it!  In the meantime, I am struggling greatly trying to make one theme do all the things I am looking for.  I noticed this in your 1.3 release notes:

## Fordson 1.3.0
*Customized Nav Drawer - Add and remove items from the Boost navigation drawer. Ability to have customizations appear on all pages, frontpage only, course pages only. Special thanks to Alexander Bias with https://github.com/moodleuulm/moodle-local_boostnavigation and Carlos Escobedo with https://moodle.org/plugins/local_navigation. I was able to combine these two plugins to remove default menu items and add new menu items. Because this is done with a theme we also added a toggle to allow you to determine where the customizations appear.


Is this still possible in your most recent version?  I would love to remove Private Files from the Nav Drawer.


Thanks,

Becky

Becky Borello yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

Becky,

For long term support we ended up removing this from the Fordson theme.  We had plans to expand it but those changed when we took on our Easy Enrollment plugin and Secure Chromebook Lockdown Browser for testing.  Sometimes you bite off more than you can chew.  We decided instead to just use the original plugin: https://moodle.org/plugins/local_boostnavigation

This plugin was what we based our implementation on but then we ran out of time and resources for improving upon it.  They have done an OUTSTANDING job since way back then and took this to new heights that even we didn't consider when we were dreaming of ways to improve upon it within our theme.  I highly recommend you check it out and you can totally remove the private files link along with many of the others as well.  

The tech camp is usually only $100 and includes lunch and ice cream for both days.  We are finalizing the details and there will be 2 separate tech camps this summer.

-Chris

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Alexander Bias -
Core developers 'ın resmi Particularly helpful Moodlers 'ın resmi Peer reviewers 'ın resmi Plugin developers 'ın resmi

Thanks, Chris, for the kind words about local_boostnavigation. As the maintainer of this plugin, I appreciate any positive feedback gülüyor

Cheers,
Alex

Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Alejandro Piñango -

Hi Chris, I need to add at nav drawer links to resources and activities in Topics like subtopics, Each topic with hierarchy level, i.e. a custom Topic can have like subtopic with activities and/or resources own. Is this possible in Boost or Fordsom themes? 

 

Best regards.

Ek pantalla2.png
Alejandro Piñango yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

I'd recommend checking out boost navigation fumbling plugin. We're planning on keeping Fordson using the core nav drawer but that plugin might do what you want.

We might add a few features in the future but we are waiting to see what our teachers need.  

The other exciting possibility is the whole right side of the screen can be used for a right side nav drawer.  We're thinking about that and what might be beneficial to put there.  


Chris Kenniburg yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Karishma Tiwari -

I'm using Boost Campus for my moodle 3.4, So far i have been able to manipulate the content/links of nav drawer using the Boost fumbling plugin.

However I have another thing I need to do. I need to change the on-hover colour for the links, how do I achieve this?


navdrawer

Karishma Tiwari yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Jean-Roch Meurisse -
Core developers 'ın resmi Plugin developers 'ın resmi Testers 'ın resmi

Hi 

Try to add this in Site administration --> Appearance --> Boost Campus --> Advanced settings --> scss

#nav-drawer .list-group div.list-group-item:hover, #nav-drawer .list-group a.list-group-item:hover {
    background-color: #c43;
    border-color: #c43;
}
Hope it helps

Jean-Roch Meurisse yanıt olarak

Re: Customizing Nav Drawer in Boost - Hide my courses children nodes

yazan Lisa Fontenot -

I'm looking for the code to hide all 10 children nodes from My courses in the Nav-drawer. I figured out how to hide them across the site by including this coding in the Raw SCSS block in the Advanced Settings of the Boost Theme: 
.list-group-item:nth-child(10){display: none;}, but I want to hide them in the nav-drawer only.

Thanks, Lisa

image of nav-drawer children nodes

Karishma Tiwari yanıt olarak

Re: Customizing Nav Drawer in Boost

yazan Chris Kenniburg -
Plugin developers 'ın resmi

For the perception preset and some of the others we use these variables:

// List group
$list-group-bg:                     $white !default;
$list-group-border-color:           $gray-200 !default;
$list-group-hover-bg:               rgba($perception-base, .6) !default;

$list-group-active-color:           $white!default;
$list-group-active-bg:              $perception-base !default;

$list-group-action-color:           $black !default;
$list-group-action-hover-color:     $list-group-action-color !default;

$list-group-action-active-color:    $black !default;
$list-group-action-active-bg:       $list-group-hover-bg !default;

$list-group-disabled-color:         lighten($list-group-bg, 30%) !default;
$list-group-disabled-bg:            $list-group-bg !default;

You can explore these all but the one variable you are looking for I believe is $list-group-hover-bg and once selected or the active link is this variable: $list-group-active-bg.  You can set these variables by simply giving them a color and then putting them in the very bottom textbox on the Fordson Admin Color Tab.