diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0574711c..ae48a9f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 4.2.0
+* Improved styling
+ * Overlay now has the same minimum width as the underlying DateRangePicker
+ * The default is ``20em``, this can be changed using ``--date-range-picker-min-width``
+ * Layouts inside the overlay now use the full available width
+ * Removed excess top padding from input components
+ * Refactored CSS class names (should cause less conflicts now)
+* Updated to Vaadin 24.5
+
## 4.1.1
* Only use client-side locale for formatting when no ``formatLocale`` has been set #353
@@ -13,7 +22,6 @@
* Various dependency updates including Vaadin 24.1
## 4.0.0
-
⚠️This release contains breaking changes
* Adds support for Vaadin 24+, drops support for Vaadin 23
@@ -32,12 +40,10 @@
* Vaadin 23.3
## 3.0.1
-
* Updated dependencies
* Vaadin 23.2
## 3.0.0
-
⚠️This release contains breaking changes
* Adds support for Vaadin 23+, drops support for Vaadin 14 #155
diff --git a/pom.xml b/pom.xml
index a523ffa1..2734c091 100644
--- a/pom.xml
+++ b/pom.xml
@@ -6,7 +6,7 @@
software.xdev
vaadin-date-range-picker-root
- 4.1.2-SNAPSHOT
+ 4.2.0-SNAPSHOT
pom
diff --git a/vaadin-date-range-picker-demo/pom.xml b/vaadin-date-range-picker-demo/pom.xml
index 8c63aaf1..4baca170 100644
--- a/vaadin-date-range-picker-demo/pom.xml
+++ b/vaadin-date-range-picker-demo/pom.xml
@@ -7,11 +7,11 @@
software.xdev
vaadin-date-range-picker-root
- 4.1.2-SNAPSHOT
+ 4.2.0-SNAPSHOT
vaadin-date-range-picker-demo
- 4.1.2-SNAPSHOT
+ 4.2.0-SNAPSHOT
jar
diff --git a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java
index 89ddae6d..8bb3e587 100644
--- a/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java
+++ b/vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java
@@ -3,8 +3,10 @@
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.dom.ThemeList;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.Lumo;
@@ -15,15 +17,20 @@ public class DateRangePickerStyledDemo extends AbstractSimpleChangeDemo
{
public static final String NAV = "styled";
- private final Button btnDarkMode = new Button("Toogle theme");
+ private final Button btnDarkMode = new Button("Toggle theme");
public DateRangePickerStyledDemo()
{
this.initUI();
}
+ @SuppressWarnings("checkstyle:MagicNumber")
protected void initUI()
{
+ this.dateRangePicker.setWidthFull();
+
+ this.taResult.setSizeFull();
+
this.btnDarkMode.addClickListener(ev ->
{
final ThemeList themeList = UI.getCurrent().getElement().getThemeList();
@@ -40,11 +47,13 @@ protected void initUI()
this.updateBtnDarkMode();
});
- this.taResult.setSizeFull();
+ final SplitLayout splitLayout = new SplitLayout(this.dateRangePicker, new Div());
+ splitLayout.setSplitterPosition(25);
+ splitLayout.setWidthFull();
this.getContent().setPadding(false);
this.getContent().add(
- new VerticalLayout(this.dateRangePicker),
+ splitLayout,
new VerticalLayout(this.taResult, this.btnDarkMode));
this.getContent().getChildren().forEach(comp -> ((HasSize)comp).setHeight("50%"));
this.getContent().setHeightFull();
diff --git a/vaadin-date-range-picker/pom.xml b/vaadin-date-range-picker/pom.xml
index 576a5c7e..d14b6289 100644
--- a/vaadin-date-range-picker/pom.xml
+++ b/vaadin-date-range-picker/pom.xml
@@ -6,7 +6,7 @@
software.xdev
vaadin-date-range-picker
- 4.1.2-SNAPSHOT
+ 4.2.0-SNAPSHOT
jar
vaadin-date-range-picker
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java
index 01b3672a..a5937a73 100644
--- a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java
@@ -219,7 +219,6 @@ protected void initUI()
this.setId("DateRangePickerID" + nextID.incrementAndGet());
this.btnOverview.addClassNames(DateRangePickerStyles.BUTTON, DateRangePickerStyles.CLICKABLE);
- this.btnOverview.setMinWidth("20em");
this.btnOverview.setWidthFull();
this.btnOverview.setDisableOnClick(true);
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java
index 34327d65..9935de57 100644
--- a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerOverlay.java
@@ -55,7 +55,7 @@ public class DateRangePickerOverlay extends Composite dateRangePicker;
protected DateRangeModel currentModel;
@@ -84,14 +84,16 @@ protected void initUI()
this.btnBackwardRange
.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
- this.cbDateRange.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+ this.cbDateRange.addClassNames(
+ DateRangePickerStyles.FLEX_CHILD_AUTOGROW,
+ DateRangePickerStyles.PADDING_TOP_XS);
this.setTextFieldDefaultWidthFlexConform(this.cbDateRange);
this.btnForwardRange
.addClassNames(DateRangePickerStyles.FLEX_CHILD_CONTENTSIZE, DateRangePickerStyles.CLICKABLE);
final HorizontalLayout hlRange = new HorizontalLayout();
- hlRange.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+ hlRange.addClassNames(DateRangePickerStyles.OVERLAY_LAYOUT_ROW);
hlRange.setAlignItems(Alignment.BASELINE);
hlRange.setJustifyContentMode(JustifyContentMode.BETWEEN);
hlRange.setMargin(false);
@@ -103,13 +105,12 @@ protected void initUI()
this.initDatePicker(this.dpEnd);
final HorizontalLayout hlDatepickers = new HorizontalLayout();
- hlDatepickers.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.FLEX_CONTAINER);
+ hlDatepickers.addClassNames(DateRangePickerStyles.OVERLAY_LAYOUT_ROW);
hlDatepickers.setMargin(false);
hlDatepickers.setSpacing(true);
hlDatepickers.setPadding(false);
hlDatepickers.add(this.dpStart, this.dpEnd);
- this.addClassName(DateRangePickerStyles.FLEX_CONTAINER);
this.add(hlRange, hlDatepickers);
this.getContent().setPadding(true);
}
@@ -117,7 +118,7 @@ protected void initUI()
protected void initDatePicker(final DatePicker dp)
{
this.setTextFieldDefaultWidthFlexConform(dp);
- dp.addClassName(DateRangePickerStyles.FLEX_CHILD_AUTOGROW);
+ dp.addClassNames(DateRangePickerStyles.FLEX_CHILD_AUTOGROW, DateRangePickerStyles.PADDING_TOP_XS);
dp.setWeekNumbersVisible(true);
}
diff --git a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java
index e7d3093d..78c4af56 100644
--- a/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java
+++ b/vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePickerStyles.java
@@ -31,12 +31,14 @@ private DateRangePickerStyles()
public static final String BUTTON = "date-range-picker-button";
public static final String OVERLAY_BASE = "date-range-picker-overlay-base";
public static final String OVERLAY_LAYOUT = "date-range-picker-overlay-layout";
+ public static final String OVERLAY_LAYOUT_ROW = "date-range-picker-overlay-layout-row";
/*
* FLEX
*/
- public static final String FLEX_CONTAINER = "flex-container";
+ public static final String FLEX_CHILD_AUTOGROW = "date-range-picker-flex-child-autogrow";
+ public static final String FLEX_CHILD_CONTENTSIZE = "date-range-picker-flex-child-contentsize";
- public static final String FLEX_CHILD_AUTOGROW = "flex-child-autogrow";
- public static final String FLEX_CHILD_CONTENTSIZE = "flex-child-contentsize";
+ // Used to remove Vaadin's default padding which adds a lot of blank space to the overlay
+ public static final String PADDING_TOP_XS = "date-range-picker-padding-top-xs";
}
diff --git a/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css b/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css
index e520e739..5e4547c7 100644
--- a/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css
+++ b/vaadin-date-range-picker/src/main/resources/META-INF/resources/frontend/styles/dateRangePicker.css
@@ -6,6 +6,7 @@
margin-bottom: 0;
border-radius: 0;
color: var(--lumo-body-text-color);
+ min-width: var(--date-range-picker-min-width, 20em);
}
.date-range-picker-overlay-base {
@@ -13,6 +14,7 @@
}
.date-range-picker-overlay-layout {
+ display: flex;
position: absolute;
left: 0;
right: 0;
@@ -20,16 +22,23 @@
background-color: var(--lumo-base-color);
border: 1px solid var(--lumo-contrast-5pct);
border-top: none;
+ min-width: var(--date-range-picker-min-width, 20em);
}
-.flex-container {
+.date-range-picker-overlay-layout-row {
+ width: 100%;
+ flex: 1 1 auto;
display: flex;
}
-.flex-child-autogrow {
+.date-range-picker-flex-child-autogrow {
flex: 1 1 auto;
}
-.flex-child-contentsize {
+.date-range-picker-flex-child-contentsize {
flex: 0 1 auto;
}
+
+.date-range-picker-padding-top-xs {
+ padding-top: var(--lumo-space-xs);
+}