From 4906bbe54cf01f5d9f11f8f6f4ab1af953af6a34 Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Thu, 23 Aug 2018 11:34:08 +0200
Subject: [PATCH 1/3] Switch Control Interface Icons to MaterialIcons

---
 lib/components/controls_component.dart |  2 +-
 lib/components/controls_component.html | 16 ++++++++--------
 web/index.html                         |  5 -----
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/lib/components/controls_component.dart b/lib/components/controls_component.dart
index cd18105..b2c09e3 100644
--- a/lib/components/controls_component.dart
+++ b/lib/components/controls_component.dart
@@ -6,7 +6,7 @@ import 'package:rules_of_living/src/Engine.dart';
 @Component(
   selector: 'sim-controls',
   templateUrl: "controls_component.html",
-  directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent],
+  directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, MaterialTooltipDirective],
   providers: [],
   styleUrls: const ["controls_component.css"],
 )
diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html
index 4d07357..c8eb9cd 100644
--- a/lib/components/controls_component.html
+++ b/lib/components/controls_component.html
@@ -1,14 +1,14 @@
 <div id="controls">
+    <material-button id="reset" (click)="onResetClicked()"><material-icon icon="replay" baseline></material-icon></material-button>
     <material-button id="run" (click)="onStartClicked()">
         <span [ngSwitch]="engine.running">
-            <i *ngSwitchCase="false" class="fas fa-play"></i>
-            <i *ngSwitchCase="true" class="fas fa-stop"></i>
+            <material-icon *ngSwitchCase="false" icon="play_arrow" baseline></material-icon>
+            <material-icon *ngSwitchCase="true" icon="pause" baseline></material-icon>
         </span>
     </material-button>
-    <material-button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></material-button>
-    <material-button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></material-button>
-    <material-button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></material-button>
-    <material-button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></material-button>
-    <i class="fas fa-clock">{{simSpeed}}</i> <material-slider [max]="10" [min]="1" [(value)]="simSpeed" ></material-slider>
-    <material-button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </material-button>
+    <material-button id="step" (click)="onStepClicked()" materialTooltip="Step Forward"><material-icon icon="arrow_right" baseline></material-icon></material-button>
+    <material-button id="random" (click)="onRandomClicked()" materialTooltip="Add Random Pattern"><material-icon icon="add" baseline></material-icon></material-button>
+    <material-button id="clear" (click)="onClearClicked()" materialTooltip="Clear"><material-icon icon="clear" baseline></material-icon></material-button>
+    <span [materialTooltip]="simSpeed.toString()"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
+    <material-button id="edges" (click)="onEdgesClicked()"><material-icon icon="border_all" baseline></material-icon></material-button>
 </div>
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index be2e05b..d5432b4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -19,11 +19,6 @@
   <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 -->
-
   <script defer src="main.dart.js"></script>
 </head>
 

From c3368524f982b3c79b34d07aa89b8ef85412a5c3 Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Thu, 23 Aug 2018 12:07:43 +0200
Subject: [PATCH 2/3] Change Step Forward Icon

---
 lib/components/controls_component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html
index c8eb9cd..76a64e3 100644
--- a/lib/components/controls_component.html
+++ b/lib/components/controls_component.html
@@ -6,7 +6,7 @@
             <material-icon *ngSwitchCase="true" icon="pause" baseline></material-icon>
         </span>
     </material-button>
-    <material-button id="step" (click)="onStepClicked()" materialTooltip="Step Forward"><material-icon icon="arrow_right" baseline></material-icon></material-button>
+    <material-button id="step" (click)="onStepClicked()" materialTooltip="Step Forward"><material-icon icon="skip_next" baseline></material-icon></material-button>
     <material-button id="random" (click)="onRandomClicked()" materialTooltip="Add Random Pattern"><material-icon icon="add" baseline></material-icon></material-button>
     <material-button id="clear" (click)="onClearClicked()" materialTooltip="Clear"><material-icon icon="clear" baseline></material-icon></material-button>
     <span [materialTooltip]="simSpeed.toString()"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>

From abd2c3ac238a104cffb22a9842ff79563884355c Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Thu, 23 Aug 2018 12:07:54 +0200
Subject: [PATCH 3/3] Add Speed Slider Tooltip

---
 lib/components/controls_component.dart | 1 +
 lib/components/controls_component.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/components/controls_component.dart b/lib/components/controls_component.dart
index b2c09e3..02cbe1a 100644
--- a/lib/components/controls_component.dart
+++ b/lib/components/controls_component.dart
@@ -13,6 +13,7 @@ import 'package:rules_of_living/src/Engine.dart';
 class ControlsComponent {
   final EngineService engineService;
   int simSpeed = 5;
+  String get speedSliderTooltip => "Simulation Speed: $simSpeed";
 
   Engine get engine => engineService.engine;
   ControlsComponent(this.engineService);
diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html
index 76a64e3..b5ab389 100644
--- a/lib/components/controls_component.html
+++ b/lib/components/controls_component.html
@@ -9,6 +9,6 @@
     <material-button id="step" (click)="onStepClicked()" materialTooltip="Step Forward"><material-icon icon="skip_next" baseline></material-icon></material-button>
     <material-button id="random" (click)="onRandomClicked()" materialTooltip="Add Random Pattern"><material-icon icon="add" baseline></material-icon></material-button>
     <material-button id="clear" (click)="onClearClicked()" materialTooltip="Clear"><material-icon icon="clear" baseline></material-icon></material-button>
-    <span [materialTooltip]="simSpeed.toString()"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
+    <span [materialTooltip]="speedSliderTooltip"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
     <material-button id="edges" (click)="onEdgesClicked()"><material-icon icon="border_all" baseline></material-icon></material-button>
 </div>
\ No newline at end of file