missing files

src/app/app.module.ts

@@ -10,11 +10,16 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatButtonModule } from '@angular/material/button';
+import { SettingsComponent } from './settings/settings.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    BarComponent
+    BarComponent,
+    SettingsComponent
   ],
   imports: [
     BrowserModule,
@@ -23,7 +28,9 @@ import { MatButtonModule } from '@angular/material/button';
     MatToolbarModule,
     MatIconModule,
     MatButtonToggleModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/bar/bar.component.html

@@ -2,7 +2,11 @@
 
     <mat-toolbar-row>
         <span class="copy">&copy; Mateusz Budzisz - kropoki i kreski</span>
-        <mat-icon class="icon" (click)="iconClick()" [ngClass]="iconColor">gesture</mat-icon>
+
+        <button mat-mini-fab class="roundBtn darkBtn" (click)="iconClick()">
+            <mat-icon [ngClass]="iconColor">gesture</mat-icon>
+        </button>
+
         <span class="spacer"></span>
 
         <button mat-mini-fab class="roundBtn" color="warn" (click)="clear()">
@@ -17,7 +21,7 @@
             <mat-icon>redo</mat-icon>
         </button>
 
-        <mat-button-toggle-group style="margin-right: 1em;" value="black" (change)="changeColor($event)">
+        <mat-button-toggle-group class="colors" value="black" (change)="changeColor($event)">
 
             <mat-button-toggle value="red" class="red">
                 <mat-icon>palette</mat-icon>
@@ -41,7 +45,7 @@
 
         </mat-button-toggle-group>
 
-        <mat-button-toggle-group value="free" (change)="changeMode($event)">
+        <mat-button-toggle-group class="tools" value="free" (change)="changeMode($event)">
 
             <mat-button-toggle value="free">
                 <mat-icon>gesture</mat-icon>

src/app/bar/bar.component.scss

@@ -9,13 +9,39 @@
 .roundBtn {
     height: 47px;
     width: 47px;
-    margin-right: 0.5em;
+    margin-right: 1em;
 
     &:nth-of-type(3) {
-        margin-right: 1em;
+        margin-right: 0.5em;
     }
 }
 
 .copy {
-    display: none;
-}
+    margin-right: 0.5em;
+}
+
+@media (max-width: 995px) {
+    .copy {
+        display: none;
+    }
+}
+
+.colors {
+    margin-right: 1em;
+}
+
+@media (max-width: 680px) {
+    .colors {
+        width: 48px;
+        overflow-x: scroll;
+        margin-right: calc(0.5em - 1px);
+    }   
+}
+
+
+@media (max-width: 680px) {
+    .tools {
+        width: 48px;
+        overflow-x: scroll;
+    }
+}

src/app/bar/bar.component.ts

@@ -1,5 +1,7 @@
+import { SettingsComponent } from './../settings/settings.component';
 import { Component, Output, EventEmitter, Input, OnDestroy, AfterViewInit } from '@angular/core';
 import { MatButtonToggleChange } from '@angular/material/button-toggle/public-api';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-bar',
@@ -15,6 +17,10 @@ export class BarComponent implements AfterViewInit, OnDestroy {
   @Output() onIconClick: EventEmitter<null> = new EventEmitter<null>();
   @Input('statusUpdate') onStatusUpdate: EventEmitter<string>;
 
+  constructor(public dialog: MatDialog) {
+
+  }
+
   public iconColor: string[] = [];
 
   public ngAfterViewInit(): void {    
@@ -48,6 +54,16 @@ export class BarComponent implements AfterViewInit, OnDestroy {
   }
 
   public iconClick(): void {
-    this.onIconClick.emit();
+
+    const dialogRef = this.dialog.open(SettingsComponent, {
+      width: '250px',
+      data: {}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+    });
+
+    //this.onIconClick.emit();
   }
 }

src/app/settings/settings.component.html

@@ -0,0 +1,17 @@
+<h1>Ustawienia</h1>
+
+<form>
+    <mat-form-field>
+      <mat-label>Pokój</mat-label>
+      <input type="number" matInput placeholder="#0000" value="0000">
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-label>Serwer</mat-label>
+        <input matInput placeholder="ipmateusz.ga" value="ipmateusza.ga">
+    </mat-form-field>
+
+    <div mat-dialog-actions align="end">
+        <button mat-button color="accent" type="submit" cdkFocusInitial>Zapisz</button>
+    </div>
+</form>

src/app/settings/settings.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field {
+    width: 100%;
+}

src/app/settings/settings.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings/settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/styles.scss

@@ -61,6 +61,32 @@ $app-theme: mat-light-theme($app-primary, $app-accent);
     }
   }
 
+  .mat-mini-fab[color="accent"] {
+    background-color: #FFDC00 !important;
+  }
+
+  .mat-button[color="accent"] {
+    background-color: #FFDC00 !important;
+    color: mat-color($mat-purple, 900);
+  }
+
+  .mat-dialog-container {
+    background-color: mat-color($mat-purple, 900);
+    color: #FFDC00;
+  }
+
+  .mat-form-field-label {
+    color: #FFDC00 !important;
+  }
+
+  .mat-form-field-underline {
+    background-color: #FFDC00 !important;
+  }
+
+  .mat-focused {
+    color: #FFDC00 !important;
+}
+
   .mat-button-toggle-checked {
     background-color: mat-color($accent);
     color: mat-color($accent, default-contrast);