From c5cd600cfc6daf39aa75d433458c5c884fafa051 Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Tue, 10 Jul 2018 12:52:56 +0200
Subject: [PATCH] Add Sample Material Styling

---
 lib/app_component.dart |   6 +-
 lib/app_component.html |  15 ++-
 web/index.html         |   4 +-
 web/styles.css         | 233 +++++++++++++++++++++--------------------
 4 files changed, 142 insertions(+), 116 deletions(-)

diff --git a/lib/app_component.dart b/lib/app_component.dart
index 8e726df..458b205 100644
--- a/lib/app_component.dart
+++ b/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";
 
diff --git a/lib/app_component.html b/lib/app_component.html
index 90606c7..0532aea 100644
--- a/lib/app_component.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/web/index.html b/web/index.html
index 3b85bf1..be2e05b 100644
--- a/web/index.html
+++ b/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>
 
diff --git a/web/styles.css b/web/styles.css
index ef7a186..e0b0d35 100644
--- a/web/styles.css
+++ b/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 */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-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;
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-family: 'Roboto', sans-serif;
+
 }
 
-/* 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;
-}
+/*!* Master Styles *!*/
+/*h1 {*/
+  /*color: #369;*/
+  /*font-family: Arial, Helvetica, sans-serif;*/
+  /*font-size: 250%;*/
+/*}*/
+/*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 *!*/
+/*.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;*/
+/*}*/