diff --git a/public/fonts/IconFamily.css b/public/fonts/IconFamily.css new file mode 100644 index 00000000..7e171f8c --- /dev/null +++ b/public/fonts/IconFamily.css @@ -0,0 +1,6 @@ +@font-face { + font-family: 'IconFamily'; + src: local('IconFamily') local('Icon Family') url('/fonts/IconFamily.woff') format('woff'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/public/fonts/IconFamily.woff b/public/fonts/IconFamily.woff new file mode 100644 index 00000000..ffcfe4ce Binary files /dev/null and b/public/fonts/IconFamily.woff differ diff --git a/public/manifest.json b/public/manifest.json index ad242c92..a3654ef6 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -35,6 +35,10 @@ "resources": ["icons/*"], "matches": ["*://*/*"] }, + { + "resources": ["fonts/*"], + "matches": ["*://*/*"] + }, { "resources": ["images/*"], "matches": ["*://*/*"] diff --git a/src/SEQTA.js b/src/SEQTA.js index 1adf5327..3b9cd73f 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -770,6 +770,21 @@ function RunFunctionOnTrue(storedSetting) { document.head.appendChild(fileref); document.getElementsByTagName("html")[0].appendChild(fileref); + // Injecting custom icons font file + const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff"); + + const style = document.createElement("style"); + style.setAttribute("type", "text/css"); + style.innerHTML = ` + @font-face { + font-family: 'IconFamily'; + src: url('${fontURL}') format('woff'); + font-weight: normal; + font-style: normal; + }`; + document.head.appendChild(style); + + document.documentElement.style.setProperty("--better-sub", "#161616"); document.documentElement.style.setProperty( "--better-alert-highlight", @@ -2559,51 +2574,6 @@ function CheckSpecialDay(date1, date2) { } } -function CreateDateCheckedDiv(text, date) { - let upcomingitemcontainer = document.querySelector("#upcoming-items"); - let type; - let class_; - let id; - let innerText; - let container = CreateElement( - (type = "div"), - (class_ = "upcoming-date-container"), - ); - let datecontainer = CreateElement( - (type = "div"), - (class_ = "upcoming-date-title"), - ); - let titletext = CreateElement( - (type = "h5"), - (class_ = "upcoming-special-day"), - (id = undefined), - (innerText = text), - ); - let titledate = CreateElement( - // eslint-disable-next-line no-unused-vars - type = "h5", - // eslint-disable-next-line no-unused-vars - class_ = undefined, - // eslint-disable-next-line no-unused-vars - id = undefined, - // eslint-disable-next-line no-unused-vars - innerText = date, - ); - - let textcontainer = CreateElement("div", "upcoming-blank"); - let textblank = CreateElement("p"); - textblank.innerText = "No assessments due"; - - textcontainer.append(textblank); - - datecontainer.append(titletext); - datecontainer.append(titledate); - - container.append(datecontainer); - container.append(textcontainer); - upcomingitemcontainer.append(container); -} - function CreateSubjectFilter(subjectcode, itemcolour, checked) { let label = CreateElement("label", "upcoming-checkbox-container"); label.innerText = subjectcode; @@ -2656,8 +2626,6 @@ function CreateUpcomingSection(assessments) { let upcomingitemcontainer = document.querySelector("#upcoming-items"); let overdueDates = []; let upcomingDates = {}; - let TodayinUpcoming = false; - let TomorrowinUpcoming = false; // date = '2022/3/20'; // var Today = new Date(date); @@ -2678,23 +2646,9 @@ function CreateUpcomingSection(assessments) { } } } - var options = { weekday: "long", month: "long", day: "numeric" }; - if (!TodayinUpcoming) { - let text = Today.toLocaleDateString("en-AU", options); - CreateDateCheckedDiv("Today", text); - } - function addTomorrowinUpcoming() { - // var TomorrowDate = new Date(date); - var TomorrowDate = new Date(); - TomorrowDate.setDate(TomorrowDate.getDate() + 1); - let textDate = TomorrowDate.toLocaleDateString("en-AU", options); - CreateDateCheckedDiv("Tomorrow", textDate); - } - - if (!TomorrowinUpcoming && !TodayinUpcoming) { - addTomorrowinUpcoming(); - } + var TomorrowDate = new Date(); + TomorrowDate.setDate(TomorrowDate.getDate() + 1); GetLessonColours().then((colours) => { let subjects = colours; @@ -2776,9 +2730,6 @@ function CreateUpcomingSection(assessments) { upcomingitemcontainer.append(assessmentDate); } - if (specialcase === "Today" && !TomorrowinUpcoming) { - addTomorrowinUpcoming(); - } } chrome.storage.local.get(null, function (result) { FilterUpcomingAssessments(result.subjectfilters); diff --git a/src/inject/injected.css b/src/inject/injected.css index 568d574e..35159dbc 100644 --- a/src/inject/injected.css +++ b/src/inject/injected.css @@ -364,6 +364,49 @@ td.colourBar { padding-left: 10px; padding-right: 10px; } + +#toolbar span:has(.search) { + position: relative; /* Makes sure the pseudo-element is positioned relative to this element */ +} + +#toolbar .search { + padding-left: 30px; /* Provides space for the icon */ +} + +#toolbar span:has(.search)::before { + content: "\eca5"; /* Unicode for the search icon */ + position: absolute; + left: 8px; + top: 50%; + transform: translateY(-50%); + color: currentColor; + font-size: 16px; + font-family: "IconFamily"; + pointer-events: none; +} + +#container #content .search { + width: 100%; + border-radius: 16px; +} + +#container #content .uiButton { + border-radius: 16px; +} + +#toolbar button.toggled, #toolbar button.depressed { + background: var(--better-main); +} + +.buttonChecklist { + border-radius: 16px; + margin-top: 4px; +} + +#toolbar > span:has(input) { + flex: 1 1 0%; +} + #main > .reports > .item > .report { filter: brightness(1) !important; border-radius: 16px !important; @@ -492,6 +535,12 @@ div > ol:has(.uiFileHandlerWrapper) { .Module__wrapper___2sbOo { background: var(--background-primary) !important; color: var(--text-primary) !important; + box-shadow: none; +} + +.course .composer { + background: var(--background-primary) !important; + overflow: hidden; } .composer @@ -501,7 +550,6 @@ div > ol:has(.uiFileHandlerWrapper) { > .Canvas__canvas___OBdCZ { background-color: unset !important; background-image: unset !important; - background: var(--auto-background) !important; color: white !important; } @@ -1051,9 +1099,30 @@ div > ol:has(.uiFileHandlerWrapper) { background: var(--background-primary); } +.Input__Input___3RSTI::before { + content: "\eca5"; /* Unicode for the search icon */ + transform: translateY(-50%); + color: currentColor; + font-size: 16px; + margin-left: 8px; + margin-top: auto; + font-family: "IconFamily"; + pointer-events: none; +} + .Input__Input___3RSTI > input { + outline: none !important; + border: none !important; color: var(--text-primary); - background: var(--better-main); + width: 100%; +} + +.Input__Input___3RSTI { + transition: background-color 0.5s,border-color 0.5s; + background-color: var(--auto-background); + position: relative; + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; } .Avatar__Avatar___gE5kx.Avatar__staff___4gVLs { @@ -1683,6 +1752,47 @@ body { -moz-animation: spin 3s linear infinite; } +.LabelList__name___-CHgq { + display: flex; + align-items: center; +} + +[data-label="inbox"] > .LabelList__name___-CHgq::before { + content: "\eb70"; /* Unicode for the search icon */ + color: currentColor; + font-size: 16px; + margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */ + font-family: "IconFamily"; + pointer-events: none; +} + +[data-label="outbox"] > .LabelList__name___-CHgq::before { + content: "\eca6"; /* Unicode for the search icon */ + color: currentColor; + font-size: 16px; + margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */ + font-family: "IconFamily"; + pointer-events: none; +} + +[data-label="starred"] > .LabelList__name___-CHgq::before { + content: "\ece8"; + color: currentColor; + font-size: 16px; + margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */ + font-family: "IconFamily"; + pointer-events: none; +} + +[data-label="trash"] > .LabelList__name___-CHgq::before { + content: "\ed2c"; /* Unicode for the search icon */ + color: currentColor; + font-size: 16px; + margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */ + font-family: "IconFamily"; + pointer-events: none; +} + .outer-circle { margin: -108px; animation-direction: alternate-reverse; @@ -1809,7 +1919,6 @@ body { } .upcoming-items { - background-color: var(--better-sub); width: 100%; max-height: 55em; overflow-y: auto; @@ -2015,10 +2124,6 @@ body { justify-content: space-between; } -.Input__Input___3RSTI { - width: 100%; -} - .messages-filterbutton { height: 34px; width: 25%; @@ -2129,17 +2234,6 @@ body { margin: 0; } -.upcoming-container { - width: 94%; - margin: 50px auto; - max-height: 60em; - background-color: var(--better-main); - display: flex; - flex-direction: column; - -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} - .upcoming-items { background-color: var(--background-primary); transition: 200ms; @@ -2154,12 +2248,6 @@ body { border-bottom-right-radius: 15px; } -.upcoming-container h2 { - margin: 20px; - font-size: 20px; - font-weight: 400; -} - .upcoming-assessment-title { color: var(--text-primary); transition: 200ms;