ui.xml

gistfile1.txt

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
	xmlns:g='urn:import:com.google.gwt.user.client.ui' 
	xmlns:mgwt="urn:import:com.googlecode.mgwt.ui.client.widget"
	xmlns:p='urn:import:com.vaadin.polymer.paper.widget' 
	xmlns:i='urn:import:com.vaadin.polymer.iron.widget'
	ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
	ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
	ui:generateLocales='default'>


	<ui:with type="test.dashboard.client.app.start.StartPageView.Resources"
		field="resources" />
	<ui:with type="test.dashboard.client.messages.Messages"
		field="messages" />



	<ui:style>
	paper-icon-item {
		position: relative;
		overflow: hidden; 
	} 
	
	.toolbar {
		background: #a3a3a3 !important;
	}
	
	.header {
		font-size: 200%;
		margin-left: 50px;
	}
	
	.content {
		padding: 15px;
	}
	
	.dialog {
		min-width: 40%;
	}
	</ui:style>

	<g:HTMLPanel addStyleNames="{resources.css.mainPanel}">
		<style is='custom-style'>
			.add {
			position: absolute;
			bottom: 20px;
			right: 20px;
			--paper-fab-background: var(--paper-red-500);
			}
			
			.disabled {
				--paper-item-disabled
			}
			
			.on {
				--paper-badge-background: green;
			}
			
			.off {
				--paper-badge-background: red;
			}
		</style>
		<p:PaperDrawerPanel ui:field="drawerPanel">
			<div drawer="">
				<p:PaperHeaderPanel mode="seamed">
					<p:PaperToolbar addStyleNames="{style.toolbar}" >
					</p:PaperToolbar>
					
					<p:PaperIconItem ui:field="visitorListButton">
						<i:IronIcon icon="communication:chat" />
						<div>Visitor List</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					
					<p:PaperIconItem ui:field="triggerButton">
						<i:IronIcon icon="image:flash-on" />
						<div>Triggers</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					
					
					<p:PaperIconItem ui:field="menuClearAll">
						<i:IronIcon icon="delete" />
						<div>Clear All</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					
					<p:PaperIconItem ui:field="menuClearDone">
						<i:IronIcon icon="clear" />
						<div>Clear Done</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					<p:PaperIconItem ui:field="menuSettings">
						<i:IronIcon icon="settings" />
						<div>Settings</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					<p:PaperIconItem ui:field="menuAbout">
						<i:IronIcon icon="help" />
						<div>About</div>
						<p:PaperRipple />
					</p:PaperIconItem>
					
				</p:PaperHeaderPanel>
			</div>
			<div main="">
				<p:PaperHeaderPanel mode="seamed">
					<p:PaperToolbar addStyleNames="{style.toolbar}"> 
						<div>	
<!-- 						  <p:PaperBadge ui:field="onlineState" label="234" ></p:PaperBadge>					   -->
						  <paper-badge ui:field="onlineState"></paper-badge>
						  <span>&nbsp;</span>
						</div>

						  
						<p:PaperIconButton ui:field="menu" icon="more-vert"	attributes="paper-drawer-toggle" />
						<span ui:field="titleLabel" class="{style.header}">Dashboard</span>
						 
						
					</p:PaperToolbar>
					
					<g:HTMLPanel ui:field="contentPanel">
					</g:HTMLPanel>
					
<!-- 					<g:HTMLPanel ui:field="contentPanel" -->
<!-- 						addStyleNames="{style.content} vertical center-justified layout" /> -->
				</p:PaperHeaderPanel>
				
<!-- 				<p:PaperFab ui:field="addButton" icon="add" -->
<!-- 					addStyleNames="add" /> -->
			</div>
		</p:PaperDrawerPanel>


		<p:PaperDialog ui:field="addItemDialog" entryAnimation="fade-in-animation"
			addStyleNames="{style.dialog}" modal="true">
			<h2>Add Item</h2>
			<p:PaperInput ui:field="titleInput" label="Title"
				required="true" autoValidate="true" errorMessage="required input!" />
			<div class="textarea-container iron-autogrow-textarea">
				<p:PaperTextarea ui:field="descriptionInput" label="Notes" />
			</div>
			<div class="buttons">
				<p:PaperButton attributes="dialog-dismiss">Cancel</p:PaperButton>
				<p:PaperButton ui:field="confirmAddButton" attributes="dialog-confirm">OK</p:PaperButton>
			</div>
		</p:PaperDialog>

	</g:HTMLPanel>


</ui:UiBinder>