Add Sample Material Styling

lib/app_component.dart

@@ -1,4 +1,5 @@
 import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
 
 import 'dart:html' as html;
 import 'package:rules_of_living/src/Engine.dart';
@@ -6,7 +7,10 @@ import 'package:rules_of_living/src/Engine.dart';
 @Component(
     selector: 'my-app',
     templateUrl: "app_component.html",
-    directives: [coreDirectives])
+    directives: [coreDirectives, MaterialIconComponent],
+    styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+    providers: const [materialProviders],
+)
 class AppComponent implements OnInit {
   var name = "World";
 

lib/app_component.html

@@ -1,4 +1,15 @@
-<h1>Cellular Automata</h1>
+<header class="material-header">
+    <div class="material-header-row">
+        <material-button icon class="material-drawer-button">
+            <material-icon icon="menu"></material-icon>
+        </material-button>
+        <span class="material-header-title">Cellular Automata</span>
+        <div class="material-spacer"></div>
+        <nav class="material-navigation">
+            <a>Link 1</a>
+        </nav>
+    </div>
+</header>
 <div id="rules-input">
     Ruleset: <input type="text" title="ruleset" content="S23/B3">
     <i class="fas fa-paint-brush"></i>
@@ -19,4 +30,4 @@
     <button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
     <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
     <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
-</div>
+</div>

web/index.html

@@ -15,13 +15,15 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="icon" type="image/png" href="favicon.png">
 
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
 
   <!-- As per https://pub.dartlang.org/packages/angular_components/versions/0.9.0-beta#-readme-tab-#Required-Icon-Font -->
-  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
   <script defer src="main.dart.js"></script>
 </head>
 

web/styles.css

@@ -1,117 +1,126 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto);
 @import url(https://fonts.googleapis.com/css?family=Material+Icons);
 
-/* Master Styles */
+html, body {
-h1 {
+  height: 100%;
-  color: #369;
+  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  padding: 0;
-  font-size: 250%;
+  width: 100%;
-}
+  font-family: 'Roboto', sans-serif;
-h2, h3 {
+
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-label {
-  padding-right: 0.5em;
-}
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
 }
 
-/* items class */
+/*!* Master Styles *!*/
-.items {
+/*h1 {*/
-  margin: 0 0 2em 0;
+  /*color: #369;*/
-  list-style-type: none;
+  /*font-family: Arial, Helvetica, sans-serif;*/
-  padding: 0;
+  /*font-size: 250%;*/
-  width: 24em;
+/*}*/
-}
+/*h2, h3 {*/
-.items li {
+  /*color: #444;*/
-  cursor: pointer;
+  /*font-family: Arial, Helvetica, sans-serif;*/
-  position: relative;
+  /*font-weight: lighter;*/
-  left: 0;
+/*}*/
-  background-color: #EEE;
+/*body {*/
-  margin: .5em;
+  /*margin: 2em;*/
-  padding: .3em 0;
+/*}*/
-  height: 1.6em;
+/*body, input[text], button {*/
-  border-radius: 4px;
+  /*color: #888;*/
-}
+  /*font-family: Cambria, Georgia;*/
-.items li:hover {
+/*}*/
-  color: #607D8B;
+/*a {*/
-  background-color: #DDD;
+  /*cursor: pointer;*/
-  left: .1em;
+  /*cursor: hand;*/
-}
+/*}*/
-.items li.selected {
+/*button {*/
-  background-color: #CFD8DC;
+  /*font-family: Arial;*/
-  color: white;
+  /*background-color: #eee;*/
-}
+  /*border: none;*/
-.items li.selected:hover {
+  /*padding: 5px 10px;*/
-  background-color: #BBD8DC;
+  /*border-radius: 4px;*/
-}
+  /*cursor: pointer;*/
-.items .text {
+  /*cursor: hand;*/
-  position: relative;
+/*}*/
-  top: -3px;
+/*button:hover {*/
-}
+  /*background-color: #cfd8dc;*/
-.items .badge {
+/*}*/
-  display: inline-block;
+/*button:disabled {*/
-  font-size: small;
+  /*background-color: #eee;*/
-  color: white;
+  /*color: #aaa;*/
-  padding: 0.8em 0.7em 0 0.7em;
+  /*cursor: auto;*/
-  background-color: #607D8B;
+/*}*/
-  line-height: 1em;
+/*label {*/
-  position: relative;
+  /*padding-right: 0.5em;*/
-  left: -1px;
+/*}*/
-  top: -4px;
+/*!* Navigation link styles *!*/
-  height: 1.8em;
+/*nav a {*/
-  margin-right: .8em;
+  /*padding: 5px 10px;*/
-  border-radius: 4px 0 0 4px;
+  /*text-decoration: none;*/
-}
+  /*margin-right: 10px;*/
-/* everywhere else */
+  /*margin-top: 10px;*/
-* {
+  /*display: inline-block;*/
-  font-family: Arial, Helvetica, sans-serif;
+  /*background-color: #eee;*/
-}
+  /*border-radius: 4px;*/
+/*}*/
+/*nav a:visited, a:link {*/
+  /*color: #607D8B;*/
+/*}*/
+/*nav a:hover {*/
+  /*color: #039be5;*/
+  /*background-color: #CFD8DC;*/
+/*}*/
+/*nav a.active {*/
+  /*color: #039be5;*/
+/*}*/
+
+/*!* items class *!*/
+/*.items {*/
+  /*margin: 0 0 2em 0;*/
+  /*list-style-type: none;*/
+  /*padding: 0;*/
+  /*width: 24em;*/
+/*}*/
+/*.items li {*/
+  /*cursor: pointer;*/
+  /*position: relative;*/
+  /*left: 0;*/
+  /*background-color: #EEE;*/
+  /*margin: .5em;*/
+  /*padding: .3em 0;*/
+  /*height: 1.6em;*/
+  /*border-radius: 4px;*/
+/*}*/
+/*.items li:hover {*/
+  /*color: #607D8B;*/
+  /*background-color: #DDD;*/
+  /*left: .1em;*/
+/*}*/
+/*.items li.selected {*/
+  /*background-color: #CFD8DC;*/
+  /*color: white;*/
+/*}*/
+/*.items li.selected:hover {*/
+  /*background-color: #BBD8DC;*/
+/*}*/
+/*.items .text {*/
+  /*position: relative;*/
+  /*top: -3px;*/
+/*}*/
+/*.items .badge {*/
+  /*display: inline-block;*/
+  /*font-size: small;*/
+  /*color: white;*/
+  /*padding: 0.8em 0.7em 0 0.7em;*/
+  /*background-color: #607D8B;*/
+  /*line-height: 1em;*/
+  /*position: relative;*/
+  /*left: -1px;*/
+  /*top: -4px;*/
+  /*height: 1.8em;*/
+  /*margin-right: .8em;*/
+  /*border-radius: 4px 0 0 4px;*/
+/*}*/
+/*!* everywhere else *!*/
+/** {*/
+  /*font-family: Arial, Helvetica, sans-serif;*/
+/*}*/