diff --git a/fonts/MaterialIconsOutlined-Regular.otf b/fonts/MaterialIconsOutlined-Regular.otf new file mode 100644 index 0000000..368e9a8 Binary files /dev/null and b/fonts/MaterialIconsOutlined-Regular.otf differ diff --git a/img/autorenew.png b/img/autorenew.png new file mode 100644 index 0000000..adafd37 Binary files /dev/null and b/img/autorenew.png differ diff --git a/manifest.json b/manifest.json index 522bcf2..924f07b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,15 +1,31 @@ -{ - "manifest_version": 3, - - "name": "ServiceHub Plus", - "version": "0.1.2", - "description": "Improvements to Service Hub for TRG techs", - - "content_scripts": [ - { - "css": ["style.css"], - "js": ["script.js"], - "matches": ["https://portal.trgrepair.com/*"] - } - ] -} +{ + "manifest_version": 3, + + "name": "ServiceHub+", + "author": "Charles Danesi", + "homepage_url": "https://charlesdanesi.net", + "version": "0.1.3", + "description": "Improvements to Service Hub for TRG techs", + + "content_scripts": [ + { + "css": ["style.css"], + "js": ["script.js"], + "matches": ["https://portal.trgrepair.com/*"] + } + ], + + "web_accessible_resources": [ + { + "resources": [ + "fonts/MaterialIcons-Regular.ttf", + "fonts/MaterialIconsOutlined-Regular.otf", + "img/autorenew.png" + ], + "matches": [""], + "extensions": ["lmeeejhdmpakenhgdfmgjcbdmeppjpam"] + } + ], + + "permissions": ["storage", "activeTab", "scripting"] +} diff --git a/script.js b/script.js index e69de29..feaadf8 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,29 @@ +"use strict"; + +/* +TODO: insert a reset button into search form +TODO: style menubar and keep it sticky on the window +TODO: style/move the location scan to float with the RO +TODO: implement facebook-style notifications +*/ + +// Warranty Highlight +const isWarranty = document.getElementById("chkWarrantee"); +isWarranty.addEventListener("change", updateBackground); +updateBackground(); +function updateBackground() { + isWarranty.nextElementSibling.style.backgroundColor = isWarranty.checked + ? "red" + : "transparent"; +} + +// Notification system +// https://portal.trgrepair.com/task_manager.asp?rnd=0.9996227368620352 + +const notifCountStr = document.getElementById("lblTask").innerText; +const notifCount = parseInt(notifCountStr.split(" ")[2]); // Total task count +const notifCountNew = parseInt(notifCountStr.split(" ")[5].slice(1)); // New task count + +// Insert notification button +const insertButton = document.getElementById("exitBtn"); +insertButton.innerHTML = `
notifications${notifCountNew}
`; diff --git a/style.css b/style.css index 0df096c..d4ce6f9 100644 --- a/style.css +++ b/style.css @@ -1,125 +1,189 @@ -/* - - TODO float buttons on bottom of RO - TODO float location entry on RO (sidebar?) - TODO style individual buttons - TODO options page - - move parts list buttons top or bottom - - color themes? - BUG close button on photo pages is styled along with the btnCancel - HACK display tiny images next to parts list? - TODO shrink navbar/header/location on scroll - TODO fancy button animations -*/ - -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); - -:root { - --white: #f4f4f9; - --darkgray: #696969; - --lightgray: #857f74; - --darkblue: #0f2137; - --lightblue: #0ebbfe; - --green: #c1d830; - --darkgreen: #103900; - --black: #000; -} - -/* General Styles */ - -/* Buttons */ - -input[type="button"] { - font-family: Roboto, sans-serif; - background-color: var(--darkgray); - color: var(--white); - border-radius: 5px; - padding: 0.55em 1.25em; - text-decoration: none; - font-size: 0.9em; - cursor: pointer; - border: none; - transition: color 250ms ease-in, background-color 250ms ease-in; -} - -input[type="button"]:hover { - background-color: var(--lightgray); -} - -input[type="button"]:disabled { - opacity: 0.3; - cursor: default; -} - -input[name="btnCancel"] + input[name="btnSave"] { - position: fixed; - bottom: 20px; - right: 20px; -} - -input[name="btnCancel"] { - background-color: lightcoral; - color: var(--white); - position: fixed; - bottom: 20px; - right: 90px; -} - -input[id="btnSubmitForApproval"]:hover { - background-color: var(--darkblue); - color: var(--lightblue); -} - -input[value="Mark Complete"]:hover { - background-color: var(--green); - color: var(--darkgray); - /*font-weight: bolder;*/ -} - -input[name="btnParts"] { - margin: 0; - padding: 0 1em; -} - -input[name="btnIssue4Eval"] { - background-color: var(--darkgreen); - color: var(--lightgray); -} - -input[name="btnContract"] { - padding: .3em 0; - background-color: var(--green); - color: var(--darkgray); -} - -input[name="btnExpandRepairHistory"] { - padding: 0.25em 0; -} - -input[name="btnRepairCodes"] { - padding: 0.5em 0; - font-size: 1em; -} - -input[value="Exit"] { - margin-right: 8px; -} - -input[value="View Repair"] { - margin-bottom: 2px; -} - -input[value="View Repair"], -input[value="Remove Repair"] { - padding: 4px 0; -} - -/* Images */ - -img[id="Img1"], -img[id="Img2"] { - position: absolute; - content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/500px-Plus_symbol.svg.png"); - width: 20px; - height: 20px; -} +/* + + TODO float buttons on bottom of RO + TODO float location entry on RO (sidebar?) + TODO style individual buttons + TODO options page + - move parts list buttons top or bottom + - color themes? + BUG close button on photo pages is styled along with the btnCancel + HACK display tiny images next to parts list? + TODO shrink navbar/header/location on scroll + TODO fancy button animations + TODO choose file on upload window +*/ + +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); + +@font-face { + font-family: "Material Icons Outlined"; + font-style: normal; + font-weight: 400; + src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIconsOutlined-Regular.otf"); +} + +@font-face { + font-family: "Material Icons"; + font-style: normal; + font-weight: 700; + src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIcons-Regular.ttf"); +} + +:root { + --white: #f4f4f9; + --darkgray: #696969; + --lightgray: #857f74; + --darkblue: #0f2137; + --lightblue: #0ebbfe; + --green: #c1d830; + --darkgreen: #103900; + --black: #000; +} + +/* General Styles */ + +/* Buttons */ + +input[type="button"] { + font-family: Roboto, sans-serif; + background-color: var(--darkgray); + color: var(--white); + border-radius: 5px; + padding: 0.55em 1.25em; + text-decoration: none; + font-size: 0.9em; + cursor: pointer; + border: none; + transition: color 250ms ease-in, background-color 250ms ease-in; +} + +input[type="button"]:hover { + background-color: var(--lightgray); +} + +input[type="button"]:disabled { + opacity: 0.3; + cursor: default; +} + +input[name="btnCancel"] + input[name="btnSave"] { + position: fixed; + bottom: 20px; + right: 20px; +} + +input[name="btnCancel"] { + background-color: lightcoral; + color: var(--white); + position: fixed; + bottom: 20px; + right: 90px; +} + +input[id="btnSubmitForApproval"]:hover { + background-color: var(--darkblue); + color: var(--lightblue); +} + +input[value="Mark Complete"]:hover { + background-color: var(--green); + color: var(--darkgray); +} + +input[name="btnParts"] { + margin: 0; + padding: 0 1em; +} + +input[name="btnIssue4Eval"] { + background-color: var(--darkgreen); + color: var(--green); +} + +input[name="btnContract"] { + padding: 0.3em 0; + background-color: var(--green); + color: var(--darkgray); +} + +input[name="btnExpandRepairHistory"] { + padding: 0.25em 0; +} + +input[name="btnRepairCodes"] { + padding: 0.5em 0; + font-size: 1em; +} + +input[value="Exit"] { + margin-right: 8px; +} + +input[value="View Repair"] { + margin-bottom: 2px; +} + +input[value="View Repair"], +input[value="Remove Repair"] { + padding: 4px 0; +} + +label { + transition: background-color 250ms ease; +} + +/* Images */ + +img[id="Img1"], +img[id="Img2"] { + position: absolute; + content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png"); + width: 18px; + height: 18px; + /* BUG: The below lines aren't working.. */ + outline: none; + border: none; +} + +img[id="Img3"] { + content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png"); + width: 16px; + height: 16px; + outline: none; + border: none; +} + +/* Fancy Notifications */ + +#newBtn { + position: relative; +} + +.material-icons-outlined { + font-family: "Material Icons Outlined"; +} + +#notification-button { + position: relative; + color: var(--lightblue); + cursor: pointer; + text-decoration: none; + outline: none; +} + +#notification-button:hover { + color: var(--lightgray); +} + +.notification-icon { + font-size: 2.5em; + position: absolute; + top: 5; + right: 3; +} + +#notification-badge { + position: absolute; + top: 0; + right: 0; +}