diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index c3128e72..83540875 100644
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -24,6 +24,7 @@ export interface NoticeProps {
smaller?: boolean,
limitWidth?: boolean,
+ extraClass?: string,
// Callback for when this is closed
closeListener: () => void,
@@ -35,8 +36,6 @@ export interface NoticeProps {
}
export interface NoticeState {
- noticeTitle: string,
-
maxCountdownTime: () => number,
countdownTime: number,
@@ -54,9 +53,13 @@ class NoticeComponent extends React.Component {
amountOfPreviousNotices: number;
+ parentRef: React.RefObject;
+
constructor(props: NoticeProps) {
super(props);
+ this.parentRef = React.createRef();
+
const maxCountdownTime = () => {
if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
else return Config.config.skipNoticeDuration;
@@ -71,8 +74,6 @@ class NoticeComponent extends React.Component {
// Setup state
this.state = {
- noticeTitle: props.noticeTitle,
-
maxCountdownTime,
//the countdown until this notice closes
@@ -97,9 +98,11 @@ class NoticeComponent extends React.Component {
return (
this.onMouseEnter(e) }
onMouseLeave={() => this.timerMouseLeave()}
+ ref={this.parentRef}
style={noticeStyle} >
{
style={{float: "left"}}
className="sponsorSkipMessage sponsorSkipObject">
- {this.state.noticeTitle}
+ {this.props.noticeTitle}
{this.props.firstColumn}
@@ -344,12 +347,6 @@ class NoticeComponent extends React.Component {
if (!silent) this.props.closeListener();
}
- changeNoticeTitle(title: string): void {
- this.setState({
- noticeTitle: title
- });
- }
-
addNoticeInfoMessage(message: string, message2 = ""): void {
//TODO: Replace
@@ -384,6 +381,10 @@ class NoticeComponent extends React.Component {
document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
}
}
+
+ getElement(): React.RefObject {
+ return this.parentRef;
+ }
}
export default NoticeComponent;
diff --git a/src/components/NoticeTextSectionComponent.tsx b/src/components/NoticeTextSectionComponent.tsx
index 5e74a1d6..71fcb263 100644
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/src/components/NoticeTextSectionComponent.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
export interface NoticeTextSelectionProps {
+ icon?: string,
text: string,
idSuffix: string,
onClick?: (event: React.MouseEvent) => unknown
@@ -24,12 +25,21 @@ class NoticeTextSelectionComponent extends React.Component
- {this.props.text}
-
+
+
+ {this.props.icon ?
+ })
+ : null}
+
+
+ {this.props.text}
+
+
+
);
}
}
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 9d749ac0..17651e19 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -18,6 +18,7 @@ export interface SponsorTimeEditProps {
submissionNotice: SubmissionNoticeComponent;
categoryList?: Category[];
+ categoryChangeListener?: (index: number, category: Category) => void;
}
export interface SponsorTimeEditState {
@@ -365,9 +366,10 @@ class SponsorTimeEditComponent extends React.Component): void {
+ const chosenCategory = event.target.value as Category;
+
// See if show more categories was pressed
if (event.target.value !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === event.target.value)) {
- const chosenCategory = event.target.value;
event.target.value = DEFAULT_CATEGORY;
// Alert that they have to enable this category first
@@ -381,8 +383,12 @@ class SponsorTimeEditComponent extends React.Component): void {
diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index de9e9f7d..64146822 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -1,10 +1,13 @@
import * as React from "react";
import Config from "../config"
-import { ContentContainer } from "../types";
+import GenericNotice from "../render/GenericNotice";
+import { Category, ContentContainer } from "../types";
+import * as CompileConfig from "../../config.json";
import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
+import { getGuidelineInfo } from "../utils/constants";
export interface SubmissionNoticeProps {
// Contains functions and variables from the content script needed by the skip notice
@@ -32,6 +35,8 @@ class SubmissionNoticeComponent extends React.Component
);
@@ -154,6 +160,7 @@ class SubmissionNoticeComponent extends React.Component dialogWidth * 2) {
+ const options = {
+ title: chrome.i18n.getMessage(`category_${category}`),
+ textBoxes: getGuidelineInfo(category),
+ buttons: [{
+ name: chrome.i18n.getMessage("learnMore"),
+ listener: () => window.open(CompileConfig.wikiLinks[category])
+ },
+ {
+ name: chrome.i18n.getMessage("Hide"),
+ listener: () => {
+ Config.config.showCategoryGuidelines = false;
+ this.guidelinesReminder?.close();
+ this.guidelinesReminder = null;
+ }
+ }],
+ timed: false,
+ style: {
+ right: `${dialogWidth + 10}px`,
+ },
+ extraClass: "sb-guidelines-notice"
+ };
+
+ if (options.textBoxes) {
+ if (this.guidelinesReminder) {
+ this.guidelinesReminder.update(options);
+ } else {
+ this.guidelinesReminder = new GenericNotice(null, "GuidelinesReminder", options);
+ }
+ } else {
+ this.guidelinesReminder?.close();
+ this.guidelinesReminder = null;
+ }
+ }
+ }
}
export default SubmissionNoticeComponent;
diff --git a/src/config.ts b/src/config.ts
index 5a0fe5be..c5080a6c 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -55,6 +55,7 @@ interface SBConfig {
scrollToEditTimeUpdate: boolean,
categoryPillUpdate: boolean,
darkMode: boolean,
+ showCategoryGuidelines: boolean,
// Used to cache calculated text color info
categoryPillColors: {
@@ -167,6 +168,7 @@ const Config: SBObject = {
scrollToEditTimeUpdate: false, // false means the tooltip will be shown
categoryPillUpdate: false,
darkMode: true,
+ showCategoryGuidelines: true,
categoryPillColors: {},
diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx
index 08570eab..d00799fb 100644
--- a/src/render/GenericNotice.tsx
+++ b/src/render/GenericNotice.tsx
@@ -13,12 +13,19 @@ export interface ButtonListener {
listener: (e?: React.MouseEvent) => void
}
+export interface TextBox {
+ icon: string,
+ text: string
+}
+
export interface NoticeOptions {
title: string,
- textBoxes?: string[],
+ textBoxes?: TextBox[],
buttons?: ButtonListener[],
fadeIn?: boolean,
timed?: boolean
+ style?: React.CSSProperties;
+ extraClass?: string;
}
export default class GenericNotice {
@@ -27,9 +34,11 @@ export default class GenericNotice {
noticeElement: HTMLDivElement;
noticeRef: React.MutableRefObject;
+ idSuffix: string;
constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
this.noticeRef = React.createRef();
+ this.idSuffix = idSuffix;
this.contentContainer = contentContainer;
@@ -40,39 +49,47 @@ export default class GenericNotice {
referenceNode.prepend(this.noticeElement);
+ this.update(options);
+ }
+
+ update(options: NoticeOptions): void {
ReactDOM.render(
this.close()} >
- {this.getMessageBox(idSuffix, options.textBoxes)}
+ {this.getMessageBox(this.idSuffix, options.textBoxes)}
-
-
+ {this.getButtons(options.buttons)}
+
+
,
this.noticeElement
);
}
- getMessageBox(idSuffix: string, textBoxes: string[]): JSX.Element[] {
+ getMessageBox(idSuffix: string, textBoxes: TextBox[]): JSX.Element[] {
if (textBoxes) {
const result = [];
for (let i = 0; i < textBoxes.length; i++) {
result.push(
-
- {this.getButtons(options.buttons)}
-
+