33 fix dark theme

README.md

@@ -17,8 +17,12 @@ A Vaadin Flow DateRangePicker implementation
 * Run ``mvn jetty:run``
 * Open http://localhost:8080
 
-Example:<br/>
-![demo](demo.gif)
+
+<details>
+  <summary>Show example</summary>
+
+  ![demo](demo.gif)
+</details>
 
 
 ## Releasing
@@ -27,7 +31,7 @@ If the ``develop`` is ready for release, create a pull request to the ``master``
 When the release is finished do the following:
 * Merge the auto-generated PR (with the incremented version number) back into the ``develop``
 * Add the release notes to the [GitHub release](https://github.com/xdev-software/vaadin-date-range-picker/releases/latest)
-* Upload the generated release asset zip into the [Vaadin Directory](https://vaadin.com/directory)
+* Upload the generated release asset zip into the [Vaadin Directory](https://vaadin.com/directory) and update the component there
 
 ## Dependencies and Licenses
 View the [license of the current project](LICENSE) or the [summary including all dependencies](https://xdev-software.github.io/vaadin-date-range-picker/dependencies/)

vaadin-date-range-picker-demo/pom.xml

@@ -73,6 +73,8 @@
 	</dependencies>
 
 	<build>
+		<finalName>${project.artifactId}</finalName>
+
 		<plugins>
 			<!-- Jetty plugin for easy testing without a server -->
 			<plugin>

vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/HomeView.java

@@ -16,6 +16,7 @@
 import software.xdev.vaadin.daterange_picker.example.DateRangePickerCustomizedDemo;
 import software.xdev.vaadin.daterange_picker.example.DateRangePickerLocalizedDemo;
 import software.xdev.vaadin.daterange_picker.example.DateRangePickerParameterDemo;
+import software.xdev.vaadin.daterange_picker.example.DateRangePickerStyledDemo;
 
 @PageTitle("DateRangePicker Examples")
 @Route("")
@@ -31,7 +32,6 @@ public HomeView()
 				final Anchor anchor = new Anchor(example.getRoute(), example.getName());
 
 				final Span spDesc = new Span(example.getDesc());
-				spDesc.getStyle().set("font-style", "italic");
 				spDesc.getStyle().set("font-size", "90%");
 
 				final VerticalLayout vl = new VerticalLayout(anchor, spDesc);
@@ -54,8 +54,9 @@ protected void onAttach(final AttachEvent attachEvent)
 	{
 		// @formatter:off
 		this.grExamples.setItems(Arrays.asList(
+			new Example(DateRangePickerStyledDemo.NAV, "Styled-Demo", "dark mode 🌑  and more"),
 			new Example(DateRangePickerParameterDemo.NAV, "Parameter-Demo", "configuration is stored in QueryParameters"),
-			new Example(DateRangePickerLocalizedDemo.NAV, "Localized-Demo", "simple localization"),
+			new Example(DateRangePickerLocalizedDemo.NAV, "Localized-Demo", "🌐 simple localization"),
 			new Example(DateRangePickerCustomizedDemo.NAV, "Customized-Demo", "usage of a customized DateRange")
 		));
 		// @formatter:on

vaadin-date-range-picker-demo/src/main/java/software/xdev/vaadin/daterange_picker/example/DateRangePickerStyledDemo.java

@@ -0,0 +1,98 @@
+package software.xdev.vaadin.daterange_picker.example;
+
+import java.time.LocalDate;
+import java.util.Arrays;
+import java.util.List;
+
+import com.vaadin.flow.component.Composite;
+import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.dom.ThemeList;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.theme.lumo.Lumo;
+
+import software.xdev.vaadin.daterange_picker.business.DateRangeModel;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRange;
+import software.xdev.vaadin.daterange_picker.business.SimpleDateRanges;
+import software.xdev.vaadin.daterange_picker.ui.DateRangePicker;
+
+
+@Route(DateRangePickerStyledDemo.NAV)
+public class DateRangePickerStyledDemo extends Composite<VerticalLayout>
+{
+	public static final String NAV = "styled";
+
+	protected static final List<SimpleDateRange> DATERANGE_VALUES = Arrays.asList(SimpleDateRanges.allValues());
+
+	private final DateRangePicker<SimpleDateRange> dateRangePicker =
+		new DateRangePicker<>(
+			() -> new DateRangeModel<>(LocalDate.now(), LocalDate.now(), SimpleDateRanges.TODAY),
+			DATERANGE_VALUES);
+
+	private final TextArea taResult =
+		new TextArea("ValueChangeEvent", "Change something in the datepicker to see the result");
+
+	private final Button btnDarkMode = new Button("Toogle theme");
+
+	/*
+	 * Fields
+	 */
+
+	public DateRangePickerStyledDemo()
+	{
+		this.initUI();
+	}
+
+	protected void initUI()
+	{
+		this.btnDarkMode.addClickListener(ev ->
+		{
+			final ThemeList themeList = UI.getCurrent().getElement().getThemeList();
+
+			if(themeList.contains(Lumo.DARK))
+			{
+				themeList.remove(Lumo.DARK);
+			}
+			else
+			{
+				themeList.add(Lumo.DARK);
+			}
+
+			this.updateBtnDarkMode();
+		});
+
+		this.taResult.setSizeFull();
+
+		this.getContent().setPadding(false);
+		this.getContent().add(new VerticalLayout(this.dateRangePicker), new VerticalLayout(this.taResult, this.btnDarkMode));
+		this.getContent().getChildren().forEach(comp -> ((HasSize)comp).setHeight("50%"));
+		this.getContent().setHeightFull();
+
+		this.dateRangePicker.addValueChangeListener(ev ->
+		{
+			final DateRangeModel<SimpleDateRange> modell = ev.getValue();
+
+			this.taResult.clear();
+			// @formatter:off
+			this.taResult.setValue(
+					"DateRange: " + modell.getDateRange().getKey() + "\r\n" +
+					"Start: " + modell.getStart() + "\r\n" +
+					"End: " + modell.getEnd()
+				);
+			// @formatter:on
+		});
+
+		this.updateBtnDarkMode();
+	}
+
+	protected void updateBtnDarkMode()
+	{
+		final boolean isDarkMode = UI.getCurrent().getElement().getThemeList().contains(Lumo.DARK);
+		this.btnDarkMode.setText(!isDarkMode ? "Enter the darkness" : "Turn the light on");
+		this.btnDarkMode.setIcon(!isDarkMode ? VaadinIcon.MOON_O.create() : VaadinIcon.SUN_O.create());
+	}
+}

vaadin-date-range-picker/src/main/java/software/xdev/vaadin/daterange_picker/ui/DateRangePicker.java

@@ -80,7 +80,7 @@ protected static synchronized int getNextID()
 	 */
 	protected boolean expanded = false;
 	protected DateRangeModel<D> model;
-		
+
 	/*
 	 * Config
 	 */
@@ -172,14 +172,15 @@ public DateRangePicker<D> withDateRangeLocalizerFunction(final ItemLabelGenerato
 		this.dateRangeLocalizerFunction = dateRangeLocalizerFunction;
 		return this;
 	}
-			
+
 	public ItemLabelGenerator<D> getDateRangeLocalizerFunction()
 	{
 		return this.dateRangeLocalizerFunction;
 	}
 
 	/**
 	 * Shortcut for {@link DateRangePicker#setStartLabel(String)}
+	 * 
 	 * @param label
 	 * @return
 	 */
@@ -191,6 +192,7 @@ public DateRangePicker<D> withStartLabel(final String label)
 
 	/**
 	 * Shortcut for {@link DateRangePicker#setEndLabel(String)}
+	 * 
 	 * @param label
 	 * @return
 	 */
@@ -202,6 +204,7 @@ public DateRangePicker<D> withEndLabel(final String label)
 
 	/**
 	 * Shortcut for {@link DateRangePicker#setDateRangeOptionsLabel(String)}
+	 * 
 	 * @param label
 	 * @return
 	 */
@@ -220,6 +223,7 @@ protected void initUI()
 
 		this.btnOverview.addClassNames(DateRangePickerStyles.BUTTON, DateRangePickerStyles.CLICKABLE);
 		this.btnOverview.setMinWidth("20em");
+		this.btnOverview.setWidthFull();
 
 		this.btnOverview.setDisableOnClick(true);
 
@@ -328,7 +332,8 @@ public void updateFromModel()
 	{
 		this.tryFixInvalidModel();
 
-		final DateTimeFormatter formatter = DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT).withLocale(this.getFormatLocale());
+		final DateTimeFormatter formatter =
+			DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT).withLocale(this.getFormatLocale());
 
 		// @formatter:off
 		this.btnOverview.setText(
@@ -385,7 +390,7 @@ public Button getBtnOverview()
 	{
 		return this.btnOverview;
 	}
-
+	
 	public Div getOverlayContainer()
 	{
 		return this.overlayContainer;
@@ -395,6 +400,7 @@ public Div getOverlayContainer()
 
 	/**
 	 * Sets the label for the overlay Start-DatePicker
+	 * 
 	 * @param label
 	 */
 	public void setStartLabel(final String label)
@@ -405,6 +411,7 @@ public void setStartLabel(final String label)
 
 	/**
 	 * Sets the label for the overlay End-DatePicker
+	 * 
 	 * @param label
 	 */
 	public void setEndLabel(final String label)
@@ -415,6 +422,7 @@ public void setEndLabel(final String label)
 
 	/**
 	 * Sets the label for the overlay DateRange-ComboBox
+	 * 
 	 * @param label
 	 */
 	public void setDateRangeOptionsLabel(final String label)
@@ -426,107 +434,108 @@ public void setDateRangeOptionsLabel(final String label)
 	// --- DATA ---
 
 	/**
-	 * Uses the given {@link DateRange} and calculates with the current Date 
-	 * the {@link DateRangeModel}, which is then 
-	 * set by {@link DateRangePicker#setModel(DateRangeModel)} 
+	 * Uses the given {@link DateRange} and calculates with the current Date
+	 * the {@link DateRangeModel}, which is then
+	 * set by {@link DateRangePicker#setModel(DateRangeModel)}
+	 * 
 	 * @param range
 	 */
 	public void setDateRangeForToday(final D range)
 	{
-		range.calcFor(LocalDate.now())
-			.ifPresent(result -> this.setValue(new DateRangeModel<>(result.getStart(), result.getEnd(), range)));
+		range.calcFor(LocalDate.now()).ifPresent(
+			result -> this.setValue(new DateRangeModel<>(result.getStart(), result.getEnd(), range)));
 	}
 
 	@Override
 	public void setItems(final Collection<D> items)
 	{
 		this.overlay.setItems(items);
 	}
-
+	
 	@Override
 	public LocalDate getStart()
 	{
 		return this.model.getStart();
 	}
-
+	
 	@Override
 	public DateRangePicker<D> setStart(final LocalDate start)
 	{
 		this.model.setStart(start);
 		this.updateFromModel();
 		return this;
 	}
-
+	
 	@Override
 	public LocalDate getEnd()
 	{
 		return this.model.getEnd();
 	}
-
+	
 	@Override
 	public DateRangePicker<D> setEnd(final LocalDate end)
 	{
 		this.model.setEnd(end);
 		this.updateFromModel();
 		return this;
 	}
-
+	
 	@Override
 	public D getDateRange()
 	{
 		return this.model.getDateRange();
 	}
-
+	
 	@Override
 	public DateRangePicker<D> setDateRange(final D dateRange)
 	{
 		this.model.setDateRange(dateRange);
 		this.updateFromModel();
 		return this;
 	}
-
+	
 	@Override
-	public void setValue(DateRangeModel<D> value)
+	public void setValue(final DateRangeModel<D> value)
 	{
 		this.model = value;
 		this.updateFromModel();
 	}
-
+	
 	@Override
 	public DateRangeModel<D> getValue()
 	{
 		return this.model;
 	}
-
+	
 	@SuppressWarnings("unchecked")
 	@Override
-	public Registration addValueChangeListener(ValueChangeListener<? super DateRangeValueChangeEvent<D>> listener)
+	public Registration addValueChangeListener(final ValueChangeListener<? super DateRangeValueChangeEvent<D>> listener)
 	{
 		@SuppressWarnings("rawtypes")
-		ComponentEventListener componentListener = event -> 
-			listener.valueChanged((DateRangeValueChangeEvent<D>)event);
-        
-        return ComponentUtil.addListener(this, DateRangeValueChangeEvent.class, componentListener);
+		final ComponentEventListener componentListener =
+			event -> listener.valueChanged((DateRangeValueChangeEvent<D>)event);
+		
+		return ComponentUtil.addListener(this, DateRangeValueChangeEvent.class, componentListener);
 	}
-
+	
 	@Override
-	public void setReadOnly(boolean readOnly)
+	public void setReadOnly(final boolean readOnly)
 	{
 		this.getOverlay().setReadOnly(readOnly);
 	}
-
+	
 	@Override
 	public boolean isReadOnly()
 	{
 		return this.getOverlay().isReadOnly();
 	}
-
+	
 	@Override
-	public void setRequiredIndicatorVisible(boolean requiredIndicatorVisible)
+	public void setRequiredIndicatorVisible(final boolean requiredIndicatorVisible)
 	{
 		// Not required/implemented
 	}
-
+	
 	@Override
 	public boolean isRequiredIndicatorVisible()
 	{