Skip to content

Latest commit

 

History

History
285 lines (213 loc) · 9.35 KB

README.md

File metadata and controls

285 lines (213 loc) · 9.35 KB
Raw

Better Canvas

Better Canvas

Enhancements to Canvas like dark mode, better todo list, GPA calculator, and more!

Supported on

Google Chrome

Firefox

Inquiries

To contact me, please email [email protected], or you can open an issue within the "Issues" tab on GitHub.

Table of Contents

Features

Better Canvas introduces improvements to the Canvas user interface:

  • Fully customizable dark mode (choose from premade options or manually edit dark mode)
  • Automatic scheduling for dark mode
  • Dashboard card color palletes
  • Themes created by users
  • Assignments due list
  • Dashboard notes
  • Better todo list
  • Custom fonts
  • Condensed cards
  • Dashboard grades
  • Remove sidebar logo
  • Customizable card links
  • Gradient dashboard cards
  • Advanced card customization
  • GPA calculator (college and highschool)
  • Preview assignments and announcements from the dashboard

Installation

To install, run, and build with this repository,

  • Clone the repository locally with
  git clone https://github.com/ksucpea/bettercanvas.git
  • Visit chrome://extensions in your browser.
  • Enable developer mode by toggling the switch in the upper right corner of the viewport.
  • Click the "Load upacked" button in the header.
  • When prompted to open a file, select the root directory of this repository.

Usage

To use Better Canvas, select your browser below to install the extension.

Chrome

Firefox

How to use

  • Once the extension is installed, navigate to your institution's Canvas homepage.
  • To edit the available options, click on the "Extensions" button in the upper right corner of the viewport.
  • When the menu opens, click on the Better Canvas extension.
    • A menu will appear with configuration options for your Canvas homepage.

Version Notes

Update 5.10

  • Fixed dark mode bug in discussion text boxes
  • Added new themes + fonts
  • Card colors now change instantly
  • Dark mode fixer feature
  • Card customization now shows preview of image
  • New sidebar options
  • Dark mode buttons preview their appearance
  • "Remove sidebar logo" feature
  • "Hide recent feedback" feature
  • Menu redesign
  • Fixed card assignment bug
  • Card assignment efficiency improvements
  • Dark mode rework
  • Dark mode now syncs
  • Option to use device dark mode settings
  • Improved todo list
  • "Color coded tab icons" feature
  • "Use card colors" option for todo list

Color Reference

Color Hex
Background #161616 #161616
Text #ffffff #ffffff
Accent 01 #ff002e #ff002e
Accent 02 #ff5200 #ff5200
Accent 03 #ff47ad #ff47ad

Contributing

Add a new feature

To add a new feature, please follow these guidelines.

Note: I will probably make this automated in the future but it's a bit of work right now.

Identifier

  • Should be a unqiue one/two word storage identifier to indicate its status. (ie "dark_mode" or "dashboard_grades")
  • If it has sub options (options that are specific to the main feature) these will also each need a unique identifier.
  • All options are synced and have a 8kb storage limit, so if your feature needs more than this please contact me.

Changes to html/popup.html

  • Add the appropriate HTML into this file. The corresponding id and name (see below) should be the identifier.
  • If it has no sub options, it should be put in the same container as the other options with no sub options:
<div class="option" id="<identifier>">
    <input type="radio" id="off" name="<identifier>">
    <input type="radio" id="on" name="<identifier>">
    <div class="slider">
        <div class="sliderknob"></div>
        <div class="sliderbg"></div>
    </div>
    <span class="option-name"><option name></span>
</div>
  • If it does have sub options it becomes it's own container:
<div class="option-container">
  <div class="option" id="<identifier>">
    <input type="radio" id="off" name="<identifier>">
    <input type="radio" id="on" name="<identifier>">
    <div class="slider">
      <div class="sliderknob"></div>
      <div class="sliderbg"></div>
    </div>
    <span class="option-name"><option name></span>
  </div>
  <div class="sub-options">
    <div class="sub-option">
      <input type="checkbox" id="<sub identifier>" name="<sub identifier>">
      <label for="<sub identifier>" class="sub-text"><option name></label>
    </div>
  </div>
</div>

Changes to js/popup.js

  • Add the main identifier into the syncedSwitches array.
  • If you have sub-options:
    • Add these identifiers to the array found under the comment that says //checkboxes.

Changes to js/background.js

  • Add all identifiers into the syncedOptions array.
  • Add a default value for your option to the default_options array.
    • Preferably this value should be false for booleans or "" for strings (null can also be used if Canvas has a default for this option already)

Changes to js/content.js

  • There should be a function(s) included in the this file that does the work. The name should clearly indicate it's purpose.
  • Under applyOptionsChanges(), add a switch case to call this function when the menu toggle is changed.
  • Depending on what your feature does, it needs to be told when to fire.
    • If the function changes any aspect of the dashboard, it should be put inside checkDashboardReady().
    • If the function only adds css, it should be added to applyAestheticChanges(), and in this case should not be a separate function, instead add the css to the existing styles found in this function.
    • Anything else should be put under startExtension() and should be placed no higher than the checkDashboardReady function found here.

Add a new theme

To add a new theme, please follow these guidelines.

You can export a theme using the export tool in the menu and sending an email to me, or you can merge it here after doing the following:

Exporting

  • Go to the Themes tab and export dark mode, card images, card colors, and custom font. - The only on/off toggles that need be included are disable_color_overlay and gradient_cards. Any other toggles aren't necessary, so you should manually add these keys and the appropriate values in with the export code.
  • Pick a unique id for the theme, doesn't matter how long this is.

Changes to js/popup.js

  • Add the export code under getTheme().
    • Make sure it follows this format: "theme-<id>: { "exports": {"..."}, "preview": "..." }
  • For the preivew, try to pick the smallest image size from the card images (under ~50kb is perfect), or you can find a smaller display image that isn't included in the card images.

Changes to html/popup.html

  • Add the following under all the other theme buttons:
<button id="theme-<id>" class="theme-button customization-button"><theme name> by <you></button>
  • The theme name should be one/two words so it doesn't take up too much space.

File structure

.
├── README.md
├── \_locales
│ ├── en
│ │ └── messages.json
│ └── es
│ └── messages.json
├── css
│ ├── content.css
│ ├── options.css
│ └── popup.css
├── html
│ ├── options.html
│ └── popup.html
├── icon
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-19.png
│ ├── icon-32.png
│ ├── icon-38.png
│ ├── icon-48.png
│ ├── icon-wide.png
│ ├── iconwpadding.png
│ └── oldicon-128.png
├── js
│ ├── background.js
│ ├── content.js
│ └── popup.js
└── manifest.json

Update the file structure

Use the tree command

Learn more about tree commands for Linux/Unix here.

  • Windows
    • Use the tree command to generate file structure:
    tree /

Learn more about tree commands for Windows here.

Authors

Owner

Contributors

License

License: MIT

Better Canvas