Examples with Icon org.dominokit.domino.ui.icons.Icon used on opensource projects

Example 1 with Icon

use of org.dominokit.domino.ui.icons.Icon in project domino-ui-demo by DominoKit.

the class FormsValidationsViewImpl method initIcons.

@SampleMethod
private void initIcons() {
    Icon cancel = Icons.ALL.cancel();
    TextBox username = TextBox.create("Username").addLeftAddOn(Icons.ALL.account_circle()).addRightAddOn(cancel);
    cancel.addClickListener(evt -> username.clear()).style().setCursor("pointer");
    HTMLElement showIcon = Icons.ALL.remove_red_eye().clickable().style().setCursor("pointer").element();
    TextBox password = TextBox.password("Password").addLeftAddOn(Icons.ALL.https().element()).addRightAddOn(showIcon);
    showIcon.addEventListener("mousedown", evt -> password.getInputElement().element().type = "text");
    showIcon.addEventListener("mouseup", evt -> password.getInputElement().element().type = "password");
    Icon info = Icons.ALL.info();
    Tooltip.create(info, "All system pages will be shown in the selected language");
    iconsCard.appendChild(username).appendChild(password).appendChild(TextArea.create("Description").addLeftAddOn(Icons.ALL.description())).appendChild(Select.<String>create("Language").addLeftAddOn(Icons.ALL.language()).addRightAddOn(info).appendChild(SelectOption.create("english", "English")).appendChild(SelectOption.create("france", "France")).appendChild(SelectOption.create("arabic", "Arabic")));
}

Example 2 with Icon

use of org.dominokit.domino.ui.icons.Icon in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method allInOne.

@SampleMethod
private void allInOne() {
    ContactsTopPanel<Contact> topPanel = new ContactsTopPanel<>();
    ScrollingPaginationPlugin<Contact> scrollingPaginationPlugin = new ScrollingPaginationPlugin<>(10, 5);
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").sortable().styleCell(cellElement -> Style.of(cellElement).setCssProperty("vertical-align", "middle")).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + "")).setWidth("70px")).addColumn(ColumnConfig.<Contact>create("status", "Status").setWidth("80px").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle().element()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off().element()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setWidth("100px").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleHeader(head -> Style.of(head).setWidth("100px")).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center").maxWidth("120px")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("email", "Email").setWidth("250px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setWidth("200px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).addPlugin(scrollingPaginationPlugin).addPlugin(new TopPanelPlugin<Contact>() {

        @Override
        public HTMLElement element() {
            return topPanel.element();
        }

        @Override
        public void handleEvent(TableEvent event) {
            if (TableDataUpdatedEvent.DATA_UPDATED.equals(event.getType())) {
                topPanel.update((TableDataUpdatedEvent<Contact>) event);
            }
        }
    }).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.highlight_off().clickable().setTooltip("Select Inactive").addClickListener(evt -> dataTable.getRows().forEach(item -> {
            if (!item.getRecord().isActive()) {
                item.select();
            } else {
                item.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.check_circle().clickable().setTooltip("Select Active").addClickListener(evt -> dataTable.getRows().forEach(tableRow -> {
            if (tableRow.getRecord().isActive()) {
                tableRow.select();
            } else {
                tableRow.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>()).addActionElement(new HeaderBarPlugin.ShowHideColumnsAction<>())).addPlugin(new RecordDetailsPlugin<>(cell -> new ContactDetails(cell).element())).addPlugin(new SelectionPlugin<>(ColorScheme.BLUE)).addPlugin(new RowMarkerPlugin<>(cellInfo -> ContactUiUtils.getBalanceColor(cellInfo.getRecord()))).addPlugin(new SortPlugin<>()).addPlugin(ColumnHeaderFilterPlugin.<Contact>create().addHeaderFilter("firstName", TextHeaderFilter.<Contact>create()).addHeaderFilter("email", TextHeaderFilter.<Contact>create()).addHeaderFilter("phone", TextHeaderFilter.<Contact>create()).addHeaderFilter("status", BooleanHeaderFilter.<Contact>create("Active", "Inactive", "Both")).addHeaderFilter("gender", EnumHeaderFilter.<Contact, Gender>create(Gender.values())).addHeaderFilter("balance", DoubleHeaderFilter.<Contact>create()).addHeaderFilter("eyeColor", SelectHeaderFilter.<Contact>create().appendChild(SelectOption.create("blue", "Blue")).appendChild(SelectOption.create("brown", "Brown")).appendChild(SelectOption.create("green", "Green")))).addPlugin(new GroupingPlugin<>(tableRow -> tableRow.getRecord().getGender().toString(), cellInfo -> {
        DominoElement.of(cellInfo.getElement()).style().setCssProperty("border-bottom", "1px solid #afafaf").setPadding(px.of(5)).addCss(ColorScheme.INDIGO.lighten_5().getBackground());
        return TextNode.of(cellInfo.getRecord().getGender().getLabel());
    }));
    LocalListDataStore<Contact> localListDataSource = new LocalListDataStore<Contact>().setSearchFilter(new ContactSearchFilter()).setRecordsSorter(new ContactSorter()).setPagination(scrollingPaginationPlugin.getPagination());
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataSource);
    element.appendChild(Card.create("ALL IN ONE", "Try all plugins and feature works together.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        List<Contact> data = subList(contacts, 0, 100);
        localListDataSource.setData(data);
        table.load();
        topPanel.update(data);
    });
}

Example 3 with Icon

use of org.dominokit.domino.ui.icons.Icon in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method tableHeaderBarPlugin.

@SampleMethod
private void tableHeaderBarPlugin() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName()))).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord()))).addColumn(ColumnConfig.<Contact>create("email", "Email").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    }));
    tableConfig.addPlugin(new SelectionPlugin<>());
    tableConfig.addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.highlight_off().clickable().setTooltip("Select Inactive").addClickListener(evt -> dataTable.getRows().forEach(item -> {
            if (!item.getRecord().isActive()) {
                item.select();
            } else {
                item.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.check_circle().clickable().setTooltip("Select Active").addClickListener(evt -> dataTable.getRows().forEach(tableRow -> {
            if (tableRow.getRecord().isActive()) {
                tableRow.select();
            } else {
                tableRow.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }));
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> defaultTable = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("HEADER BAR PLUGIN", "Adds a title and description for the table, and allow adding elements to the top right side of the table").setCollapsible().appendChild(new TableStyleActions(defaultTable)).appendChild(defaultTable).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts));
        defaultTable.load();
    });
}

Example 4 with Icon

use of org.dominokit.domino.ui.icons.Icon in project domino-ui-demo by DominoKit.

the class DialogsViewImpl method sample.

@SampleMethod
private void sample() {
    MessageDialog basicMessage = MessageDialog.createMessage("Here's a message!", () -> Notification.create("Dialog closed").show());
    MessageDialog headerAndMessage = MessageDialog.createMessage("Message header", "Here's a message body!", () -> Notification.create("Dialog closed").show());
    MessageDialog successMessage = MessageDialog.createMessage("Success Operation", "Well done! You successfully read this important alert message.", () -> Notification.create("Dialog closed").show()).success();
    MessageDialog errorMessage = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error();
    MessageDialog customColors = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error().setModalColor(Color.RED).setIconColor(Color.GREY, Color.WHITE);
    MessageDialog warningMessage = MessageDialog.createMessage("Warning", "Warning! Better check yourself, you're not looking too good.", () -> Notification.create("Dialog closed").show()).warning();
    Icon heart = Icons.ALL.favorite().style().addCss(Styles.font_72, Styles.m_b_15, Color.RED.getStyle()).get();
    MessageDialog customHeaderContent = MessageDialog.createMessage("Custom header", "You can customize the header content", () -> Notification.create("Dialog closed").show()).addOpenListener(() -> Animation.create(heart).duration(400).infinite().transition(Transition.PULSE).animate()).appendHeaderChild(heart);
    MessageDialog customContent = MessageDialog.createMessage("Custom content", "You can customize the dialog content", () -> Notification.create("Dialog closed").show()).appendChild(ListGroup.<IsElement<?>>create().setItemRenderer((listGroup, listItem) -> listItem.appendChild(listItem.getValue())).setItems(Arrays.asList(FlexLayout.create().css(Styles.padding_10).appendChild(FlexItem.create().setFlexGrow(1).appendChild(TextNode.of("Cras justo odio"))).appendChild(FlexItem.create().appendChild(Badge.create("14 new").setBackground(Color.PINK))), FlexLayout.create().css(Styles.padding_10).appendChild(FlexItem.create().setFlexGrow(1).appendChild(TextNode.of("Dapibus ac facilisis in"))).appendChild(FlexItem.create().appendChild(Badge.create("99 unread").setBackground(Color.PINK))), FlexLayout.create().css(Styles.padding_10).appendChild(FlexItem.create().setFlexGrow(1).appendChild(TextNode.of("Morbi leo risus"))).appendChild(FlexItem.create().appendChild(Badge.create("99+").setBackground(Color.CYAN))), FlexLayout.create().css(Styles.padding_10).appendChild(FlexItem.create().setFlexGrow(1).appendChild(TextNode.of("Porta ac consectetur ac"))).appendChild(FlexItem.create().appendChild(Badge.create("21").setBackground(Color.ORANGE))), FlexLayout.create().css(Styles.padding_10).appendChild(FlexItem.create().setFlexGrow(1).appendChild(TextNode.of("Vestibulum at eros"))).appendChild(FlexItem.create().appendChild(Badge.create("Pending").setBackground(Color.PURPLE))))));
    element.appendChild(Card.create("EXAMPLES").appendChild(Row.create().addColumn(Column.span6().appendChild(basicMessage).appendChild(Paragraph.create("A basic message")).appendChild(createDemoButton(basicMessage))).addColumn(Column.span6().appendChild(headerAndMessage).appendChild(Paragraph.create("Message with header")).appendChild(createDemoButton(headerAndMessage)))).appendChild(Row.create().addColumn(Column.span6().appendChild(successMessage).appendChild(Paragraph.create("Success message")).appendChild(createDemoButton(successMessage))).addColumn(Column.span6().appendChild(errorMessage).appendChild(Paragraph.create("Error message")).appendChild(createDemoButton(errorMessage)))).appendChild(Row.create().addColumn(Column.span6().appendChild(warningMessage).appendChild(Paragraph.create("Warning message")).appendChild(createDemoButton(warningMessage))).addColumn(Column.span6().appendChild(customColors).appendChild(Paragraph.create("Custom colors")).appendChild(createDemoButton(customColors)))).appendChild(Row.create().addColumn(Column.span6().appendChild(customHeaderContent).appendChild(Paragraph.create("Custom header content")).appendChild(createDemoButton(customHeaderContent))).addColumn(Column.span6().appendChild(customContent).appendChild(Paragraph.create("Custom content")).appendChild(createDemoButton(customContent)))).element());
}