2022-11-12 17:21:10 +01:00
|
|
|
diff --git a/app/editor/menus/block.tsx b/app/editor/menus/block.tsx
|
|
|
|
index 143c28309..26d7d6d06 100644
|
|
|
|
--- a/app/editor/menus/block.tsx
|
|
|
|
+++ b/app/editor/menus/block.tsx
|
2022-09-10 18:17:17 +02:00
|
|
|
@@ -18,6 +18,7 @@ import {
|
|
|
|
AttachmentIcon,
|
|
|
|
ClockIcon,
|
|
|
|
CalendarIcon,
|
|
|
|
+ BookmarkedIcon,
|
|
|
|
} from "outline-icons";
|
2022-11-12 17:21:10 +01:00
|
|
|
import * as React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
@@ -176,6 +177,13 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
|
|
|
|
{
|
|
|
|
name: "container_notice",
|
|
|
|
title: dictionary.tipNotice,
|
2022-09-10 18:17:17 +02:00
|
|
|
+ icon: BookmarkedIcon,
|
|
|
|
+ keywords: "notice card suggestion",
|
|
|
|
+ attrs: { style: "bible" },
|
|
|
|
+ },
|
2022-11-12 17:21:10 +01:00
|
|
|
+ {
|
|
|
|
+ name: "container_notice",
|
|
|
|
+ title: dictionary.bibleNotice,
|
|
|
|
icon: StarredIcon,
|
|
|
|
keywords: "notice card suggestion",
|
|
|
|
attrs: { style: "tip" },
|
2022-09-10 18:17:17 +02:00
|
|
|
diff --git a/app/hooks/useDictionary.ts b/app/hooks/useDictionary.ts
|
2022-11-12 17:21:10 +01:00
|
|
|
index 670017490..d8492e05d 100644
|
2022-09-10 18:17:17 +02:00
|
|
|
--- 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
|
2022-11-12 17:21:10 +01:00
|
|
|
index 239a8e7a6..c0dc3b3bd 100644
|
2022-09-10 18:17:17 +02:00
|
|
|
--- a/app/typings/styled-components.d.ts
|
|
|
|
+++ b/app/typings/styled-components.d.ts
|
2022-11-12 17:21:10 +01:00
|
|
|
@@ -53,6 +53,8 @@ declare module "styled-components" {
|
2022-09-10 18:17:17 +02:00
|
|
|
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
|
2022-11-12 17:21:10 +01:00
|
|
|
index 540c2f936..a9863bdca 100644
|
2022-09-10 18:17:17 +02:00
|
|
|
--- a/shared/editor/components/Styles.ts
|
|
|
|
+++ b/shared/editor/components/Styles.ts
|
2022-11-12 17:21:10 +01:00
|
|
|
@@ -515,6 +515,20 @@ h6 {
|
2022-09-10 18:17:17 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
+.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
|
2022-11-12 17:21:10 +01:00
|
|
|
index 158a0dfb9..f297c3433 100644
|
2022-09-10 18:17:17 +02:00
|
|
|
--- 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-11-12 17:21:10 +01:00
|
|
|
index 367e8ab9c..70066ddfd 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
|
|
|
};
|
2022-09-16 17:59:46 +02:00
|
|
|
|
2022-11-12 17:21:10 +01:00
|
|
|
@@ -208,6 +210,7 @@ export const dark = {
|
2022-09-16 17:59:46 +02:00
|
|
|
noticeInfoText: colors.white,
|
|
|
|
noticeTipText: colors.white,
|
|
|
|
noticeWarningText: colors.white,
|
|
|
|
+ noticeBibleText: colors.white,
|
|
|
|
progressBarBackground: colors.slate,
|
|
|
|
scrollbarBackground: colors.black,
|
2022-11-12 17:21:10 +01:00
|
|
|
scrollbarThumb: colors.lightBlack,
|