Static Toolbar for New Rich Content Editor

[mmrasmussen]

Because all of the important features for linking and adding documents have been moved from the sidebar in Canvas to the top of the Rich Content Editor, it would beneficial (and user-friendly) to have the toolbar remain static at the top of the screen when scrolling through the Rich Content Editor. As it is now, I scroll down to an area and want to add a link or attachment, but I have to scroll back up to reach these tools on the toolbar, which means I have to hope my cursor is still in the correct spot. Having the toolbar remain at the top of the Rich Content Editor, no matter where I scroll, would improve efficiency and ease of use.

Melissa Rasmussen

This idea has been developed and deployed to Canvas

For more information, please read through the Canvas Deploy Notes (2020-07-15) 

[shorts]

 @dslusser ‌, this is incredible. Thank you. I would love to get the updated .js file when you have the html toggle added to the toolbar, or any other enhancements. Any plans to try to fix the auto-expand frame height issue? And maybe the auto-jump to the top of the page issue? 

Thanks again for this temporary fix!

Sean

[hmcmichael]

I couldn't agree more. I've been working with the new RCE for quite a while now, and now that I'm deep into my summer classes, I'm sooo frustrated with three things: 

1) The bottom toolbar should be part of the top toolbar. Accessibility checking and html are two of my most used buttons. Why are they at the bottom?

2) The top toolbar needs to remain static. Every other platform and program I use has a static toolbar (Word, Google Docs, Powerpoint, etc.). It is extremely time-consuming to scroll up and down all the time, and inserting links and images and formatting text without being able to see the result is beyond aggravating.

3) Unless I shrink my screen down so small that I can barely read the text, the top toolbar always has some dangling buttons that require yet more clicks to see them.  Can we have a two-tiered top toolbar with everything we need in plain sight--and static?  That makes the most sense. 

[Stef_retired]

Comments from Instructure

The New Rich Content Editor Menu bar remains fixed for long page content. For more information, please read through the https://community.canvaslms.com/docs/DOC-26971-canvas-deploy-notes-2020-07-15 

[dslusser]

Wow, much quicker than I anticipated! The static toolbar appears to be functioning well in Canvas Beta. Thanks for the update!

[dslusser]

Hi Everyone,

It looks like Canvas has added this feature to Canvas Beta and it is scheduled to be released into production on July 15th, 2020. I'll keep up with basic support for my Tampermonkey script for a few more months before sunsetting this particular script of the project. I'm basically just keeping up support at this point because I slightly prefer my UI/UX design; I'm partial to my box shadowing over the Canvas implementation (but don't tell Canvas that, UI/UX is an art and you can't please everyone, beggars can't be choosers ;-)). It will also fix some minor design abnormalities when adding the new sticky RCE/HTML button to the toolbar.

With that said, I have added 2 more features to the RCE UI Canvancements script. At some point, I plan on separating these features into a new Canvancement to reduce clutter now that we have a static toolbar, but I doubt that will happen anytime soon :-).

New features added:

• Sticky RCE/HTML button toggle
• Expanded various display and text boxes around Canvas

Sticky RCE/HTML button toggle:

• This script moves the RCE/HTML toggle button from the bottom toolbar to the top of the toolbar. It also makes it sticky when scrolled past.

Box Resizer:

• This script adds various resizing styles to display and text boxes around Canvas.
• I was debating on adding this script to this particular Canvancement because it isn't necessarily in scope, but here it is anyway. My institution doesn't like to add their own JS/CSS to Canvas because it's just one more thing to keep track of should Canvas make a change that breaks the JS/CSS. With finite number of development hours to go around, I certainly can't fault them on this policy; I completely understand it. This script is one of those very small features that is extremely helpful from a UX point of view so you don't have to keep adjusting the height of display and text boxes. I passed this script (and a bunch of other helpful scripts) around to our teachers a few years ago and they loved it and can't really live without it now. If I ever find the time, maybe I'll create a new Canvancement script package specifically for the community that has all of our little UI/UX scripts that make life so much easier.
• This doesn't fix the jumpy behavior of the RCE, but it makes it ever so slightly easier to deal with. Its power is more in the display and text box sizes around Canvas.
• If it doesn't suit your fancy, no worries, feel free to turn it off :-).

How to update:

• If you have Tampermonkey set up to autoupdate, it should kick in within the time frame you set.
• If you don't have autoupdate turned on, or if it's not updating automatically and you want to force update the script to get the new features, here's how you do that:
  • Click on the Tampermonkey icon in the browser extensions toolbar and select Dashboard.
  • In the Tampermonkey dashboard, click on the "Last updated" number next to the RCE UI Canvancements script. That action should force the update and install the latest version of the script. You can then click on the RCE UI Canvancements script and adjust the values as you wish.

How to get help:

• Mention ( '@' ) me here.
• Email me - dslusser@palcs.org
• Please be patient if I don't reply quickly. I try to be as active as I can in the community and check my inbox frequently, but sometimes I forget. I don't take offense to multiple emails or follow-up emails, sometimes I need a reminder to check my Canvas inbox :-).

[shorts]

This is awesome! Thank you!

[hmcmichael]

Awesome that it's on its way...but I don't see a beta option right now in the Settings.  Am I looking in the wrong place?  Or is this not available until 7/15?  I would love to try out the static toolbar!

[dslusser]

Hi  @hmcmichael ‌,

You can find the new Canvas static toolbar in the Canvas Beta environment; it's not yet available in the production environment.

If you normally login to Canvas via [[ YOUR INSTITUTION ]].instructure.com/login, you'll find the Canvas Beta environment at [[ YOUR INSTITUTION ]].beta.instructure.com/login. Additionally, you should be able to read more about the Canvas Beta environment here How do I access the Canvas beta environment as an instructor?‌

You can check out the new static toolbar in the Beta environment, then it should be deployed and available in the production environment on July 15th, 2020. You can read more about what's being deployed to the production environment on July 15th in the Canvas Deploy Notes (2020-07-15)‌.

[Sylvia_Ami]

I checked this out in Beta and the floating RCE toolbar is great. However, I’m experiencing a long edit window when switching between RCE and HTML views.  I’m wondering if it’s happening to anyone else. Try this:

1. Edit a page – The RCE edit window length fits within the space on my browser page.
2. Switch to the HTML editor – The edit window is the same size. So far so good.
3. Switch back to the RCE – The size of the RCE edit window is now really long. It seems to resize so as to display all of the page content. So if I have a short page, the window isn’t that long. But if I have a long page, I have to scroll down and down to get to the bottom of the edit window.

I wouldn’t mind this so much except that the Accessibility and HTML icons are at the bottom of the edit window and I use those a lot as I’m editing.

The automatic expansion of the length of the edit window also happens when I format for heading styles. I’m using Firefox. Watch this video to see what is happening.

RCE Window Length Resizing video

I’d appreciate hearing from others to see if it’s the same for them. Has this been brought up before?

[shorts]

Yes, the html and accessibility buttons at the bottom are a very annoying problem. To reduce frustration with the auto expanding window, I have just gotten in the habit of first thing, as soon as I’m in edit mode, I just click in the edit frame somewhere at the top and add a quick space (which triggers the auto expand) then delete the space again.

This way the auto expand is not triggered when I’m down in the middle of my page somewhere and get logged back to the top.

Hope this helps a bit.

Sent from my mobile phone