From 59d41e5acb14a109e91b3839d11ebbde290558fd Mon Sep 17 00:00:00 2001 From: "Ahmad K. Bawaneh" Date: Wed, 15 Nov 2023 10:30:06 +0300 Subject: [PATCH] fix #882 Introduce new InfoBlock component --- .../org/dominokit/domino/ui/i18n/Labels.java | 7 + .../domino/ui/infoboxes/InfoBlock.java | 160 ++++++++++++++++++ .../domino/ui/infoboxes/InfoBlockStyles.java | 26 +++ .../dui-components/domino-ui-info-block.css | 19 +++ 4 files changed, 212 insertions(+) create mode 100644 domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlock.java create mode 100644 domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlockStyles.java create mode 100644 domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-info-block.css diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/i18n/Labels.java b/domino-ui/src/main/java/org/dominokit/domino/ui/i18n/Labels.java index bec7864d..7ff3978a 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/i18n/Labels.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/i18n/Labels.java @@ -18,6 +18,13 @@ /** The {@code Labels} interface provides methods for retrieving localized labels. */ public interface Labels { + String LOREM_IPSUM_SHORT = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation"; + String LOREM_IPSUM_MEDIUM = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."; + String LOREM_IPSUM_LONG = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt."; + /** * Returns the localized label for the "Close" action. * diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlock.java b/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlock.java new file mode 100644 index 00000000..30102c9b --- /dev/null +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlock.java @@ -0,0 +1,160 @@ +/* + * Copyright © 2019 Dominokit + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package org.dominokit.domino.ui.infoboxes; + +import elemental2.dom.Element; +import elemental2.dom.HTMLDivElement; +import org.dominokit.domino.ui.elements.DivElement; +import org.dominokit.domino.ui.layout.NavBar; +import org.dominokit.domino.ui.utils.BaseDominoElement; +import org.dominokit.domino.ui.utils.ChildHandler; +import org.dominokit.domino.ui.utils.LazyChild; + +/** + * The InfoBlock class represents a customizable information block in Domino UI. This class extends + * BaseDominoElement and provides a flexible way to create a block with optional header, body, and + * footer sections. + */ +public class InfoBlock extends BaseDominoElement + implements InfoBlockStyles { + + private final DivElement root; + private final LazyChild header; + private final LazyChild footer; + private final DivElement body; + + /** + * Creates a new instance of InfoBlock. + * + * @return a new InfoBlock instance. + */ + public static InfoBlock create() { + return new InfoBlock(); + } + + /** + * Constructor for InfoBlock. Initializes the root, header, footer, and body elements with default + * styles. + */ + public InfoBlock() { + this.root = div().addCss(dui_info_block).appendChild(body = div().addCss(dui_info_block_body)); + + header = LazyChild.of(NavBar.create().addCss(dui_info_block_header), this.root); + footer = LazyChild.of(NavBar.create().addCss(dui_info_block_footer), this.root); + + init(this); + } + + /** + * Returns the element to which child elements will be appended. + * + * @return the body element of the InfoBlock. + */ + @Override + public Element getAppendTarget() { + return this.body.element(); + } + + /** + * Retrieves the header component of the InfoBlock. + * + * @return the NavBar instance used as the header. + */ + public NavBar getHeader() { + return header.get(); + } + + /** + * Retrieves the footer component of the InfoBlock. + * + * @return the NavBar instance used as the footer. + */ + public NavBar getFooter() { + return footer.get(); + } + + /** + * Retrieves the body component of the InfoBlock. + * + * @return the DivElement used as the body. + */ + public DivElement getBody() { + return body; + } + + /** + * Ensures the header is initialized and returns the current instance for chaining. + * + * @return the current InfoBlock instance. + */ + public InfoBlock withHeader() { + this.header.get(); + return this; + } + + /** + * Applies a custom handler to the header and returns the current instance for chaining. + * + * @param handler the handler to customize the header. + * @return the current InfoBlock instance. + */ + public InfoBlock withHeader(ChildHandler handler) { + handler.apply(this, header.get()); + return this; + } + + /** + * Applies a custom handler to the body and returns the current instance for chaining. + * + * @param handler the handler to customize the body. + * @return the current InfoBlock instance. + */ + public InfoBlock withBody(ChildHandler handler) { + handler.apply(this, body); + return this; + } + + /** + * Ensures the footer is initialized and returns the current instance for chaining. + * + * @return the current InfoBlock instance. + */ + public InfoBlock withFooter() { + this.footer.get(); + return this; + } + + /** + * Applies a custom handler to the footer and returns the current instance for chaining. + * + * @param handler the handler to customize the footer. + * @return the current InfoBlock instance. + */ + public InfoBlock withFooter(ChildHandler handler) { + handler.apply(this, footer.get()); + return this; + } + + /** + * Returns the root HTMLDivElement of the InfoBlock. + * + * @return the root HTMLDivElement. + */ + @Override + public HTMLDivElement element() { + return root.element(); + } +} diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlockStyles.java b/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlockStyles.java new file mode 100644 index 00000000..951970e7 --- /dev/null +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/infoboxes/InfoBlockStyles.java @@ -0,0 +1,26 @@ +/* + * Copyright © 2019 Dominokit + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package org.dominokit.domino.ui.infoboxes; + +import org.dominokit.domino.ui.style.CssClass; + +public interface InfoBlockStyles { + + CssClass dui_info_block = () -> "dui-info-block"; + CssClass dui_info_block_body = () -> "dui-info-block-body"; + CssClass dui_info_block_header = () -> "dui-info-block-header"; + CssClass dui_info_block_footer = () -> "dui-info-block-footer"; +} diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-info-block.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-info-block.css new file mode 100644 index 00000000..d8dd4095 --- /dev/null +++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-info-block.css @@ -0,0 +1,19 @@ +.dui-info-block { + --dui-nav-bar-padding: 0; + display: flex; + flex-direction: column; +} + +.dui-info-block-header { + order: var(--dui-order-10); +} + +.dui-info-block-body { + flex-grow: 1; + order: var(--dui-order-20); + padding: var(--dui-spc-2); +} + +.dui-info-block-footer { + order: var(--dui-order-30); +}