From 557763e57d6e2b1f6662c135c1eaab8549ab7a48 Mon Sep 17 00:00:00 2001 From: Alex Martin <32402821+13mralex@users.noreply.github.com> Date: Sat, 27 Jul 2024 01:21:06 -0400 Subject: [PATCH 01/16] create settings menu for more customization --- tdx-enhanced.js | 401 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 362 insertions(+), 39 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index b53d0ed..736c3a3 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace ecn -// @version 2024-07-17-01 +// @version 2024-07-27-01 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDNext/* @@ -132,12 +132,15 @@ function parseTicket(mutation=null) { let qBlock = document.querySelector("#ctlAttribute2285") - let header = document.getElementById("thTicket_spnTitle") + //ticket or task + let header = document.getElementById("thTicket_spnTitle") || document.querySelector("#upTaskHeader>h1") //change tab title if (header) { - let ticketTitle = header.innerText + let ticketTitle = header.childNodes[0].textContent document.title = ticketTitle + } else { + return } //add queue tag to ticket title @@ -163,6 +166,21 @@ header.appendChild(newBox) } + //handle button links - update for now + let buttons = document.querySelectorAll("#btnUpdateTicket, #liAddTicketTask") + console.log("Buttons:",buttons) + for (const button of buttons) { + /* + let id = button.id + switch(id) { + case "btnUpdateTicket": + handleLink("update",button) + } + */ + handleLink("update",button) + } + + //color the feed if darkmode var feedItems if (mutation) { @@ -390,7 +408,7 @@ } } - //find links & open in new tab + //find links & open in new tab, if configured //let linkTypes = ['Title','TicketID','CustomerName','ResponsibleFullName','LastModifiedByFullName'] //open people in new tabs let linkTypes = ['Title','TicketID','TicketTitle'] for (const linkType of linkTypes) { @@ -398,11 +416,54 @@ let link = item[linkType].cell.querySelector("a") if (link) { //override function that opens in windows + handleLink("report",link) + } + } + } + } + + function handleLink(source,link) { + let behavior = settings('get','linkBehavior') + if (behavior=="tabs") { + + switch(source) { + case 'report': { link.onclick = null - //open in new tab link.target = "_blank" + break } } + + } else { + link.onclick = (event)=>{ + event.preventDefault() + var params + var href + let w = (window.screen.width / 2.1) + let h = (window.screen.height / 1.25) + let l = 20 + let t = 50 + + switch(source) { + case 'report': { + href = link.href + break + } + + case 'update': { + l = (window.screen.width / 2) + l + + //restructure url for updating + let location = window.location.pathname + let baseHref = location.substr(0, location.lastIndexOf('/')) + href = `${baseHref}/Update${window.location.search}` + break + } + } + + params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` + return window.open(href,'_blank',params) + } } } @@ -417,7 +478,7 @@ if (!frame.querySelector("#customStyles")) { let head = frame.querySelector("head") let html = frame.querySelector("html") - html.classList.add(getColorMode()) + //html.classList.add(getColorMode()) //FIX THIS! let s = document.createElement("style") s.id = "customStyles" s.innerText = customStyles @@ -464,17 +525,55 @@ function changeTitle() { let title = document.querySelector(".organization-link a") if (title) { - title.innerText = "Purdue University - STEM IT" + title.innerText = "Purdue University - STEM" } - injectModeToggle() + injectSettings() + } + + function colorChange(color) { + localStorage.setItem("colors",color) + setColors(color) } + function setColors(color,value) { + console.log("Setting",color,"to",value) + //let col = tinycolor(value).toRgbString() + let col = value + let style = document.documentElement.style + + switch(color) { + case 'primaryColor': + style.setProperty('--dark-col-primary', col); + style.setProperty('--light-col-primary', col); + break + + case 'backgroundColor': + style.setProperty('--dark-bg-primary', col); + style.setProperty('--light-bg-primary', col); + break + + case 'theme': { + + for (const col of ["dark","light"]) { + let accent = `var(--${col}-${value}-accent)` + let bg = `var(--${col}-${value}-bg)` + style.setProperty(`--${col}-col-primary`, accent) + style.setProperty(`--${col}-bg-primary`, `var(--${col}-bg-default)`) + } + break + } + } + } + + /* function toggleColorMode() { let mode = getColorMode() == "darkMode" ? "lightMode" : "darkMode" setColorMode(mode) } + */ + function setColorMode(mode,store=true) { if (!mode) { mode = "auto" @@ -502,6 +601,7 @@ } + /* function getColorMode() { let localScheme = localStorage.getItem("styles") let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" @@ -522,6 +622,17 @@ let localScheme = localStorage.getItem("styles") let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + let colors = localStorage.getItem("colors") + if (colors) { + console.log("Setting color from init") + setColors(colors) + } + + let primaryColor = document.querySelector("#primaryColor") + if (primaryColor) { + primaryColor.value = colors + } + if (localScheme != autoScheme && localScheme != "auto") { setColorMode(localScheme) } else { @@ -529,34 +640,190 @@ } addEventListener("storage", (event) => { - console.log("Storage event:",event) + //console.log("Storage event:",event) if (event.key == "styles") { setColorMode(event.newValue,false) + } else if (event.key == "colors") { + setColors(event.newValue) } }); } + */ + - function injectModeToggle() { + function injectSettings() { let iconBar = document.querySelector(".tdbar-settings .pull-right") + let toolsHTML = ` +
+ +
+ ` + let buttonHTML = ` - - - + ` - let button = document.createElement("span") - button.innerHTML = buttonHTML + let settingsHTML = ` + + + ` + + let settingsButton = document.createElement("span") + settingsButton.innerHTML = buttonHTML + + let settingsPage = document.createElement("div") + settingsPage.innerHTML = settingsHTML + + let toolsLink = document.createElement("span") + toolsLink.innerHTML = toolsHTML if (iconBar) { - iconBar.prepend(button) - button.querySelector("#colorMode").onclick = toggleColorMode + iconBar.prepend(settingsButton) + + //settings + //settingsPage.querySelector("#colorMode").onclick = toggleColorMode + settingsButton.querySelector("#settingsButton").addEventListener("click",()=>{ + settings("toggle",settingsPage) + }) + iconBar.appendChild(settingsPage) + + //form changes + let form = settingsPage.querySelector("form") + form.addEventListener("change", (event)=>{ + settings("update",form) + }); + + //tools link + let parent = iconBar.parentElement + parent.prepend(toolsLink) + } + } + + /* SETTINGS */ + + function settings(action,value=null) { + var data + var menu + try { + data = JSON.parse(localStorage.getItem("userSettings")) + if (!data) { + throw "Data is null" + } + } catch(e) { + console.error("Couldn't grab settings!",e) + //set defaults + data = { + linkBehavior: "tabs" + } + } + + switch(action) { + case 'apply': { + for (const setting in data) { + let form = document.forms.settingsForm + let value = data[setting] + console.log("Apply setting:",setting,value) + if (form) { + let elements = form.elements + form[setting].value = value + } + } + + if ('colorMode' in data) { + setColorMode(data.colorMode) + } + + if ('theme' in data) { + if (data.theme=="custom") { + setColors('primaryColor',data.primaryColor) + setColors('backgroundColor',data.backgroundColor) + } else { + setColors('theme',data.theme) + } + } + break + } + + case 'get': { + if (value) { + return value in data ? data[value] : null + } else { + return data + } + break + } + + case 'toggle': { + let menu = document.querySelector("#settingsMenu") + let newState = menu.classList.contains("show") ? "hide" : "show" + let oldState = newState=="show" ? "hide" : "show" + menu.classList.add(newState) + menu.classList.remove(oldState) + break + } + + case 'update': { + let form = value + let formData = new FormData(form) + data = Object.fromEntries([...formData]) + console.log("Settings update!",data) + localStorage.setItem("userSettings",JSON.stringify(data)) + settings("apply") + } } } + /* TDX TOOLS */ function checkPath() { let path = document.location.pathname if (path=="/TDWebApi/api/auth/loginsso") { @@ -571,30 +838,61 @@ } changeTitle() - checkColorMode() + //checkColorMode() + settings("apply") parseTicket() checkPath() + addEventListener("storage", (event) => { + //console.log("Storage event:",event) + if (event.key == "userSettings") { + settings("apply") + } + }); + const customStyles = ` /* Root Styles */ :root { - --dark-bg-0: #111; - --dark-bg-1: #222; - --dark-bg-2: #333; - --dark-bg-3: #444; - --dark-bg-4: #555; - --dark-col-0: #ab9266; - --dark-col-1: #CFB991; - --dark-col-2: #8d7c5d; + + --dark-bg-default: #000; + --light-bg-default: #fff; + + --dark-col-default: #ab9266; + --light-col-default: #cbb080; + + --dark-col-primary: var(--dark-col-default); + --light-col-primary: var(--light-col-default); + + --dark-bg-primary: var(--dark-bg-default); + --light-bg-primary: var(--light-bg-default); + + --dark-gold-accent: #ab9266; + --light-gold-accent: #b79a66; + + /* Original TDX blue */ + --dark-blue-accent: #4c778d; + --light-blue-accent: #005d8b; + + --dark-green-accent: #559170; + --light-green-accent: var(--dark-green-accent); + + --dark-bg-0: color-mix(in srgb,var(--dark-bg-primary),#fff 5%); + --dark-bg-1: color-mix(in srgb,var(--dark-bg-primary),#fff 12%); + --dark-bg-2: color-mix(in srgb,var(--dark-bg-primary),#fff 20%); + --dark-bg-3: color-mix(in srgb,var(--dark-bg-primary),#fff 25%); + --dark-bg-4: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); + --dark-col-0: var(--dark-col-primary); + --dark-col-1: color-mix(in srgb,var(--dark-col-primary),#fff 25%); + --dark-col-2: color-mix(in srgb,var(--dark-col-primary),#fff 45%); --dark-col-link: #d1dbff; --dark-txt-0: #bbb; --dark-txt-1: #fff; --dark-txt-2: #ececec; --dark-txt-3: #929292; --dark-txt-4: #ffffff8c; - --dark-border-0: #2b2b2b; + --dark-border-0: color-mix(in srgb,var(--dark-bg-primary),#fff 18%); --dark-col-reply: #1e3438; --dark-col-highlight-1: #625714; --dark-col-highlight-2: #311462; @@ -607,15 +905,15 @@ --light-txt-2: #222; --light-txt-3: #333; --light-txt-4: #0000008c; - --light-col-0: #ccb387; - --light-col-1: #836836; - --light-col-2: #ba7600; - --light-bg-0: #fff; - --light-bg-1: #f5f5f5; - --light-bg-2: #fff; - --light-bg-3: #eee; - --light-bg-4: #ddd; - --light-border-0: #dfdfdf; + --light-col-0: var(--light-col-primary); + --light-col-1: color-mix(in srgb,var(--light-col-primary),#000 15%); + --light-col-2: color-mix(in srgb,var(--light-col-primary),#000 45%); + --light-bg-0: color-mix(in srgb,var(--light-bg-primary),#000 0%); + --light-bg-1: color-mix(in srgb,var(--light-bg-primary),#000 5%); + --light-bg-2: color-mix(in srgb,var(--light-bg-primary),#000 2%); + --light-bg-3: color-mix(in srgb,var(--light-bg-primary),#000 20%); + --light-bg-4: color-mix(in srgb,var(--light-bg-primary),#000 25%); + --light-border-0: color-mix(in srgb,var(--light-bg-primary),#000 18%); --light-col-reply: #d3f2ff; --light-col-highlight-1: #fff3c4; --light-col-highlight-2: #e3c4ff; @@ -735,6 +1033,31 @@ /* Global */ +#settingsMenu { + left: 250px; + padding: 10px; + width: 250px; + background: var(--bg-1); +} + +#settingsMenu.hide { + visibility: hidden; +} + +#settingsMenu h5 { + margin-bottom: 2px; +} + +#settingsMenu h3 { + font-weight: 500; + font-size: 18px; +} + +#settingsForm .flex { + display: flex; + gap: 24px; +} + .qBox { margin-left: 10px; padding: 5px; From 12a0ce736dce6207c7ae06037b150b12396c3e04 Mon Sep 17 00:00:00 2001 From: Alex Martin <32402821+13mralex@users.noreply.github.com> Date: Sat, 27 Jul 2024 02:23:00 -0400 Subject: [PATCH 02/16] display Purdue IT status messages --- tdx-enhanced.js | 102 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 94 insertions(+), 8 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 736c3a3..9123515 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -522,13 +522,13 @@ }); } - function changeTitle() { + async function changeTitle() { let title = document.querySelector(".organization-link a") if (title) { title.innerText = "Purdue University - STEM" } - injectSettings() + await injectToolbar() } function colorChange(color) { @@ -651,14 +651,31 @@ */ - function injectSettings() { + async function injectToolbar() { let iconBar = document.querySelector(".tdbar-settings .pull-right") + let statusHTML = ` +
+ + +
+ ` + let toolsHTML = `
-
` @@ -724,6 +741,9 @@ let settingsPage = document.createElement("div") settingsPage.innerHTML = settingsHTML + let statusLink = document.createElement("span") + statusLink.innerHTML = statusHTML + let toolsLink = document.createElement("span") toolsLink.innerHTML = toolsHTML @@ -743,10 +763,52 @@ settings("update",form) }); - //tools link + //links let parent = iconBar.parentElement + + //tools parent.prepend(toolsLink) + + //status + parent.prepend(statusLink) + let statusData = await getITStatus() + let statusIcon = statusLink.querySelector("#statusIcon") + if (statusData.length>0) { + statusIcon.classList = ("fa-solid fa-triangle-exclamation") + let statusTime = statusLink.querySelector("#statusTime") + let statusText = statusLink.querySelector("#statusText") + + let statusTimeParsed = moment(statusData[0].time) + + statusTime.innerText = statusTimeParsed.fromNow() + statusText.innerText = statusData[0].msg //First msg for now, will there be more than one? + } else { + statusIcon.classList = ("fa-solid fa-check") + } + } + } + + async function getITStatus() { + let url = "https://it.purdue.edu/api-status/messages.php" + let res = await fetch(url) + let data = await res.json() + + let messages = [] + + let msgs = data.Results + if (msgs.length>0) { + let numMsgs = msgs.length/2 + for (let i = 0; i Date: Thu, 1 Aug 2024 14:42:56 -0400 Subject: [PATCH 03/16] show IT status icon correctly, better msg extraction --- tdx-enhanced.js | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 9123515..3200eb3 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace ecn -// @version 2024-07-27-01 +// @version 2024-08-01-01 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDNext/* @@ -773,18 +773,18 @@ parent.prepend(statusLink) let statusData = await getITStatus() let statusIcon = statusLink.querySelector("#statusIcon") - if (statusData.length>0) { - statusIcon.classList = ("fa-solid fa-triangle-exclamation") - let statusTime = statusLink.querySelector("#statusTime") - let statusText = statusLink.querySelector("#statusText") - - let statusTimeParsed = moment(statusData[0].time) + let statusTime = statusLink.querySelector("#statusTime") + let statusText = statusLink.querySelector("#statusText") - statusTime.innerText = statusTimeParsed.fromNow() - statusText.innerText = statusData[0].msg //First msg for now, will there be more than one? + if (statusData && statusData.msg != "All Systems Operational") { + statusIcon.classList = ("fa-solid fa-triangle-exclamation") } else { statusIcon.classList = ("fa-solid fa-check") } + + let statusTimeParsed = moment(statusData.time) + statusTime.innerText = statusTimeParsed.fromNow() + statusText.innerText = statusData.msg } } @@ -793,22 +793,20 @@ let res = await fetch(url) let data = await res.json() - let messages = [] + let msg = {} let msgs = data.Results if (msgs.length>0) { - let numMsgs = msgs.length/2 - for (let i = 0; i Date: Thu, 1 Aug 2024 14:43:22 -0400 Subject: [PATCH 04/16] fix improper height from duplicate classes --- tdx-enhanced.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 3200eb3..c98c4b0 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -724,10 +724,10 @@

Link Behavior

- -
- - + +
+ +
From 4599c37bb650b915e7798fb37d11fe5e20317ee1 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Fri, 2 Aug 2024 14:41:24 -0400 Subject: [PATCH 05/16] proper colormode get/set --- tdx-enhanced.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index c98c4b0..b2bffe9 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -478,7 +478,7 @@ if (!frame.querySelector("#customStyles")) { let head = frame.querySelector("head") let html = frame.querySelector("html") - //html.classList.add(getColorMode()) //FIX THIS! + html.classList.add(settings("get","colorMode")) let s = document.createElement("style") s.id = "customStyles" s.innerText = customStyles @@ -574,6 +574,11 @@ */ + function getColorMode() { + let mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + return mode + } + function setColorMode(mode,store=true) { if (!mode) { mode = "auto" @@ -582,7 +587,7 @@ colorScheme = mode var storageMode = mode - let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + let autoScheme = getColorMode() if (autoScheme == mode) { storageMode = "auto" } @@ -823,6 +828,7 @@ console.error("Couldn't grab settings!",e) //set defaults data = { + colorMode: getColorMode(), linkBehavior: "tabs" } } From dd268e0968ec5e042024b583488ed87122a9e0b8 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Fri, 2 Aug 2024 14:42:25 -0400 Subject: [PATCH 06/16] more various styling fixes --- tdx-enhanced.js | 55 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index b2bffe9..575b0ec 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -935,7 +935,7 @@ --light-bg-primary: var(--light-bg-default); --dark-gold-accent: #ab9266; - --light-gold-accent: #b79a66; + --light-gold-accent: #ccb387; /* Original TDX blue */ --dark-blue-accent: #4c778d; @@ -951,7 +951,7 @@ --dark-bg-4: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); --dark-col-0: var(--dark-col-primary); --dark-col-1: color-mix(in srgb,var(--dark-col-primary),#fff 25%); - --dark-col-2: color-mix(in srgb,var(--dark-col-primary),#fff 45%); + --dark-col-2: color-mix(in srgb,var(--dark-col-primary),#fff 10%); --dark-col-link: #d1dbff; --dark-txt-0: #bbb; --dark-txt-1: #fff; @@ -972,8 +972,8 @@ --light-txt-3: #333; --light-txt-4: #0000008c; --light-col-0: var(--light-col-primary); - --light-col-1: color-mix(in srgb,var(--light-col-primary),#000 15%); - --light-col-2: color-mix(in srgb,var(--light-col-primary),#000 45%); + --light-col-1: color-mix(in srgb,var(--light-col-primary),#000 25%); + --light-col-2: color-mix(in srgb,var(--light-col-primary),#000 10%); --light-bg-0: color-mix(in srgb,var(--light-bg-primary),#000 0%); --light-bg-1: color-mix(in srgb,var(--light-bg-primary),#000 5%); --light-bg-2: color-mix(in srgb,var(--light-bg-primary),#000 2%); @@ -1392,6 +1392,11 @@ div.feed-child-box { color: var(--txt-2); } +ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover { + background-color: var(--bg-2) !important; + color: var(--txt-2); +} + .popover, .list-group-item { background-color: var(--bg-2); } @@ -1571,7 +1576,7 @@ li.ui-state-active { } .panel-app { - color: var(--txt-2); + color: var(--col-2) !important; } .tab-row { @@ -1607,7 +1612,11 @@ li.ui-state-active { background-color: var(--col-0); } -.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover { +.btn-success { + background-color: var(--col-0); +} + +.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover { background-color: var(--col-2); color: var(--txt-4) !important; } @@ -1644,6 +1653,10 @@ li.ui-state-active { background-color: var(--bg-1); } +.panel-success>.panel-heading { + background-color: var(--col-0) !important; +} + .panel-footer { background-color: var(--bg-1); } @@ -1665,6 +1678,18 @@ h1.panel-title, h2.panel-title, h3.panel-title, h4.panel-title, h5.panel-title, background-color: var(--bg-1) !important; } +.sidebar .sidebar-wrapper { + background-color: var(--bg-1) !important; +} + +.sidebar .nav-sidebar li>a:not(.sidebar-brand) { + color: var(--txt-2); +} + +.sidebar .nav-sidebar li.active>a { + background-color: var(--bg-3) !important; +} + /* Tables */ tr.TDGridHeader, .table-header>div { background-color: var(--bg-1); @@ -1754,10 +1779,26 @@ path[stroke="black"] { border-bottom: 1px solid var(--border-0); } +.sidebar .sidebar-wrapper { + border-color: var(--border-0) !important; +} + +.sidebar .nav-sidebar li.active>a { + border-color: var(--border-0) !important; +} + .panel-default, .panel-default>.panel-heading { border-color: var(--border-0) !important; } +.panel-success, .panel-success>.panel-heading { + border-color: var(--col-0); +} + +.panel-footer { + border-top: 1px solid var(--border-0); +} + .border-bottom, .table, table>thead>tr.TDGridHeader>th, .table>tbody>tr>td, .nav-tabs { border-bottom: 1px solid var(--border-0); } @@ -1944,7 +1985,7 @@ div.comment { } .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - border: 1px solid var(--border-0); + /* border: 1px solid var(--border-0); */ } .input-group-addon { From 7888539080feac0b6e13e1c4cac25e07533c6040 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Fri, 2 Aug 2024 15:22:38 -0400 Subject: [PATCH 07/16] more styling enhancements --- tdx-enhanced.js | 46 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 575b0ec..d75457e 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -935,7 +935,7 @@ --light-bg-primary: var(--light-bg-default); --dark-gold-accent: #ab9266; - --light-gold-accent: #ccb387; + --light-gold-accent: #c3aa7f; /* Original TDX blue */ --dark-blue-accent: #4c778d; @@ -958,6 +958,7 @@ --dark-txt-2: #ececec; --dark-txt-3: #929292; --dark-txt-4: #ffffff8c; + --dark-txt-5: var(--light-txt-1); --dark-border-0: color-mix(in srgb,var(--dark-bg-primary),#fff 18%); --dark-col-reply: #1e3438; --dark-col-highlight-1: #625714; @@ -971,6 +972,7 @@ --light-txt-2: #222; --light-txt-3: #333; --light-txt-4: #0000008c; + --light-txt-5: var(--dark-txt-1); --light-col-0: var(--light-col-primary); --light-col-1: color-mix(in srgb,var(--light-col-primary),#000 25%); --light-col-2: color-mix(in srgb,var(--light-col-primary),#000 10%); @@ -1006,6 +1008,7 @@ --txt-2: var(--light-txt-2); --txt-3: var(--light-txt-3); --txt-4: var(--light-txt-4); + --txt-5: var(--light-txt-5); --txt-invert: var(--light-txt-invert); --txt-hue: var(--light-txt-hue); --border-0: var(--light-border-0); @@ -1034,6 +1037,7 @@ --txt-2: var(--dark-txt-2); --txt-3: var(--dark-txt-3); --txt-4: var(--dark-txt-4); + --txt-5: var(--dark-txt-5); --txt-invert: var(--dark-txt-invert); --txt-hue: var(--dark-txt-hue); --border-0: var(--dark-border-0); @@ -1061,6 +1065,7 @@ --txt-2: var(--dark-txt-2); --txt-3: var(--dark-txt-3); --txt-4: var(--dark-txt-4); + --txt-5: var(--dark-txt-5); --txt-invert: var(--dark-txt-invert); --txt-hue: var(--dark-txt-hue); --border-0: var(--dark-border-0); @@ -1087,6 +1092,7 @@ --txt-2: var(--light-txt-2); --txt-3: var(--light-txt-3); --txt-4: var(--light-txt-4); + --txt-5: var(--light-txt-5); --txt-invert: var(--light-txt-invert); --txt-hue: var(--light-txt-hue); --border-0: var(--light-border-0); @@ -1362,7 +1368,7 @@ div.comment { } div.feed-child-box { - background-color: var(--bg-3) !important; + background-color: var(--bg-1) !important; } .code, code, pre { @@ -1397,6 +1403,10 @@ ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover { color: var(--txt-2); } +.dropdown-menu>li.dropdown-header { + color: var(--txt-1); +} + .popover, .list-group-item { background-color: var(--bg-2); } @@ -1502,7 +1512,7 @@ ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover { } a.cke_button_disabled:active, a.cke_button_disabled:focus, a.cke_button_disabled:hover, a.cke_button_off:active, a.cke_button_off:focus, a.cke_button_off:hover { - background: var(--bg-3) !important; + background: var(--bg-3) !important; } .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { @@ -1600,6 +1610,10 @@ li.ui-state-active { background-color: var(--bg-2); } +ul.nav-pills li.dropdown button.dropdown-toggle:hover { + background-color: var(--bg-2); +} + .btn-link { color: var(--col-1); } @@ -1616,9 +1630,13 @@ li.ui-state-active { background-color: var(--col-0); } +.btn-primary { + color: var(--txt-5) !important; +} + .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover { background-color: var(--col-2); - color: var(--txt-4) !important; + color: var(--txt-5) !important; } .module-header span { @@ -1626,12 +1644,13 @@ li.ui-state-active { } .pagination>li>a:hover { - color: var(--txt-2); + color: var(--txt-2) !important; background-color: var(--bg-2) !important; } -.pagination>.active>a { - background-color: var(--bg-2) !important; +.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { + color: var(--txt-2) !important; + background-color: var(--col-0) !important; } .ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { @@ -1733,6 +1752,11 @@ table>thead>tr.TDGridHeader>th, tr.TDGridHeader td, .table-header>div { background-color: var(--bg-1); } +.light-gray-bg, .light-gray-hover-bg:hover { + color: var(--txt-1) !important; + background-color: var(--bg-1) !important; +} + .ui-layout-resizer-west { background-color: var(--bg-4); } @@ -1948,10 +1972,18 @@ input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke background-color: var(--border-0); } +.dropdown-menu>li.dropdown-header { + border-bottom: 1px solid var(--border-0); +} + .Module-rpt { border-color: var(--col-1); } +div.ReportGroupName { + border: 1px solid var(--border-0); +} + .colContainer { border-color: var(--border-0); } From 787c125ada69127447594aba2767c28f548d50fc Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Mon, 5 Aug 2024 10:34:03 -0400 Subject: [PATCH 08/16] calendar styling --- tdx-enhanced.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index d75457e..1238f1e 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1440,6 +1440,19 @@ ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover { color: var(--txt-2); } +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { + background: var(--col-0) !important; +} + +.ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover { + background: var(--bg-4); + color: var(--txt-2) !important; +} + +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { + background: var(--bg-4); +} + .ui-datepicker-calendar { color: var(--txt-2); } @@ -1479,6 +1492,7 @@ ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover { .moreToggle button, .lessToggle button { background-color: var(--col-0); + color: var(--txt-5) !important; } #ttDescription a, .feed-item-text a { @@ -1606,7 +1620,7 @@ li.ui-state-active { color: var(--txt-2) !important; } -.btn:hover, .nav>li>a:hover { +.nav>li>a:hover { background-color: var(--bg-2); } @@ -1634,7 +1648,7 @@ ul.nav-pills li.dropdown button.dropdown-toggle:hover { color: var(--txt-5) !important; } -.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover { +.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover, .btn:hover { background-color: var(--col-2); color: var(--txt-5) !important; } @@ -2017,7 +2031,15 @@ div.comment { } .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - /* border: 1px solid var(--border-0); */ + border: 1px solid var(--border-0); +} + +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { + border: 1px solid var(--col-1); +} + +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { + border: 1px solid var(--txt-3); } .input-group-addon { From ee72e8c934cfa2943d0aced980afd9b738e08363 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Mon, 5 Aug 2024 11:25:20 -0400 Subject: [PATCH 09/16] use proper calendar input --- tdx-enhanced.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 1238f1e..4eec385 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -135,6 +135,33 @@ //ticket or task let header = document.getElementById("thTicket_spnTitle") || document.querySelector("#upTaskHeader>h1") + //find calendar inputs when editing tickets/tasks + let calendars = document.querySelectorAll("input.hasDatepicker") + if (calendars) { + let originalFormat = "M/D/YYYY h:mm A"; + let newFormat = "YYYY-MM-DDThh:mm"; + [...calendars].forEach(calendar=>{ + let date = moment(calendar.value,originalFormat) + let iso = date.format(newFormat) + + let newCal = document.createElement("input") + newCal.id = `${calendar.id}-new` + newCal.classList = calendar.classList + newCal.type = "datetime-local" + newCal.value = iso + + //convert to original format + newCal.addEventListener("input",event=>{ + let parsedValue = moment(event.target.value,newFormat) + let parsedFormat = parsedValue.format(originalFormat) + calendar.value = parsedFormat + }) + + //old input still needs to exist for proper format conversion + calendar.style.display = "none" + calendar.parentElement.append(newCal) + }); + } //change tab title if (header) { let ticketTitle = header.childNodes[0].textContent From 215bfecae5c28f659afba975dd61382847279231 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Mon, 5 Aug 2024 11:25:36 -0400 Subject: [PATCH 10/16] fix button hover color --- tdx-enhanced.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 4eec385..1f001b8 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1675,7 +1675,7 @@ ul.nav-pills li.dropdown button.dropdown-toggle:hover { color: var(--txt-5) !important; } -.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover, .btn:hover { +.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-success:hover, .btn.NoPrint:hover { background-color: var(--col-2); color: var(--txt-5) !important; } From 55a06f3919cd3feeb41dcdfcfa27f8d4e9b5c330 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Mon, 5 Aug 2024 11:58:00 -0400 Subject: [PATCH 11/16] more styling --- tdx-enhanced.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 1f001b8..b1edbff 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1269,7 +1269,7 @@ a:focus, a:hover { } .alert-info { - color: var(--txt-2); + color: var(--txt-5); background-color: var(--col-0); border-color: var(--border-0); } From 6ded055810f61b8bf5c9b1b7d9f46fb71adb3fd5 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Wed, 7 Aug 2024 14:28:48 -0400 Subject: [PATCH 12/16] more styling --- tdx-enhanced.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index b1edbff..f593977 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1275,7 +1275,7 @@ a:focus, a:hover { } .alert-warning { - color: var(--txt-2); + color: var(--txt-5); background-color: var(--col-0); border-color: var(--border-0); } @@ -1726,7 +1726,7 @@ ul.nav-pills li.dropdown button.dropdown-toggle:hover { } h1, h2, h3, h4, label, .control-label { - color: var(--txt-2); + color: var(--txt-2) !important; } h1.panel-title, h2.panel-title, h3.panel-title, h4.panel-title, h5.panel-title, h6.panel-title { @@ -2058,7 +2058,7 @@ div.comment { } .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - border: 1px solid var(--border-0); + border-color: var(--border-0); } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { @@ -2089,6 +2089,14 @@ blockquote { border: 1px solid var(--bg-4); } +.h2, h2 { + border-bottom: 1px solid var(--border-0); +} + +div.feed-entry { + border-bottom: 1px solid var(--border-0) !important; +} + ` From 23e268dd012a717779977fc3b11953a66240212f Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Wed, 7 Aug 2024 14:29:06 -0400 Subject: [PATCH 13/16] only use new calendar for tasks --- tdx-enhanced.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index f593977..f11e277 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -136,7 +136,8 @@ let header = document.getElementById("thTicket_spnTitle") || document.querySelector("#upTaskHeader>h1") //find calendar inputs when editing tickets/tasks - let calendars = document.querySelectorAll("input.hasDatepicker") + //let calendars = document.querySelectorAll("input.hasDatepicker") + let calendars = document.querySelectorAll("#txtStartDate, #txtEndDate") //tasks for now, will add more as found if (calendars) { let originalFormat = "M/D/YYYY h:mm A"; let newFormat = "YYYY-MM-DDThh:mm"; From e3242ff12d5dc88d6c2448e03d9f43aec55098d6 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Wed, 28 Aug 2024 09:46:40 -0400 Subject: [PATCH 14/16] fix more border colors --- tdx-enhanced.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index f11e277..7ea02b3 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1853,6 +1853,10 @@ path[stroke="black"] { border-color: var(--border-0) !important; } +hr { + background-color: var(--border-0); +} + .panel-default, .panel-default>.panel-heading { border-color: var(--border-0) !important; } @@ -1998,6 +2002,10 @@ input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke border: 1px solid var(--border-0) !important; } +.nav-tabs>li.active>a { + border-bottom-color: var(--bg-1) !important; +} + .ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { border-bottom: 1px solid var(--border-0); } From dc9d966d376ae367b980d50e46a06aed06fc8f63 Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Wed, 28 Aug 2024 09:47:19 -0400 Subject: [PATCH 15/16] begind restructure of popup windows --- tdx-enhanced.js | 69 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 52 insertions(+), 17 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 7ea02b3..50cd670 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -163,6 +163,7 @@ calendar.parentElement.append(newCal) }); } + //change tab title if (header) { let ticketTitle = header.childNodes[0].textContent @@ -194,19 +195,21 @@ header.appendChild(newBox) } - //handle button links - update for now - let buttons = document.querySelectorAll("#btnUpdateTicket, #liAddTicketTask") - console.log("Buttons:",buttons) - for (const button of buttons) { - /* - let id = button.id - switch(id) { - case "btnUpdateTicket": - handleLink("update",button) - } - */ - handleLink("update",button) - } + //handle button links - updates/tasks for now + //update buttons + [...document.querySelectorAll("#btnUpdateTicket, #divUpdateFromActions>a")].forEach(button=>{ + handleLink("Update",button) + }); + + //task button + [...document.querySelectorAll("#liAddTicketTask>a")].forEach(button=>{ + handleLink("TicketTaskNew",button) + }); + + //task template button + [...document.querySelectorAll("#divAddTaskTemplate>a")].forEach(button=>{ + handleLink("TicketAddTaskTemplate",button) + }); //color the feed if darkmode var feedItems @@ -452,6 +455,10 @@ function handleLink(source,link) { let behavior = settings('get','linkBehavior') + + let relL = window.screenLeft != undefined ? window.screenLeft : screen.left + let relT = window.screenTop != undefined ? window.screenTop : screen.top + if (behavior=="tabs") { switch(source) { @@ -460,6 +467,27 @@ link.target = "_blank" break } + + case 'Update': + case 'TicketTaskNew': + case 'TicketAddTaskTemplate': { + link.onclick = (event)=>{ + event.preventDefault() + let w = (window.screen.width / 1.75) + let h = (window.screen.height / 1.25) + let l = ((window.screen.width / 2) - (w/2)) + relL + let t = ((window.screen.height / 2) - (h/2)) + relT + + //restructure url for updating + let location = window.location.pathname + let baseHref = location.substr(0, location.lastIndexOf('/')) + let href = `${baseHref}/${source}${window.location.search}` + + let params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` + return window.open(href,'_blank',params) + } + break + } } } else { @@ -469,8 +497,8 @@ var href let w = (window.screen.width / 2.1) let h = (window.screen.height / 1.25) - let l = 20 - let t = 50 + let l = 20 + relL + let t = 50 + relT switch(source) { case 'report': { @@ -478,13 +506,15 @@ break } - case 'update': { + case 'Update': + case 'TicketTaskNew': + case 'TicketAddTaskTemplate': { l = (window.screen.width / 2) + l //restructure url for updating let location = window.location.pathname let baseHref = location.substr(0, location.lastIndexOf('/')) - href = `${baseHref}/Update${window.location.search}` + href = `${baseHref}/${source}${window.location.search}` break } } @@ -493,6 +523,11 @@ return window.open(href,'_blank',params) } } + + } + + function generatePopup(href,w,h,l,t,source) { + } function injectOtherStyles(element) { From cd55341bed2e458611c51c6629e6a82d72814acd Mon Sep 17 00:00:00 2001 From: "Martin, Alexander Scott" Date: Wed, 28 Aug 2024 09:48:51 -0400 Subject: [PATCH 16/16] bump version --- tdx-enhanced.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 50cd670..3982e1d 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace ecn -// @version 2024-08-01-01 +// @version 2024-08-28-01 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDNext/*