139 lines
6.0 KiB
XML
139 lines
6.0 KiB
XML
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="A text editor built with the tui-pages textarea: relative line numbers and Rust syntax highlighting">
|
|
<!--
|
|
tui-pages textarea showcased as a modal-editor (vim/helix style) on a strict
|
|
80x25 monospace grid (cell = 8x16 px). Each cell carries at most two colors.
|
|
Gutter: current line shows its absolute number, others are relative.
|
|
Syntax: kw=pink, type=gold, fn=blue, string=green, punctuation=muted.
|
|
-->
|
|
<style>
|
|
.text { fill: #d7d7db; }
|
|
.muted { fill: #9a9aa2; }
|
|
.dim { fill: #6b6b72; }
|
|
.blue { fill: #3ba7e0; }
|
|
.gold { fill: #d9b54a; }
|
|
.green { fill: #46d160; }
|
|
.pink { fill: #f25fa0; }
|
|
.greenfg{ fill: #0c130c; }
|
|
.curfg { fill: #1a1b1e; }
|
|
.b { font-weight: 700; }
|
|
text {
|
|
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
</style>
|
|
|
|
<g xml:space="preserve">
|
|
<rect x="0.5" y="0.5" width="639" height="399" rx="10" fill="#1a1b1e" stroke="#2a2b30"/>
|
|
|
|
<!-- buffer tabs (main.rs active) -->
|
|
<rect x="0" y="2" width="72" height="20" class="green"/>
|
|
<text x="8" y="16" class="greenfg b">main.rs</text>
|
|
<text x="80" y="16" class="muted">lib.rs</text>
|
|
<text x="144" y="16" class="muted">Cargo.toml</text>
|
|
|
|
<!-- cursorline -->
|
|
<rect x="0" y="96" width="640" height="16" fill="#232428"/>
|
|
|
|
<!-- gutter: relative numbers, current line absolute -->
|
|
<text x="16" y="44" class="dim" text-anchor="end">4</text>
|
|
<text x="16" y="60" class="dim" text-anchor="end">3</text>
|
|
<text x="16" y="76" class="dim" text-anchor="end">2</text>
|
|
<text x="16" y="92" class="dim" text-anchor="end">1</text>
|
|
<text x="8" y="108" class="gold b">5</text>
|
|
<text x="16" y="124" class="dim" text-anchor="end">1</text>
|
|
<text x="16" y="140" class="dim" text-anchor="end">2</text>
|
|
<text x="16" y="156" class="dim" text-anchor="end">3</text>
|
|
<text x="16" y="172" class="dim" text-anchor="end">4</text>
|
|
<text x="16" y="188" class="dim" text-anchor="end">5</text>
|
|
<text x="16" y="204" class="dim" text-anchor="end">6</text>
|
|
|
|
<!-- line 1: use tui_pages::{Page, TextArea}; -->
|
|
<text x="32" y="44" class="pink">use</text>
|
|
<text x="64" y="44" class="text">tui_pages</text>
|
|
<text x="136" y="44" class="muted">::</text>
|
|
<text x="152" y="44" class="muted">{</text>
|
|
<text x="160" y="44" class="gold">Page</text>
|
|
<text x="192" y="44" class="muted">,</text>
|
|
<text x="208" y="44" class="gold">TextArea</text>
|
|
<text x="272" y="44" class="muted">}</text>
|
|
<text x="280" y="44" class="muted">;</text>
|
|
|
|
<!-- line 3: pub fn editor() -> Page { -->
|
|
<text x="32" y="76" class="pink">pub</text>
|
|
<text x="64" y="76" class="pink">fn</text>
|
|
<text x="88" y="76" class="blue">editor</text>
|
|
<text x="136" y="76" class="muted">()</text>
|
|
<text x="160" y="76" class="muted">-></text>
|
|
<text x="184" y="76" class="gold">Page</text>
|
|
<text x="224" y="76" class="muted">{</text>
|
|
|
|
<!-- line 4: let title = "Editor"; -->
|
|
<text x="64" y="92" class="pink">let</text>
|
|
<text x="96" y="92" class="text">title</text>
|
|
<text x="144" y="92" class="muted">=</text>
|
|
<text x="160" y="92" class="green">"Editor"</text>
|
|
<text x="224" y="92" class="muted">;</text>
|
|
|
|
<!-- line 5 (current): let mut area = TextArea::default(); -->
|
|
<text x="64" y="108" class="pink">let</text>
|
|
<text x="96" y="108" class="pink">mut</text>
|
|
<rect x="128" y="96" width="8" height="16" fill="#d7d7db"/>
|
|
<text x="128" y="108" class="curfg">a</text>
|
|
<text x="136" y="108" class="text">rea</text>
|
|
<text x="168" y="108" class="muted">=</text>
|
|
<text x="184" y="108" class="gold">TextArea</text>
|
|
<text x="248" y="108" class="muted">::</text>
|
|
<text x="264" y="108" class="blue">default</text>
|
|
<text x="320" y="108" class="muted">()</text>
|
|
<text x="336" y="108" class="muted">;</text>
|
|
|
|
<!-- line 6: area.set_placeholder("Type here…"); -->
|
|
<text x="64" y="124" class="text">area</text>
|
|
<text x="96" y="124" class="muted">.</text>
|
|
<text x="104" y="124" class="blue">set_placeholder</text>
|
|
<text x="224" y="124" class="muted">(</text>
|
|
<text x="232" y="124" class="green">"Type here…"</text>
|
|
<text x="328" y="124" class="muted">)</text>
|
|
<text x="336" y="124" class="muted">;</text>
|
|
|
|
<!-- line 8: Page::new(title) -->
|
|
<text x="64" y="156" class="gold">Page</text>
|
|
<text x="96" y="156" class="muted">::</text>
|
|
<text x="112" y="156" class="blue">new</text>
|
|
<text x="136" y="156" class="muted">(</text>
|
|
<text x="144" y="156" class="text">title</text>
|
|
<text x="184" y="156" class="muted">)</text>
|
|
|
|
<!-- line 9: .child(area) -->
|
|
<text x="96" y="172" class="muted">.</text>
|
|
<text x="104" y="172" class="blue">child</text>
|
|
<text x="144" y="172" class="muted">(</text>
|
|
<text x="152" y="172" class="text">area</text>
|
|
<text x="184" y="172" class="muted">)</text>
|
|
|
|
<!-- line 10: .on_key('q', |app| app.quit()) -->
|
|
<text x="96" y="188" class="muted">.</text>
|
|
<text x="104" y="188" class="blue">on_key</text>
|
|
<text x="152" y="188" class="muted">(</text>
|
|
<text x="160" y="188" class="green">'q'</text>
|
|
<text x="184" y="188" class="muted">,</text>
|
|
<text x="200" y="188" class="muted">|</text>
|
|
<text x="208" y="188" class="text">app</text>
|
|
<text x="232" y="188" class="muted">|</text>
|
|
<text x="248" y="188" class="text">app</text>
|
|
<text x="272" y="188" class="muted">.</text>
|
|
<text x="280" y="188" class="blue">quit</text>
|
|
<text x="312" y="188" class="muted">())</text>
|
|
|
|
<!-- line 11: } -->
|
|
<text x="32" y="204" class="muted">}</text>
|
|
|
|
<!-- status line -->
|
|
<text x="32" y="380" class="green b">NOR</text>
|
|
<text x="120" y="380" class="muted">main.rs</text>
|
|
<text x="256" y="380" class="muted">Ln 5, Col 18</text>
|
|
<text x="632" y="380" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
|
</g>
|
|
</svg>
|