cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor

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

There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI.  Most of these are pretty basic changes.

One in particular:

   A lot of schools have added extra pull down menus to the top navigation menu.  Our institution added "Library" and "Support" here.  We will need to move these to the left side navigation replacing the with icons.

   I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code.  I wonder if there will be any sample code for this that we could base our implementation on.

Thanks,

Josh

52 Replies
Highlighted
Surveyor

Ditto - we have a link to the library and may soon need to add other links to the bookstore, etc.

Highlighted
Surveyor

I just did some playing to create something to help here. Here are some thoughts about adding custom links:

  1. The navigation section does not scroll, so any new links added may not appear on small resolution screens. Because of this I took the approach of making custom links with a small icon to the left of the text or no icon at all.
  2. In the admin area, you can add custom links that appear when you click the help link in the bottom left so we will probably be adding our support links there. This is also nice because it can be targeted to users based on their roles.

Here is a function that will create basic links in the left menu:

function addMenuItem (linkText, linkhref, icon) {

  var iconHtml = '',

  itemHtml,

  linkId = linkText.split(' ').join('_');

  if (icon !== '') {

  iconHtml = '<i class="' + icon + '"></i> ';

  }

  itemHtml = '<li class="ic-app-header__menu-list-item ">' +

  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +

  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

  '  </a>' +

  '</li>';

  $('#menu').append(itemHtml);

}

To add an item with an icon:

addMenuItem('Library', 'http://google.com', 'icon-educators');

To add an item without an icon:

addMenuItem('Support', 'http://google.com', '');

This will look like this:

Screen Shot 2015-07-30 at 11.37.39 AM.png

So now I have a question. How much value is there in having a pop-out menu for items in the left navigation? I can make something like that, I am just wondering if I really should (from a user experience standpoint).

Highlighted

Given the constraints of adding multiple items using this method I can see a use case for having a pop-out menu when multiple links are needed (library, bookstore, writing center, etc.)

Highlighted

Sounds good. I will work up a solution and see how well it works.

Highlighted

Right now we would have to pause, because of Developer Key, that was requested and not-yet granted. I just wanted to go ahead and test for a single user, similar to API call. In theory, to authenticate access, user token should work. As you clarified, in USU tools context, it is not. That was my biggest confusion. thanks again for making it clear Smiley Happy

Another thing: about encryption. If server where tools are located has SSL, so given HTTPS should be enough and then no need to go through all encryption/decryption process. Why not to add URL validation for HTTPS, if domain has it, no need to encrypt. Isn't is?

Highlighted

I'm assuming this is a reply to Kennethware 2.0 test deployment - error. Even though the server is SSL, I encrypt the OAuth tokens stored in the database so that if for whatever reason someone gets into your database, it does not compromise the OAuth tokens. With one of those tokens, you can do anything that person can do in Canvas and it essentially appears that they did it. The additional encryption layer is for my own piece of mind.

Highlighted

Kenneth,

   Thanks for sharing your solution.  The pop-out would be really great!  It is the gui replacement for the pull down menus which I know we used, and probably lots of other places used as well.

We are holding off implementing the new UI until January out my institution.  We wanted time for the design to settle and we have lots of custom JS to redo.  Most of it looks easy but this is a busy time of the year.  Once I dive into things, I am happy to share what we learned back here.

Josh

Highlighted

I noticed that Instructure has made the code for their slide out tray available on Github (instructure-react/react-tray · GitHub). If I can find some time I am going to figure out how to duplicate what they are doing with their other menu items with slide out menus. If someone else beats me to it, that would be awesome as well Smiley Wink

Highlighted

Would anyone be able to tell me what I (a lowly graphic designer, responsible for doing things I don't know how to do) am doing wrong with our global nav js in the new UI? I am testing it in beta...and so far I cannot seem to get any changes to take affect.

// JavaScript Document

function addMenuItem (linkText, linkhref, icon) {

    'use strict';

    var iconHtml = '',

        itemHtml,

        linkId = linkText.split(' ').join('_');

    if (icon !== '') {

        iconHtml = '<i class=" + icon + "></i> ';

    }

    itemHtml = '<li class="ic-app-header__menu-list-item ">' +

        '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +

        '       <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

        '  </a>' +

        '</li>';

    $('#menu').append(itemHtml);

addMenuItem('MELO','http://msmelo.squarespace.com/', 'icon-off');

addMenuItem('Resources','http://msvcc.squarespace.com/msvccresources', 'icon-off');

addMenuItem('MyHinds','http://my.hindscc.edu/', 'icon-off');

}