Merge pull request #12 from FlowingCode/styles

Add default styles. Fixes #5

Author: javier-godoy

pom.xml

@@ -169,6 +169,7 @@
                     <webAppConfig>
                         <resourceBases>
 	                        <resourceBase>src/test/resources/META-INF/resources</resourceBase>
+	                        <resourceBase>src/main/resources/META-INF/resources</resourceBase>
 	                        <!-- This is only needed to be able to unzip webjars 
 	                            directly into src/test/webjar-debug and modify them for testing -->
 	                        <resourceBase>src/test/webjar-debug/META-INF/resources</resourceBase>

src/main/java/com/flowingcode/addons/applayout/AppLayout.java

@@ -43,7 +43,7 @@
 @HtmlImport("bower_components/iron-icons/iron-icons.html")
 @HtmlImport("bower_components/app-layout/app-scroll-effects/app-scroll-effects.html")
 @HtmlImport("bower_components/app-layout/app-toolbar/app-toolbar.html")
-@HtmlImport("styles/shared-styles.html")
+@HtmlImport("frontend://styles/applayout-styles.html")
 public class AppLayout extends Div implements PageConfigurator {
 
 	AppDrawer drawer;

src/main/resources/META-INF/resources/frontend/styles/applayout-styles.html

@@ -0,0 +1,60 @@
+<!--
+  #%L
+  App Layout 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%
+  -->
+<custom-style>
+    <!-- This is where your App's styling should go. You can use .css files too. -->
+    <style>
+		.sub-menu{
+			background-color: var(--lumo-primary-color-10pct);
+		}
+		
+		app-toolbar {
+		  background-color: #4285f4;
+		      color: #fff;
+		}
+		
+		paper-icon-button {
+		  --paper-icon-button-ink-color: white;
+		}
+		
+		paper-icon-button + [main-title] {
+		  margin-left: 24px;
+		}
+		
+		paper-progress {
+		  display: block;
+		      width: 100%;
+		      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+		      --paper-progress-container-color: transparent;
+		}
+		
+		app-header {
+		  position: var(--layout-fixed-top_-_position); top: var(--layout-fixed-top_-_top); left: var(--layout-fixed-top_-_left); right: var(--layout-fixed-top_-_right);
+		      color: #fff;
+		      --app-header-background-rear-layer_-_background-color:  #ef6c00;;
+		}
+		
+		app-drawer {
+		  --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+			--app-drawer-content-container_-_background-color:  #B0BEC5;
+			z-index: 1000;
+		}
+
+    </style>
+</custom-style>

src/test/java/com/flowingcode/addons/applayout/DemoView.java

@@ -28,10 +28,12 @@
 import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.dependency.HtmlImport;
 import com.vaadin.flow.router.Route;
 
 @SuppressWarnings("serial")
 @Route("")
+@HtmlImport("frontend://styles/shared-styles.html")
 public class DemoView extends VerticalLayout {
 
 	private VerticalLayout container = new VerticalLayout();

src/test/resources/META-INF/resources/frontend/styles/shared-styles.html

@@ -28,45 +28,12 @@
 		      max-height: 368px;
 		}
 
-		.sub-menu{
-			background-color: var(--lumo-primary-color-10pct);
-		}
-		
-		app-toolbar {
-		  background-color: #4285f4;
-		      color: #fff;
-		}
-		
-		paper-icon-button {
-		  --paper-icon-button-ink-color: white;
-		}
-		
-		paper-icon-button + [main-title] {
-		  margin-left: 24px;
-		}
-		
-		paper-progress {
-		  display: block;
-		      width: 100%;
-		      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
-		      --paper-progress-container-color: transparent;
-		}
-		
-		app-header {
-		  position: var(--layout-fixed-top_-_position); top: var(--layout-fixed-top_-_top); left: var(--layout-fixed-top_-_left); right: var(--layout-fixed-top_-_right);
-		      color: #fff;
-		      --app-header-background-rear-layer_-_background-color:  #ef6c00;;
+		sample-content {
+		  padding-top: 64px;
 		}
 
 		app-drawer {
-		  --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
-			--app-drawer-content-container_-_background-color:  #B0BEC5;
-			z-index: 1000;
-		}
-		
-		sample-content {
-		  padding-top: 64px;
+		  z-index: 1001;
 		}
-
     </style>
 </custom-style>