feat: New ui content
- New frame examples - Move first parts to macros
This commit is contained in:
parent
24efcefab3
commit
07e2e8ff6d
6 changed files with 296 additions and 157 deletions
36
source/screens/demo/examples/ui/cli.njk
Executable file
36
source/screens/demo/examples/ui/cli.njk
Executable file
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
title: CLI
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_frame" %}
|
||||||
|
|
||||||
|
{% extends "hippie/_app.njk" %}
|
||||||
|
{% import "hippie/macros/_io.njk" as io %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{{ io.frameHeader('title-bar') }}
|
||||||
|
<p>Previous return</p>
|
||||||
|
<textarea name="prompt" id="prompt"></textarea>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script></script>
|
||||||
|
{% endblock %}
|
||||||
187
source/screens/demo/examples/ui/explorer.njk
Executable file
187
source/screens/demo/examples/ui/explorer.njk
Executable file
|
|
@ -0,0 +1,187 @@
|
||||||
|
---
|
||||||
|
title: GUI explorer
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_frame" %}
|
||||||
|
|
||||||
|
{% extends "hippie/_app.njk" %}
|
||||||
|
{% import "hippie/macros/_io.njk" as io %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{{ io.frameHeader('title-bar') }}
|
||||||
|
<main class="io">
|
||||||
|
<aside class="io">
|
||||||
|
<nav>
|
||||||
|
<div>location-pane</div>
|
||||||
|
<ul class="vertical">
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>Start/Home</span>
|
||||||
|
<i class="bi bi-pin-fill"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>System</span>
|
||||||
|
<i class="bi bi-pin-fill"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<hr>
|
||||||
|
<nav>
|
||||||
|
<ul class="vertical">
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>💽 disc link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>📁 folder link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="a_button" href="">
|
||||||
|
<span>🔗 location link</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<section>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="back">
|
||||||
|
<i class="bi bi-caret-left"></i>
|
||||||
|
</button>
|
||||||
|
<button title="up">
|
||||||
|
<i class="bi bi-caret-up"></i>
|
||||||
|
</button>
|
||||||
|
<button title="forward">
|
||||||
|
<i class="bi bi-caret-right"></i>
|
||||||
|
</button>
|
||||||
|
<button title="reload">
|
||||||
|
<i class="bi bi-arrow-clockwise"></i>
|
||||||
|
</button>
|
||||||
|
<input placeholder="//" type="text">
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<span>location-bar</span>
|
||||||
|
<hr class="vertical">
|
||||||
|
<button title="search">
|
||||||
|
<i class="bi bi-search"></i>
|
||||||
|
</button>
|
||||||
|
<input placeholder="*" type="text">
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="add">
|
||||||
|
<i class="bi bi-plus-circle"></i>
|
||||||
|
</button>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button title="cut">
|
||||||
|
<i class="bi bi-scissors"></i>
|
||||||
|
</button>
|
||||||
|
<button title="copy">
|
||||||
|
<i class="bi bi-copy"></i>
|
||||||
|
</button>
|
||||||
|
<button title="paste">
|
||||||
|
<i class="bi bi-clipboard-check-fill"></i>
|
||||||
|
</button>
|
||||||
|
<div class="spacer b"></div>
|
||||||
|
<button title="delete">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<hr class="vertical">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<button title="collapse">
|
||||||
|
<i class="bi bi-arrows-collapse"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button title="expand">
|
||||||
|
<i class="bi bi-arrows-expand-vertical"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<span>options-bar</span>
|
||||||
|
</nav>
|
||||||
|
<nav></nav>
|
||||||
|
</header>
|
||||||
|
<div id="content">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>name</th>
|
||||||
|
<th>date</th>
|
||||||
|
<th>type</th>
|
||||||
|
<th>size</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>YYYY-MM-DD</td>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>4KB</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>file</td>
|
||||||
|
<td>YYYY-MM-DD</td>
|
||||||
|
<td>folder</td>
|
||||||
|
<td>1B</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<footer class="io">
|
||||||
|
<nav>
|
||||||
|
<span>## items</span>
|
||||||
|
<span># selected (size)</span>
|
||||||
|
<span># type(s)</span>
|
||||||
|
<span># shared</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<span>status-bar</span>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="io">
|
||||||
|
<nav>
|
||||||
|
<button>mode</button>
|
||||||
|
<span>mode-bar</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button>action</button>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,156 +0,0 @@
|
||||||
---
|
|
||||||
title: Settings
|
|
||||||
tags:
|
|
||||||
- ui
|
|
||||||
---
|
|
||||||
{% set pageId = page.fileSlug %}
|
|
||||||
{% set pageClass = "h_full_view" %}
|
|
||||||
{% set bodyClass = "body_setting" %}
|
|
||||||
|
|
||||||
{% extends "demo/_app.njk" %}
|
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block links %}
|
|
||||||
{{ super() }}
|
|
||||||
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
||||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<div id="frame">
|
|
||||||
<header class="io">
|
|
||||||
<nav>
|
|
||||||
<button title="menu">
|
|
||||||
<i class="bi bi-three-dots"></i>
|
|
||||||
</button>
|
|
||||||
<span>title-bar</span>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<div class="spacer a"></div>
|
|
||||||
<button title="minimize">
|
|
||||||
<i class="bi bi-dash"></i>
|
|
||||||
</button>
|
|
||||||
<button title="maximize">
|
|
||||||
<i class="bi bi-fullscreen"></i>
|
|
||||||
</button>
|
|
||||||
<button title="close">
|
|
||||||
<i class="bi bi-x-square"></i>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main class="io">
|
|
||||||
<aside class="io">
|
|
||||||
<nav>
|
|
||||||
<div>location-pane</div>
|
|
||||||
<ul class="vertical">
|
|
||||||
<li>
|
|
||||||
<a class="a_button" href="">
|
|
||||||
<span>Start/Home</span>
|
|
||||||
<i class="bi bi-pin-fill"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="a_button" href="">
|
|
||||||
<span>System</span>
|
|
||||||
<i class="bi bi-pin-fill"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<hr>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="">label</label>
|
|
||||||
<input type="text">
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<section>
|
|
||||||
<header class="io">
|
|
||||||
<nav>
|
|
||||||
<button title="back">
|
|
||||||
<i class="bi bi-caret-left"></i>
|
|
||||||
</button>
|
|
||||||
<button title="up">
|
|
||||||
<i class="bi bi-caret-up"></i>
|
|
||||||
</button>
|
|
||||||
<button title="forward">
|
|
||||||
<i class="bi bi-caret-right"></i>
|
|
||||||
</button>
|
|
||||||
<button title="reload">
|
|
||||||
<i class="bi bi-arrow-clockwise"></i>
|
|
||||||
</button>
|
|
||||||
<input type="text">
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<span>location-bar</span>
|
|
||||||
<hr class="vertical">
|
|
||||||
<button title="search">
|
|
||||||
<i class="bi bi-search"></i>
|
|
||||||
</button>
|
|
||||||
<input type="text">
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<header class="io">
|
|
||||||
<nav>
|
|
||||||
<button title="add">
|
|
||||||
<i class="bi bi-plus-circle"></i>
|
|
||||||
</button>
|
|
||||||
<div class="spacer a"></div>
|
|
||||||
<button title="cut">
|
|
||||||
<i class="bi bi-scissors"></i>
|
|
||||||
</button>
|
|
||||||
<button title="copy">
|
|
||||||
<i class="bi bi-copy"></i>
|
|
||||||
</button>
|
|
||||||
<button title="paste">
|
|
||||||
<i class="bi bi-clipboard-check-fill"></i>
|
|
||||||
</button>
|
|
||||||
<div class="spacer b"></div>
|
|
||||||
<button title="delete">
|
|
||||||
<i class="bi bi-trash"></i>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<hr class="vertical">
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<button title="collapse">
|
|
||||||
<i class="bi bi-arrows-collapse"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button title="expand">
|
|
||||||
<i class="bi bi-arrows-expand-vertical"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<span>options-bar</span>
|
|
||||||
</nav>
|
|
||||||
<nav></nav>
|
|
||||||
</header>
|
|
||||||
section</section>
|
|
||||||
</main>
|
|
||||||
<footer class="io">
|
|
||||||
<nav>
|
|
||||||
<span>state</span>
|
|
||||||
<div class="spacer a"></div>
|
|
||||||
<button>action</button>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script src="{{ pageBase }}js/app.js"></script>
|
|
||||||
<script></script>
|
|
||||||
{% endblock %}
|
|
||||||
37
source/screens/demo/examples/ui/tui.njk
Executable file
37
source/screens/demo/examples/ui/tui.njk
Executable file
|
|
@ -0,0 +1,37 @@
|
||||||
|
---
|
||||||
|
title: TUI
|
||||||
|
tags:
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_frame" %}
|
||||||
|
|
||||||
|
{% extends "hippie/_app.njk" %}
|
||||||
|
{% import "hippie/macros/_io.njk" as io %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{{ io.frameHeader('title-bar') }}
|
||||||
|
<main class="io">
|
||||||
|
</main>
|
||||||
|
{{ io.frameFooter('mode-bar') }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8
|
Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154
|
||||||
35
source/templates/hippie/macros/_io.njk
Normal file
35
source/templates/hippie/macros/_io.njk
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
{% macro frameHeader(title) %}
|
||||||
|
<header class="io">
|
||||||
|
<nav>
|
||||||
|
<button title="menu">
|
||||||
|
<i class="bi bi-three-dots"></i>
|
||||||
|
</button>
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button title="minimize">
|
||||||
|
<i class="bi bi-dash"></i>
|
||||||
|
</button>
|
||||||
|
<button title="maximize">
|
||||||
|
<i class="bi bi-fullscreen"></i>
|
||||||
|
</button>
|
||||||
|
<button title="close" data-action="close">
|
||||||
|
<i class="bi bi-x-square"></i>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro frameFooter(title) %}
|
||||||
|
<footer class="io">
|
||||||
|
<nav>
|
||||||
|
<button>mode</button>
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<div class="spacer a"></div>
|
||||||
|
<button>action</button>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
{% endmacro %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue