Search in sources :

Example 1 with ModalDialog

use of org.dominokit.domino.ui.modals.ModalDialog in project domino-ui-demo by DominoKit.

the class ModalsViewImpl method initModalsSize.

private void initModalsSize() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    // ------------ Default size -------------
    ModalDialog defaultSizeModal = createModalDialog();
    Button defaultSizeButton = Button.createDefault("MODAL - DEFAULT SIZE");
    defaultSizeButton.getClickableElement().addEventListener("click", e -> openDialog(defaultSizeModal));
    element.appendChild(defaultSizeModal.asElement());
    row.addColumn(column.addElement(defaultSizeButton.asElement()));
    // ------------ Large size -------------
    ModalDialog largeSizeModal = createModalDialog().large();
    Button largeSizeButton = Button.createDefault("MODAL - LARGE SIZE");
    largeSizeButton.getClickableElement().addEventListener("click", e -> openDialog(largeSizeModal));
    element.appendChild(largeSizeModal.asElement());
    row.addColumn(column.copy().addElement(largeSizeButton.asElement()));
    // ------------ Small size -------------
    ModalDialog smallSizeModal = createModalDialog().small();
    Button smallSizeButton = Button.createDefault("MODAL - LARGE SIZE");
    smallSizeButton.getClickableElement().addEventListener("click", e -> openDialog(smallSizeModal));
    element.appendChild(smallSizeModal.asElement());
    row.addColumn(column.copy().addElement(smallSizeButton.asElement()));
    element.appendChild(Card.create("MODAL SIZE EXAMPLE", "Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.").appendContent(row.asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initModalsSize()).asElement());
}
Also used : Column(org.dominokit.domino.ui.column.Column) Button(org.dominokit.domino.ui.button.Button) ModalDialog(org.dominokit.domino.ui.modals.ModalDialog) Row(org.dominokit.domino.ui.row.Row)

Example 2 with ModalDialog

use of org.dominokit.domino.ui.modals.ModalDialog in project domino-ui-demo by DominoKit.

the class ModalsViewImpl method initModalColor.

private void initModalColor() {
    Card card = Card.create("WITH MATERIAL DESIGN COLORS", "You can use material design colors.");
    HTMLDivElement buttonsContainer = div().css("button-demo").asElement();
    card.appendContent(buttonsContainer);
    // ------------ Red ------------
    ModalDialog modalDialogRed = createModalDialog().setModalColor(Color.RED);
    Button redButton = Button.create("RED").setBackground(Background.RED);
    redButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogRed));
    buttonsContainer.appendChild(redButton.asElement());
    element.appendChild(modalDialogRed.asElement());
    // ------------ Pink ------------
    ModalDialog modalDialogPink = createModalDialog().setModalColor(Color.PINK);
    Button pinkButton = Button.create("PINK").setBackground(Background.PINK);
    pinkButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogPink));
    buttonsContainer.appendChild(pinkButton.asElement());
    element.appendChild(modalDialogPink.asElement());
    // ------------ Purple ------------
    ModalDialog modalDialogPurple = createModalDialog().setModalColor(Color.PURPLE);
    Button purpleButton = Button.create("PURPLE").setBackground(Background.PURPLE);
    purpleButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogPurple));
    buttonsContainer.appendChild(purpleButton.asElement());
    element.appendChild(modalDialogPurple.asElement());
    // ------------ Deep Purple ------------
    ModalDialog modalDialogDeepPurple = createModalDialog().setModalColor(Color.DEEP_PURPLE);
    Button deepPurpleButton = Button.create("DEEP PURPLE").setBackground(Background.DEEP_PURPLE);
    deepPurpleButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogDeepPurple));
    buttonsContainer.appendChild(deepPurpleButton.asElement());
    element.appendChild(modalDialogDeepPurple.asElement());
    // ------------ Indigo ------------
    ModalDialog modalDialogIndigo = createModalDialog().setModalColor(Color.INDIGO);
    Button indigoButton = Button.create("INDIGO").setBackground(Background.INDIGO);
    indigoButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogIndigo));
    buttonsContainer.appendChild(indigoButton.asElement());
    element.appendChild(modalDialogIndigo.asElement());
    // ------------ Blue ------------
    ModalDialog modalDialogBlue = createModalDialog().setModalColor(Color.BLUE);
    Button blueButton = Button.create("BLUE").setBackground(Background.BLUE);
    blueButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogBlue));
    buttonsContainer.appendChild(blueButton.asElement());
    element.appendChild(modalDialogBlue.asElement());
    // ------------ Orange ------------
    ModalDialog modalDialogOrange = createModalDialog().setModalColor(Color.ORANGE);
    Button orangeButton = Button.create("ORANGE").setBackground(Background.ORANGE);
    orangeButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogOrange));
    buttonsContainer.appendChild(orangeButton.asElement());
    element.appendChild(modalDialogOrange.asElement());
    // ------------ Green ------------
    ModalDialog modalDialogGreen = createModalDialog().setModalColor(Color.GREEN);
    Button greenButton = Button.create("GREEN").setBackground(Background.GREEN);
    greenButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogGreen));
    buttonsContainer.appendChild(greenButton.asElement());
    element.appendChild(modalDialogGreen.asElement());
    // ------------ Teal ------------
    ModalDialog modalDialogTeal = createModalDialog().setModalColor(Color.TEAL);
    Button tealButton = Button.create("TEAL").setBackground(Background.TEAL);
    tealButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogTeal));
    buttonsContainer.appendChild(tealButton.asElement());
    element.appendChild(modalDialogTeal.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initModalColor()).asElement());
}
Also used : Button(org.dominokit.domino.ui.button.Button) HTMLDivElement(elemental2.dom.HTMLDivElement) ModalDialog(org.dominokit.domino.ui.modals.ModalDialog) Card(org.dominokit.domino.ui.cards.Card)

Example 3 with ModalDialog

use of org.dominokit.domino.ui.modals.ModalDialog in project domino-ui-demo by DominoKit.

the class ModalsViewImpl method createModalDialog.

private ModalDialog createModalDialog() {
    ModalDialog modal = ModalDialog.create("Modal title");
    modal.appendContent(new Text(SAMPLE_CONTENT));
    Button closeButton = Button.create("CLOSE").linkify();
    Button saveButton = Button.create("SAVE CHANGES").linkify();
    EventListener closeModalListener = evt -> modal.close();
    closeButton.getClickableElement().addEventListener("click", closeModalListener);
    saveButton.getClickableElement().addEventListener("click", closeModalListener);
    modal.appendFooterContent(saveButton.asElement());
    modal.appendFooterContent(closeButton.asElement());
    return modal;
}
Also used : Elements.div(org.jboss.gwt.elemento.core.Elements.div) UiView(org.dominokit.domino.api.client.annotations.UiView) ModalDialog(org.dominokit.domino.ui.modals.ModalDialog) ComponentView(org.dominokit.domino.componentcase.shared.extension.ComponentView) Column(org.dominokit.domino.ui.column.Column) ModalsPresenter(org.dominokit.domino.modals.client.presenters.ModalsPresenter) CodeResource(org.dominokit.domino.modals.client.views.CodeResource) BlockHeader(org.dominokit.domino.ui.header.BlockHeader) EventListener(elemental2.dom.EventListener) Color(org.dominokit.domino.ui.style.Color) ComponentRemoveHandler(org.dominokit.domino.componentcase.shared.extension.ComponentCase.ComponentRemoveHandler) Row(org.dominokit.domino.ui.row.Row) HTMLDivElement(elemental2.dom.HTMLDivElement) Text(elemental2.dom.Text) ModalsView(org.dominokit.domino.modals.client.views.ModalsView) Card(org.dominokit.domino.ui.cards.Card) Objects.nonNull(java.util.Objects.nonNull) Button(org.dominokit.domino.ui.button.Button) Background(org.dominokit.domino.ui.style.Background) Button(org.dominokit.domino.ui.button.Button) ModalDialog(org.dominokit.domino.ui.modals.ModalDialog) Text(elemental2.dom.Text) EventListener(elemental2.dom.EventListener)

Aggregations

Button (org.dominokit.domino.ui.button.Button)3 ModalDialog (org.dominokit.domino.ui.modals.ModalDialog)3 HTMLDivElement (elemental2.dom.HTMLDivElement)2 Card (org.dominokit.domino.ui.cards.Card)2 Column (org.dominokit.domino.ui.column.Column)2 Row (org.dominokit.domino.ui.row.Row)2 EventListener (elemental2.dom.EventListener)1 Text (elemental2.dom.Text)1 Objects.nonNull (java.util.Objects.nonNull)1 UiView (org.dominokit.domino.api.client.annotations.UiView)1 ComponentRemoveHandler (org.dominokit.domino.componentcase.shared.extension.ComponentCase.ComponentRemoveHandler)1 ComponentView (org.dominokit.domino.componentcase.shared.extension.ComponentView)1 ModalsPresenter (org.dominokit.domino.modals.client.presenters.ModalsPresenter)1 CodeResource (org.dominokit.domino.modals.client.views.CodeResource)1 ModalsView (org.dominokit.domino.modals.client.views.ModalsView)1 BlockHeader (org.dominokit.domino.ui.header.BlockHeader)1 Background (org.dominokit.domino.ui.style.Background)1 Color (org.dominokit.domino.ui.style.Color)1 Elements.div (org.jboss.gwt.elemento.core.Elements.div)1