feat(demo): add demo footer with show/hide code and layout checkboxes

Author: ngonzalezpazFC

src/test/java/com/flowingcode/vaadin/addons/chipfield/BinderDemo.java

@@ -13,22 +13,22 @@ public class BinderDemo extends VerticalLayout {
 
 	public BinderDemo() {
 		Planet p = new Planet("A new planet");
-		ChipField<String> chf5 = new ChipField<>(
+		ChipField<String> chf = new ChipField<>(
 				"Choose planet features (Binder demo, try with: 'Rings', 'Moons', 'Water', etc.)");
-		chf5.setWidth("500px");
-		chf5.setItems(Arrays.asList("Rings", "Moons", "Water", "Rocks", "Lava", "Ice", "Cold", "Heat", "Atmosphere"));
+		chf.setWidthFull();
+		chf.setItems(Arrays.asList("Rings", "Moons", "Water", "Rocks", "Lava", "Ice", "Cold", "Heat", "Atmosphere"));
 		Binder<Planet> binder = new Binder<>();
-		binder.bind(chf5, Planet::getConfiguration, Planet::setConfiguration);
+		binder.bind(chf, Planet::getConfiguration, Planet::setConfiguration);
 		binder.setBean(p);
 		Button show = new Button("Show planet configuration");
 		show.addClickListener(
 				event -> Notification.show(
 						"Planet: " + p.getName() + ", features: "
 								+ p.getConfiguration().stream().collect(Collectors.joining(",")),
 						5000, Position.BOTTOM_START));
-		chf5.addValueChangeListener(
+		chf.addValueChangeListener(
 				newItem -> Notification.show("Items: " + newItem.getValue(), 5000, Position.BOTTOM_START));
 
-		add(chf5, show);
+		add(chf, show);
 	}
 }

src/test/java/com/flowingcode/vaadin/addons/chipfield/ChipfieldDemoView.java

@@ -2,7 +2,9 @@
 
 import com.flowingcode.vaadin.addons.DemoLayout;
 import com.vaadin.flow.component.checkbox.Checkbox;
+import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.html.IFrame;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.splitlayout.SplitLayout;
 import com.vaadin.flow.component.splitlayout.SplitLayout.Orientation;
@@ -11,6 +13,7 @@
 import com.vaadin.flow.router.Route;
 
 @SuppressWarnings("serial")
+@StyleSheet("context://frontend/styles/demo-styles.css")
 @Route(value = "chipfield", layout = DemoLayout.class)
 public class ChipfieldDemoView extends VerticalLayout {
 
@@ -34,24 +37,45 @@ public ChipfieldDemoView() {
 		iframe.setSizeFull();
 		layout.addToSecondary(iframe);
 
+		Tabs tabs = new Tabs();
+		Tab demo1 = new Tab(DATAPROVIDER_DEMO);
+		Tab demo2 = new Tab(RESTRICTED_DEMO);
+		Tab demo3 = new Tab(DISABLED_DEMO);
+		Tab demo4 = new Tab(BINDER_DEMO);
+		tabs.setWidthFull();
+		tabs.add(demo1, demo2, demo3, demo4);
+
+		Checkbox orientationCB = new Checkbox("Toggle Orientation");
+		orientationCB.setValue(true);
+		orientationCB.addClassName("smallcheckbox");
+		orientationCB.addValueChangeListener(cb -> {
+			if (cb.getValue()) {
+				layout.setOrientation(Orientation.HORIZONTAL);
+			} else {
+				layout.setOrientation(Orientation.VERTICAL);
+			}
+			layout.setSplitterPosition(50);
+			layout.getPrimaryComponent().getElement().setAttribute("style", "width: 100%; height: 100%");
+			iframe.setSizeFull();
+		});
 		Checkbox codeCB = new Checkbox("Show Source Code");
 		codeCB.setValue(true);
+		codeCB.addClassName("smallcheckbox");
 		codeCB.addValueChangeListener(cb -> {
 			if (cb.getValue()) {
 				layout.setSplitterPosition(50);
+				orientationCB.setEnabled(true);
 			} else {
 				layout.setSplitterPosition(100);
+				orientationCB.setEnabled(false);
 			}
 		});
-		Tabs tabs = new Tabs();
-		Tab demo1 = new Tab(DATAPROVIDER_DEMO);
-		Tab demo2 = new Tab(RESTRICTED_DEMO);
-		Tab demo3 = new Tab(DISABLED_DEMO);
-		Tab demo4 = new Tab(BINDER_DEMO);
-		tabs.setWidthFull();
-		tabs.add(demo1, demo2, demo3, demo4, codeCB);
-		add(tabs, layout);
-		
+		HorizontalLayout footer = new HorizontalLayout();
+		footer.setWidthFull();
+		footer.setJustifyContentMode(JustifyContentMode.END);
+		footer.add(codeCB, orientationCB);
+		add(tabs, layout, footer);
+
 		setSizeFull();
 
 		tabs.addSelectedChangeListener(e -> {
@@ -61,28 +85,31 @@ public ChipfieldDemoView() {
 				iframe.getElement().setAttribute("srcdoc", getSrcdoc(DATAPROVIDER_SOURCE));
 				layout.addToPrimary(new DataProviderDemo());
 				layout.addToSecondary(iframe);
-				add(tabs, layout);
+				add(tabs, layout, footer);
 				break;
 			case RESTRICTED_DEMO:
 				iframe.getElement().setAttribute("srcdoc", getSrcdoc(RESTRICTED_SOURCE));
 				layout.addToPrimary(new RestrictedDemo());
 				layout.addToSecondary(iframe);
-				add(tabs, layout);
+				add(tabs, layout, footer);
 				break;
 			case DISABLED_DEMO:
 				iframe.getElement().setAttribute("srcdoc", getSrcdoc(DISABLED_SOURCE));
 				layout.addToPrimary(new DisabledDemo());
 				layout.addToSecondary(iframe);
-				add(tabs, layout);
+				add(tabs, layout, footer);
 				break;
 			case BINDER_DEMO:
 				iframe.getElement().setAttribute("srcdoc", getSrcdoc(BINDER_SOURCE));
 				layout.addToPrimary(new BinderDemo());
 				layout.addToSecondary(iframe);
-				add(tabs, layout);
+				add(tabs, layout, footer);
 				break;
 			default:
-				add(tabs, new DataProviderDemo());
+				iframe.getElement().setAttribute("srcdoc", getSrcdoc(DATAPROVIDER_SOURCE));
+				layout.addToPrimary(new DataProviderDemo());
+				layout.addToSecondary(iframe);
+				add(tabs, layout, footer);
 				break;
 			}
 		});

src/test/java/com/flowingcode/vaadin/addons/chipfield/DataProviderDemo.java

@@ -22,7 +22,7 @@ public DataProviderDemo() {
 
 		ChipField<Planet> chf = new ChipField<>("Select some planets (Mercury, Venus, Earth, etc.)",
 				planet -> planet.getName());
-		chf.setWidth("100%");
+		chf.setWidthFull();
 		chf.setDataProvider(ldp);
 		chf.setClosable(true);
 		chf.setNewItemHandler(label -> new Planet(label));

src/test/java/com/flowingcode/vaadin/addons/chipfield/DisabledDemo.java

@@ -5,11 +5,12 @@
 @SuppressWarnings("serial")
 public class DisabledDemo extends VerticalLayout {
 	public DisabledDemo() {
-		ChipField<String> chf4 = new ChipField<>("Disabled", "Mercury", "Venus", "Earth");
-		chf4.addSelectedItem("Mercury");
-		chf4.addSelectedItem("Venus");
-		chf4.setDisabled(true);
+		ChipField<String> chf = new ChipField<>("Disabled", "Mercury", "Venus", "Earth");
+		chf.setWidthFull();
+		chf.addSelectedItem("Mercury");
+		chf.addSelectedItem("Venus");
+		chf.setDisabled(true);
 
-		add(chf4);
+		add(chf);
 	}
 }

src/test/java/com/flowingcode/vaadin/addons/chipfield/RestrictedDemo.java

@@ -6,13 +6,13 @@
 @SuppressWarnings("serial")
 public class RestrictedDemo extends VerticalLayout {
 	public RestrictedDemo() {
-		ChipField<String> chf3 = new ChipField<>("Select some planets (Restricted input, allowed pattern [a-zA-Z])");
-		chf3.setWidth("500px");
-		chf3.setAvailableItems(
+		ChipField<String> chf = new ChipField<>("Select some planets (Restricted input, allowed pattern [a-zA-Z])");
+		chf.setWidthFull();
+		chf.setAvailableItems(
 				Arrays.asList("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"));
-		chf3.setAllowedPattern("[a-zA-Z]");
-		chf3.setClosable(true);
+		chf.setAllowedPattern("[a-zA-Z]");
+		chf.setClosable(true);
 
-		add(chf3);
+		add(chf);
 	}
 }

src/test/resources/META-INF/resources/frontend/styles/demo-styles.css

@@ -0,0 +1,22 @@
+/*-
+ * #%L
+ * ChipField Addon
+ * %%
+ * Copyright (C) 2018 Flowing Code
+ * %%
+ * Licensed 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.
+ * #L%
+ */
+vaadin-checkbox.smallcheckbox {
+	font-size: small;
+}