zeitbild/frontend-dali
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[mod] Aufräum-Aktionen und kleinere Anpassungen

Browse source
This commit is contained in:
fenris 2025-10-29 11:40:27 +01:00
parent 58fc2ea97f
commit b0bd963145
17 changed files with 210 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
source/helpers.ts
View file

@ -138,6 +138,25 @@ namespace _dali.helpers
}
/**
*/
export async function element_from_template(
group : string,
name : string,
data : Record<string, string>
)
: Promise<HTMLElement>
{
const dom_dummy = document.createElement("div");
dom_dummy.innerHTML = await _dali.helpers.template_coin(
group,
name,
data
);
return (dom_dummy.children[0] as HTMLElement);
}
/**
* @todo outsource
*/
@ -145,7 +164,8 @@ namespace _dali.helpers
members : Array<
() => Promise<type_result>
>
) : Promise<
)
: Promise<
Array<
type_result
>
@ -162,7 +182,8 @@ namespace _dali.helpers
/**
*/
export function input_access_level(
) : lib_plankton.zoo_input.interface_input<_dali.enum_access_level>
)
: lib_plankton.zoo_input.interface_input<_dali.enum_access_level>
{
return (
new lib_plankton.zoo_input.class_input_wrapped<
@ -283,7 +304,8 @@ namespace _dali.helpers
/**
*/
export function datetime_input(
) : lib_plankton.zoo_input.interface_input<lib_plankton.pit.type_datetime>
)
: lib_plankton.zoo_input.interface_input<lib_plankton.pit.type_datetime>
{
return (
_dali.conf.get().misc.use_central_europe_specific_datetime_inputs
@ -364,7 +386,7 @@ namespace _dali.helpers
}
else
{
_dali.overlay.get_content_element().innerHTML = "[...]";
_dali.overlay.get_content_element().innerHTML = ". . .";
_dali.overlay.toggle({"mode": true});
}
}

9
source/style/hacks.css
View file

@ -1,9 +0,0 @@
.plankton_input_group_field[rel="resource"]
{
display: none;
}
.weekview-control-count
{
display: none !important;
}

68
source/style/main.css
View file

@ -20,72 +20,6 @@ header
margin-bottom: 16px;
}
#overlay
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: hsla(var(--hue), 0%, 0%, 0.75);
z-index: 2;
}
#overlay_content
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
padding: 32px;
background-color: hsl(0, 0%, 12.5%);
color: hsl(0, 0%, 100%);
}
#overlay:not(.overlay_active)
{
display: none;
}
nav > ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav > ul > li
{
display: inline-block;
margin: 8px;
padding: 8px;
}
nav > ul > li:not(.active)
{
display: none;
}
nav a
{
padding: 8px;
text-decoration: none;
color: hsl(var(--hue), 0%, 87.5%);
}
nav a:hover
{
color: hsl(var(--hue), 0%, 100%);
border-bottom: 2px solid hsl(0, 0%, 100%);
transition: 1s ease color;
}
a
{
text-decoration: none;
@ -101,7 +35,7 @@ a:hover
button
{
padding: 4px 8px;
padding: 8px 12px;
text-transform: uppercase;
cursor: pointer;

32
source/style/overlay.css Normal file
View file

@ -0,0 +1,32 @@
#overlay
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: hsla(var(--hue), 0%, 0%, 0.75);
z-index: 2;
}
#overlay_content
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
padding: 32px;
background-color: hsl(0, 0%, 12.5%);
color: hsl(0, 0%, 100%);
}
#overlay:not(.overlay_active)
{
display: none;
}

11
source/widgets/calendar_edit/logic.ts
View file

@ -111,6 +111,13 @@ namespace _dali.widgets
target_element : HTMLElement
) : Promise<void>
{
const dom_root = await _dali.helpers.element_from_template(
"widget-calendar_edit",
"main",
{
}
);
const form : lib_plankton.zoo_form.class_form<
_dali.type_calendar_object,
_dali.type_calendar_object
@ -243,9 +250,11 @@ namespace _dali.widgets
)
)
);
await form.setup(target_element);
await form.setup(dom_root);
await form.input_lock(this.read_only);
await form.input_write(this.initial_value);
target_element.appendChild(dom_root);
}
}

4
source/widgets/calendar_edit/style.css Normal file
View file

@ -0,0 +1,4 @@
.widget-calendar_edit .plankton_input_group_field[rel="resource"]
{
display: none;
}

2
source/widgets/calendar_edit/templates/main.html.tpl Normal file
View file

@ -0,0 +1,2 @@
<div class="widget-calendar_edit">
</div>

11
source/widgets/event_edit/logic.ts
View file

@ -154,6 +154,13 @@ namespace _dali.widgets
target_element : HTMLElement
) : Promise<void>
{
const dom_root = await _dali.helpers.element_from_template(
"widget-event_edit",
"main",
{
}
);
const form : lib_plankton.zoo_form.class_form<
type_value,
type_representation
@ -316,9 +323,11 @@ namespace _dali.widgets
)
)
);
await form.setup(target_element);
await form.setup(dom_root);
await form.input_lock(this.read_only);
await form.input_write(this.initial_value);
target_element.appendChild(dom_root);
}
}

2
source/widgets/event_edit/templates/main.html.tpl Normal file
View file

@ -0,0 +1,2 @@
<div class="widget-event_edit">
</div>

120
source/widgets/menu/logic.ts
View file

@ -37,12 +37,7 @@ namespace _dali.widgets
/**
*/
private entries : Array<
{
data : type_entry_data;
element : (null | HTMLElement);
}
>;
private entries : Array<type_entry_data>;
/**
@ -63,7 +58,7 @@ namespace _dali.widgets
/**
*/
public constructor(
entry_data_list : Array<type_entry_data>,
entries : Array<type_entry_data>,
{
"initial_groups": initial_groups = [],
"initial_label": initial_label = "",
@ -78,14 +73,7 @@ namespace _dali.widgets
}
)
{
this.entries = entry_data_list.map(
entry_data => (
{
"data": entry_data,
"element": null,
}
)
);
this.entries = entries;
this.initial_groups = initial_groups;
this.label = initial_label;
this.container = null;
@ -100,17 +88,20 @@ namespace _dali.widgets
: void
{
this.entries.forEach(
entry => {
const active : boolean = groups.some(group => entry.data.groups.includes(group));
entry.element.classList.toggle("widget-menu-entry-hidden", (! active));
(entry, index) => {
const active : boolean = groups.some(group => entry.groups.includes(group));
const rel : string = index.toFixed(0);
const dom_entry = this.container.querySelector(".widget-menu-entry[rel=\"" + rel + "\"]");
dom_entry.classList.toggle("widget-menu-entry-hidden", (! active));
}
);
}
/**
*/
public set_label(
label ?: string
label : (null | string)
)
: void
{
@ -153,56 +144,69 @@ namespace _dali.widgets
)
: Promise<void>
{
// container
{
const dom_container : HTMLElement = document.createElement("div");
dom_container.classList.add("widget-menu");
// button
// structure
this.container = await _dali.helpers.element_from_template(
"widget-menu",
"main",
{
const dom_button : HTMLElement = document.createElement("button");
dom_button.textContent = "[" + this.label + "]";
dom_button.classList.add("widget-menu-button");
dom_button.addEventListener(
"entries": (
(
await lib_plankton.call.promise_condense(
this.entries.map(
(entry, index) => () => _dali.helpers.template_coin(
"widget-menu",
"entry",
{
"label": entry.label,
"rel": index.toFixed(0),
}
)
)
)
)
.join("")
),
}
);
// logic
{
// collapser
{
this.container.querySelector(".widget-menu-button").addEventListener(
"click",
() => {
this.toggle_collapsed();
}
);
dom_container.classList.toggle("widget-menu-collapsed", true);
dom_container.appendChild(dom_button);
}
// platform
// entries
{
const dom_platform : HTMLElement = document.createElement("div");
dom_platform.classList.add("widget-menu-platform");
{
const dom_list : HTMLElement = document.createElement("ul");
dom_list.classList.add("widget-menu-entries");
this.entries.forEach(
entry => {
const dom_entry : HTMLElement = document.createElement("li");
dom_entry.classList.add("widget-menu-entry");
dom_entry.textContent = entry.data.label;
dom_entry.addEventListener(
"click",
() => {
this.toggle_collapsed({"mode": true});
entry.data.action();
}
);
dom_list.appendChild(dom_entry);
entry.element = dom_entry;
}
);
dom_platform.appendChild(dom_list);
}
dom_container.appendChild(dom_platform);
this.container.querySelectorAll(".widget-menu-entry").forEach(
dom_entry => {
dom_entry.addEventListener(
"click",
() => {
const index : int = parseInt(dom_entry.getAttribute("rel"));
const entry : type_entry_data = this.entries[index];
this.toggle_collapsed({"mode": true});
entry.action();
}
);
}
);
}
target_element.appendChild(dom_container);
this.container = dom_container;
}
this.set_groups(this.initial_groups);
// init
{
this.toggle_collapsed({"mode": true});
this.set_groups(this.initial_groups);
this.set_label(null);
}
// finish
target_element.appendChild(this.container);
}
}

23
source/widgets/menu/style.css
View file

@ -29,7 +29,9 @@
padding: 8px;
/*
min-width: 200px;
*/
}
.widget-menu-platform:not(.widget-menu-platform-collapsed)
@ -53,31 +55,20 @@
text-transform: capitalize;
background-color: hsl(var(--hue), 0%, 25%);
color: hsl(var(--hue), 0%, 100%);
}
.widget-menu-entry:not(:hover) > span
{
border-bottom: 2px solid hsl(0, 0%, 25%);
}
.widget-menu-entry:hover
.widget-menu-entry:hover > span
{
color: hsl(var(--hue), 0%, 100%);
border-bottom: 2px solid hsl(0, 0%, 100%);
transition: 1s ease color;
}
/*
.widget-menu-entry
{
margin: 8px;
text-transform: capitalize;
}
.widget-menu-entry:not(:hover)
{
background-color: hsl(var(--hue), 0%, 25%);
color: hsl(var(--hue), 0%, 100%);
}
*/
.widget-menu-entry.widget-menu-entry-hidden
{
display: none;

3
source/widgets/menu/templates/entry.html.tpl Normal file
View file

@ -0,0 +1,3 @@
<li class="widget-menu-entry" rel="{{rel}}">
<span>{{label}}</span>
</li>

8
source/widgets/menu/templates/main.html.tpl Normal file
View file

@ -0,0 +1,8 @@
<div class="widget-menu">
<button class="widget-menu-button"></button>
<div class="widget-menu-platform">
<ul class="widget-menu-entries">
{{entries}}
</ul>
</div>
</div>

3
source/widgets/mode_switcher/logic.ts
View file

@ -78,7 +78,8 @@ namespace _dali.widgets
*/
public async load(
target_element : Element
) : Promise<void>
)
: Promise<void>
{
target_element.innerHTML = await _dali.helpers.template_coin(
"widget-mode_switcher",

23
source/widgets/special_number_input/logic.ts
View file

@ -91,8 +91,7 @@ namespace _dali.widgets
)
: Promise<void>
{
const dom_dummy = document.createElement("div");
dom_dummy.innerHTML = await _dali.helpers.template_coin(
const dom_root = await _dali.helpers.element_from_template(
"widget-special_number_input",
"main",
{
@ -100,20 +99,21 @@ namespace _dali.widgets
}
);
const dom_input : HTMLInputElement = (dom_dummy.querySelector(".widget-special_number_input-input") as HTMLInputElement);
const dom_input : HTMLInputElement = (dom_root.querySelector(".widget-special_number_input-input") as HTMLInputElement);
// listeners
{
dom_input.addEventListener(
"change",
() => {
this.value = parseInt(dom_input.value);
const value : int = parseInt(dom_input.value);
if (
((this.minimum === null) || (this.value >= this.minimum))
((this.minimum === null) || (value >= this.minimum))
&&
((this.maximum === null) || (this.value <= this.maximum))
((this.maximum === null) || (value <= this.maximum))
)
{
this.value = value;
this.action_change(this.value);
}
else
@ -122,7 +122,7 @@ namespace _dali.widgets
}
}
);
dom_dummy.querySelector(".widget-special_number_input-prev").addEventListener(
dom_root.querySelector(".widget-special_number_input-prev").addEventListener(
"click",
() => {
if ((this.minimum === null) || (this.value > this.minimum))
@ -137,7 +137,7 @@ namespace _dali.widgets
}
}
);
dom_dummy.querySelector(".widget-special_number_input-next").addEventListener(
dom_root.querySelector(".widget-special_number_input-next").addEventListener(
"click",
() => {
if ((this.maximum === null) || (this.value < this.maximum))
@ -154,9 +154,12 @@ namespace _dali.widgets
);
}
dom_input.value = this.value.toFixed(0);
// content
{
dom_input.value = this.value.toFixed(0);
}
target_element.appendChild(dom_dummy.querySelector(".widget-special_number_input"));
target_element.appendChild(dom_root);
}
}

11
source/widgets/weekview/logic.ts
View file

@ -384,8 +384,7 @@ namespace _dali.widgets
}
else
{
let dom_dummy : HTMLElement = document.createElement("div");
dom_dummy.innerHTML = await _dali.helpers.template_coin(
const dom_entry = await _dali.helpers.element_from_template(
"widget-weekview",
"tableview-cell-entry",
{
@ -400,7 +399,6 @@ namespace _dali.widgets
),
}
);
const dom_entry : HTMLElement = dom_dummy.querySelector(".weekview-event_entry");
// listener
dom_entry.addEventListener(
@ -938,15 +936,14 @@ namespace _dali.widgets
*/
// control:vertical
{
const dom_dummy : HTMLElement = document.createElement("div");
dom_dummy.innerHTML = await _dali.helpers.template_coin(
const dom_control = await _dali.helpers.element_from_template(
"widget-weekview",
"control-vertical",
{
"label": lib_plankton.translate.get("widget.weekview.controls.vertical"),
}
);
const dom_input : HTMLInputElement = (dom_dummy.querySelector("input") as HTMLInputElement);
const dom_input : HTMLInputElement = (dom_control.querySelector("input") as HTMLInputElement);
dom_input.addEventListener(
"change",
async () => {
@ -958,7 +955,7 @@ namespace _dali.widgets
}
);
dom_input.checked = this.vertical;
target_element.querySelector(".weekview-controls").appendChild(dom_dummy.querySelector(".weekview-control-vertical"));
target_element.querySelector(".weekview-controls").appendChild(dom_control);
}
this.container = target_element.querySelector(".weekview");

24
tools/makefile
View file

@ -32,7 +32,10 @@ ${dir_build}/index.html: \
templates: \
templates-widgets-special_number_input \
templates-widgets-login_oidc \
templates-widgets-menu \
templates-widgets-sources \
templates-widgets-calendar_edit \
templates-widgets-event_edit \
templates-widgets-caldav \
templates-widgets-listview \
templates-widgets-weekview \
@ -53,6 +56,13 @@ templates-widgets-login_oidc: \
@ ${cmd_mkdir} ${dir_build}/templates/widget-login_oidc
@ ${cmd_cp} -r -u -v ${dir_source}/widgets/login_oidc/templates/* ${dir_build}/templates/widget-login_oidc/
.PHONY: templates-widgets-menu
templates-widgets-menu: \
$(wildcard ${dir_source}/widgets/menu/templates/*)
@ ${cmd_log} "templates:widget:menu …"
@ ${cmd_mkdir} ${dir_build}/templates/widget-menu
@ ${cmd_cp} -r -u -v ${dir_source}/widgets/menu/templates/* ${dir_build}/templates/widget-menu/
.PHONY: templates-widgets-sources
templates-widgets-sources: \
$(wildcard ${dir_source}/widgets/sources/templates/*)
@ -60,6 +70,20 @@ templates-widgets-sources: \
@ ${cmd_mkdir} ${dir_build}/templates/widget-sources
@ ${cmd_cp} -r -u -v ${dir_source}/widgets/sources/templates/* ${dir_build}/templates/widget-sources/
.PHONY: templates-widgets-calendar_edit
templates-widgets-calendar_edit: \
$(wildcard ${dir_source}/widgets/calendar_edit/templates/*)
@ ${cmd_log} "templates:widget:calendar_edit …"
@ ${cmd_mkdir} ${dir_build}/templates/widget-calendar_edit
@ ${cmd_cp} -r -u -v ${dir_source}/widgets/calendar_edit/templates/* ${dir_build}/templates/widget-calendar_edit/
.PHONY: templates-widgets-event_edit
templates-widgets-event_edit: \
$(wildcard ${dir_source}/widgets/event_edit/templates/*)
@ ${cmd_log} "templates:widget:event_edit …"
@ ${cmd_mkdir} ${dir_build}/templates/widget-event_edit
@ ${cmd_cp} -r -u -v ${dir_source}/widgets/event_edit/templates/* ${dir_build}/templates/widget-event_edit/
.PHONY: templates-widgets-caldav
templates-widgets-caldav: \
$(wildcard ${dir_source}/widgets/caldav/templates/*)