Skip to content

Commit

Permalink
Wicket 10.x bootstrap 5.x panel style (#1016)
Browse files Browse the repository at this point in the history
* Align background classes with Bootstrap 5.3

* Add PanelStyle feature

- text and background is set to the same combination as in BS doc:
https://getbootstrap.com/docs/5.3/utilities/background/

- border uses same color as background
- samples show panel styles - added PanelTypesPanel

References #1006

* Add PanelType parameter to the constructor
  • Loading branch information
vrozkovec authored Dec 11, 2023
1 parent 84aa84e commit 4fff955
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</head>
<body>
<wicket:panel>
<div class="card-header" wicket:enclosure child="panelTitle">
<div class="card-header" wicket:id="panelHeader">
<h3 class="card-title"><span wicket:id="panelTitle"></span></h3>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,19 @@

import org.apache.wicket.Component;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.basic.EnclosureContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.EmptyPanel;
import org.apache.wicket.markup.html.panel.GenericPanel;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;

import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Radius;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Type;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
import de.agilecoders.wicket.core.util.Attributes;
import de.agilecoders.wicket.core.util.Components;

Expand All @@ -28,20 +34,33 @@
*/
public class BootstrapGenericPanel<T> extends GenericPanel<T>{

private static final String _PANEL_HEADER_ID = "panelHeader";
private static final String _PANEL_TITLE_ID = "panelTitle";
private static final String _PANEL_IMAGE_ID = "panelImageTop";
private static final String _PANEL_BODY_ID = "panelBody";
private static final String _PANEL_FOOTER_ID = "panelFooter";

private final IModel<String> titleModel;

private PanelType panelType;

/**
* Construct.
*
* @param id the component id
*/
public BootstrapGenericPanel(String id){
this(id, null, null);
this(id, null, null, null);
}

/**
* Construct.
*
* @param id the component id
* @param panelType styling of the panel
*/
public BootstrapGenericPanel(String id, PanelType panelType){
this(id, null, null, panelType);
}

/**
Expand All @@ -52,9 +71,31 @@ public BootstrapGenericPanel(String id){
* @param panelTitleModel the title model
*/
public BootstrapGenericPanel(String id, IModel<T> model, IModel<String> panelTitleModel) {
this(id, model, panelTitleModel, null);
}

/**
* Construct.
*
* @param id the component id
* @param model the component model
* @param panelTitleModel the title model
* @param panelType styling of the panel
*/
public BootstrapGenericPanel(String id, IModel<T> model, IModel<String> panelTitleModel, PanelType panelType) {
super(id, model);

this.titleModel = panelTitleModel;
this.panelType = panelType;
}

/**
* @param panelType
* @return this for chaining
*/
public BootstrapGenericPanel<T> withPanelType(PanelType panelType) {
this.panelType = panelType;
return this;
}

@Override
Expand All @@ -64,7 +105,10 @@ protected void onInitialize()

//Panel Title
Label panelTitle = newTitleLabel(_PANEL_TITLE_ID, getModel(), getTitleModel());
add(panelTitle);
EnclosureContainer header = new EnclosureContainer(_PANEL_HEADER_ID, panelTitle);
header.setRenderBodyOnly(false);
header.add(panelTitle);
add(header);
Components.hideIfModelIsEmpty(panelTitle);

//Top Panel Image
Expand All @@ -77,11 +121,37 @@ protected void onInitialize()
add(panelBody);
Components.hideIfModelIsEmpty(panelBody);


//Panel Footer
Panel panelFooter = newFooterPanel(_PANEL_FOOTER_ID, getModel());
add(panelFooter);
Components.hideIfModelIsEmpty(panelFooter);

header.add(new BackgroundColorBehavior(() -> panelType.getBackgroundColor()) {
@Override
public boolean isEnabled(Component component) {
return isCustomPanelStyleSet();
}
});
header.add(new ColorBehavior(() -> panelType.getTextColor()) {
@Override
public boolean isEnabled(Component component) {
return isCustomPanelStyleSet();
}
});

add(new BorderBehavior() {
public void onConfigure(Component component) {
color(panelType.getBorderColor());
}
@Override
public boolean isEnabled(Component component) {
return isCustomPanelStyleSet();
}
}.type(Type.All).radius(Radius.All));
}

private boolean isCustomPanelStyleSet() {
return !PanelType.Default.equals(panelType) && panelType != null;
}

@Override
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You 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 de.agilecoders.wicket.core.markup.html.bootstrap.panel;

import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Color;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;

/**
* Automatically sets panel's header background and border.
*/
public enum PanelType
{
Default(null, null, null),
Primary(BackgroundColorBehavior.Color.Primary, ColorBehavior.Color.White, BorderBehavior.Color.Primary),
Primary_subtle(BackgroundColorBehavior.Color.Primary_subtle, ColorBehavior.Color.Primary_emphasis, BorderBehavior.Color.Primary_subtle),
Secondary(BackgroundColorBehavior.Color.Secondary, ColorBehavior.Color.White, BorderBehavior.Color.Secondary),
Secondary_subtle(BackgroundColorBehavior.Color.Secondary_subtle, ColorBehavior.Color.Secondary_emphasis, BorderBehavior.Color.Secondary_subtle),
Success(BackgroundColorBehavior.Color.Success, ColorBehavior.Color.White, BorderBehavior.Color.Success),
Success_subtle(BackgroundColorBehavior.Color.Success_subtle, ColorBehavior.Color.Success_emphasis, BorderBehavior.Color.Success_subtle),
Danger(BackgroundColorBehavior.Color.Danger, ColorBehavior.Color.White, BorderBehavior.Color.Danger),
Danger_subtle(BackgroundColorBehavior.Color.Danger_subtle, ColorBehavior.Color.Danger_emphasis, BorderBehavior.Color.Danger_subtle),
Warning(BackgroundColorBehavior.Color.Warning, ColorBehavior.Color.Black, BorderBehavior.Color.Warning),
Warning_subtle(BackgroundColorBehavior.Color.Warning_subtle, ColorBehavior.Color.Warning_emphasis, BorderBehavior.Color.Warning_subtle),
Info(BackgroundColorBehavior.Color.Info, ColorBehavior.Color.White, BorderBehavior.Color.Info),
Info_subtle(BackgroundColorBehavior.Color.Info_subtle, ColorBehavior.Color.Info_emphasis, BorderBehavior.Color.Info_subtle),
Light(BackgroundColorBehavior.Color.Light, ColorBehavior.Color.Black, BorderBehavior.Color.Light),
Light_subtle(BackgroundColorBehavior.Color.Light_subtle, ColorBehavior.Color.Light_emphasis, BorderBehavior.Color.Light_subtle),
Dark(BackgroundColorBehavior.Color.Dark, ColorBehavior.Color.White, BorderBehavior.Color.Dark),
Dark_subtle(BackgroundColorBehavior.Color.Dark_subtle, ColorBehavior.Color.Dark_emphasis, BorderBehavior.Color.Dark_subtle),
Body_secondary(BackgroundColorBehavior.Color.Body_secondary, null, BorderBehavior.Color.Primary),
Body_tertiary(BackgroundColorBehavior.Color.Body_tertiary, null, BorderBehavior.Color.Primary),
Body(BackgroundColorBehavior.Color.Body, ColorBehavior.Color.Body, BorderBehavior.Color.Primary),
Black(BackgroundColorBehavior.Color.Black, ColorBehavior.Color.White, BorderBehavior.Color.Black),
White(BackgroundColorBehavior.Color.White, ColorBehavior.Color.Black, BorderBehavior.Color.White),
Transparent(BackgroundColorBehavior.Color.Transparent, ColorBehavior.Color.Body, null);


private BackgroundColorBehavior.Color backgroundColor;
private ColorBehavior.Color textColor;
private BorderBehavior.Color borderColor;

private PanelType(BackgroundColorBehavior.Color backgroundColor, ColorBehavior.Color textColor, Color borderColor) {
this.backgroundColor = backgroundColor;
this.textColor = textColor;
this.borderColor = borderColor;
}

/**
* @return the backgroundColor
*/
public BackgroundColorBehavior.Color getBackgroundColor() {
return backgroundColor;
}

/**
* @return the textColor
*/
public ColorBehavior.Color getTextColor() {
return textColor;
}

/**
* @return the borderColor
*/
public BorderBehavior.Color getBorderColor() {
return borderColor;
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,11 @@ <h2>Cards</h2>
<div class="bs-docs-example">
<div wicket:id="card-demo" style="width: 18rem;"></div>
</div>

<h3 class="mt-3">Card styles</h3>
<div class="bs-docs-example">
<div wicket:id="card-styles-demo"></div>
</div>
</section>

<section id="radioChoices">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
import de.agilecoders.wicket.samples.components.basecss.ButtonGroups;
import de.agilecoders.wicket.samples.panels.PanelTypesPanel;
import de.agilecoders.wicket.samples.panels.SimpleCard;

/**
Expand Down Expand Up @@ -92,6 +93,7 @@ public ComponentsPage(PageParameters parameters) {
addProgressBars();

add(newCard("card-demo"));
add(newCardStyles("card-styles-demo"));
}

private void addProgressBars() {
Expand Down Expand Up @@ -241,7 +243,7 @@ public void onClick() {
add(badgeButton);
}

private Component newCard(String markupId) {
private Component newCard(String markupId) {
return new SimpleCard(markupId)
.add(new BorderBehavior()
.type(BorderBehavior.Type.All)
Expand All @@ -250,6 +252,10 @@ private Component newCard(String markupId) {
.add(ColorBehavior.success());
}

private Component newCardStyles(String markupId) {
return new PanelTypesPanel(markupId);
}

private Component newTabs(String markupId) {
return new AjaxBootstrapTabbedPanel<>(markupId, List.of(
createTab("Section 1"), createTab("Section 2"), createTab("Section 3")
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<body>
<wicket:panel>
<div class="row">
<div wicket:id="panelTypes" class="col-lg-4 mt-3">
<h4 wicket:id="panelType"></h4>
<div wicket:id="panel"></div>
</div>
</div>
</wicket:panel>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package de.agilecoders.wicket.samples.panels;

import java.util.Arrays;

import org.apache.wicket.Component;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ExternalImage;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.PropertyListView;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;

import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapButton;
import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
import de.agilecoders.wicket.core.markup.html.bootstrap.panel.PanelType;

/**
* @author Jan Ferko
*/
public class PanelTypesPanel extends Panel {

public PanelTypesPanel(String id) {
super(id);
}

@Override
protected void onInitialize() {
super.onInitialize();

add(new PropertyListView<PanelType>("panelTypes", Arrays.asList(PanelType.values())) {
@Override
protected void populateItem(ListItem<PanelType> item) {
item.add(new Label("panelType", item.getModelObject().name()));
item.add(new SimpleCard("panel").withPanelType(item.getModelObject()));
}
});
}
}

0 comments on commit 4fff955

Please sign in to comment.