interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Compare commits

base: interaktionsweise:30ad2f3067b139759c6d992947c5ebd9e55c420a
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1
..
compare: interaktionsweise:1ddba29d9c044d22a39c90c3458727f6c3605d22
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1

11 commits
30ad2f3067 ... 1ddba29d9c

Author SHA1 Message Date
sthag
1ddba29d9c feat: Update drag page and other small things 
- Add parameter to NewDiv class
- Add instance with content to drag page
- Drag page now also uses frame template
- Use macro for footer in explorer
 2025-06-23 22:31:18 +02:00
sthag
e572f64259 feat: Add app frame template 
- All frame pages use app frame template
- Add form page to frames and add header
 2025-06-23 22:08:31 +02:00
sthag
0c37acf47f feat: Restructure styles for cli and new pages 
- Remove header from cli
- Add body_cli class
- Remove unnecessary frame element
 2025-06-23 20:12:47 +02:00
sthag
f1d17490e0 fix: Remove body_ui class because it is not needed 2025-06-23 20:11:06 +02:00
sthag
c0c87771b6 feat: Change cli page 
- New styles and strcture
- Add event listeners
- Add function to resize prompt according to input
- Append prompts to history element
 2025-06-23 19:34:53 +02:00
sthag
e76f457851 feat: Set pageClass in app template 2025-06-23 19:30:50 +02:00
sthag
10d6fe7d82 feat: Add close event 
- Frame elements now can be closed
- Event is added in template
- Action leads back in history
 2025-06-22 18:17:42 +02:00
sthag
07e2e8ff6d feat: New ui content 
- New frame examples
- Move first parts to macros
 2025-06-22 17:42:35 +02:00
sthag
24efcefab3 feat: Move files 
- Template app is now part of hippie and not demo anymore
- Update includes
- Settings module is now called frame
 2025-06-22 17:40:23 +02:00
sthag
0a27169a1b fix: Layout of footer for settings 2025-06-22 15:57:55 +02:00
sthag
6e722cd907 feat: Restructure settings 
- New styles
- New content
 2025-06-22 15:49:32 +02:00
20 changed files with 536 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

18
source/code/_ui.js
View file

@ -1,17 +1,18 @@
// Creates a div element which is draggable
class NewDiv {
constructor(x, y, width, height, backgroundColor) {
constructor(x, y, width, height, backgroundColor, content) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.backgroundColor = backgroundColor;
this.element = null;
this.content = content;
}
// Create the div element
createDiv() {
this.element = document.createElement('div');
this.element = this._content;
this.element.style.position = 'absolute';
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
@ -93,6 +94,19 @@ class NewDiv {
loadData();
}
// FIXME: this.element wird von appendToFrame() verwendet
get content() {
return this._content = this.content;
}
set content(value) {
if (!value) {
value = document.createElement('div');
}
this._content = value;
}
// Append the div to the space
appendToFrame(space) {
this.element.id = `newDiv${space.children.length}`;

3
source/screens/demo/examples/intro.njk
View file

@ -5,9 +5,8 @@ tags:
---
{% set pageId = "init" %}
{% set pageClass = "html_ui" %}
{% extends "demo/_app.njk" %}
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}
{{ title }}

62
source/screens/demo/examples/ui/cli.njk Executable file
View file

@ -0,0 +1,62 @@
---
title: CLI
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_cli" %}
{% extends "hippie/_app_frame.njk" %}
{% block body %}
<div id="cli">
<div id="history">
<pre>Previous prompt</pre>
</div>
<div id="line">
<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
</div>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script>
function resizeTextArea(textarea) {
const {style, value} = textarea;
style.height = style.minHeight = 'auto';
style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
style.height = `${textarea.scrollHeight}px`;
}
const textarea = document.getElementById('prompt');
document
.body
.addEventListener('click', () => {
textarea.focus();
});
textarea.addEventListener('input', () => {
resizeTextArea(textarea);
});
window.addEventListener("keydown", (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
const p = document.createElement("pre");
p.textContent = event.target.value;
document
.getElementById("history")
.appendChild(p);
// window.scrollTo(0, document.body.scrollHeight);
event.target.value = '';
}
});
</script>
{% endblock %}

32
source/screens/demo/examples/ui/drag.njk
View file

@ -4,28 +4,23 @@ tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_ui" %}
{% extends "demo/_app.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% extends "hippie/_app_frame.njk" %}
{% block body %}
<header class="io pos_fix pin_top pin_right pin_left">
<button data-action="add">Add</button>
</header>
<div id="space"></div>
<div>
<div id="test">
<div class="body_frame">
{{ io.frameHeader('title-bar') }}
<main></main>
{{ io.frameFooter('mode-bar') }}
</div>
</div>
</div>
{% endblock %}
{%- block script %}
@ -34,6 +29,7 @@ tags:
// Get the space element
const space = document.getElementById('space');
const add = document.querySelector('[data-action=add]');
const test = document.getElementById('test');
// Add event listener to the add space button
add.addEventListener('click', () => {
@ -43,8 +39,12 @@ tags:
});
// Create a new NewDiv instance
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
const newDiv = new NewDiv(100, 100, 200, 200, '#000');
newDiv.createDiv();
newDiv.appendToFrame(space);
const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
explorer.createDiv();
explorer.appendToFrame(space);
</script>
{% endblock %}

156
source/screens/demo/examples/ui/explorer.njk Executable file
View file

@ -0,0 +1,156 @@
---
title: GUI explorer
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% extends "hippie/_app_frame.njk" %}
{% 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>
{{ io.frameFooter('mode-bar') }}
{% endblock %}

17
source/screens/demo/examples/ui/form.njk
View file

@ -3,23 +3,10 @@ title: Form
tags:
- ui
---
{% set pageClass = "html_ui" %}
{% set bodyClass = "body_ui" %}
{% extends "demo/_app.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% extends "hippie/_app_frame.njk" %}
{% block body %}
{{ io.frameHeader('title-bar') }}
<header class="io">
<h1>Formulare</h1>
<button data-action="add">Hinzufügen</button>

7
source/screens/demo/examples/ui/index.njk
View file

@ -4,10 +4,7 @@ tags:
- demoExample
- index
---
{% set pageClass = "html_ui" %}
{% extends "demo/_app.njk" %}
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}
@ -25,7 +22,7 @@ tags:
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">
<h1>Inhaltsverzeichnis</h1>
<h1>{{ title }}</h1>
<ul class="list_link">
{%- for ui in collections.ui -%}
<li>

41
source/screens/demo/examples/ui/new.njk
View file

@ -4,10 +4,9 @@ tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_new" %}
{% extends "demo/_app.njk" %}
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_header.njk" as header %}
{% block title %}{{ title }}
@ -24,32 +23,28 @@ tags:
{% block body %}
{{ header.status(hippie, new) }}
<div id="frame">
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>
let clock = new Clock('time');

112
source/screens/demo/examples/ui/settings.njk
View file

@ -1,112 +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">
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span class="span_solo">title-bar</span>
<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">
options
<nav>
<ul>
<li>setting</li>
<li>text</li>
</ul>
<hr>
<ul>
<li>
<label for="">label</label>
</li>
<li>
<button>button</button>
</li>
</ul>
</nav>
</aside>
<section>
<header class="io">
<nav>
<button title="search">
<i class="bi bi-search"></i>
</button>
<div class="spacer-b"></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>
</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>
</nav>
<span class="span_solo">section-bar</span>
</header>
section</section>
</main>
<footer class="io">
<span class="span_solo">state</span>
<div class="spacer-a"></div>
<button>action</button>
</footer>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/app.js"></script>
<script></script>
{% endblock %}

17
source/screens/demo/examples/ui/tui.njk Executable file
View file

@ -0,0 +1,17 @@
---
title: TUI
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% extends "hippie/_app_frame.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block body %}
{{ io.frameHeader('title-bar') }}
<main class="io"></main>
{{ io.frameFooter('mode-bar') }}
{% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff

4
source/style/modules/ui/_drag_module.scss
View file

@ -1,4 +1,8 @@
#space {
position: relative;
height: 100%;
.body_frame {
background-color: white;
}
}

134
source/style/modules/ui/_frame_module.scss Executable file
View file

@ -0,0 +1,134 @@
@mixin nav-spacer($name, $size, $orientation) {
.spacer.#{$name} {
width: $size;
}
}
.body_frame {
@extend %flex-column;
background-color: $color_back_basic;
position: relative;
height: 100%;
header,
aside,
footer {
border: 1px solid transparent;
}
&>header {
background-color: rgba(0, 0, 0, .1);
}
main {
@extend %flex-row;
flex: 1;
// aside {
// background-color: rgba(255, 255, 255, .1);
// }
section {
&>header,
&>footer {
background-color: transparentize($color_back_io, .5);
&:hover {
background-color: $color_back_io;
}
}
}
section,
section>div {
flex: 1;
}
section {
@extend %flex-column;
gap: 0;
}
}
}
.body_cli {
@extend .body_frame;
background-color: black;
}
#cli {
@extend %flex-column;
background-color: black;
#line {
@extend %flex-row;
}
#prompt {
flex: 1;
}
pre {
margin: .5em 0;
color: white;
}
textarea {
resize: none;
max-height: 128px;
margin: $margin_io;
border: 0;
padding: $space_half;
// color: $color_text_io;
color: white;
// background-color: $color_back_io;
background-color: transparent;
line-height: 1.2;
}
}
#content {
background-color: $color_back_io;
&>table {
width: 100%;
margin: 0;
border: 0;
tr:hover td {
background-color: $color_highlight_basic;
}
th {
border: 1px solid $color_border_io;
}
td {
border-width: 0 1px;
border-style: solid;
border-color: $color_border_io;
}
}
}
.io {
.spacer {
margin: 0;
border: $border_dotted;
padding: 0;
opacity: .25;
}
@include nav-spacer('a', $space_double, false);
@include nav-spacer('b', $space_small, false);
}

24
source/style/modules/ui/_new_module.scss
View file

@ -2,23 +2,11 @@ $module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
.body_new {
@extend .body_ui;
@extend %flex-column;
padding: $body_top_space $space_basic $space_basic;
}
#frame {
display: grid;
height: 100%;
// margin: $space_basic;
// grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr;
gap: $space_basic;
}
.area {
width: 100%;
height: 100%;
transition: $transition_best;
&:hover {
@ -26,15 +14,9 @@ $body_top_space: $module_top_height + $space_basic;
}
}
.menu,
#top {
nav ul {
margin: 0;
}
}
.grid {
display: grid;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
@ -92,7 +74,7 @@ $body_top_space: $module_top_height + $space_basic;
nav ul {
display: flex;
margin-left: 16px;
margin: 0 0 0 16px;
}
.brand {

57
source/style/modules/ui/_settings_module.scss
View file

@ -1,57 +0,0 @@
@mixin nav-spacer($name, $size, $orientation) {
.spacer-#{$name} {
width: $size;
margin: 0;
border: $border_dotted;
opacity: .25;
}
}
.body_setting {
@extend .body_ui;
background-color: $color_back_basic;
}
#frame {
@extend %flex-column;
position: relative;
height: 100%;
header,
aside,
footer {
border: 1px solid transparent;
}
&>header {
background-color: rgba(0, 0, 0, .1);
}
main {
@extend %flex-row;
flex: 1;
aside {
background-color: $color_brighter;
}
section {
flex: 1;
}
}
}
.io {
.spacer {
width: $space_double;
margin: 0;
border: $border_dotted;
opacity: .25;
}
@include nav-spacer('a', $space_double, false);
@include nav-spacer('b', $space_small, false);
}

7
source/style/ui.scss
View file

@ -22,11 +22,6 @@ $color_gui_back: $color_dark;
}
}
.body_ui {
height: 100vh;
background-color: $color_gui_back;
}
.step {
@extend %full_parent;
}
@ -191,7 +186,7 @@ $color_gui_back: $color_dark;
font-family: $family_text_mono;
}
@import "modules/ui/frame_module";
@import "modules/ui/new_module";
@import "modules/ui/settings_module";
@import "modules/ui/drag_module";
@import "modules/ui/form_module";

29
source/templates/demo/_app.njk
View file

@ -1,29 +0,0 @@
<!-- demo.app.template -->
<!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "demo/partials/_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}{% endblock %}
{% endblock %}
</head>
<body class="{{ bodyClass }}">
{% block body %}{% endblock %}
{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script>
{% endblock %}
</body>
</html>

51
source/templates/hippie/_app.njk Executable file
View file

@ -0,0 +1,51 @@
<!-- app.template -->
<!DOCTYPE html>
<html lang="de" class="html_ui" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "hippie/partials/_head_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}{% endblock %}
{% endblock %}
</head>
<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
{% block body %}{% endblock %}
{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>
const frameHeader = document.querySelector('body > header.io');
const closeActionElements = document.querySelectorAll('[data-action=close]');
if (frameHeader) {
console.log('frame header found', frameHeader);
frameHeader.addEventListener('click', (e) => {
if (e.target.dataset.action === 'close') {
console.debug('close', e.target);
history.back();
if (closeActionElements.length > 1) {
console.debug('other frames present', closeActionElements.length);
}
}
});
}
</script>
{% endblock %}
</body>
</html>

17
source/templates/hippie/_app_frame.njk Executable file
View file

@ -0,0 +1,17 @@
<!-- frame.app.template -->
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block head %}
{{ super() }}
{% 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 script %}
{{ super() }}
{% endblock %}

35
source/templates/hippie/macros/_io.njk Normal file
View 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 %}