CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 09:59:55 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updating README.md and adding wide Better Canvas logo

Browse Source
This commit is contained in:
Tyler Haisman 2024-02-11 14:59:02 -05:00
parent eb01b379a2
commit ace7f74887
2 changed files with 99 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
README.md
View File

@ -1,16 +1,66 @@
<h1>Better Canvas</h1>
![Better Canvas](/icon/icon-wide.png)
Contact me at ksucpea@gmail.com or you can open an issue here
# Better Canvas
<h2>Manual Installation</h2>
Enhancements to Canvas like dark mode, better todo list, GPA calculator, and more!
- Download this repo
### Supported on
- Go to chrome://extensions in the browser and enable developer mode
![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
- Press load unpacked and select the extension folder
![Firefox](https://img.shields.io/badge/Firefox-FF7139?style=for-the-badge&logo=Firefox-Browser&logoColor=white)
<h2>Update 5.10</h2>
## Inquiries
To contact me, please email ksucpea@gmail.com, or you can open an issue within the "Issues" tab on GitHub.
## 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
```bash
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](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
[Firefox](https://addons.mozilla.org/addon/better-canvas/)
## Version Notes
#### Update 5.10
- Card customization now shows preview of image
- New sidebar options
@ -24,24 +74,31 @@ Contact me at ksucpea@gmail.com or you can open an issue here
- Dark mode now syncs
- Option to use device dark mode settings
<h2>Links</h2>
## Color Reference
[Chrome version](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
| Color | Hex |
| ---------- | ---------------------------------------------------------------- |
| Background | ![#161616](https://via.placeholder.com/10/0a192f?text=+) #161616 |
| Text | ![#ffffff](https://via.placeholder.com/10/ffffff?text=+) #ffffff |
| Accent 01 | ![#ff002e](https://via.placeholder.com/10/ff002e?text=+) #ff002e |
| Accent 02 | ![#ff5200](https://via.placeholder.com/10/ff5200?text=+) #ff5200 |
| Accent 03 | ![#ff47ad](https://via.placeholder.com/10/ff47ad?text=+) #ff47ad |
[Firefox version](https://addons.mozilla.org/addon/better-canvas/)
## Contributing
<h2>Contribute</h2>
### Add a new feature
<h3>Adding a new feature:</h3>
(I will probably make this automated in the future but it's a bit of work right now)
To add a new feature, please follow these guidelines.
<h4>Identifier</h4>
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 it's 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.
<h4>Changes to html/popup.html</h4>
#### 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:<br />
@ -80,48 +137,53 @@ Contact me at ksucpea@gmail.com or you can open an issue here
</div>
```
<h4>Changes to js/popup.js</h4>
#### Changes to js/popup.js
- Add the main identifier into the ```syncedSwitches``` array.
- 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```.
- Add these identifiers to the array found under the comment that says `//checkboxes`.
<h4>Changes to js/background.js</h4>
#### 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)
- 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)
<h4>Changes to js/content.js</h4>
#### 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.
- 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.
<h3>Adding a theme:</h3>
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:
<h4>Exporting</h4>
#### 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.
- 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.
<h4>Changes to js/popup.js</h4>
#### Changes to js/popup.js
- Add the export code under ```getTheme()```.
- Make sure it follows this format: ```"theme-<id>: { "exports": {"..."}, "preview": "..." }```
- 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.
<h4>Changes to html/popup.html</h4>
#### 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.
![Better Canvas](/icon/icon-48.png)

BIN
icon/icon-wide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 KiB