235 lines
6.2 KiB
HTML
235 lines
6.2 KiB
HTML
<div class="module-header">
|
|
<h2><i class="fas fa-diagram-project" style="color:#0ea5e9;"></i> Diagrams</h2>
|
|
</div>
|
|
|
|
<div class="diagrams-layout" id="diagrams-layout">
|
|
|
|
<aside class="diagrams-sidebar">
|
|
<div class="diagrams-sidebar-head">
|
|
<button id="btn-diagram-new" class="btn-primary diagrams-new-btn" type="button">
|
|
<i class="fas fa-plus"></i> New diagram
|
|
</button>
|
|
<div class="diagrams-search">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="diagram-search" placeholder="Search" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
<div id="diagrams-list" class="diagrams-list">
|
|
<div class="diagrams-empty">Loading…</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section id="diagram-editor" class="diagram-editor">
|
|
<div class="diagram-toolbar">
|
|
<input type="text" id="diagram-title" class="diagram-title-input" placeholder="Diagram title" autocomplete="off">
|
|
<span id="diagram-status" class="diagram-status"></span>
|
|
<div class="diagram-toolbar-actions">
|
|
<button id="btn-diagram-export-svg" class="btn-sm" type="button" title="Export SVG">
|
|
<i class="fas fa-download"></i> SVG
|
|
</button>
|
|
<button id="btn-diagram-export-png" class="btn-sm" type="button" title="Export PNG">
|
|
<i class="fas fa-download"></i> PNG
|
|
</button>
|
|
<button id="btn-diagram-delete" class="btn-sm btn-diagram-delete" type="button" title="Delete diagram"
|
|
style="background:var(--red-light);color:var(--red);border:1px solid var(--red);">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-panes">
|
|
<div class="diagram-source-pane">
|
|
<textarea id="diagram-source" class="diagram-source" spellcheck="false"
|
|
placeholder="graph TD A[Start] --> B{Decision?} B -->|Yes| C[Action] B -->|No| D[End]"></textarea>
|
|
</div>
|
|
<div class="diagram-preview-pane">
|
|
<div id="diagram-preview" class="diagram-preview"></div>
|
|
<div id="diagram-error" class="diagram-error hidden"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.diagrams-layout {
|
|
display: grid;
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
gap: 16px;
|
|
height: calc(100vh - 200px);
|
|
min-height: 480px;
|
|
}
|
|
.diagrams-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--g50, #f8fafb);
|
|
border: 1px solid var(--g100, #e5ebef);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.diagrams-sidebar-head {
|
|
padding: 10px;
|
|
display: grid;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--g100, #e5ebef);
|
|
background: white;
|
|
}
|
|
.diagrams-new-btn { width: 100%; }
|
|
.diagrams-search {
|
|
position: relative;
|
|
}
|
|
.diagrams-search i {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--g400, #94a3b8);
|
|
font-size: 12px;
|
|
}
|
|
.diagrams-search input {
|
|
width: 100%;
|
|
padding: 7px 10px 7px 28px;
|
|
border: 1px solid var(--g200, #d5dfe6);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.diagrams-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 6px;
|
|
}
|
|
.diagrams-empty {
|
|
padding: 18px 12px;
|
|
color: var(--g400, #94a3b8);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
.diagram-row {
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 9px 10px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
.diagram-row:hover {
|
|
background: white;
|
|
border-color: var(--g200, #d5dfe6);
|
|
}
|
|
.diagram-row.active {
|
|
background: var(--blue-light, #e0f2fe);
|
|
border-color: var(--blue, #0ea5e9);
|
|
}
|
|
.diagram-row strong {
|
|
font-size: 13.5px;
|
|
color: var(--g800, #1e293b);
|
|
}
|
|
.diagram-row span {
|
|
font-size: 11px;
|
|
color: var(--g400, #94a3b8);
|
|
}
|
|
.diagram-editor {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
background: white;
|
|
border: 1px solid var(--g100, #e5ebef);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.diagram-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
border-bottom: 1px solid var(--g100, #e5ebef);
|
|
background: var(--g50, #f8fafb);
|
|
}
|
|
.diagram-title-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--g200, #d5dfe6);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
background: white;
|
|
}
|
|
.diagram-status {
|
|
font-size: 11.5px;
|
|
color: var(--g400, #94a3b8);
|
|
white-space: nowrap;
|
|
}
|
|
.diagram-status.saving { color: var(--amber, #d97706); }
|
|
.diagram-status.saved { color: var(--green, #16a34a); }
|
|
.diagram-status.error { color: var(--red, #dc2626); }
|
|
.diagram-toolbar-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.diagram-panes {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
.diagram-source-pane {
|
|
border-right: 1px solid var(--g100, #e5ebef);
|
|
display: flex;
|
|
}
|
|
.diagram-source {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
padding: 12px;
|
|
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
resize: none;
|
|
outline: none;
|
|
background: white;
|
|
color: var(--g800, #1e293b);
|
|
}
|
|
.diagram-preview-pane {
|
|
position: relative;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
background: var(--g50, #f8fafb);
|
|
}
|
|
.diagram-preview {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
.diagram-preview svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.diagram-error {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
background: var(--red-light, #fef2f2);
|
|
border: 1px solid var(--red, #dc2626);
|
|
color: var(--red, #dc2626);
|
|
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
white-space: pre-wrap;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.diagrams-layout {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
}
|
|
.diagrams-sidebar {
|
|
max-height: 280px;
|
|
}
|
|
.diagram-panes {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 320px minmax(280px, 1fr);
|
|
}
|
|
.diagram-source-pane {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--g100, #e5ebef);
|
|
}
|
|
}
|
|
</style>
|