Skip to content

Commit

Permalink
Cleanup collapse
Browse files Browse the repository at this point in the history
  • Loading branch information
@susuhahnml
susuhahnml committed Jan 17, 2025
1 parent a5e4922 commit 8fe4b56
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 115 deletions.
9 changes: 5 additions & 4 deletions angular_frontend/src/app/collapse/collapse.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<div>
<button #toggleButton (click)="toggle()">
<span #icon class="icon"></span>
{{label}}
<i #icon class="icon"></i>
{{label}}
<i #iconCollapse class="icon"></i>
</button>
<div #collapseContent [ngbCollapse]="isCollapsed">
<div #childContainer></div>
<div #childContainer></div>
</div>
</div>
</div>
54 changes: 21 additions & 33 deletions angular_frontend/src/app/collapse/collapse.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ChildBearerService } from '../child-bearer.service';
export class CollapseComponent {
@ViewChild('toggleButton', { static: false }) toggleButton!: ElementRef;
@ViewChild('icon', { static: false }) icon!: ElementRef;
@ViewChild('iconCollapse', { static: false }) iconCollapse!: ElementRef;
@ViewChild('collapseContent', { static: false }) collapseContent!: ElementRef;
@ViewChild('childContainer', { read: ViewContainerRef }) childContainer!: ViewContainerRef;
@ViewChild(NgbCollapse) ngbCollapse!: NgbCollapse;
Expand All @@ -23,15 +24,15 @@ export class CollapseComponent {
label: string = ""; // Label for the collapse button

// Default icons
defaultCollapsedIcon: string = "fa fa-caret-right"; // Default collapsed icon class
defaultExpandedIcon: string = "fa fa-caret-down"; // Default expanded icon class
defaultCollapsedIcon: string = "fa-caret-down"; // Default collapsed icon class
defaultExpandedIcon: string = "fa-caret-up"; // Default expanded icon class

constructor(
private cd: ChangeDetectorRef,
private attributeService: AttributeHelperService,
private elementLookupService: ElementLookupService,
private childBearerService: ChildBearerService
) {}
) { }

ngAfterViewInit(): void {
if (this.element != null) {
Expand Down Expand Up @@ -61,10 +62,9 @@ export class CollapseComponent {
this.isCollapsed = initialState === "true";

let htmlButton = this.toggleButton.nativeElement;
let htmlIcon = this.icon.nativeElement;

this.attributeService.addAttributes(htmlButton, attributes);
this.attributeService.addClasses(htmlButton, attributes, [], []);
this.attributeService.addClasses(htmlButton, attributes, ["btn"], []);
this.attributeService.addGeneralAttributes(htmlButton, attributes);

this.updateIcon(attributes);
Expand All @@ -86,32 +86,20 @@ export class CollapseComponent {

// Update icon based on collapse state
updateIcon(attributes: AttributeDto[]) {
const htmlIcon = this.icon.nativeElement;
htmlIcon.className = "icon";

// Check for collapsed/expanded specific icons
const iconAttrName = this.isCollapsed ? "collapsed_icon" : "expanded_icon";

// Check for the icon for both states
const specificIcon = this.attributeService.findGetAttributeValue(iconAttrName, attributes, "");
const generalIcon = this.attributeService.findGetAttributeValue("icon", attributes, "");

// Determine which icon to use
let iconClass = specificIcon || generalIcon;

// Handle 'none' case to hide the icon
if (iconClass.toLowerCase() === "none") {
htmlIcon.style.display = "none"; // Hide the icon element
} else {
htmlIcon.style.display = ""; // Ensure the icon is visible
if (iconClass) {
htmlIcon.classList.add(...iconClass.split(" "));
} else {
const defaultIcon = this.isCollapsed ? this.defaultCollapsedIcon : this.defaultExpandedIcon;
htmlIcon.classList.add(...defaultIcon.split(" "));
}

htmlIcon.style.paddingRight = "8px";
}
const htmlIconCollapse = this.iconCollapse.nativeElement;
htmlIconCollapse.className = "";
htmlIconCollapse.style.paddingLeft = "6px";
if (this.isCollapsed) {
console.log("collapsed");
htmlIconCollapse.classList.add("fa");
htmlIconCollapse.classList.add(this.defaultCollapsedIcon);
this.attributeService.addClasses(htmlIconCollapse, attributes, ["fa"], [this.defaultCollapsedIcon], 'collapsed_icon');
} else {
console.log("expanded");
this.attributeService.addClasses(htmlIconCollapse, attributes, ["fa"], [this.defaultExpandedIcon], 'expanded_icon');
}

const htmlIconCustom = this.icon.nativeElement;
this.attributeService.addClasses(htmlIconCustom, attributes, ["fa", "sm"], [], 'icon');
}
}
}
2 changes: 1 addition & 1 deletion clinguin/client/presentation/frontends/angular_frontend/clinguin_angular_frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0052CC;--bs-secondary:#6554C0;--bs-success:#36B37E;--bs-info:#B3BAC5;--bs-warning:#FFAB00;--bs-danger:#FF5630;--bs-light:#F4F5F7;--bs-dark:#212529;--bs-primary-rgb:0, 82, 204;--bs-secondary-rgb:101, 84, 192;--bs-success-rgb:54, 179, 126;--bs-info-rgb:179, 186, 197;--bs-warning-rgb:255, 171, 0;--bs-danger-rgb:255, 86, 48;--bs-light-rgb:244, 245, 247;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#002152;--bs-secondary-text-emphasis:#28224d;--bs-success-text-emphasis:#164832;--bs-info-text-emphasis:#484a4f;--bs-warning-text-emphasis:#664400;--bs-danger-text-emphasis:#662213;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#ccdcf5;--bs-secondary-bg-subtle:#e0ddf2;--bs-success-bg-subtle:#d7f0e5;--bs-info-bg-subtle:#f0f1f3;--bs-warning-bg-subtle:#ffeecc;--bs-danger-bg-subtle:#ffddd6;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#99baeb;--bs-secondary-border-subtle:#c1bbe6;--bs-success-border-subtle:#afe1cb;--bs-info-border-subtle:#e1e3e8;--bs-warning-border-subtle:#ffdd99;--bs-danger-border-subtle:#ffbbac;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0052CC;--bs-link-color-rgb:0, 82, 204;--bs-link-decoration:underline;--bs-link-hover-color:#0042a3;--bs-link-hover-color-rgb:0, 66, 163;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(0, 82, 204, .25);--bs-form-valid-color:#36B37E;--bs-form-valid-border-color:#36B37E;--bs-form-invalid-color:#FF5630;--bs-form-invalid-border-color:#FF5630}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}</style><link rel="stylesheet" href="styles.f34b6b2d1a28ca36.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.f34b6b2d1a28ca36.css"></noscript></head>
<body>
<app-root></app-root>
<script src="runtime.496fedc6e58b1167.js" type="module"></script><script src="polyfills.26316270d5c34064.js" type="module"></script><script src="main.f6f91f11388a1123.js" type="module"></script></body>
<script src="runtime.496fedc6e58b1167.js" type="module"></script><script src="polyfills.26316270d5c34064.js" type="module"></script><script src="main.5591dee6e005d17f.js" type="module"></script></body>
</html>
1 change: 1 addition & 0 deletions ...resentation/frontends/angular_frontend/clinguin_angular_frontend/main.5591dee6e005d17f.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion ...resentation/frontends/angular_frontend/clinguin_angular_frontend/main.f6f91f11388a1123.js
View file

This file was deleted.

50 changes: 22 additions & 28 deletions docs/clinguin/frontends/AngularFrontend.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,19 +407,11 @@ A checkbox component used to display a boolean value. Corresponds to a limited v
when(radio(P), click, call, set_external(include(P'),false)) :- person(P), not include(P), person(P'), P'!=P.
Atributes
+++++++++

.. note::

Any attribute that does not fall under this list or the specific attributes of the element
will be set as a plain HTML style in the component.


``collapse``
.............

A collapsible element. Corresponds to a limited version of `Bootstrap collapse <https://getbootstrap.com/docs/5.0/components/collapse/>`_.
It behaves like a normal button that will show and hide content when clicked. Unlike the usual button, ``collapse`` can contain other elements, similarly to the ``container``.

**Attributes**

Expand All @@ -428,8 +420,6 @@ A collapsible element. Corresponds to a limited version of `Bootstrap collapse <
:ref:`Order <Order>`,
:ref:`Child layout <Child layout>`,
:ref:`Direction <Direction>`,
:ref:`Icon <Icon>`,
:ref:`Label <Label>

``collapsed``
*Description*: The initial state of the collapse
Expand All @@ -442,38 +432,42 @@ A collapsible element. Corresponds to a limited version of `Bootstrap collapse <
*Values*: String

``icon``
*Description*: Sets the same icon for both the collapsed and expanded states
*Description*: The icon of the button.

*Values*: `Font Awesome <https://fontawesome.com/search?o=r&m=free>`_ symbol name or ``none``
*Values*: `Font Awesome <https://fontawesome.com/search?o=r&m=free>`_ symbol name

``collapsed_icon``
*Description*: The icon when the collapse is collapsed

*Values*: `Font Awesome <https://fontawesome.com/search?o=r&m=free>`_ symbol name or ``none``

``expanded_icon``
*Description*: The icon when the collapse is expanded
.. important::
**Child Elements**

*Values*: `Font Awesome <https://fontawesome.com/search?o=r&m=free>`_ symbol name or ``none``
All elements intended to appear inside the `collapse` component **must** be defined as its children. These can include any UI element.

.. warning::
**Automatic close**

.. important::
**Child Elements**
The `collapse` component will go back to its original state ("collapsed" or "expanded") after every call to the server

All elements intended to appear inside the `collapse` component **must** be defined as its children. These can include various UI elements.

.. admonition:: Example

In this example a ``collapse`` component ``c`` contains an element ``cont`` as its child. The component toggles between expanded and collapsed states when the user interacts with it.
In this example a ``collapse`` component ``c`` contains a button ``b1`` as its child.
The component toggles between expanded and collapsed states when the user interacts with it.

.. code-block:: prolog
elem(c, colapse, w).
attr(c, label, "Collapse").
attr(c, collapsed_icon, "fa-solid;fa-arrow-right").
attr(c, expanded_icon, "fa-solid;fa-arrow-down").
attr(c, collapsed, true).
elem(cont, container, c).
elem(b1, button, c).
Atributes
+++++++++

.. note::

Any attribute that does not fall under this list or the specific attributes of the element
will be set as a plain HTML style in the component.




Class
Expand Down
87 changes: 39 additions & 48 deletions examples/angular/placement/ui.lp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,56 +36,47 @@ attr(window, flex_direction, row).
% PEOPLE INCLUDED
%%%%%%%%%%%%%%%%%%%%%%%%

elem(label_included, collapse, window).
attr(label_included, label, "People").
attr(label_included, class, (
"bg-secondary";
"bg-opacity-50";
"rounded";
"d-flex";
"align-items-center";
"p-4";
"m-2";
"fw-bold";
"justify-content-between";
"border-0")).
attr(label_included, order, 1).

elem(included_content, container, label_included).
attr(included_content, class, (
"bg-secondary";
"bg-opacity-25";
"rounded";
"pt-3";
"m-2";
"mt-0";
"d-flex";
"flex-column";
"gap-2"; "align-items-center")).
attr(included_content, order, 1).

elem(add_button, button, included_content).
attr(add_button, icon, "fa-user-plus").
attr(add_button, order, 1).
attr(add_button, class, ("btn-secondary";"bg-opacity-50")).
when(add_button, click, update, (modal, visibility, shown)).

elem(people, container, included_content).
attr(people, order, 2).
elem(included(P), container, people):- person(P).

elem(included_cb(P), checkbox, included(P)):- person(P).
attr(included_cb(P), checked, true):- include(P).
when(included_cb(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(included_cb(P), click, call, set_external(include(P),false)) :- person(P), include(P).
attr(included_cb(P), label, P):- person(P).
attr(included_cb(P), class, ("text-capitalize";"h6")):- person(P).


when(included_btn_add(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(included_btn_add(P), click, call, set_external(include(P),false)) :- person(P), include(P).
elem(included, container, window).
attr(included, class, ("bg-secondary";"bg-opacity-50";"w-25";"p-4";"rounded";"d-flex";"flex-column";"justify-content-start")).
attr(included, order, 1).

elem(add_button, button, included).
attr(add_button, icon, "fa-user-plus").
attr(add_button, order, 1).
attr(add_button, class, ("btn-secondary";"bg-opacity-50")).
when(add_button, click, update, (modal, visibility, shown)).

elem(people, container, included).
attr(people, order, 2).

elem(included(P), container, people):- person(P).

elem(included_cb(P), checkbox, included(P)):- person(P).
attr(included_cb(P), checked, true):- include(P).
when(included_cb(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(included_cb(P), click, call, set_external(include(P),false)) :- person(P), include(P).
attr(included_cb(P), label, P):- person(P).
attr(included_cb(P), class, ("text-capitalize";"h6";"m-2")):- person(P).


when(included_btn_add(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(included_btn_add(P), click, call, set_external(include(P),false)) :- person(P), include(P).


elem(unassigned, collapse, included).
attr(unassigned, order, 3).
attr(unassigned, label, "People unassigned").
attr(unassigned, icon, ("fa-list")).
% attr(unassigned, collapsed, false).
% attr(unassigned, expanded_icon, ("fa-home")).
% attr(unassigned, class, ("text-danger")).
% attr(unassigned, class, ("disabled")):- #false : person(P), include(P), not _all(assign(_,P)).

elem(unassigned_content, container, unassigned).
attr(unassigned_content, class, ("border";"m-1";"p-3";"rounded";"border-dark";"align-items-start")).

elem(unassigned(P), label, unassigned_content):- person(P), include(P), not _all(assign(_,P)).
attr(unassigned(P), label, @stringify(P,true)):- person(P), include(P), not _all(assign(_,P)).

%%%%%%%%%%%%%%%%%%%%%%%%
% Table setup
Expand Down

0 comments on commit 8fe4b56

Please sign in to comment.