Add support for menu separator with optional label #37

javier-godoy · javier-godoy · commit b81d7b26f7e2 · 2019-08-12T12:11:18.000-03:00
diff --git a/src/main/java/com/flowingcode/addons/applayout/AppDrawer.java b/src/main/java/com/flowingcode/addons/applayout/AppDrawer.java
@@ -69,6 +69,7 @@ public AppDrawer(Component headerComponent) {
     		r[0].remove();
     	});
     	
+    	getElement().getStyle().set("--fc-separator-background-color", "var(--app-drawer-content-container_-_background-color)");
     }
     	
     public void setSwipeOpen(boolean swipeOpen) {
diff --git a/src/main/resources/META-INF/resources/frontend/bower_components/fc-applayout/fc-separator.html b/src/main/resources/META-INF/resources/frontend/bower_components/fc-applayout/fc-separator.html
@@ -0,0 +1,61 @@
+<!doctype html>
+
+<link rel="import" href="../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../paper-item/paper-icon-item.html">
+
+<!--
+Styles: 
+	--fc-separator-background-color 
+	--fc-separator-border-color	
+	--fc-separator-text-padding
+-->	
+<dom-module id="fc-separator">
+	<!-- 
+	Based on https://stackoverflow.com/a/28434792/1297272
+	(C) 2015 CC-BY-SA https://stackoverflow.com/users/677418/sleek-geek
+	-->
+	<template>
+		<style>
+			:host {
+			    display: flex;
+    			justify-content: center;
+    		}
+			:host div {
+				width: 100%;
+				text-align: center;
+				position: relative;
+				background-color: var(--fc-separator-background-color, white);
+			}
+			
+			:host div:after {
+				content: '';
+				width: 100%;
+				border-bottom: solid 1px var(--fc-separator-border-color, black);
+				position: absolute;
+				left: 0;
+				top: 50%;
+				z-index: 1;
+			}
+			
+			:host span {
+				background-color: var(--fc-separator-background-color, white);
+				width: auto;
+				display: inline-block;
+				z-index: 3;
+				padding: 0 var(--fc-separator-text-padding, 8px) 0 var(--fc-separator-text-padding, 8px);
+				position: relative;
+			}
+		</style>
+		<div>
+			<span><slot></slot></span>
+		</div>
+	</template>
+	
+	<script>
+		class MenuSeparator extends Vaadin.ThemableMixin(Polymer.Element) {
+	  		static get is() { return 'fc-separator'; }
+		}
+		
+		customElements.define(MenuSeparator.is, MenuSeparator);
+	</script>
+</dom-module> 
diff --git a/src/main/resources/META-INF/resources/frontend/styles/applayout-styles.html b/src/main/resources/META-INF/resources/frontend/styles/applayout-styles.html
@@ -38,6 +38,10 @@
 		  --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
 			z-index: 1000;
 		}
+		
+		app-drawer fc-separator {
+			margin: 0 8px;
+		}
 			
 		app-drawer paper-listbox {
 			overflow-y: auto;

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ public AppDrawer(Component headerComponent) {`
`69`	`69`	`r[0].remove();`
`70`	`70`	`});`
`71`	`71`
	`72`	`+ getElement().getStyle().set("--fc-separator-background-color", "var(--app-drawer-content-container_-_background-color)");`
`72`	`73`	`}`
`73`	`74`
`74`	`75`	`public void setSwipeOpen(boolean swipeOpen) {`