2022-09-10 18:17:17 +02:00
|
|
|
diff --git a/app/editor/menus/block.ts b/app/editor/menus/block.ts
|
|
|
|
index 9a6fbe7d..26fac655 100644
|
|
|
|
--- a/app/editor/menus/block.ts
|
|
|
|
+++ b/app/editor/menus/block.ts
|
|
|
|
@@ -18,6 +18,7 @@ import {
|
|
|
|
AttachmentIcon,
|
|
|
|
ClockIcon,
|
|
|
|
CalendarIcon,
|
|
|
|
+ BookmarkedIcon,
|
|
|
|
} from "outline-icons";
|
|
|
|
import { MenuItem } from "@shared/editor/types";
|
|
|
|
import { Dictionary } from "~/hooks/useDictionary";
|
|
|
|
@@ -168,5 +169,12 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
|
|
|
|
keywords: "notice card suggestion",
|
|
|
|
attrs: { style: "tip" },
|
|
|
|
},
|
|
|
|
+ {
|
|
|
|
+ name: "container_notice",
|
|
|
|
+ title: dictionary.bibleNotice,
|
|
|
|
+ icon: BookmarkedIcon,
|
|
|
|
+ keywords: "notice card suggestion",
|
|
|
|
+ attrs: { style: "bible" },
|
|
|
|
+ },
|
|
|
|
];
|
|
|
|
}
|
|
|
|
diff --git a/app/hooks/useDictionary.ts b/app/hooks/useDictionary.ts
|
|
|
|
index 67001749..d8492e05 100644
|
|
|
|
--- a/app/hooks/useDictionary.ts
|
|
|
|
+++ b/app/hooks/useDictionary.ts
|
|
|
|
@@ -75,6 +75,8 @@ export default function useDictionary() {
|
|
|
|
showSource: t("Show source"),
|
|
|
|
warning: t("Warning"),
|
|
|
|
warningNotice: t("Warning notice"),
|
|
|
|
+ bible: t("Bible"),
|
|
|
|
+ bibleNotice: t("Bible quote"),
|
|
|
|
insertDate: t("Current date"),
|
|
|
|
insertTime: t("Current time"),
|
|
|
|
insertDateTime: t("Current date and time"),
|
|
|
|
diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts
|
|
|
|
index c8e571d5..7d8aef81 100644
|
|
|
|
--- a/app/typings/styled-components.d.ts
|
|
|
|
+++ b/app/typings/styled-components.d.ts
|
|
|
|
@@ -54,6 +54,8 @@ declare module "styled-components" {
|
|
|
|
noticeTipText: string;
|
|
|
|
noticeWarningBackground: string;
|
|
|
|
noticeWarningText: string;
|
|
|
|
+ noticeBibleBackground: string;
|
|
|
|
+ noticeBibleText: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Colors {
|
|
|
|
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
|
|
|
|
index e1ba4bfa..f6725fb5 100644
|
|
|
|
--- a/shared/editor/components/Styles.ts
|
|
|
|
+++ b/shared/editor/components/Styles.ts
|
|
|
|
@@ -511,6 +511,20 @@ h6 {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
+.notice-block.bible {
|
|
|
|
+ background: ${transparentize(0.9, props.theme.noticeBibleBackground)};
|
|
|
|
+ border-left: 4px solid ${props.theme.noticeBibleBackground};
|
|
|
|
+ color: ${props.theme.noticeBibleText};
|
|
|
|
+
|
|
|
|
+ .icon {
|
|
|
|
+ color: ${props.theme.noticeBibleBackground};
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ a {
|
|
|
|
+ color: ${props.theme.noticeBibleText};
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
blockquote {
|
|
|
|
margin: 0;
|
|
|
|
padding-left: 1.5em;
|
|
|
|
diff --git a/shared/editor/nodes/Notice.tsx b/shared/editor/nodes/Notice.tsx
|
|
|
|
index 158a0dfb..f297c343 100644
|
|
|
|
--- a/shared/editor/nodes/Notice.tsx
|
|
|
|
+++ b/shared/editor/nodes/Notice.tsx
|
|
|
|
@@ -1,5 +1,5 @@
|
|
|
|
import Token from "markdown-it/lib/token";
|
|
|
|
-import { WarningIcon, InfoIcon, StarredIcon } from "outline-icons";
|
|
|
|
+import { WarningIcon, InfoIcon, StarredIcon, BookmarkedIcon } from "outline-icons";
|
|
|
|
import { wrappingInputRule } from "prosemirror-inputrules";
|
|
|
|
import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
|
|
|
|
import * as React from "react";
|
|
|
|
@@ -15,6 +15,7 @@ export default class Notice extends Node {
|
|
|
|
info: this.options.dictionary.info,
|
|
|
|
warning: this.options.dictionary.warning,
|
|
|
|
tip: this.options.dictionary.tip,
|
|
|
|
+ bible: this.options.dictionary.bible,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@@ -47,6 +48,8 @@ export default class Notice extends Node {
|
|
|
|
? "tip"
|
|
|
|
: dom.className.includes("warning")
|
|
|
|
? "warning"
|
|
|
|
+ : dom.className.includes("bible")
|
|
|
|
+ ? "bible"
|
|
|
|
: undefined,
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
@@ -75,6 +78,8 @@ export default class Notice extends Node {
|
|
|
|
component = <StarredIcon color="currentColor" />;
|
|
|
|
} else if (node.attrs.style === "warning") {
|
|
|
|
component = <WarningIcon color="currentColor" />;
|
|
|
|
+ } else if (node.attrs.style === "bible") {
|
|
|
|
+ component = <BookmarkedIcon color="currentColor" />;
|
|
|
|
} else {
|
|
|
|
component = <InfoIcon color="currentColor" />;
|
|
|
|
}
|
|
|
|
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
|
2022-09-15 12:58:33 +02:00
|
|
|
index 3ff5c7cf..e8c00cca 100644
|
2022-09-10 18:17:17 +02:00
|
|
|
--- a/shared/styles/theme.ts
|
|
|
|
+++ b/shared/styles/theme.ts
|
|
|
|
@@ -87,6 +87,8 @@ export const base = {
|
|
|
|
noticeTipText: colors.almostBlack,
|
2022-09-15 12:58:33 +02:00
|
|
|
noticeWarningBackground: "#d73a49",
|
2022-09-10 18:17:17 +02:00
|
|
|
noticeWarningText: colors.almostBlack,
|
2022-09-15 12:58:33 +02:00
|
|
|
+ noticeBibleBackground: "#996633",
|
2022-09-10 18:17:17 +02:00
|
|
|
+ noticeBibleText: colors.almostBlack,
|
|
|
|
breakpoints,
|
2022-09-15 13:01:33 +02:00
|
|
|
};
|
|
|
|
|