~hokiegeek/biologist-web: GUI simplication

7 files changed, 45 insertions(+), 75 deletions(-)

M angular.json
M package-lock.json
M package.json
M src/app/controls/controls.component.css
M src/app/controls/controls.component.html
M src/app/dishrack/dishrack.component.html
M src/app/petridish/petridish.component.html

M angular.json => angular.json +2 -1

@@ 22,6 22,7 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.css",
               "src/styles.css"
             ],
             "scripts": [


@@ 139,4 140,4 @@
       "prefix": "app"
     }
   }
-}>
\ No newline at end of file
+}

M package-lock.json => package-lock.json +6 -1

@@ 1,6 1,6 @@
 {
   "name": "biologist-web",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {


@@ 4767,6 4767,11 @@
         "debug": "^2.2.0"
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

M package.json => package.json +2 -1

@@ 1,6 1,6 @@
 {
   "name": "biologist-web",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",


@@ 25,6 25,7 @@
     "@angular/router": "^6.1.2",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.7",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "popper.js": "^1.14.4",
     "rxjs": "^6.2.2",

M src/app/controls/controls.component.css => src/app/controls/controls.component.css +3 -3

@@ 1,7 1,7 @@
 .settings-toggle {
-    color: #909090;
-    cursor: pointer;
+    border-left: 1px solid #da8f3a;
 }
+
 .settings-toggle:hover {
-    background-color: #cccccc;
+    background-color: #f4a854;
 }

M src/app/controls/controls.component.html => src/app/controls/controls.component.html +20 -29

@@ 1,41 1,32 @@
 <div>
     <div class="btn-group w-100" role="group">
         <button type="button" class="btn btn-primary btn-block rounded-0" (click)="create()">Study Life!</button>
-        <button type="button"
-                class="btn rounded-0"
-                [ngClass]="{'btn-success': autoStart, 'btn-danger': !autoStart}"
-                (click)="autoStart = !autoStart">
-            Autostart</button>
-    </div>
-    <div class="text-center w-100 settings-toggle" data-toggle="collapse" data-target="#defaultSettings" title="default settings">
-        &#x2304;
+        <button type="button" class="btn rounded-0 btn-primary settings-toggle"
+            data-toggle="collapse" data-target="#defaultSettings" title="default settings">
+            <i class="fa fa-bars"></i>
+            </button>
     </div>
     <div id="defaultSettings" class="collapse mt-1" role="tabpanel" aria-labelledby="settingsHeading">
-        <div id="options" class="w-100 d-flex justify-content-around">
-            <div class="d-flex flex-row">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Rows</span>
-                    </div>
-                    <input type="text" class="form-control" size="3" placeholder="rows" [(ngModel)]="defaultRows" aria-describedby="basic-addon1">
+        <div id="options" class="w-100 d-flex flex-row justify-content-center">
+            <div class="input-group">
+                <div class="input-group-prepend">
+                    <span class="input-group-text">Rows</span>
                 </div>
-                <div class="input-group ml-1">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Cols</span>
-                    </div>
-                    <input type="text" class="form-control" size="3" placeholder="columns" [(ngModel)]="defaultColumns" aria-describedby="basic-addon1">
+                <input type="text" class="form-control" size="3" placeholder="rows" [(ngModel)]="defaultRows">
+            </div>
+            <div class="input-group ml-1">
+                <div class="input-group-prepend">
+                    <span class="input-group-text">Cols</span>
                 </div>
+                <input type="text" class="form-control" size="3" placeholder="columns" [(ngModel)]="defaultColumns">
             </div>
-            <div class="d-flex flex-row">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Density</span>
-                    </div>
-                    <input type="text" class="form-control" size="3" placeholder="density" [(ngModel)]="defaultDensity" aria-describedby="basic-addon1">
-                    <div class="input-group-append">
-                        <span class="input-group-text">%</span>
-                    </div>
+            <div class="input-group ml-1">
+                <div class="input-group-prepend">
+                    <span class="input-group-text">Density</span>
                 </div>
+                <span class="range rounded-right">
+                    <input type="range" class="form-control" min="10" max="90" [(ngModel)]="defaultDensity" [title]="defaultDensity + '%'">
+                </span>
             </div>
         </div>
     </div>

M src/app/dishrack/dishrack.component.html => src/app/dishrack/dishrack.component.html +1 -1

@@ 1,3 1,3 @@
-<div class="d-flex flex-wrap-reverse">
+<div class="d-flex flex-wrap-reverse justify-content-center">
     <app-petridish *ngFor="let e of lab.experiments" [experiment]="e"></app-petridish>
 </div>

M src/app/petridish/petridish.component.html => src/app/petridish/petridish.component.html +11 -39

@@ 1,45 1,17 @@
 <div class="m-2 d-flex flex-row">
+   <!--/div>
+       <div class="d-flex flex-row">
+        <div class="input-group">
+       <div class="input-group-prepend">
+       <span class="input-group-text">Density</span>
+       </div>
+       <input type="text" class="form-control" size="3" placeholder="density" [(ngModel)]="defaultDensity" aria-describedby="basic-addon1">
+       <div class="input-group-append">
+       <span class="input-group-text">%</span>
+       </div>
+       </div-->
     <!-- TODO: Add delete button -->
     <div class="d-flex flex-column">
-        <span *ngIf="creating">
-            <div class="d-flex flex-row mb-1">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Rows</span>
-                    </div>
-                    <input type="text" class="form-control" size="3" placeholder="rows" [(ngModel)]="experiment.rows" (change)="createSeed()" aria-describedby="basic-addon1">
-                </div>
-                <div class="input-group ml-1">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Cols</span>
-                    </div>
-                    <input type="text" class="form-control" size="3" placeholder="columns" [(ngModel)]="experiment.columns" (change)="createSeed()" aria-describedby="basic-addon1">
-                </div>
-            </div>
-            <div class="d-flex flex-row mb-1 align-self-stretch">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Cells</span>
-                    </div>
-                    <span class="range rounded-right">
-                        <input type="range" min="2" max="6" [(ngModel)]="cellSize" [title]="cellSize" />
-                    </span>
-                </div>
-                <div class="input-group ml-1">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Density</span>
-                    </div>
-                    <span class="range rounded-right">
-                        <input type="range" min="10" max="90" [(ngModel)]="experiment.initialDensity" (change)="createSeed()" [title]="experiment.initialDensity" />
-                    </span>
-                </div>
-            </div>
-            <!--button type="button"
-                    class="btn btn-secondary align-self-stretch"
-                    title="Regenerate seed"
-                    (click)="createSeed()">&#x21BA;</button-->
-            <button type="button" class="btn btn-outline-info w-100" (click)="analyze()">Analyze</button>
-        </span>
         <div class="d-flex flex-row mt-1">
             <app-board [cols]="experiment.columns" [rows]="experiment.rows"
                    [cellSize]="cellSize" [cellSpacing]="cellSpacing"