ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-24 17:15:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for icon styling

Browse Source
This commit is contained in:
piotrpekala7
2021-04-08 11:56:14 +02:00
parent d86eca7061
commit 0a67137cc6
2 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/project-map/project-map.component.html
View File

@ -29,7 +29,12 @@
</div>
</div>
<div>
<button matTooltip="Toggle topology/servers summary" matTooltipClass="custom-tooltip" mat-icon-button [color]="isTopologySummaryVisible ? 'primary' : 'basic'" (click)="toggleShowTopologySummary(!isTopologySummaryVisible)">
<button
matTooltip="Toggle topology/servers summary"
matTooltipClass="custom-tooltip"
[ngClass]="{unmarkedLight: !isTopologySummaryVisible && isLightThemeEnabled, marked: isTopologySummaryVisible}"
mat-icon-button
(click)="toggleShowTopologySummary(!isTopologySummaryVisible)">
<mat-icon>toc</mat-icon>
</button>
</div>
@ -142,13 +147,13 @@
<button matTooltip="Pan workspace" matTooltipClass="custom-tooltip" class="pan-button menu-button" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
<mat-icon>zoom_out_map</mat-icon>
</button>
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="zoomIn()">
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="resetZoom()">
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" class="zoom-button" (click)="resetZoom()">
<mat-icon>adjust</mat-icon>
</button>
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="zoomOut()">
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomOut()">
<mat-icon>zoom_out</mat-icon>
</button>
</div>

36
src/app/components/project-map/project-map.component.scss
View File

@ -89,10 +89,6 @@ g.node:hover {
&.lightTheme {
background-color: white !important;
mat-icon {
color: black !important;
}
.selected mat-icon {
color: #0097a7 !important;
}
@ -112,7 +108,6 @@ g.node:hover {
mat-icon {
font-size: 20px;
color: white;
}
.menu-button {
@ -126,6 +121,18 @@ g.node:hover {
margin: 2px 0px;
}
.zoom-button {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
border-radius: 18px;
background: none;
margin: 2px 0px;
color: white;
}
.selection-button {
margin-bottom: 0px !important;
}
@ -150,12 +157,9 @@ g.node:hover {
&.lightTheme {
background-color: rgba(244, 248, 252, 0.95) !important;
mat-icon {
color: black;
}
.menu-button {
.zoom-button {
opacity: 0.7;
color: black;
}
.section {
@ -361,3 +365,15 @@ g.node text,
mat-menu-panel {
min-height: 0px;
}
.unmarked {
color: white!important;
}
.unmarkedLight {
color: black!important;
}
.marked {
color: #0097a7!important;
}