Examples with Style org.dominokit.domino.ui.style.Style used on opensource projects

Example 1 with Style

use of org.dominokit.domino.ui.style.Style 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 2 with Style

use of org.dominokit.domino.ui.style.Style in project domino-ui-demo by DominoKit.

the class ProfileViewImpl method init.

@Override
protected HTMLDivElement init() {
    profile = Card.createProfile("Vegegoku", "vegegoku@bo3.com");
    profile.style().addCss("profile-card").addCss("classy-card").addCss("bg-theme");
    profile.setHeaderBackground(Color.TRANSPARENT);
    profile.setBodyBackground(Color.TRANSPARENT);
    profile.getHeader().style().removeCss("bg-theme");
    profile.setBodyPadding("10px");
    profile.getBody().styler(style -> style.removeCss("bg-theme"));
    profile.getHeaderTitle().setAttribute("id", "demo-profile");
    profile.appendChild(Elements.img(GWT.getModuleBaseURL() + "/images/user.png").style("border-radius:50%;"));
    HeaderAction headerAction = HeaderAction.create(Icons.ALL.more_vert().clickable());
    DropDownMenu dropDownMenu = DropDownMenu.create(headerAction).setPosition(DropDownPosition.BOTTOM).appendChild(DropdownAction.create("Action 1").addSelectionHandler(value -> Notification.createInfo(value).show())).appendChild(DropdownAction.create("Action 2").addSelectionHandler(value -> Notification.createInfo(value).show()));
    headerAction.addClickListener(evt -> {
        dropDownMenu.open();
        evt.stopPropagation();
    });
    profile.addHeaderAction(headerAction);
    Style.of(profile).setHeight("186px");
    profile.element().appendChild(div().css("bg-classy").element());
    try {
        CodeResource.INSTANCE.build().getText(new ResourceCallback<TextResource>() {

            @Override
            public void onError(ResourceException e) {
                DomGlobal.console.error("failed ", e);
            }

            @Override
            public void onSuccess(TextResource resource) {
                profile.getHeaderTitle().appendChild(small().textContent(resource.getText()).element());
                DomGlobal.console.info(resource.getText());
            }
        });
    } catch (Exception e) {
        DomGlobal.console.error("Failed to load build time : ", e);
    }
    return profile.element();
}

Example 3 with Style

use of org.dominokit.domino.ui.style.Style in project domino-ui-demo by DominoKit.

the class LayoutViewImpl method init.

@Override
protected HTMLDivElement init() {
    Search search = Search.create();
    layout.spanLeftPanelUp().autoFixLeftPanel().getNavigationBar().insertBefore(search, layout.getNavigationBar().firstChild());
    HtmlContentBuilder<HTMLAnchorElement> searchButton = a().css("js-right-sidebar").add(Icons.ALL.search());
    searchButton.on(EventType.click, event -> search.open());
    layout.getTopBar().appendChild(li().css(Styles.pull_right).add(searchButton).element());
    layout.getTopBar().appendChild(DominoElement.of(li().css(Styles.pull_right).style("padding-top: 3px;").add(makeGithubLink())).showOn(ScreenMedia.MEDIUM_AND_UP).hideOn(ScreenMedia.SMALL_AND_DOWN).element());
    layout.getTopBar().appendChild(DominoElement.of(li().add(a().attr("href", "https://www.patreon.com/bePatron?u=30748189").css("d-patreon").add(img("/images/patreon-2296036-1911995.png")))).showOn(ScreenMedia.MEDIUM_AND_UP).hideOn(ScreenMedia.SMALL_AND_DOWN));
    ;
    layout.getTopBar().appendChild(DominoElement.of(li().css(Styles.pull_right).add(a().css(Styles.m_t_10).add(Icons.ALL.dots_vertical_mdi().clickable().setColor(Color.WHITE)))).showOn(ScreenMedia.SMALL_AND_DOWN).hideOn(ScreenMedia.MEDIUM_AND_UP).setDropMenu(Menu.<String>create().setUseSmallScreensDirection(false).appendChild(MenuItem.<String>create("Github").addLeftAddOn(FlexItem.of(Icons.ALL.github_circle_mdi())).addSelectionHandler(selectable -> DomGlobal.window.open("https://github.com/DominoKit/domino-ui", "_blank"))).appendChild(MenuItem.<String>create("Patreon").addLeftAddOn(FlexItem.of(Icons.ALL.patreon_mdi())).addSelectionHandler(selectable -> DomGlobal.window.open("https://www.patreon.com/bePatron?u=30748189", "_blank")))));
    layout.showFooter();
    Row footerRow = createFooterRow();
    HTMLDivElement copyrightsElement = div().css(Theme.currentTheme.getScheme().darker_3().getBackground()).css(Styles.align_center).add(p().style("line-height: 45px; height: 45px; margin: 0px;").textContent("© 2018 Copyright DominoKit")).element();
    layout.getFooter().appendChild(footerRow);
    layout.getFooter().appendChild(copyrightsElement);
    Theme.addThemeChangeHandler((oldTheme, newTheme) -> Style.of(copyrightsElement).removeCss(oldTheme.getScheme().darker_3().getBackground()).addCss(newTheme.getScheme().darker_3().getBackground()));
    DomGlobal.document.body.appendChild(ScrollTop.create(Icons.ALL.arrow_upward()).setBottom(60).element());
    layout.getLeftPanel().appendChild(profileDiv).appendChild(menuDiv);
    layout.getContentPanel().style().setMinHeight("calc(100vh - 365px)");
    loader = Loader.create(layout.getContentPanel(), LoaderEffect.PULSE);
    return layout.element();
}

Example 4 with Style

use of org.dominokit.domino.ui.style.Style in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method editableTable.

@SampleMethod
private void editableTable() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("edit_save", "").styleCell(element -> element.style.setProperty("vertical-align", "top")).setCellRenderer(cell -> Icons.ALL.pencil_mdi().clickable().setTooltip("Edit").addClickListener(evt -> cell.getTableRow().edit()).element()).setEditableCellRenderer(cell -> Icons.ALL.content_save_mdi().clickable().setTooltip("Save").addClickListener(evt -> {
        if (cell.getTableRow().validate().isValid()) {
            cell.getTableRow().save();
        }
    }).element())).addColumn(ColumnConfig.<Contact>create("id", "#").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).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();
        }
    }).setEditableCellRenderer(cell -> {
        CheckBox activeCheckBox = CheckBox.create("").setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().isActive());
        cell.setDirtyRecordHandler(dirty -> dirty.setActive(activeCheckBox.getValue()));
        return activeCheckBox.element();
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setEditableCellRenderer(cell -> {
        TextBox nameBox = TextBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getName());
        cell.setDirtyRecordHandler(dirty -> dirty.setName(nameBox.getValue()));
        return nameBox.element();
    })).addColumn(ColumnConfig.<Contact>create("gender", "Gender").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<Gender> genderSelect = Select.<Gender>create().styler(style -> style.setMinWidth("100px")).setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(Gender.male, "Male", "Male")).appendChild(SelectOption.create(Gender.female, "female", "female")).value(cell.getRecord().getGender());
        cell.setDirtyRecordHandler(dirty -> dirty.setGender(genderSelect.getValue()));
        return genderSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<EyeColor> eyeColorSelect = Select.<EyeColor>create().setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(EyeColor.blue, "Blue", "Blue")).appendChild(SelectOption.create(EyeColor.brown, "Brown", "Brown")).appendChild(SelectOption.create(EyeColor.green, "Green", "Green")).value(cell.getRecord().getEyeColor());
        cell.setDirtyRecordHandler(dirty -> dirty.setEyeColor(eyeColorSelect.getValue()));
        return eyeColorSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getBalanceElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        DoubleBox doubleBox = DoubleBox.create().setFieldStyle(FieldStyle.ROUNDED).setMaxValue(4000.0).value(cell.getRecord().getBalance());
        cell.setDirtyRecordHandler(dirty -> dirty.setBalance(doubleBox.getValue().doubleValue()));
        cell.setCellValidator(doubleBox::validate);
        return doubleBox.element();
    })).addColumn(ColumnConfig.<Contact>create("email", "Email").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail())).setEditableCellRenderer(cell -> {
        EmailBox emailBox = EmailBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getEmail());
        cell.setDirtyRecordHandler(dirty -> dirty.setEmail(emailBox.getValue()));
        return emailBox.element();
    })).addColumn(ColumnConfig.<Contact>create("phone", "Phone").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone())).setEditableCellRenderer(cell -> {
        TelephoneBox telephoneBox = TelephoneBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getPhone());
        cell.setDirtyRecordHandler(dirty -> dirty.setPhone(telephoneBox.getValue()));
        return telephoneBox.element();
    })).addColumn(ColumnConfig.<Contact>create("badges", "Badges").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).setDirtyRecordHandlers(Contact::new, (originalRecord, dirtyRecord) -> {
        originalRecord.setActive(dirtyRecord.isActive());
        originalRecord.setPhone(dirtyRecord.getPhone());
        originalRecord.setEmail(dirtyRecord.getEmail());
        originalRecord.setBalance(dirtyRecord.getBalance());
        originalRecord.setEyeColor(dirtyRecord.getEyeColor());
        originalRecord.setGender(dirtyRecord.getGender());
        originalRecord.setName(dirtyRecord.getName());
    });
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("EDITABLE TABLE", "Render cells as editable fields and save the row data.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts));
    });
}

Example 5 with Style

use of org.dominokit.domino.ui.style.Style in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method treeGridFullParentSpan.

@SampleMethod
private void treeGridFullParentSpan() {
    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("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("");
    })).onUtilityColumn(utilityColumn -> {
        utilityColumn.setTitle("First name").setSortable(true, "id");
    }).setMultiSelect(true).addPlugin(new SortPlugin<>()).addPlugin(new SelectionPlugin<>()).addPlugin(new RecordDetailsPlugin<>(cell -> new ContactDetails(cell).element())).addPlugin(new RowMarkerPlugin<>(tableCellInfo -> ContactUiUtils.getBalanceColor(tableCellInfo.getRecord()))).addPlugin(new TreeGridPlugin<Contact>((parent, itemsConsumer) -> {
        itemsConsumer.accept(Optional.ofNullable(parent.getFriends()));
    }).setIndentColumnElementSupplier(tableRow -> Paragraph.create(tableRow.getRecord().getName()).setMarginBottom("0").element()).setParentRowCellsSupplier((dataTable, tableRow) -> {
        HTMLTableCellElement cellElement = DominoElement.of(td()).setAttribute("colspan", "8").element();
        RowCell<Contact> rowCell = new RowCell<>(new CellRenderer.CellInfo<>(tableRow, cellElement), dataTable.getTableConfig().getColumnByName("id"));
        return Collections.singletonList(rowCell);
    }).setIndent(60));
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("TREE GRID PLUGIN - Full PARENT SPAN", "Render records in tree style with expand and collapse features").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(contacts.subList(0, 25));
        table.load();
    });
}