experiments/cellular-automata
1
0
Fork 0
Code Issues 29 Pull requests Projects Releases Wiki Activity

Merge branch '21-switch-from-fontawesome-to-material-glyphs' into 'master'

Browse source 
Resolve "Switch from FontAwesome to Material Glyphs"

Closes #21

See merge request marty.oehme/cellular-automata!6
This commit is contained in:
Marty 2018-08-23 10:08:38 +00:00
commit 223f831196
3 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/components/controls_component.dart
View file

@ -6,13 +6,14 @@ 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"],
)
class ControlsComponent {
final EngineService engineService;
int simSpeed = 5;
String get speedSliderTooltip => "Simulation Speed: $simSpeed";
Engine get engine => engineService.engine;
ControlsComponent(this.engineService);

16
lib/components/controls_component.html
View file

@ -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="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]="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>

5
web/index.html
View file

@ -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>