From 28f9e6f17b1efe7ca760ad736e2e6ab36ff5c7bc Mon Sep 17 00:00:00 2001 From: Carlos Rodriguez Date: Sat, 12 Mar 2016 12:00:47 -0500 Subject: [PATCH] Starting with gantt theme --- dist/mermaid.dark.css | 275 +++++++++++++++++++++++++++++ src/less/dark/flow.less | 29 +++ src/less/dark/gantt.less | 140 +++++++++++++++ src/less/dark/mermaid.less | 24 +++ src/less/dark/sequenceDiagram.less | 75 ++++++++ src/less/dark/variables.less | 60 +++++++ test/gantt-dark-theme.html | 162 +++++++++++++++++ 7 files changed, 765 insertions(+) create mode 100644 dist/mermaid.dark.css create mode 100644 src/less/dark/flow.less create mode 100644 src/less/dark/gantt.less create mode 100644 src/less/dark/mermaid.less create mode 100644 src/less/dark/sequenceDiagram.less create mode 100644 src/less/dark/variables.less create mode 100644 test/gantt-dark-theme.html diff --git a/dist/mermaid.dark.css b/dist/mermaid.dark.css new file mode 100644 index 000000000..116a62e46 --- /dev/null +++ b/dist/mermaid.dark.css @@ -0,0 +1,275 @@ +/* Flowchart variables */ +/* Sequence Diagram variables */ +/* Gantt chart variables */ +.mermaid .label { + color: #333; +} +.node rect, +.node circle, +.node ellipse, +.node polygon { + fill: #ECECFF; + stroke: #CCCCFF; + stroke-width: 1px; +} +.edgePath .path { + stroke: #333333; +} +.edgeLabel { + background-color: #e8e8e8; +} +.cluster rect { + fill: #ffffde !important; + rx: 4 !important; + stroke: #aaaa33 !important; + stroke-width: 1px !important; +} +.cluster text { + fill: #F9FFFE; +} +.actor { + stroke: #CCCCFF; + fill: #ECECFF; +} +text.actor { + fill: black; + stroke: none; +} +.actor-line { + stroke: grey; +} +.messageLine0 { + stroke-width: 1.5; + stroke-dasharray: "2 2"; + marker-end: "url(#arrowhead)"; + stroke: #333; +} +.messageLine1 { + stroke-width: 1.5; + stroke-dasharray: "2 2"; + stroke: #333; +} +#arrowhead { + fill: #333; +} +#crosshead path { + fill: #333 !important; + stroke: #333 !important; +} +.messageText { + fill: #333; + stroke: none; +} +.labelBox { + stroke: #CCCCFF; + fill: #ECECFF; +} +.labelText { + fill: black; + stroke: none; +} +.loopText { + fill: black; + stroke: none; +} +.loopLine { + stroke-width: 2; + stroke-dasharray: "2 2"; + marker-end: "url(#arrowhead)"; + stroke: #CCCCFF; +} +.note { + stroke: #aaaa33; + fill: #fff5ad; +} +.noteText { + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; +} +/** Section styling */ +.section { + stroke: none; + opacity: 0.2; +} +.section0 { + fill: rgba(255, 255, 255, 0.3); +} +.section2 { + fill: #EAE8B9; +} +.section1, +.section3 { + fill: white; + opacity: 0.2; +} +.sectionTitle0 { + fill: #F9FFFE; +} +.sectionTitle1 { + fill: #F9FFFE; +} +.sectionTitle2 { + fill: #F9FFFE; +} +.sectionTitle3 { + fill: #F9FFFE; +} +.sectionTitle { + text-anchor: start; + font-size: 11px; + text-height: 14px; +} +/* Grid and axis */ +.grid .tick { + stroke: rgba(255, 255, 255, 0.3); + opacity: 0.3; + shape-rendering: crispEdges; +} +.grid .tick text { + fill: #ccc; + opacity: 0.5; +} +.grid path { + stroke-width: 0; +} +/* Today line */ +.today { + fill: none; + stroke: #DB5757; + stroke-width: 2px; +} +/* Task styling */ +/* Default task */ +.task { + stroke-width: 1; +} +.taskText { + text-anchor: middle; + font-size: 11px; +} +.taskTextOutsideRight { + fill: #323D47; + text-anchor: start; + font-size: 11px; +} +.taskTextOutsideLeft { + fill: #323D47; + text-anchor: end; + font-size: 11px; +} +/* Specific task settings for the sections*/ +.taskText0, +.taskText1, +.taskText2, +.taskText3 { + fill: #323D47; +} +.task0, +.task1, +.task2, +.task3 { + fill: #BDD5EA; + stroke: rgba(255, 255, 255, 0.5); +} +.taskTextOutside0, +.taskTextOutside2 { + fill: #ccc; +} +.taskTextOutside1, +.taskTextOutside3 { + fill: #ccc; +} +/* Active task */ +.active0, +.active1, +.active2, +.active3 { + fill: #81B1DB; + stroke: rgba(255, 255, 255, 0.5); +} +.activeText0, +.activeText1, +.activeText2, +.activeText3 { + fill: #323D47 !important; +} +/* Completed task */ +.done0, +.done1, +.done2, +.done3 { + fill: lightgrey; +} +.doneText0, +.doneText1, +.doneText2, +.doneText3 { + fill: #323D47 !important; +} +/* Tasks on the critical line */ +.crit0, +.crit1, +.crit2, +.crit3 { + stroke: #E83737; + fill: #E83737; + stroke-width: 2; +} +.activeCrit0, +.activeCrit1, +.activeCrit2, +.activeCrit3 { + stroke: #E83737; + fill: #81B1DB; + stroke-width: 2; +} +.doneCrit0, +.doneCrit1, +.doneCrit2, +.doneCrit3 { + stroke: #E83737; + fill: lightgrey; + stroke-width: 1; + cursor: pointer; + shape-rendering: crispEdges; +} +.doneCritText0, +.doneCritText1, +.doneCritText2, +.doneCritText3 { + fill: #323D47 !important; +} +.activeCritText0, +.activeCritText1, +.activeCritText2, +.activeCritText3 { + fill: #323D47 !important; +} +.titleText { + text-anchor: middle; + font-size: 18px; + fill: #ccc; +} +/* + + +*/ +.node text { + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; +} +div.mermaidTooltip { + position: absolute; + text-align: center; + max-width: 200px; + padding: 2px; + font-family: 'trebuchet ms', verdana, arial; + font-size: 12px; + background: #ffffde; + border: 1px solid #aaaa33; + border-radius: 2px; + pointer-events: none; + z-index: 100; +} diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less new file mode 100644 index 000000000..96008bc07 --- /dev/null +++ b/src/less/dark/flow.less @@ -0,0 +1,29 @@ +.mermaid .label { color:#333 } + +.node rect, +.node circle, +.node ellipse, +.node polygon { + fill: @mainBkg; + stroke: @nodeBorder; + stroke-width: 1px; +} + +.edgePath .path { + stroke: @lineColor; +} + +.edgeLabel { + background-color: @edgeLabelBackground; +} + +.cluster rect{ + fill: @secondBkg !important; + rx:4 !important; + stroke: @clusterBorder !important; + stroke-width: 1px !important; +} + +.cluster text { + fill:@titleColor; +} diff --git a/src/less/dark/gantt.less b/src/less/dark/gantt.less new file mode 100644 index 000000000..8b10f2de0 --- /dev/null +++ b/src/less/dark/gantt.less @@ -0,0 +1,140 @@ +/** Section styling */ +.section { + stroke:none; + opacity:0.2; +} +.section0{ + fill:@sectionBkgColor; +} +.section2 { + fill:@sectionBkgColor2; +} +.section1,.section3 { + fill:@altSectionBkgColor; + opacity:0.2; +} + +.sectionTitle0 { fill:@titleColor;} +.sectionTitle1 { fill:@titleColor;} +.sectionTitle2 { fill:@titleColor;} +.sectionTitle3 { fill:@titleColor;} + + +.sectionTitle { + text-anchor:start; + font-size:11px; + text-height:14px; +} + +/* Grid and axis */ +.grid .tick { + stroke: @sectionBkgColor; + opacity: 0.3; + shape-rendering: crispEdges; +} +.grid .tick text { + fill: @taskTextLightColor; + opacity: 0.5; +} +.grid path { + stroke-width: 0; +} + +/* Today line */ +.today { + fill:none; + stroke:@todayLineColor; + stroke-width:2px; +} + +/* Task styling */ +/* Default task */ +.task { + stroke-width: 1; +} + +.taskText { + text-anchor:middle; + font-size:11px; +} +.taskTextOutsideRight { + fill:@taskTextDarkColor; + text-anchor:start; + font-size:11px; +} +.taskTextOutsideLeft { + fill:@taskTextDarkColor; + text-anchor:end; + font-size:11px; +} + +/* Specific task settings for the sections*/ + +.taskText0, .taskText1, .taskText2, .taskText3 { + fill:@taskTextColor; +} + +.task0, .task1, .task2, .task3 { + fill: @taskBkgColor; + stroke: @taskBorderColor; +} + +.taskTextOutside0,.taskTextOutside2, { + fill:@taskTextOutsideColor; +} +.taskTextOutside1, .taskTextOutside3 { + fill:@taskTextOutsideColor; +} + +/* Active task */ +.active0, .active1, .active2, .active3 { + fill: @activeTaskBkgColor; + stroke: @activeTaskBorderColor; +} + +.activeText0, .activeText1, .activeText2, .activeText3 { + fill:@taskTextDarkColor !important; +} +/* Completed task */ +.done0, .done1, .done2, .done3 { + fill: @doneTaskBkgColor; +} + +.doneText0, .doneText1, .doneText2, .doneText3 { + fill:@taskTextDarkColor !important; +} + +/* Tasks on the critical line */ +.crit0, .crit1, .crit2, .crit3 { + stroke:@critBorderColor; + fill: @critBkgColor; + stroke-width:2; +} +.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 { + stroke:@critBorderColor; + fill: @activeTaskBkgColor; + stroke-width:2; +} +.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 { + stroke:@critBorderColor; + fill: @doneTaskBkgColor; + stroke-width: 1; + cursor: pointer; + shape-rendering: crispEdges; +} +.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 { + fill:@taskTextDarkColor !important; +} +.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 { + fill:@taskTextDarkColor !important; +} + +.titleText { + text-anchor:middle; + font-size:18px; + fill:@taskTextLightColor; +} +/* + + +*/ diff --git a/src/less/dark/mermaid.less b/src/less/dark/mermaid.less new file mode 100644 index 000000000..236e05673 --- /dev/null +++ b/src/less/dark/mermaid.less @@ -0,0 +1,24 @@ +@import "variables"; +@import "flow"; +@import "sequenceDiagram"; +@import "gantt"; +@import "variables"; + +.node text { + font-family: 'trebuchet ms', verdana, arial; + font-size:14px; +} + +div.mermaidTooltip { + position: absolute; + text-align: center; + max-width: 200px; + padding: 2px; + font-family: 'trebuchet ms', verdana, arial; + font-size: 12px; + background: @secondBkg; + border: 1px solid @border2; + border-radius: 2px; + pointer-events: none; + z-index:100; +} diff --git a/src/less/dark/sequenceDiagram.less b/src/less/dark/sequenceDiagram.less new file mode 100644 index 000000000..1139df345 --- /dev/null +++ b/src/less/dark/sequenceDiagram.less @@ -0,0 +1,75 @@ + + +.actor { + stroke: @actorBorder; + fill: @actorBkg; +} +text.actor { + fill:@actorTextColor; + stroke:none; +} + +.actor-line { + stroke:@actorLineColor; +} + +.messageLine0 { + stroke-width:1.5; + stroke-dasharray: "2 2"; + marker-end:"url(#arrowhead)"; + stroke:@signalColor; +} + +.messageLine1 { + stroke-width:1.5; + stroke-dasharray: "2 2"; + stroke:@signalColor; +} + +#arrowhead { + fill:@signalColor; +} +#crosshead path { + fill:@signalColor !important; + stroke: @signalColor !important; + +} +.messageText { + fill:@signalTextColor; + stroke:none; +} + +.labelBox { + stroke: @labelBoxBorderColor; + fill: @labelBoxBkgColor; +} + +.labelText { + fill:@labelTextColor; + stroke:none; +} + +.loopText { + fill:@labelTextColor; + stroke:none; +} + +.loopLine { + stroke-width:2; + stroke-dasharray: "2 2"; + marker-end:"url(#arrowhead)"; + stroke: @labelBoxBorderColor; +} + +.note { + //stroke: #decc93; + stroke: @noteBorderColor; + fill: @noteBkgColor; +} + +.noteText { + fill:black; + stroke:none; + font-family: 'trebuchet ms', verdana, arial; + font-size:14px; +} \ No newline at end of file diff --git a/src/less/dark/variables.less b/src/less/dark/variables.less new file mode 100644 index 000000000..5037df012 --- /dev/null +++ b/src/less/dark/variables.less @@ -0,0 +1,60 @@ +@mainBkg: #ECECFF; +@secondBkg: #ffffde; +@lineColor: #333333; +@border1:#CCCCFF; +@border2:#aaaa33; + +/* Flowchart variables */ +@nodeBkg:@mainBkg; +@nodeBorder:@border1; + +@clusterBkg:@secondBkg; +@clusterBorder:@border2; + +@defaultLinkColor:@lineColor; + +@titleColor: #F9FFFE; + +@edgeLabelBackground: #e8e8e8; + +/* Sequence Diagram variables */ +@actorBorder: @border1; +@actorBkg: @mainBkg; +@actorTextColor: black; +@actorLineColor: grey; + +@signalColor: #333; +@signalTextColor: #333; + +@labelBoxBkgColor: @actorBkg; +@labelBoxBorderColor: @actorBorder; +@labelTextColor: @actorTextColor; + +@noteBorderColor: @border2; +@noteBkgColor: #fff5ad; + +/* Gantt chart variables */ +@sectionBkgColor: rgba(255, 255, 255, 0.3); +@altSectionBkgColor: white; +@sectionBkgColor2: #EAE8B9; + +@taskBorderColor: rgba(255, 255, 255, 0.5); +@taskBkgColor: #BDD5EA; +@taskTextColor: @taskTextDarkColor; +@taskTextOutsideColor: @taskTextLightColor; + +@activeTaskBorderColor: rgba(255, 255, 255, 0.5); +@activeTaskBkgColor: #81B1DB; + +@gridColor: lightgrey; + +@doneTaskBkgColor: lightgrey; +@doneTaskBorderColor: grey; + +@critBorderColor: #E83737; +@critBkgColor: #E83737; + +@taskTextLightColor: #ccc; +@taskTextDarkColor: #323D47; + +@todayLineColor: #DB5757; diff --git a/test/gantt-dark-theme.html b/test/gantt-dark-theme.html new file mode 100644 index 000000000..829923d36 --- /dev/null +++ b/test/gantt-dark-theme.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + +

scale tests

+

less then a day

+
+ gantt + dateFormat YYYY-MM-DD H:mm + title Adding GANTT diagram functionality to mermaid + + section Design + Design jison grammar :done, crit, des1, 2014-01-06 1:30,4h + Create example text :done, after des1,6h +
+

less then a week

+
+ gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid2 + section Design + Design jison grammar :done, crit, des1, 2014-01-06,2d + Create example text :done, after des1,3d +
+

less then a month

+
+ gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + + section Design + Design jison grammar :done, crit, des1, 2015-01-05,2d + Create example text :done, after des1, 2w +
+

less then a year

+
+ gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + + section Design + Design1:done, crit, des1, 2014-01-22,4w + Design2:after des1, 3w + Design3:3w + Design4:3w + Design5:18d + Design6:2w + Implementation1:3w + Implementation2:3w +
+

Other tests

+
+ gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + + section Design + Design jison grammar :done, crit, des1, 2014-01-06, 2014-01-09 + Create example text :done, des2, 2014-01-06, 3d + Bounce gantt example with users :active, crit, des3, after des2, 5d + + section Implementation + update build script :2014-01-06,24h + Implement parser and jison :after des1, 2d + Create tests for parser :active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid core bore tore gore bore lore :1d + + section Documentation + Describe gantt syntax :active,a1, 2014-01-10, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :after a1 , 48h +
+ Text before. Bla b la bla. Look at the diagram below: +
+ gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 3d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + section Another2 + anther task : 24d + section Another3 + anther task : 24d + section Another4 + anther task : 24d + section Another5 + anther task : 24d + section Another6 + anther task : 24d + section Another7 + anther task : 24d + section Another8 + anther task : 24d + section Another9 + anther task : 24d +
+ As you can see, bla bla bla. +
+ gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 3h +
+ +