From 6e722cd9071e2a2aba137f2daf10a0b7e72d1050 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 15:49:32 +0200 Subject: [PATCH 01/11] feat: Restructure settings - New styles - New content --- source/screens/demo/examples/ui/index.njk | 2 +- source/screens/demo/examples/ui/settings.njk | 76 ++++++++++++++----- source/style/hippie-style | 2 +- source/style/modules/ui/_settings_module.scss | 9 +-- 4 files changed, 64 insertions(+), 25 deletions(-) diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 4e5367a..1712214 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -25,7 +25,7 @@ tags: {% block body %}
- section-bar + section
- state -
+ state +
diff --git a/source/style/hippie-style b/source/style/hippie-style index b7ec209..3d23ba5 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933 +Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6 diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss index a95c3bc..9b41e4c 100755 --- a/source/style/modules/ui/_settings_module.scss +++ b/source/style/modules/ui/_settings_module.scss @@ -1,9 +1,6 @@ @mixin nav-spacer($name, $size, $orientation) { - .spacer-#{$name} { + .spacer.#{$name} { width: $size; - margin: 0; - border: $border_dotted; - opacity: .25; } } @@ -35,7 +32,7 @@ flex: 1; aside { - background-color: $color_brighter; + background-color: rgba(255, 255, 255, .1); } section { @@ -46,9 +43,9 @@ .io { .spacer { - width: $space_double; margin: 0; border: $border_dotted; + padding: 0; opacity: .25; } From 0a27169a1bb53ab6715bc22fb47ce3b1dde47aae Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 15:57:55 +0200 Subject: [PATCH 02/11] fix: Layout of footer for settings --- source/screens/demo/examples/ui/settings.njk | 8 +++++--- source/style/hippie-style | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk index b7ac1ba..924b613 100755 --- a/source/screens/demo/examples/ui/settings.njk +++ b/source/screens/demo/examples/ui/settings.njk @@ -140,9 +140,11 @@ tags: section
- state -
- +
{% endblock %} diff --git a/source/style/hippie-style b/source/style/hippie-style index 3d23ba5..8ffc1b8 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6 +Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8 From 24efcefab313a60245616db9d2026fc55a26d337 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 17:40:23 +0200 Subject: [PATCH 03/11] feat: Move files - Template app is now part of hippie and not demo anymore - Update includes - Settings module is now called frame --- source/screens/demo/examples/intro.njk | 2 +- source/screens/demo/examples/ui/drag.njk | 2 +- source/screens/demo/examples/ui/form.njk | 2 +- source/screens/demo/examples/ui/index.njk | 2 +- source/screens/demo/examples/ui/new.njk | 2 +- source/style/modules/ui/_frame_module.scss | 93 +++++++++++++++++++ source/style/modules/ui/_settings_module.scss | 54 ----------- source/style/ui.scss | 2 +- source/templates/{demo => hippie}/_app.njk | 4 +- 9 files changed, 101 insertions(+), 62 deletions(-) create mode 100755 source/style/modules/ui/_frame_module.scss delete mode 100755 source/style/modules/ui/_settings_module.scss rename source/templates/{demo => hippie}/_app.njk (89%) diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk index 07eb1a1..9eb0ebd 100644 --- a/source/screens/demo/examples/intro.njk +++ b/source/screens/demo/examples/intro.njk @@ -7,7 +7,7 @@ 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 }} diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index b943fee..3d82a7b 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -7,7 +7,7 @@ tags: {% set pageClass = "h_full_view" %} {% set bodyClass = "body_ui" %} -{% extends "demo/_app.njk" %} +{% extends "hippie/_app.njk" %} {% block title %}{{ title }} {% endblock %} diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk index 29ab5bd..83ac65d 100644 --- a/source/screens/demo/examples/ui/form.njk +++ b/source/screens/demo/examples/ui/form.njk @@ -6,7 +6,7 @@ tags: {% set pageClass = "html_ui" %} {% set bodyClass = "body_ui" %} -{% extends "demo/_app.njk" %} +{% extends "hippie/_app.njk" %} {% block title %}{{ title }} {% endblock %} diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 1712214..4bd84c1 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -7,7 +7,7 @@ tags: {% set pageClass = "html_ui" %} -{% extends "demo/_app.njk" %} +{% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} {% block title %} diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk index ba2e4c0..4b5ae8f 100755 --- a/source/screens/demo/examples/ui/new.njk +++ b/source/screens/demo/examples/ui/new.njk @@ -7,7 +7,7 @@ tags: {% 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 }} diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss new file mode 100755 index 0000000..c3ba4b4 --- /dev/null +++ b/source/style/modules/ui/_frame_module.scss @@ -0,0 +1,93 @@ +@mixin nav-spacer($name, $size, $orientation) { + .spacer.#{$name} { + width: $size; + } +} + +.body_frame { + @extend %flex-column; + @extend .body_ui; + + 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; + } + } +} + +#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); +} \ No newline at end of file diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss deleted file mode 100755 index 9b41e4c..0000000 --- a/source/style/modules/ui/_settings_module.scss +++ /dev/null @@ -1,54 +0,0 @@ -@mixin nav-spacer($name, $size, $orientation) { - .spacer.#{$name} { - width: $size; - } -} - -.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: rgba(255, 255, 255, .1); - } - - section { - flex: 1; - } - } -} - -.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); -} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss index efe343b..28d28cc 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -191,7 +191,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"; \ No newline at end of file diff --git a/source/templates/demo/_app.njk b/source/templates/hippie/_app.njk similarity index 89% rename from source/templates/demo/_app.njk rename to source/templates/hippie/_app.njk index 73a8dd0..d48d4bf 100755 --- a/source/templates/demo/_app.njk +++ b/source/templates/hippie/_app.njk @@ -1,4 +1,4 @@ - + @@ -9,7 +9,7 @@ {%- block title %}{% endblock %}{{ hippie.titlePostfix }} {% block meta %} - {% include "demo/partials/_meta.njk" %} + {% include "hippie/partials/_head_meta.njk" %} {% endblock %} From 07e2e8ff6d4ad0512dbc4117fc7269f71035d2ad Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 17:42:35 +0200 Subject: [PATCH 04/11] feat: New ui content - New frame examples - Move first parts to macros --- source/screens/demo/examples/ui/cli.njk | 36 ++++ source/screens/demo/examples/ui/explorer.njk | 187 +++++++++++++++++++ source/screens/demo/examples/ui/settings.njk | 156 ---------------- source/screens/demo/examples/ui/tui.njk | 37 ++++ source/style/hippie-style | 2 +- source/templates/hippie/macros/_io.njk | 35 ++++ 6 files changed, 296 insertions(+), 157 deletions(-) create mode 100755 source/screens/demo/examples/ui/cli.njk create mode 100755 source/screens/demo/examples/ui/explorer.njk delete mode 100755 source/screens/demo/examples/ui/settings.njk create mode 100755 source/screens/demo/examples/ui/tui.njk create mode 100644 source/templates/hippie/macros/_io.njk diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk new file mode 100755 index 0000000..88c59f4 --- /dev/null +++ b/source/screens/demo/examples/ui/cli.njk @@ -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() }} + + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + {{ io.frameHeader('title-bar') }} +

Previous return

+ +{% endblock %} + +{%- block script %} + {{ super() }} + + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk new file mode 100755 index 0000000..6bdfc8c --- /dev/null +++ b/source/screens/demo/examples/ui/explorer.njk @@ -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() }} + + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + {{ io.frameHeader('title-bar') }} +
+ +
+
+ + +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
+
+
+ + +
+
+
+
+ + +
+{% endblock %} + +{%- block script %} + {{ super() }} + + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk deleted file mode 100755 index 924b613..0000000 --- a/source/screens/demo/examples/ui/settings.njk +++ /dev/null @@ -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() }} - - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} - -{% block body %} -
-
- - -
-
- -
-
- - -
-
- -
- - -
- section
-
-
- -
-
-{% endblock %} - -{%- block script %} - {{ super() }} - - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk new file mode 100755 index 0000000..9ba3fe0 --- /dev/null +++ b/source/screens/demo/examples/ui/tui.njk @@ -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() }} + + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + {{ io.frameHeader('title-bar') }} +
+
+ {{ io.frameFooter('mode-bar') }} +{% endblock %} + +{%- block script %} + {{ super() }} + + +{% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index 8ffc1b8..36919ca 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8 +Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154 diff --git a/source/templates/hippie/macros/_io.njk b/source/templates/hippie/macros/_io.njk new file mode 100644 index 0000000..36a3b9e --- /dev/null +++ b/source/templates/hippie/macros/_io.njk @@ -0,0 +1,35 @@ +{% macro frameHeader(title) %} +
+ + +
+{% endmacro %} + +{% macro frameFooter(title) %} +
+ + +
+{% endmacro %} \ No newline at end of file From 10d6fe7d8291101ad862d54d914a1f27b33865e9 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 18:17:42 +0200 Subject: [PATCH 05/11] feat: Add close event - Frame elements now can be closed - Event is added in template - Action leads back in history --- source/screens/demo/examples/ui/cli.njk | 2 -- source/screens/demo/examples/ui/explorer.njk | 2 -- source/screens/demo/examples/ui/new.njk | 2 -- source/screens/demo/examples/ui/tui.njk | 2 -- source/style/hippie-style | 2 +- source/templates/hippie/_app.njk | 24 +++++++++++++++++++- 6 files changed, 24 insertions(+), 10 deletions(-) diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk index 88c59f4..1e59f33 100755 --- a/source/screens/demo/examples/ui/cli.njk +++ b/source/screens/demo/examples/ui/cli.njk @@ -31,6 +31,4 @@ tags: {%- block script %} {{ super() }} - - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk index 6bdfc8c..d277943 100755 --- a/source/screens/demo/examples/ui/explorer.njk +++ b/source/screens/demo/examples/ui/explorer.njk @@ -182,6 +182,4 @@ tags: {%- block script %} {{ super() }} - - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk index 4b5ae8f..8a898d6 100755 --- a/source/screens/demo/examples/ui/new.njk +++ b/source/screens/demo/examples/ui/new.njk @@ -48,8 +48,6 @@ tags: {%- block script %} {{ super() }} - - - {% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index 36919ca..fb1bd80 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154 +Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk index d48d4bf..f467956 100755 --- a/source/templates/hippie/_app.njk +++ b/source/templates/hippie/_app.njk @@ -9,7 +9,7 @@ {%- block title %}{% endblock %}{{ hippie.titlePostfix }} {% block meta %} - {% include "hippie/partials/_head_meta.njk" %} + {% include "hippie/partials/_head_meta.njk" %} {% endblock %} @@ -24,6 +24,28 @@ {% block script %} + + + {% endblock %} \ No newline at end of file From e76f4578511f5eb1634e861492b6e6a1c352ab3c Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 19:30:29 +0200 Subject: [PATCH 06/11] feat: Set pageClass in app template --- source/screens/demo/examples/intro.njk | 1 - source/screens/demo/examples/ui/drag.njk | 1 - source/screens/demo/examples/ui/explorer.njk | 3 +-- source/screens/demo/examples/ui/form.njk | 1 - source/screens/demo/examples/ui/index.njk | 3 --- source/screens/demo/examples/ui/new.njk | 1 - source/screens/demo/examples/ui/tui.njk | 1 - source/templates/hippie/_app.njk | 2 +- 8 files changed, 2 insertions(+), 11 deletions(-) diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk index 9eb0ebd..44898cc 100644 --- a/source/screens/demo/examples/intro.njk +++ b/source/screens/demo/examples/intro.njk @@ -5,7 +5,6 @@ tags: --- {% set pageId = "init" %} -{% set pageClass = "html_ui" %} {% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index 3d82a7b..adf6207 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} {% set bodyClass = "body_ui" %} {% extends "hippie/_app.njk" %} diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk index d277943..628f658 100755 --- a/source/screens/demo/examples/ui/explorer.njk +++ b/source/screens/demo/examples/ui/explorer.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} {% set bodyClass = "body_frame" %} {% extends "hippie/_app.njk" %} @@ -180,6 +179,6 @@ tags: {% endblock %} -{%- block script %} +{% block script %} {{ super() }} {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk index 83ac65d..cf6937d 100644 --- a/source/screens/demo/examples/ui/form.njk +++ b/source/screens/demo/examples/ui/form.njk @@ -3,7 +3,6 @@ title: Form tags: - ui --- -{% set pageClass = "html_ui" %} {% set bodyClass = "body_ui" %} {% extends "hippie/_app.njk" %} diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 4bd84c1..ec107c2 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -4,9 +4,6 @@ tags: - demoExample - index --- - -{% set pageClass = "html_ui" %} - {% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk index 8a898d6..55921b3 100755 --- a/source/screens/demo/examples/ui/new.njk +++ b/source/screens/demo/examples/ui/new.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} {% set bodyClass = "body_new" %} {% extends "hippie/_app.njk" %} diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk index d5bb824..89a3fdd 100755 --- a/source/screens/demo/examples/ui/tui.njk +++ b/source/screens/demo/examples/ui/tui.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} {% set bodyClass = "body_frame" %} {% extends "hippie/_app.njk" %} diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk index f467956..dbee1a7 100755 --- a/source/templates/hippie/_app.njk +++ b/source/templates/hippie/_app.njk @@ -1,6 +1,6 @@ - + From c0c87771b644c0f00e92d48a8a25ed66fdb0bc84 Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 19:33:35 +0200 Subject: [PATCH 07/11] feat: Change cli page - New styles and strcture - Add event listeners - Add function to resize prompt according to input - Append prompts to history element --- source/screens/demo/examples/ui/cli.njk | 47 ++++++++++++++++++++-- source/style/modules/ui/_frame_module.scss | 32 +++++++++++++++ 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk index 1e59f33..5106fac 100755 --- a/source/screens/demo/examples/ui/cli.njk +++ b/source/screens/demo/examples/ui/cli.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} {% set bodyClass = "body_frame" %} {% extends "hippie/_app.njk" %} @@ -25,10 +24,52 @@ tags: {% block body %} {{ io.frameHeader('title-bar') }} -

Previous return

- +
+
+ 
Previous prompt
+
+
+ + +
+
{% endblock %} {%- block script %} {{ super() }} + {% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index c3ba4b4..ff3aab8 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -4,6 +4,38 @@ } } +#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; + } +} + .body_frame { @extend %flex-column; @extend .body_ui; From f1d17490e0d5d1ea4e0655b523d44c142a946eb8 Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 20:11:06 +0200 Subject: [PATCH 08/11] fix: Remove body_ui class because it is not needed --- source/screens/demo/examples/ui/drag.njk | 1 - source/screens/demo/examples/ui/form.njk | 2 -- source/style/ui.scss | 5 ----- 3 files changed, 8 deletions(-) diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index adf6207..873a2ab 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -4,7 +4,6 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set bodyClass = "body_ui" %} {% extends "hippie/_app.njk" %} diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk index cf6937d..94275cd 100644 --- a/source/screens/demo/examples/ui/form.njk +++ b/source/screens/demo/examples/ui/form.njk @@ -3,8 +3,6 @@ title: Form tags: - ui --- -{% set bodyClass = "body_ui" %} - {% extends "hippie/_app.njk" %} {% block title %}{{ title }} diff --git a/source/style/ui.scss b/source/style/ui.scss index 28d28cc..5a4998b 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -22,11 +22,6 @@ $color_gui_back: $color_dark; } } -.body_ui { - height: 100vh; - background-color: $color_gui_back; -} - .step { @extend %full_parent; } From 0c37acf47fb8e9bb440ffe13ba01d944f733f5da Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 20:12:47 +0200 Subject: [PATCH 09/11] feat: Restructure styles for cli and new pages - Remove header from cli - Add body_cli class - Remove unnecessary frame element --- source/screens/demo/examples/ui/cli.njk | 3 +- source/screens/demo/examples/ui/new.njk | 36 +++++------ source/style/modules/ui/_frame_module.scss | 75 ++++++++++++---------- source/style/modules/ui/_new_module.scss | 24 +------ 4 files changed, 63 insertions(+), 75 deletions(-) diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk index 5106fac..3ba032d 100755 --- a/source/screens/demo/examples/ui/cli.njk +++ b/source/screens/demo/examples/ui/cli.njk @@ -4,7 +4,7 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set bodyClass = "body_frame" %} +{% set bodyClass = "body_cli" %} {% extends "hippie/_app.njk" %} {% import "hippie/macros/_io.njk" as io %} @@ -23,7 +23,6 @@ tags: {% endblock %} {% block body %} - {{ io.frameHeader('title-bar') }} 
Previous prompt
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk index 55921b3..54ddd0b 100755 --- a/source/screens/demo/examples/ui/new.njk +++ b/source/screens/demo/examples/ui/new.njk @@ -23,25 +23,23 @@ tags: {% block body %} {{ header.status(hippie, new) }} -
-
- -
-
-
1
-
2
-
3
-
4
-
+
+ +
+
+
1
+
2
+
3
+
4
{% endblock %} diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index ff3aab8..dc99b1c 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -4,41 +4,8 @@ } } -#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; - } -} - .body_frame { @extend %flex-column; - @extend .body_ui; background-color: $color_back_basic; @@ -88,6 +55,46 @@ } } +.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; @@ -112,6 +119,8 @@ } } + + .io { .spacer { margin: 0; diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss index db795cd..42946e2 100755 --- a/source/style/modules/ui/_new_module.scss +++ b/source/style/modules/ui/_new_module.scss @@ -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 { From e572f642595e2686fa2d36579d516296a5998837 Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 22:08:31 +0200 Subject: [PATCH 10/11] feat: Add app frame template - All frame pages use app frame template - Add form page to frames and add header --- source/screens/demo/examples/ui/cli.njk | 24 +++++--------------- source/screens/demo/examples/ui/explorer.njk | 21 +---------------- source/screens/demo/examples/ui/form.njk | 14 ++---------- source/screens/demo/examples/ui/tui.njk | 21 ++--------------- source/templates/hippie/_app.njk | 2 +- source/templates/hippie/_app_frame.njk | 17 ++++++++++++++ 6 files changed, 29 insertions(+), 70 deletions(-) create mode 100755 source/templates/hippie/_app_frame.njk diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk index 3ba032d..dc0800f 100755 --- a/source/screens/demo/examples/ui/cli.njk +++ b/source/screens/demo/examples/ui/cli.njk @@ -6,21 +6,7 @@ tags: {% set pageId = page.fileSlug %} {% set bodyClass = "body_cli" %} -{% extends "hippie/_app.njk" %} -{% import "hippie/macros/_io.njk" as io %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - {{ super() }} - - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %}
@@ -47,9 +33,11 @@ tags: const textarea = document.getElementById('prompt'); - document.body.addEventListener('click', () => { - textarea.focus(); - }); + document + .body + .addEventListener('click', () => { + textarea.focus(); + }); textarea.addEventListener('input', () => { resizeTextArea(textarea); diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk index 628f658..869bcf8 100755 --- a/source/screens/demo/examples/ui/explorer.njk +++ b/source/screens/demo/examples/ui/explorer.njk @@ -4,23 +4,8 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set bodyClass = "body_frame" %} -{% extends "hippie/_app.njk" %} -{% import "hippie/macros/_io.njk" as io %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - {{ super() }} - - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %} {{ io.frameHeader('title-bar') }} @@ -177,8 +162,4 @@ tags: -{% endblock %} - -{% block script %} - {{ super() }} {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk index 94275cd..2e6c088 100644 --- a/source/screens/demo/examples/ui/form.njk +++ b/source/screens/demo/examples/ui/form.njk @@ -3,20 +3,10 @@ title: Form tags: - ui --- -{% extends "hippie/_app.njk" %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %} + {{ io.frameHeader('title-bar') }}

Formulare

diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk index 89a3fdd..8f22162 100755 --- a/source/screens/demo/examples/ui/tui.njk +++ b/source/screens/demo/examples/ui/tui.njk @@ -4,31 +4,14 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set bodyClass = "body_frame" %} -{% extends "hippie/_app.njk" %} -{% import "hippie/macros/_io.njk" as io %} +{% extends "hippie/_app_frame.njk" %} {% block title %}{{ title }} {% endblock %} -{% block links %} - {{ super() }} - - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} - {% block body %} {{ io.frameHeader('title-bar') }} -
-
+
{{ io.frameFooter('mode-bar') }} -{% endblock %} - -{%- block script %} - {{ super() }} {% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk index dbee1a7..3dcc729 100755 --- a/source/templates/hippie/_app.njk +++ b/source/templates/hippie/_app.njk @@ -18,7 +18,7 @@ {% endblock %} - + {% block body %}{% endblock %} {% block script %} diff --git a/source/templates/hippie/_app_frame.njk b/source/templates/hippie/_app_frame.njk new file mode 100755 index 0000000..19a7504 --- /dev/null +++ b/source/templates/hippie/_app_frame.njk @@ -0,0 +1,17 @@ + +{% extends "hippie/_app.njk" %} +{% import "hippie/macros/_io.njk" as io %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block links %} + {{ super() }} + + +{% endblock %} + +{% block script %} + {{ super() }} +{% endblock %} \ No newline at end of file From 1ddba29d9c044d22a39c90c3458727f6c3605d22 Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 23 Jun 2025 22:31:18 +0200 Subject: [PATCH 11/11] 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 --- source/code/_ui.js | 18 ++++++++++-- source/screens/demo/examples/ui/drag.njk | 30 +++++++++++--------- source/screens/demo/examples/ui/explorer.njk | 11 +------ source/style/modules/ui/_drag_module.scss | 4 +++ source/style/modules/ui/_frame_module.scss | 6 ++-- 5 files changed, 40 insertions(+), 29 deletions(-) diff --git a/source/code/_ui.js b/source/code/_ui.js index 24e034a..01a489a 100644 --- a/source/code/_ui.js +++ b/source/code/_ui.js @@ -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}`; diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index 873a2ab..ecd3001 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -5,25 +5,22 @@ tags: --- {% set pageId = page.fileSlug %} -{% extends "hippie/_app.njk" %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - {{ super() }} - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %}
+
+
+
+ {{ io.frameHeader('title-bar') }} +
+ {{ io.frameFooter('mode-bar') }} +
+
+
{% endblock %} {%- block script %} @@ -32,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', () => { @@ -41,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); {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk index 869bcf8..72de77a 100755 --- a/source/screens/demo/examples/ui/explorer.njk +++ b/source/screens/demo/examples/ui/explorer.njk @@ -152,14 +152,5 @@ tags: - + {{ io.frameFooter('mode-bar') }} {% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss index a345922..83f1abb 100644 --- a/source/style/modules/ui/_drag_module.scss +++ b/source/style/modules/ui/_drag_module.scss @@ -1,4 +1,8 @@ #space { position: relative; height: 100%; + + .body_frame { + background-color: white; + } } \ No newline at end of file diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index dc99b1c..a8e804d 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -27,9 +27,9 @@ flex: 1; - aside { - // background-color: rgba(255, 255, 255, .1); - } + // aside { + // background-color: rgba(255, 255, 255, .1); + // } section {