dawy_go/vnote
1
0
Fork 0
mirror of https://gitee.com/vnotex/vnote.git synced 2025-07-05 13:59:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

palette: add mermaid css file config

Browse Source
This commit is contained in:
Le Tan 2018-02-25 11:04:11 +08:00
parent 1fe7567d79
commit 7069f7268b
14 changed files with 99 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/resources/themes/v_moonlight/v_moonlight.palette
View File

@ -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.

0
src/utils/mermaid/mermaid.forest.css → src/resources/themes/v_moonlight/v_moonlight_mermaid.css
View File

3
src/resources/themes/v_pure/v_pure.palette
View File

@ -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.

0
src/utils/mermaid/mermaid.css → src/resources/themes/v_pure/v_pure_mermaid.css
View File

3
src/resources/themes/v_white/v_white.palette
View File

@ -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.

112
src/utils/mermaid/mermaid.dark.css → src/resources/themes/v_white/v_white_mermaid.css
View File

@ -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;

2
src/utils/vutils.cpp
View File

@ -646,7 +646,7 @@ QString VUtils::generateHtmlTemplate(const QString &p_template,
}
if (g_config->getEnableMermaid()) {
extraFile += "<link rel=\"stylesheet\" type=\"text/css\" href=\"qrc" + VNote::c_mermaidCssFile + "\"/>\n" +
extraFile += "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + g_config->getMermaidCssStyleUrl() + "\"/>\n" +
"<script src=\"qrc" + VNote::c_mermaidApiJsFile + "\"></script>\n" +
"<script>var VEnableMermaid = true;</script>\n";
}

23
src/vconfigmanager.cpp
View File

@ -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());

2
src/vconfigmanager.h
View File

@ -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);

2
src/vnote.cpp
View File

@ -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";

2
src/vnote.h
View File

@ -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

6
src/vnote.qrc
View File

@ -59,9 +59,6 @@
<file>utils/markdown-it/markdown-it.min.js</file>
<file>utils/markdown-it/markdown-it-headinganchor.js</file>
<file>utils/markdown-it/markdown-it-task-lists.min.js</file>
<file>utils/mermaid/mermaid.css</file>
<file>utils/mermaid/mermaid.dark.css</file>
<file>utils/mermaid/mermaid.forest.css</file>
<file>utils/mermaid/mermaidAPI.min.js</file>
<file>resources/icons/close_red.svg</file>
<file>resources/docs/shortcuts_en.md</file>
@ -240,5 +237,8 @@
<file>resources/icons/fullscreen.svg</file>
<file>resources/icons/menubar.svg</file>
<file>resources/export_template.html</file>
<file>resources/themes/v_pure/v_pure_mermaid.css</file>
<file>resources/themes/v_white/v_white_mermaid.css</file>
<file>resources/themes/v_moonlight/v_moonlight_mermaid.css</file>
</qresource>
</RCC>

5
src/vpalette.cpp
View File

@ -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) {

5
src/vpalette.h
View File

@ -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());
}
};