mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-10-19 05:40:16 -04:00
add icon to toolbar with list of diagrams
Signed-off-by: Pascal Bruckert <pascal.bruckert@bit-sci.com>
This commit is contained in:
Pascal Bruckert
parent
8ce7b28563
commit
3f047e33c4
4 changed files with 83 additions and 4 deletions
|
|
@ -3,14 +3,16 @@
|
|||
border: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn {
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn,
|
||||
.toolbar > .btn-toolbar > .btn-group > .dropdown > .btn {
|
||||
background-color: #fafafa;
|
||||
padding: 5px;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn:hover {
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn:hover,
|
||||
.toolbar > .btn-toolbar > .btn-group > .dropdown > .btn:hover {
|
||||
background-color: #e1e1e1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -20,14 +22,24 @@ body.night .toolbar {
|
|||
border: 1px solid #353538;
|
||||
}
|
||||
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .btn {
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .btn,
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .dropdown > .btn {
|
||||
background-color: #1c1c1e;
|
||||
padding: 5px;
|
||||
font-size: 1em;
|
||||
color: #5EB7E0;
|
||||
}
|
||||
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .btn:hover {
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .btn:hover,
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .dropdown > .btn:hover {
|
||||
background-color: #37373b;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .dropdown > .dropdown-menu > li > a {
|
||||
color: #5EB7E0;
|
||||
}
|
||||
|
||||
body.night .toolbar > .btn-toolbar > .btn-group > .dropdown > .dropdown-menu > li > a:hover {
|
||||
background-color: #37373b;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,6 +161,16 @@ export default class Editor {
|
|||
var makeLine = $('#makeLine')
|
||||
var makeComment = $('#makeComment')
|
||||
var uploadImage = $('#uploadImage')
|
||||
var makeDiagramUMLSequenc = $('#makeDiagramUMLSequenc')
|
||||
var makeDiagramFlow = $('#makeDiagramFlow')
|
||||
var makeDiagramGraphviz = $('#makeDiagramGraphviz')
|
||||
var makeDiagramMermaidFlowchart = $('#makeDiagramMermaidFlowchart')
|
||||
var makeDiagramMermaidSequence = $('#makeDiagramMermaidSequence')
|
||||
var makeDiagramMermaidClass = $('#makeDiagramMermaidClass')
|
||||
var makeDiagramMermaidState = $('#makeDiagramMermaidState')
|
||||
var makeDiagramMermaidGantt = $('#makeDiagramMermaidGantt')
|
||||
var makeDiagramMermaidPie = $('#makeDiagramMermaidPie')
|
||||
var makeDiagramAbcMusic = $('#makeDiagramAbcMusic')
|
||||
|
||||
makeBold.click(() => {
|
||||
utils.wrapTextWith(this.editor, this.editor, '**')
|
||||
|
|
@ -228,6 +238,38 @@ export default class Editor {
|
|||
e.dataTransfer.files = files
|
||||
inlineAttach.onDrop(e)
|
||||
})
|
||||
|
||||
makeDiagramUMLSequenc.click(() => {
|
||||
utils.insertText(this.editor, '```sequence\nAlice->Bob: Hello Bob, how are you?\nNote right of Bob: Bob thinks\nBob-->Alice: I am good thanks!\nNote left of Alice: Alice responds\nAlice->Bob: Where have you been?\n```\n')
|
||||
})
|
||||
makeDiagramFlow.click(() => {
|
||||
utils.insertText(this.editor, '```flow\nst=>start: Start\ne=>end: End\nop=>operation: My Operation\nop2=>operation: lalala\ncond=>condition: Yes or No?\n\nst->op->op2->cond\ncond(yes)->e\ncond(no)->op2\n```\n')
|
||||
})
|
||||
makeDiagramGraphviz.click(() => {
|
||||
utils.insertText(this.editor, '```graphviz\ndigraph hierarchy {\nnodesep=1.0 // Increases the separation between nodes\n\nnode [color=Red,fontname=Courier,shape=box] // All nodes will this shape and colour\nedge [color=Blue, style=dashed] // All the lines look like this\n\nHeadteacher->{Deputy1 Deputy2 BusinessManager}\nDeputy1->{Teacher1 Teacher2}\nBusinessManager->ITManager\n{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level\n}\n```\n')
|
||||
})
|
||||
makeDiagramMermaidFlowchart.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\ngraph TB\nc1-->a2\nsubgraph one\na1-->a2\nend\nsubgraph two\nb1-->b2\nend\nc1-->c2\n```\n')
|
||||
})
|
||||
makeDiagramMermaidSequence.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\nsequenceDiagram\nAlice->>John: Hello John, how are you?\nJohn-->>Alice: Great!\n```')
|
||||
})
|
||||
makeDiagramMermaidClass.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\nclassDiagram\nAnimal <|-- Duck\nAnimal <|-- Fish\nAnimal <|-- Zebra\nAnimal : +int age\nAnimal : +String gender\nAnimal: +isMammal()\nAnimal: +mate()\nclass Duck{\n+String beakColor\n+swim()\n+quack()\n}\nclass Fish{\n-int sizeInFeet\n-canEat()\n}\nclass Zebra{\n+bool is_wild\n+run()\n}\n```')
|
||||
})
|
||||
makeDiagramMermaidState.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\nstateDiagram\n[*] --> Still\nStill --> [*]\n\nStill --> Moving\nMoving --> Still\nMoving --> Crash\nCrash --> [*]\n```')
|
||||
})
|
||||
makeDiagramMermaidGantt.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\ngantt\ntitle A Gantt Diagram\n\nsection Section\nA task: a1, 2014-01-01, 30d\nAnother task: after a1, 20d\n\nsection Another\nTask in sec: 2014-01-12, 12d\nAnother task: 24d\n```\n')
|
||||
})
|
||||
makeDiagramMermaidPie.click(() => {
|
||||
utils.insertText(this.editor, '```mermaid\npie title Pets adopted by volunteers\n"Dogs" : 386\n"Cats" : 85\n"Rats" : 15\n```')
|
||||
})
|
||||
makeDiagramAbcMusic.click(() => {
|
||||
utils.insertText(this.editor, '```abc\nX:1\nT:Speed the Plough\nM:4/4\nC:Trad.\nK:G\n|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|\nGABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|\n|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|\ng2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|\n```\n')
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
addStatusBar () {
|
||||
|
|
|
|||
|
|
@ -46,6 +46,23 @@
|
|||
<a id="makeComment" class="btn btn-sm text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Comment">
|
||||
<i class="fa fa-comment fa-fw"></i>
|
||||
</a>
|
||||
<div class="dropdown pull-right">
|
||||
<a class="btn btn-sm text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Diagrams">
|
||||
<i class="fa fa-object-group"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="keymapLabel">
|
||||
<li><a id="makeDiagramUMLSequenc" data-toggle="dropdown" role="button">UML Sequence Diagrams</a></li>
|
||||
<li><a id="makeDiagramFlow" data-toggle="dropdown" role="button">Flow Charts</a></li>
|
||||
<li><a id="makeDiagramGraphviz" data-toggle="dropdown" role="button">Graphviz</a></li>
|
||||
<li><a id="makeDiagramMermaidFlowchart" data-toggle="dropdown" role="button">Mermaid (Flowchart)</a></li>
|
||||
<li><a id="makeDiagramMermaidSequence" data-toggle="dropdown" role="button">Mermaid (Sequence diagram)</a></li>
|
||||
<li><a id="makeDiagramMermaidClass" data-toggle="dropdown" role="button">Mermaid (Class Diagram)</a></li>
|
||||
<li><a id="makeDiagramMermaidState" data-toggle="dropdown" role="button">Mermaid (State Diagram)</a></li>
|
||||
<li><a id="makeDiagramMermaidGantt" data-toggle="dropdown" role="button">Mermaid (Gantt)</a></li>
|
||||
<li><a id="makeDiagramMermaidPie" data-toggle="dropdown" role="button">Mermaid (Pie Chart)</a></li>
|
||||
<li><a id="makeDiagramAbcMusic" data-toggle="dropdown" role="button">Abc Music Notation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -124,6 +124,14 @@
|
|||
<td><%= __('Externals') %></td>
|
||||
<td>{%youtube youtube_id %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= __('Diagrams') %></td>
|
||||
<td><a href="https://bramp.github.io/js-sequence-diagrams/" target="_blank">UML Sequence Diagrams</a><br>
|
||||
<a href="http://adrai.github.io/flowchart.js/" target="_blank">Flow Charts</a><br>
|
||||
<a href="http://www.tonyballantyne.com/graphs.html" target="_blank">Graphviz</a><br>
|
||||
<a href="https://mermaid-js.github.io/mermaid/" target="_blank">Mermaid</a><br>
|
||||
<a href="http://abcnotation.com/learn" target="_blank">Abc Music Notation</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>L<sup>a</sup>T<sub>e</sub>X</td>
|
||||
<td>$L^aT_eX$</td>
|
||||
|
|
|
|||
Loading…
Reference in a new issue