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

Split App Header into Component

Browse source
This commit is contained in:
Marty Oehme 2018-08-22 13:00:41 +02:00
parent b541353091
commit 917d1c3fab
4 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/app_component.dart
View file

@ -1,5 +1,6 @@
import 'package:angular/angular.dart'; import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart'; import 'package:angular_components/angular_components.dart';
import 'package:rules_of_living/components/header_component.dart';
import 'dart:html' as html; import 'dart:html' as html;
import 'package:rules_of_living/src/Engine.dart'; import 'package:rules_of_living/src/Engine.dart';
@ -7,7 +8,8 @@ import 'package:rules_of_living/src/Engine.dart';
@Component( @Component(
selector: 'my-app', selector: 'my-app',
templateUrl: "app_component.html", templateUrl: "app_component.html",
directives: [coreDirectives, materialDirectives], directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent],
providers: [materialProviders],
styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
) )
class AppComponent implements OnInit { class AppComponent implements OnInit {

15
lib/app_component.html
View file

@ -1,15 +1,4 @@
<header class="material-header"> <app_header></app_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"> <div id="rules-input">
Ruleset: <input type="text" title="ruleset" content="S23/B3"> Ruleset: <input type="text" title="ruleset" content="S23/B3">
<i class="fas fa-paint-brush"></i> <i class="fas fa-paint-brush"></i>
@ -28,6 +17,6 @@
<button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button> <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
<button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button> <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
<button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button> <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"> <i class="fas fa-clock"> Speed:</i><material-slider [max]="10" [min]="1" [value]="1"></material-slider>
<button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button> <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
</div> </div>

13
lib/components/header_component.dart Normal file
View file

@ -0,0 +1,13 @@
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
selector: 'app_header',
templateUrl: "header_component.html",
directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent],
providers: [],
styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
)
class HeaderComponent {
}

12
lib/components/header_component.html Normal file
View file

@ -0,0 +1,12 @@
<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>