finalizing but I need more time
BIN
ActuallyBetterCanvasV0.2.zip
Normal file
136
README.md
@ -1,14 +1,10 @@
|
||||

|
||||
|
||||
# Betterer Canvas
|
||||
|
||||
name idea: even better canvas or Actually Better Canvas (ABC)
|
||||
# Actually Better Canvas
|
||||
|
||||
I don't like the direction bettercanvas (bettercampus) is heading so I forked it
|
||||
|
||||
They tried to change license but forgot to wipe the codebase for thier MIT licensed version, so this is a fully legal fork.
|
||||
|
||||
Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA calculator, and more!
|
||||
They tried to change license but forgot to rebase so this is based on the MIT licensed version and fully legal 🙃
|
||||
|
||||
<!-- ### Supported on -->
|
||||
|
||||
@ -20,8 +16,6 @@ Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA ca
|
||||
|
||||
To contact me, please email sandlerguy5@gmail.com, or you can open an issue within the "Issues" tab on GitHub.
|
||||
|
||||
If you are ksucpea and want to take this down, you can't, and I have [proof of legality](#proof-of-legality)
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Features](#features)
|
||||
@ -54,15 +48,17 @@ Better Canvas introduces improvements to the Canvas user interface:
|
||||
- Preview assignments and announcements from the dashboard
|
||||
|
||||
## Newly added features
|
||||
|
||||
Actually Better Canvas adds more with more to come!
|
||||
|
||||
- GPA presets
|
||||
- Scheduled Reminder Popups (broken)
|
||||
- backend stuff:
|
||||
- Searching themes (the original didn't actually impliment that)
|
||||
- made the dark mode into a css file instead of a reallllllly long string
|
||||
- Card Styles (image size, card roundness, card spacing, width, height, theme compatible)
|
||||
- Custom Background (by URL, theme compatible)
|
||||
- Popup UI revamp
|
||||
- NEW Better todo list (todo: hover preview, cutoff)
|
||||
- NEW Better todo list
|
||||
|
||||
## Planned Features (by priority)
|
||||
- widgets (music, timer)
|
||||
@ -87,6 +83,7 @@ Better Canvas introduces improvements to the Canvas user interface:
|
||||
- transcribe lecture (if there is demand for it)
|
||||
- flashcards
|
||||
- goals
|
||||
- Scheduled Reminder Popups
|
||||
|
||||
## Community suggestions (maybe will be done at some point)
|
||||
- when opening assignments it will show you "if you get a 0 on this your grade will be _"
|
||||
@ -113,9 +110,9 @@ To install, run, and build with this repository locally,
|
||||
|
||||
To use Better Canvas, select your browser below to install the extension from a store.
|
||||
|
||||
[Chrome](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
|
||||
<!-- [Chrome](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh) -->
|
||||
|
||||
[Firefox](https://addons.mozilla.org/addon/better-canvas/)
|
||||
<!-- [Firefox](https://addons.mozilla.org/addon/better-canvas/) -->
|
||||
|
||||
### How to use
|
||||
|
||||
@ -124,29 +121,6 @@ To use Better Canvas, select your browser below to install the extension from a
|
||||
- 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 |
|
||||
@ -229,96 +203,6 @@ To add a new feature, please follow these guidelines.
|
||||
- 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
|
||||
|
||||
- Linux/Unix
|
||||
- Install [tree command line tool](https://www.geeksforgeeks.org/tree-command-unixlinux/)
|
||||
- Use the tree command to generate file structure:
|
||||
```
|
||||
tree
|
||||
```
|
||||
|
||||
Learn more about tree commands for Linux/Unix [here](https://www.geeksforgeeks.org/tree-command-unixlinux/).
|
||||
|
||||
- Windows
|
||||
- Use the tree command to generate file structure:
|
||||
```
|
||||
tree /
|
||||
```
|
||||
|
||||
Learn more about tree commands for Windows [here](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/tree).
|
||||
|
||||
## proof of legality
|
||||
|
||||
This is the version right before the monetization of bettercanvas, original license and all.
|
||||
here is some proof the lisence was changed and this is based on the reverted MIT version 5.12.6
|
||||

|
||||

|
||||
|
||||
## Authors
|
||||
|
||||
#### Fork Owner
|
||||
@ -346,5 +230,7 @@ You can fork, modify, and use this code however you like with attributes, but no
|
||||
|
||||

|
||||
|
||||
Copyright (c) 2024 ksucpea
|
||||
|
||||
Copyright (c) 2026 Guy Sandler
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"better_canvas": {
|
||||
"message": "Better Canvas"
|
||||
"actually_better_canvas": {
|
||||
"message": "Actually Better Canvas"
|
||||
},
|
||||
"updates": {
|
||||
"message": "Updates"
|
||||
|
||||
151
css/options.css
@ -1,33 +1,124 @@
|
||||
body, html {font-family: 'Wix Madefor Text';background:#161616;color:#e2e2e2}
|
||||
h1, h2, p {margin:0;padding:0;}
|
||||
.main {display:flex;margin:auto;width:1200px;margin-top:60px;align-items: center;justify-content: center;font-size: 15px;gap:20px;}
|
||||
#updateCSS {border:1px solid #8dd28d;background: #8dd28d24}
|
||||
#updateCSS:hover {background: #8dd28d24}
|
||||
.container {flex: 300px; border-radius: 14px;margin-bottom: 20px;}
|
||||
.steps-item {display:flex;align-items:center;margin-top: 12px;font-size:18px;font-weight:600;}
|
||||
.main-left { flex-wrap: wrap; gap: 20px;width:500px}
|
||||
.welcome img {height: 66px;width:66px;}
|
||||
h1 {font-size: 50px;line-height:52px;}
|
||||
h2 {font-size: 20px}
|
||||
.steps {margin-top: 40px; margin-bottom: 20px;background:#101010;padding:24px;border-radius: 14px;display: inline-block;}
|
||||
.menu-frame {border: none; height: 150vh;flex: 1;max-width: 514px;max-height:700px;overflow:scroll;border:1px solid #323232;border-radius:8px;}
|
||||
.bettercanvas {display:inline-block;background:-webkit-linear-gradient(0deg, #ff002e, #ff5200, #ff47ad);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
|
||||
.icon {height: 22px; width: 22px;margin-right: 10px;}
|
||||
.pin-icon {fill: #727272}
|
||||
.puzzle-icon {fill: #fff;}
|
||||
p {color: #adadad}
|
||||
.contact-info { font-size:12px;max-width:75%;}
|
||||
#finger2 {position:absolute;bottom:0;animation:bounce2 .7s infinite linear;font-size:18px;}
|
||||
#refresh-note {position:relative;font-size:16px;display:inline-block;margin-top:18px;}
|
||||
body,
|
||||
html {
|
||||
font-family: "Wix Madefor Text";
|
||||
background: #161616;
|
||||
color: #e2e2e2;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
width: 1800px;
|
||||
height: 70vh;
|
||||
margin-top: 60px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
gap: 20px;
|
||||
}
|
||||
#updateCSS {
|
||||
border: 1px solid #8dd28d;
|
||||
background: #8dd28d24;
|
||||
}
|
||||
#updateCSS:hover {
|
||||
background: #8dd28d24;
|
||||
}
|
||||
.container {
|
||||
flex: 600px;
|
||||
border-radius: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.steps-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.main-left {
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
width: 800px;
|
||||
}
|
||||
.welcome img {
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
line-height: 52px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.steps {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
background: #101010;
|
||||
padding: 24px;
|
||||
border-radius: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
.menu-frame {
|
||||
border: none;
|
||||
height: 150vh;
|
||||
flex: 1;
|
||||
max-width: 514px;
|
||||
max-height: 700px;
|
||||
overflow: scroll;
|
||||
border: 1px solid #323232;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.bettercanvas {
|
||||
display: inline-block;
|
||||
background: -webkit-linear-gradient(0deg, #ff002e, #ff5200, #ff47ad);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pin-icon {
|
||||
fill: #727272;
|
||||
}
|
||||
.puzzle-icon {
|
||||
fill: #fff;
|
||||
}
|
||||
p {
|
||||
color: #adadad;
|
||||
}
|
||||
.contact-info {
|
||||
font-size: 12px;
|
||||
max-width: 75%;
|
||||
}
|
||||
#finger2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
animation: bounce2 0.7s infinite linear;
|
||||
font-size: 18px;
|
||||
}
|
||||
#refresh-note {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
@keyframes bounce2 {
|
||||
0% {
|
||||
right: -36px;
|
||||
}
|
||||
50% {
|
||||
right: -30px;
|
||||
}
|
||||
100% {
|
||||
right: -36px;
|
||||
}
|
||||
0% {
|
||||
right: -36px;
|
||||
}
|
||||
50% {
|
||||
right: -30px;
|
||||
}
|
||||
100% {
|
||||
right: -36px;
|
||||
}
|
||||
}
|
||||
@ -18,8 +18,7 @@
|
||||
<div class="main-left">
|
||||
<div class="container">
|
||||
<div class="welcome">
|
||||
<h2 style="transform:rotate(-20deg);color:cyan;position:relative;top:-12px;left:120px;">-er</h2>
|
||||
<h1>Welcome to <span class="bettercanvas">Better Canvas!</span></h1>
|
||||
<h1>Welcome to <span class="bettercanvas">Actually Better Canvas!</span></h1>
|
||||
<div id="refresh-note">
|
||||
<p style="font-weight:600;">Refresh your Canvas page to setup</p>
|
||||
<span id="finger2">👈</span>
|
||||
@ -34,7 +33,7 @@
|
||||
</svg>
|
||||
<span>Click on this puzzle icon at the top right</span>
|
||||
</li>
|
||||
<li class="steps-item"><img src="../icon/icon-48.png" class="icon">Click on Better Canvas</li>
|
||||
<li class="steps-item"><img src="../icon/icon-48.png" class="icon">Click on Actually Better Canvas</li>
|
||||
<li class="steps-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pin-icon icon">
|
||||
<path
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en" style="/*background:linear-gradient(115deg, rgb(255, 53, 88), rgb(255, 131, 73), rgb(255, 103, 187))*/">
|
||||
|
||||
<head>
|
||||
<title>Better Canvas</title>
|
||||
<title>Actually Better Canvas</title>
|
||||
<link href="../css/popup.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<img id="bclogo" src="../icon/icon-128.png">
|
||||
<h1 data-i18n="better_canvas">Better Canvas</h1>
|
||||
<h1 data-i18n="actually_better_canvas">Actually Better Canvas</h1>
|
||||
</div>
|
||||
<div class="more-options-container">
|
||||
<button id="customize-dark-btn" class="big-button tab-btn">
|
||||
|
||||
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 3.5 KiB |
BIN
icon/icon-16.png
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 593 B |
BIN
icon/icon-19.png
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 691 B |
BIN
icon/icon-32.png
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1004 B |
BIN
icon/icon-38.png
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
icon/icon-48.png
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 128 KiB |