Theme for mat icons updated

This commit is contained in:
Piotr Pekala 2019-11-26 08:06:07 -08:00
parent 49b669819d
commit 919e5fb44b
7 changed files with 37 additions and 24 deletions

View File

@ -4,7 +4,7 @@
(click)="startConsoleForAllNodes()"
class="menu-button"
>
<mat-icon>web_asset</mat-icon>
<mat-icon class="unmarked">web_asset</mat-icon>
</button>
<button
matTooltip="Start/Resume all nodes"
@ -12,7 +12,7 @@
(click)="startNodes()"
class="menu-button"
>
<mat-icon>play_arrow</mat-icon>
<mat-icon class="unmarked">play_arrow</mat-icon>
</button>
<button
matTooltip="Suspend all nodes"
@ -20,7 +20,7 @@
(click)="suspendNodes()"
class="menu-button"
>
<mat-icon>pause</mat-icon>
<mat-icon class="unmarked">pause</mat-icon>
</button>
<button
matTooltip="Stop all nodes"
@ -28,7 +28,7 @@
(click)="stopNodes()"
class="menu-button"
>
<mat-icon>stop</mat-icon>
<mat-icon class="unmarked">stop</mat-icon>
</button>
<button
matTooltip="Reload all nodes"
@ -36,5 +36,5 @@
(click)="reloadNodes()"
class="menu-button"
>
<mat-icon>replay</mat-icon>
<mat-icon class="unmarked">replay</mat-icon>
</button>

View File

@ -10,3 +10,11 @@
border: none;
background-color: transparent;
}
.unmarked {
color: white!important;
}
.marked {
color: #0097a7!important;
}

View File

@ -2,9 +2,8 @@
matTooltip="Add a note"
mat-icon-button
class="menu-button"
[color]="drawTools.isTextChosen ? 'primary' : 'basic'"
(click)="addDrawing('text')">
<mat-icon>create</mat-icon>
<mat-icon [ngClass]="{unmarked: !drawTools.isTextChosen, marked: drawTools.isTextChosen}">create</mat-icon>
</button>
<input
type="file"
@ -17,23 +16,21 @@
mat-icon-button
class="menu-button"
(click)="file.click()">
<mat-icon>image</mat-icon>
<mat-icon class="unmarked">image</mat-icon>
</button>
<button
matTooltip="Draw a rectangle"
mat-icon-button
class="menu-button"
[color]="drawTools.isRectangleChosen ? 'primary' : 'basic'"
(click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
<mat-icon [ngClass]="{unmarked: !drawTools.isRectangleChosen, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
</button>
<button
matTooltip="Draw an ellipse"
mat-icon-button
class="menu-button"
[color]="drawTools.isEllipseChosen ? 'primary' : 'basic'"
(click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
<mat-icon [ngClass]="{unmarked: !drawTools.isEllipseChosen, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
</button>
<button
matTooltip="Draw a line"
@ -53,9 +50,8 @@
matTooltip="Lock or unlock all items"
mat-icon-button
class="menu-button"
[color]="isLocked ? 'primary' : 'basic'"
(click)="changeLockValue()">
<mat-icon>lock</mat-icon>
<mat-icon [ngClass]="{unmarked: !isLocked, marked: isLocked}">lock</mat-icon>
</button>
<button
matTooltip="Take a screenshot"
@ -63,7 +59,7 @@
class="menu-button"
(click)="takeScreenshot()"
>
<mat-icon>photo_camera</mat-icon>
<mat-icon class="unmarked">photo_camera</mat-icon>
</button>
<app-drawing-added
[server]="server"

View File

@ -22,3 +22,11 @@ mat-divider.divider {
.non-visible {
display: none;
}
.unmarked {
color: white!important;
}
.marked {
color: #0097a7!important;
}

View File

@ -146,14 +146,14 @@
</div>
<div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
<button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon>keyboard_arrow_right</mat-icon></button>
<button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
</div>
<div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
<mat-divider class="divider" [vertical]="true"></mat-divider>
<app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
<button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon>keyboard_arrow_left</mat-icon></button>
<button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon class="unmarked">keyboard_arrow_left</mat-icon></button>
</div>
<app-context-menu [project]="project" [server]="server"></app-context-menu>

View File

@ -93,6 +93,14 @@ mat-divider.divider {
color: gray;
}
.unmarked {
color: white!important;
}
.marked {
color: #0097a7!important;
}
#zoom-buttons {
position: fixed;
background: #263238;

View File

@ -38,13 +38,6 @@ $theme: map-merge(
)
);
@mixin mat-button-theme($theme) {
.mat-button, .mat-icon-button, .mat-stroked-button {
color: white;
background: transparent;
}
}
@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
@include mat-button-theme($theme);