From 234f4e6e7d630579946404ada804fc7e63deaf91 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 2 May 2025 19:50:26 +0200 Subject: [PATCH] feat: New ui index Init example starts like an application with fullscreen steps leading to an idle or menu state. Each step has specific events to trigger the next step. - Add index screen to ui - Add own script - Update ui style --- source/code/ui.js | 77 +++++++++++++ source/screens/demo/examples/ui/index.njk | 73 ++++++++++++ source/style/ui.scss | 109 +++++++++++++++++- .../templates/hippie/partials/_body_nav.njk | 2 +- 4 files changed, 259 insertions(+), 2 deletions(-) create mode 100644 source/code/ui.js create mode 100644 source/screens/demo/examples/ui/index.njk diff --git a/source/code/ui.js b/source/code/ui.js new file mode 100644 index 0000000..0fc9338 --- /dev/null +++ b/source/code/ui.js @@ -0,0 +1,77 @@ +let introDelay = 6; +let hintDelay = 1; + +const intro = { + element: document.getElementById('intro'), + delay: introDelay * 1000, + show() { + if (typeof this.timeoutId === 'number') { + this.cancel(); + } + + console.info("Intro begin."); + this.element.classList.replace('op_hide', 'op_show'); + + this.timeoutId = setTimeout( + () => { + this.dismiss(); + }, + this.delay + ) + }, + dismiss() { + this.element.classList.replace('op_show', 'op_hide'); + this.timeoutId = undefined; + + this.element.addEventListener('transitionend', () => { + console.info("Intro fin."); + agree(); + }); + }, + cancel() { + clearTimeout(this.timeoutId); + } +}; +const agreement = document.getElementById('agreement'); +const hint = { + element: document.getElementById('hint'), + delay: hintDelay * 1000, + show() { + if (typeof this.timeoutId === 'number') { + this.cancel(); + } + + this.element.classList.remove('di_none'); + + this.timeoutId = setTimeout( + () => { + this.dismiss(); + }, + this.delay + ); + }, + dismiss() { + this.element.classList.add('di_none'); + this.timeoutId = undefined; + }, + cancel() { + clearTimeout(this.timeoutId); + } +}; + +window.addEventListener('click', () => hint.show()); +window.addEventListener('keydown', () => hint.show()); + +if (intro.element) intro.show(); + +function agree() { + if (agreement) { + console.info("Agreement show."); + agreement.classList.replace('op_hide', 'op_show'); + + setTimeout(() => { + agreement.classList.replace('op_show', 'op_hide'); + console.info("Agreement closed."); + }, introDelay * 1000) + } +} diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk new file mode 100644 index 0000000..46c2827 --- /dev/null +++ b/source/screens/demo/examples/ui/index.njk @@ -0,0 +1,73 @@ +--- +title: Init +tags: + - demoExample + - index + - ui +--- +{% set pageId = "init" %} +{% set pageClass = "html_ui" %} + +{% extends "demo/_app.njk" %} + +{% block title %}{{ title }} +{% endblock %} + +{% block links %} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + +
+
+ {# Brand logo #} + + + + + + + +

Brand name

+
+

Powered by

+ +
+
+
Hello World!
+

Only left mouse click or any key

+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss index d088323..ee5186b 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -1,6 +1,113 @@ +@use "sass:map"; + @import "demo_config"; @import "hippie-style/hippie"; +$z-indexes: ( + "default": 0, + "content-bottom": 1, + "content-low": 2, + "content-med": 3, + "content-high": 4, + "content-top": 10, + "modal-low": 11, + "modal-med": 12, + "modal-high": 13, + "toast": 100 +); + +.op_show { + transition: $transition_show; +} + +.op_hide { + transition: $transition_hide; +} + +.html_ui { + height: 100%; + + body { + position: relative; + min-height: 100%; + background-color: black; + } +} + +#intro { + @extend %full_parent; + + z-index: map.get($z-indexes, "content-top"); + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: black; + + h1, + p, + li { + color: white; + } +} + +.brand { + text-align: center; + + img { + display: inline-block; + width: 128px; + height: 128px; + background-color: white; + } + + *+h1 { + margin-top: $space_small; + margin-bottom: $space_large; + } +} + +.tech-stack { + display: flex; + padding-left: 0; + + li { + list-style: none; + padding-inline: $space_double; + } +} + +#agreement { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background-color: $color_back_basic; +} + +.toast { + z-index: map.get($z-indexes, "toast"); + position: fixed; + right: $space_half; + bottom: $space_double; + + p { + color: white; + } + + kbd { + border-color: $color_brighter; + color: $color_back_io; + } +} + +.hello { + flex: 0 1 auto; + padding: 1em 2em; + background-color: rgba(black, .25); +} + @import "modules/ui/new_module"; @import "modules/ui/settings_module"; -@import "modules/ui/drag_module"; +@import "modules/ui/drag_module"; \ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index db7ea52..58fed6d 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,6 +1,6 @@
-