cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Custom Menu Items for New UI

Custom Menu Items for New UI

  This idea has been developed and deployed to Canvas

 

  Idea open for vote Wed. January 6, 2016 - Wed. April 6, 2016  Learn more about voting...

 

I have had discussions with a number of institutions looking for a way to add custom items to the left hand navigation in the new UI.

Adding custom menu items

Additional Navigation Menu Item

Re: Has anyone been working on scripts for the new Beta UI? 

Like these schools, we have some items we have customized for our faculty and students that we would like to bring over to the new UI.

137362_Screen Shot 2015-12-03 at 10.36.47 AM.pngScreen Shot 2015-12-03 at 10.36.47 AM.png

I have created some JavaScript code to add an individual item, but it would be great if there was a way to add an item that had a slide out list like the other navigation items in Canvas

137363_Screen Shot 2015-12-03 at 10.41.38 AM.pngScreen Shot 2015-12-03 at 10.41.38 AM.png

The icing on the cake would also be the ability for the navigation to be targeted to a user's roles (additional resources for teachers verses resources for students) and if there was a way to choose an icon.

 

I understand that there is limited space in the left navigation for smaller screen sizes, but this would be a wonderful addition to the existing customization options in the new UI.

 

 

  

  Comments from Instructure

 

For more information, please read through the Canvas Production Release Notes (2016-08-27)

112 Comments
JACOBSEN_C
Community Contributor

Thanks!  This commit works - but I could have sworn I was looking there earlier and didn't see the code updated last month like it says it does now.  Thanks again -

JACOBSEN_C
Community Contributor

Trevor, I'm missing here to slip "keep-all;" into the code.  What div contains the word "resources"? I'm not seeing it...

tfullwood
Instructure
Instructure

 @JACOBSEN_C ​, It looks like it's line 54 in the JavaScript file.

fariborzm
Community Participant

I noticed this morning that our Beta instance was causing the word Resources to wrap again.  I made a minor change to the custom_nav value in our JavaScript file.  I moved the </div> on the last line of the html declaration up to just after the </i>.  (That closes out the <div> for the icon and allows the text to be at the same level.)

Some of my users also noticed that the folder icon wasn't quite lining up with the rest of the icons in the navigation bar.  To fix that I changed the .icon-resources CSS from left: -2px; to left: 2px;

Just thought I would share, in case anyone else is running into a similar issue.

delponte
Community Member

I can't find it, too...

ejdormady
Community Participant

Hello, I have had great success implementing both the addmenuitem single icon code and also the resources tray link, so why don't I try to combine them.

Actually what I am trying to do is show an icon and direct URL link with addMenuItem (thanks Kenneth Larson)  based on values in current_user_roles to only those without the teacher role to a student resource. I think I can work this out.

The challenge I have encountered comes in the form of a conditional (only those with a teacher value in the roles) icon that launches a slide out tray of links similar to the resources links. This is complicated as I have implemented and wish to keep the default resources slide out.

My question boils down to - is there a relatively straighforward way to introduce a second slide out tray (with a different icon from the default slide out I currently have in production)? Would it be something like a 'var2' function that I could add to the existing 'var' that makes the slide out work?

Thanks for your help.

JACOBSEN_C
Community Contributor

The last Production release changed our custom navigation option icon. We just see a square now where there was something different. Is there a list of what are now compatible icons?

Screen Shot 2017-01-08 at 10.46.54 AM.png

syeo
Community Participant

When I called the Canvas Support last Friday, January 6, 2017, I was assured by the staff that the Resources Icon's Outline box that was appearing in the Beta site would not appear in the Production site.  Now, it is happening in the Production site! 

I am disappointed.  Likewise, I am digging for resources in this page.

fariborzm
Community Participant

Good Morning Everyone,

I'm seeing the same thing as Clint.  I tried changing from icon-resources to icon-folder, which does give a folder icon, but it is not the same size as the rest of the icons on the navigation bar.  I found that icon by looking on this page - http://instructure.github.io/instructure-icons/#demos/sprites/Line.html.

Does anyone know how to resize the icon, either via Javascript or CSS?  Or if someone has a better suggestion on an icon to use, I would love to hear it.

Thanks,

Mike

fariborzm
Community Participant

I'm not sure if this is the "correct" solution, but this is what I have been able to come up with, after a couple of hours of trial and error.

In my CSS file I changed to the following:  (I have omitted things that did not change.)

#custom_nav .menu-item-icon-container {

    position: relative;

}

#custom_nav .menu-item__text {

  margin-top: -5px;

}

.icon-resources {

  position: relative;

  left: 2px;

}

In my Javascript file I changed to the following in the custom_nav variable:  (Just replace from "html:" to right before "});")

html: '<a id="global_nav_resources_link" href="javascript:void(0)" class="ic-app-header__menu-list-link">' +

'<div class="menu-item-icon-container" aria-hidden="true">' +

'<svg viewBox="0 0 2080 2080" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" width="26pt" preserveAspectRation="xMidYMid" style="display: block; margin: auto">' +

'<path d="M851.68 240H320c-88.32 0-160 71.6-160 160v1200c0 44.16 35.84 80 80 80h1360c88.4 0 160-71.6 160-160V560c0-44.16-35.84-80-80-80h-624l-55.76-139.44C975.92 279.84 917.12 240 851.68 240m0 160l55.76 139.44C931.76 600.16 990.56 640 1056 640h544v880H320V400h531.68" stroke="none" stroke-width="1" fill-rule="evenodd" fill="#ffffff" fill-opacity="1"/>' +

'</svg>' +

'</div>' +

'<div class="menu-item__text" style="word-break: keep-all">' + global_nav_name + '</div>' +

'</a></li>'

ejdormady
Community Participant

https://canvas.instructure.com/styleguide#icons

If you want the same as the old icon-resources you can update code (where

appropriate, not a cut and paste operation) with icon-folder I think should

give you the same look as before the change.

I went with icon-link. But keep in mind to constrain the CSS icon

definition so it's not global (30 pt link icon in the RCE would not be

ideal).

Good luck!

Ed

On Sun, Jan 8, 2017 at 9:53 AM, JACOBSEN_C@fortlewis.edu <

tfullwood
Instructure
Instructure
You can modify class from icon-resources to icon-folder. But this will shift the position and reduce the size of the icon. So remove the previous icon-resources css and replace it with this:

#menu .icon-folder {

    position: relative;

    left: -4px;

}

#menu .icon-folder[class*=icon-]:before, #menu .icon-folder[class^=icon-]:before {

    font-size: 30px;

}

EDIT: Wow that styling was awful. Lets try this again.

jtorres1
Community Contributor

What would I need to modify in my CSS to see this work? Do I also need to make a change to Javascript? Thanks so much!

@import 'https://daymar.evaluationkit.com/CanvasScripts/daymar.css?v=3';

.pages .course-title.ellipsis {

  color:white;

  }

/*********************************************************************************/

/* Canvas Styling Override */

.item-group-container {

  background-color: #ffffff !important;

}

.replies { 

padding-left: 7px; 

border-left: solid #b2d9ee 16px; 

 

.discussion-read-state-btn { 

  top: 32px; 

 

div.entry-content { 

  padding-left:0px !important; 

#custom_nav .menu-item-icon-container {

  position: relative;

  left: -4px;

}

#custom_nav .menu-item__text {

  margin-top: 15px;

}

.icon-resources {

  position: relative;

  left: -2px;

}

.icon-resources:before {

  content: "\f13c";

}

.icon-resources[class*=icon-]:before, .icon-resources[class^=icon-]:before {

  font-size: 30px;

}

#menu i.icon-resources {

  color: #fff;

}

jtorres1
Community Contributor

What would I need to modify in my CSS to see this work? Do I also need to make a change to Javascript? Thanks so much!

@import 'https://daymar.evaluationkit.com/CanvasScripts/daymar.css?v=3';

.pages .course-title.ellipsis {

  color:white;

  }

/*********************************************************************************/

/* Canvas Styling Override */

.item-group-container {

  background-color: #ffffff !important;

}

.replies {

padding-left: 7px;

border-left: solid #b2d9ee 16px;

}

.discussion-read-state-btn {

  top: 32px;

}

div.entry-content {

  padding-left:0px !important;

}

#custom_nav .menu-item-icon-container {

  position: relative;

  left: -4px;

}

#custom_nav .menu-item__text {

  margin-top: 15px;

}

.icon-resources {

  position: relative;

  left: -2px;

}

.icon-resources:before {

  content: "\f13c";

}

.icon-resources[class*=icon-]:before, .icon-resources[class^=icon-]:before {

  font-size: 30px;

}

#menu i.icon-resources {

  color: #fff;

}

tfullwood
Instructure
Instructure

Hey jtorres

You'll just remove any of the blocks that include .icon-resources from your CSS file (not necessary but helps keep your CSS file clean). Then add the couple of blocks I provided in the last comment. Finally, find any place in your JS file that references "icon-resources" and change it to "icon-folder".

jtorres1
Community Contributor

It worked beautifully! Thank you!

syeo
Community Participant

Hi Trevor:

Thank you for sharing the code.

It worked!

Appreciate your help:)

Sincerely,

Sue

On Mon, Jan 9, 2017 at 7:11 PM, tfullwood@instructure.com <

kelly_coban
Community Participant

Sidebar with Title Wrapped

As you can see the text for my added slide out menu option is wrapping onto the next line. I have been through the javascript and the CSS trying to figure out how to get the text to show all on one line like all the other menu options. I am a total novice on javascript and intermediate on CSS so I am outside my depth.

Any help will be greatly appreciated.

ejdormady
Community Participant

Hello Kelly,

I had this issue at one time and resolved it by placing explicit breaks,

like this:

addMenuItem('Teaching
Effectiveness
Surveys',

And also adding these whitespace values:

function addMenuItem(linkText, linkhref, icon, target) {
var iconHtml = '',
itemHtml,
linkId = linkText.split(' ').join('_'),
iconCSS = '.menu-item__text.custom-menu-item__text {' +
' white-space: normal;' +
' padding: 0 2px;' +
' }' +
'';

if (icon !== '') {

On Fri, Jun 9, 2017 at 7:58 AM, kelly_coban@iss.k12.nc.us <

JACOBSEN_C
Community Contributor

In our beta site I'm seeing the text to our custom menu item has gone haywire - is there a fix to this? (IMage below to illustrate...)

241724_Screen Shot 2017-07-13 at 2.09.08 PM.png