diff --git a/src/resources/themes/v_moonlight/v_moonlight.palette b/src/resources/themes/v_moonlight/v_moonlight.palette
index bb807846..3c3c2397 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.palette
+++ b/src/resources/themes/v_moonlight/v_moonlight.palette
@@ -6,7 +6,8 @@ qss_file=v_moonlight.qss
mdhl_file=v_moonlight.mdhl
css_file=v_moonlight.css
codeblock_css_file=v_moonlight_codeblock.css
-version=3
+mermaid_css_file=v_moonlight_mermaid.css
+version=4
; This mapping will be used to translate colors when the content of HTML is copied
; without background. You could just specify the foreground colors mapping here.
diff --git a/src/utils/mermaid/mermaid.forest.css b/src/resources/themes/v_moonlight/v_moonlight_mermaid.css
similarity index 100%
rename from src/utils/mermaid/mermaid.forest.css
rename to src/resources/themes/v_moonlight/v_moonlight_mermaid.css
diff --git a/src/resources/themes/v_pure/v_pure.palette b/src/resources/themes/v_pure/v_pure.palette
index d9dc6218..077e3b52 100644
--- a/src/resources/themes/v_pure/v_pure.palette
+++ b/src/resources/themes/v_pure/v_pure.palette
@@ -6,7 +6,8 @@ qss_file=v_pure.qss
mdhl_file=v_pure.mdhl
css_file=v_pure.css
codeblock_css_file=v_pure_codeblock.css
-version=3
+mermaid_css_file=v_pure_mermaid.css
+version=4
[phony]
; Abstract color attributes.
diff --git a/src/utils/mermaid/mermaid.css b/src/resources/themes/v_pure/v_pure_mermaid.css
similarity index 100%
rename from src/utils/mermaid/mermaid.css
rename to src/resources/themes/v_pure/v_pure_mermaid.css
diff --git a/src/resources/themes/v_white/v_white.palette b/src/resources/themes/v_white/v_white.palette
index fa3b38ba..206fca5e 100644
--- a/src/resources/themes/v_white/v_white.palette
+++ b/src/resources/themes/v_white/v_white.palette
@@ -6,7 +6,8 @@ qss_file=v_white.qss
mdhl_file=v_white.mdhl
css_file=v_white.css
codeblock_css_file=v_white_codeblock.css
-version=3
+mermaid_css_file=v_white_mermaid.css
+version=4
[phony]
; Abstract color attributes.
diff --git a/src/utils/mermaid/mermaid.dark.css b/src/resources/themes/v_white/v_white_mermaid.css
similarity index 70%
rename from src/utils/mermaid/mermaid.dark.css
rename to src/resources/themes/v_white/v_white_mermaid.css
index df49a4e1..769933f0 100644
--- a/src/utils/mermaid/mermaid.dark.css
+++ b/src/resources/themes/v_white/v_white_mermaid.css
@@ -2,84 +2,84 @@
/* Sequence Diagram variables */
/* Gantt chart variables */
.mermaid .label {
- color: #323D47;
+ color: #333;
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
- fill: #BDD5EA;
- stroke: #81B1DB;
+ fill: #ECECFF;
+ stroke: #CCCCFF;
stroke-width: 1px;
}
.edgePath .path {
- stroke: lightgrey;
+ stroke: #333333;
}
.edgeLabel {
background-color: #e8e8e8;
}
.cluster rect {
- fill: #6D6D65 !important;
+ fill: #ffffde !important;
rx: 4 !important;
- stroke: rgba(255, 255, 255, 0.25) !important;
+ stroke: #aaaa33 !important;
stroke-width: 1px !important;
}
.cluster text {
- fill: #F9FFFE;
+ fill: #333;
}
.actor {
- stroke: #81B1DB;
- fill: #BDD5EA;
+ stroke: #CCCCFF;
+ fill: #ECECFF;
}
text.actor {
fill: black;
stroke: none;
}
.actor-line {
- stroke: lightgrey;
+ stroke: grey;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
- stroke: lightgrey;
+ stroke: #333;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
- stroke: lightgrey;
+ stroke: #333;
}
#arrowhead {
- fill: lightgrey !important;
+ fill: #333;
}
#crosshead path {
- fill: lightgrey !important;
- stroke: lightgrey !important;
+ fill: #333 !important;
+ stroke: #333 !important;
}
.messageText {
- fill: lightgrey;
+ fill: #333;
stroke: none;
}
.labelBox {
- stroke: #81B1DB;
- fill: #BDD5EA;
+ stroke: #CCCCFF;
+ fill: #ECECFF;
}
.labelText {
- fill: #323D47;
+ fill: black;
stroke: none;
}
.loopText {
- fill: lightgrey;
+ fill: black;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
- stroke: #81B1DB;
+ stroke: #CCCCFF;
}
.note {
- stroke: rgba(255, 255, 255, 0.25);
+ stroke: #aaaa33;
fill: #fff5ad;
}
.noteText {
@@ -94,10 +94,10 @@ text.actor {
opacity: 0.2;
}
.section0 {
- fill: rgba(255, 255, 255, 0.3);
+ fill: rgba(102, 102, 255, 0.49);
}
.section2 {
- fill: #EAE8B9;
+ fill: #fff400;
}
.section1,
.section3 {
@@ -105,16 +105,16 @@ text.actor {
opacity: 0.2;
}
.sectionTitle0 {
- fill: #F9FFFE;
+ fill: #333;
}
.sectionTitle1 {
- fill: #F9FFFE;
+ fill: #333;
}
.sectionTitle2 {
- fill: #F9FFFE;
+ fill: #333;
}
.sectionTitle3 {
- fill: #F9FFFE;
+ fill: #333;
}
.sectionTitle {
text-anchor: start;
@@ -123,39 +123,35 @@ text.actor {
}
/* Grid and axis */
.grid .tick {
- stroke: rgba(255, 255, 255, 0.3);
+ stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
-.grid .tick text {
- fill: lightgrey;
- opacity: 0.5;
-}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
- stroke: #DB5757;
+ stroke: red;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
- stroke-width: 1;
+ stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
- fill: #323D47;
+ fill: black;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
- fill: #323D47;
+ fill: black;
text-anchor: end;
font-size: 11px;
}
@@ -164,74 +160,76 @@ text.actor {
.taskText1,
.taskText2,
.taskText3 {
- fill: #323D47;
+ fill: white;
}
.task0,
.task1,
.task2,
.task3 {
- fill: #BDD5EA;
- stroke: rgba(255, 255, 255, 0.5);
+ fill: #8a90dd;
+ stroke: #534fbc;
}
.taskTextOutside0,
.taskTextOutside2 {
- fill: lightgrey;
+ fill: black;
}
.taskTextOutside1,
.taskTextOutside3 {
- fill: lightgrey;
+ fill: black;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
- fill: #81B1DB;
- stroke: rgba(255, 255, 255, 0.5);
+ fill: #bfc7ff;
+ stroke: #534fbc;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
- fill: #323D47 !important;
+ fill: black !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
+ stroke: grey;
fill: lightgrey;
+ stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
- fill: #323D47 !important;
+ fill: black !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
- stroke: #E83737;
- fill: #E83737;
+ stroke: #ff8888;
+ fill: red;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
- stroke: #E83737;
- fill: #81B1DB;
+ stroke: #ff8888;
+ fill: #bfc7ff;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
- stroke: #E83737;
+ stroke: #ff8888;
fill: lightgrey;
- stroke-width: 1;
+ stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
@@ -239,18 +237,18 @@ text.actor {
.doneCritText1,
.doneCritText2,
.doneCritText3 {
- fill: lightgrey !important;
+ fill: black !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
- fill: #323D47 !important;
+ fill: black !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
- fill: lightgrey;
+ fill: black;
}
/*
@@ -267,8 +265,8 @@ div.mermaidTooltip {
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-size: 12px;
- background: #6D6D65;
- border: 1px solid rgba(255, 255, 255, 0.25);
+ background: #ffffde;
+ border: 1px solid #aaaa33;
border-radius: 2px;
pointer-events: none;
z-index: 100;
diff --git a/src/utils/vutils.cpp b/src/utils/vutils.cpp
index 5e6377b2..2a7d23e6 100644
--- a/src/utils/vutils.cpp
+++ b/src/utils/vutils.cpp
@@ -646,7 +646,7 @@ QString VUtils::generateHtmlTemplate(const QString &p_template,
}
if (g_config->getEnableMermaid()) {
- extraFile += "\n" +
+ extraFile += "getMermaidCssStyleUrl() + "\"/>\n" +
"\n" +
"\n";
}
diff --git a/src/vconfigmanager.cpp b/src/vconfigmanager.cpp
index 1914c494..082aadb5 100644
--- a/src/vconfigmanager.cpp
+++ b/src/vconfigmanager.cpp
@@ -930,6 +930,29 @@ QString VConfigManager::getCodeBlockCssStyleUrl(const QString &p_style) const
return cssPath;
}
+QString VConfigManager::getMermaidCssStyleUrl() const
+{
+ Q_ASSERT(!m_themes.isEmpty());
+ Q_ASSERT(!m_theme.isEmpty());
+
+ static QString mermaidCssPath;
+
+ if (mermaidCssPath.isEmpty()) {
+ VPaletteMetaData data = VPalette::getPaletteMetaData(getThemeFile());
+ mermaidCssPath = data.m_mermaidCssFile;
+ if (mermaidCssPath.startsWith(":")) {
+ mermaidCssPath = "qrc" + mermaidCssPath;
+ } else {
+ QUrl cssUrl = QUrl::fromLocalFile(mermaidCssPath);
+ mermaidCssPath = cssUrl.toString();
+ }
+
+ qDebug() << "use mermaid css style file" << mermaidCssPath;
+ }
+
+ return mermaidCssPath;
+}
+
QString VConfigManager::getEditorStyleFile() const
{
Q_ASSERT(!m_themes.isEmpty());
diff --git a/src/vconfigmanager.h b/src/vconfigmanager.h
index 7632a74f..5a21eed8 100644
--- a/src/vconfigmanager.h
+++ b/src/vconfigmanager.h
@@ -123,6 +123,8 @@ public:
QString getCodeBlockCssStyleUrl(const QString &p_style) const;
+ QString getMermaidCssStyleUrl() const;
+
const QString &getEditorStyle() const;
void setEditorStyle(const QString &p_style);
diff --git a/src/vnote.cpp b/src/vnote.cpp
index e4ff6996..3cb174b1 100644
--- a/src/vnote.cpp
+++ b/src/vnote.cpp
@@ -45,8 +45,6 @@ const QString VNote::c_showdownExtraFile = ":/utils/showdown/showdown.min.js";
const QString VNote::c_showdownAnchorExtraFile = ":/utils/showdown/showdown-headinganchor.js";
const QString VNote::c_mermaidApiJsFile = ":/utils/mermaid/mermaidAPI.min.js";
-const QString VNote::c_mermaidCssFile = ":/utils/mermaid/mermaid.css";
-const QString VNote::c_mermaidDarkCssFile = ":/utils/mermaid/mermaid.dark.css";
const QString VNote::c_mermaidForestCssFile = ":/utils/mermaid/mermaid.forest.css";
const QString VNote::c_flowchartJsFile = ":/utils/flowchart.js/flowchart.min.js";
diff --git a/src/vnote.h b/src/vnote.h
index 46a68a15..7a068299 100644
--- a/src/vnote.h
+++ b/src/vnote.h
@@ -58,8 +58,6 @@ public:
// Mermaid
static const QString c_mermaidApiJsFile;
- static const QString c_mermaidCssFile;
- static const QString c_mermaidDarkCssFile;
static const QString c_mermaidForestCssFile;
// flowchart.js
diff --git a/src/vnote.qrc b/src/vnote.qrc
index 064f3459..a2954a71 100644
--- a/src/vnote.qrc
+++ b/src/vnote.qrc
@@ -59,9 +59,6 @@
utils/markdown-it/markdown-it.min.js
utils/markdown-it/markdown-it-headinganchor.js
utils/markdown-it/markdown-it-task-lists.min.js
- utils/mermaid/mermaid.css
- utils/mermaid/mermaid.dark.css
- utils/mermaid/mermaid.forest.css
utils/mermaid/mermaidAPI.min.js
resources/icons/close_red.svg
resources/docs/shortcuts_en.md
@@ -240,5 +237,8 @@
resources/icons/fullscreen.svg
resources/icons/menubar.svg
resources/export_template.html
+ resources/themes/v_pure/v_pure_mermaid.css
+ resources/themes/v_white/v_white_mermaid.css
+ resources/themes/v_moonlight/v_moonlight_mermaid.css
diff --git a/src/vpalette.cpp b/src/vpalette.cpp
index 3de085eb..813f294b 100644
--- a/src/vpalette.cpp
+++ b/src/vpalette.cpp
@@ -224,6 +224,11 @@ VPaletteMetaData VPalette::getPaletteMetaData(const QString &p_paletteFile)
data.m_codeBlockCssFile = dir.filePath(val);
}
+ val = settings.value("mermaid_css_file").toString();
+ if (!val.isEmpty()) {
+ data.m_mermaidCssFile = dir.filePath(val);
+ }
+
QStringList mapping = settings.value("css_color_mapping").toStringList();
if (!mapping.isEmpty()) {
for (auto const & m : mapping) {
diff --git a/src/vpalette.h b/src/vpalette.h
index 4e3cdb09..d2b63f11 100644
--- a/src/vpalette.h
+++ b/src/vpalette.h
@@ -16,6 +16,7 @@ struct VPaletteMetaData
QString m_mdhlFile;
QString m_cssFile;
QString m_codeBlockCssFile;
+ QString m_mermaidCssFile;
// Color mapping when copied.
// All lower-case.
@@ -23,12 +24,14 @@ struct VPaletteMetaData
QString toString() const
{
- return QString("palette metadata version=%1 qss=%2 mdhl=%3 css=%4 codeBlockCss=%5 colorMappingSize=%6")
+ return QString("palette metadata version=%1 qss=%2 mdhl=%3 css=%4 "
+ "codeBlockCss=%5 mermaidCss=%6 colorMappingSize=%7")
.arg(m_version)
.arg(m_qssFile)
.arg(m_mdhlFile)
.arg(m_cssFile)
.arg(m_codeBlockCssFile)
+ .arg(m_mermaidCssFile)
.arg(m_colorMapping.size());
}
};