ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-19 03:06:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for tooltips

Browse Source
This commit is contained in:
piotrpekala7 2020-08-03 16:52:37 +02:00
parent 01ea42e930
commit af564d6cd7
17 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/common/progress/progress.component.html
View File

@ -4,8 +4,8 @@
<div class="error-icon"><mat-icon>error_outline</mat-icon></div>
<div>Error occurred: {{ error.message }}</div>
<div>
<button mat-button (click)="refresh()" matTooltip="Refresh page"><mat-icon>refresh</mat-icon></button>
<button mat-button routerLink="/" matTooltip="Go to home"><mat-icon>home</mat-icon></button>
<button mat-button (click)="refresh()" matTooltip="Refresh page" matTooltipClass="custom-tooltip"><mat-icon>refresh</mat-icon></button>
<button mat-button routerLink="/" matTooltip="Go to home" matTooltipClass="custom-tooltip"><mat-icon>home</mat-icon></button>
</div>
</div>
</div>

2
src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
View File

@ -23,7 +23,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete adapter" (click)="delete(element)">
<button mat-icon-button matTooltip="Delete adapter" matTooltipClass="custom-tooltip" (click)="delete(element)">
<mat-icon aria-label="Delete adapter">delete</mat-icon>
</button>
</td>

2
src/app/components/preferences/common/ports/ports.component.html
View File

@ -22,7 +22,7 @@
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
<button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
<mat-icon aria-label="Delete port">delete</mat-icon>
</button>
</td>

2
src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
View File

@ -22,7 +22,7 @@
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
<button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
<mat-icon aria-label="Delete port">delete</mat-icon>
</button>
</td>

8
src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
View File

@ -56,11 +56,11 @@
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let row" style="text-align: right">
<button mat-icon-button matTooltip="Install" (click)="install(row)">
<button mat-icon-button matTooltip="Install" matTooltipClass="custom-tooltip" (click)="install(row)">
<mat-icon aria-label="Install">archive</mat-icon>
</button>
<button mat-icon-button matTooltip="Show info" (click)="showInfo(row)">
<button mat-icon-button matTooltip="Show info" matTooltipClass="custom-tooltip" (click)="showInfo(row)">
<mat-icon aria-label="Show info">info</mat-icon>
</button>
</mat-cell>
@ -147,8 +147,8 @@
{{image.filename}}
</div>
<div>
<span *ngIf="checkImage(image)"><mat-icon matTooltip="Ready to install">check</mat-icon></span>
<span *ngIf="!checkImage(image)"><mat-icon matTooltip="Missing">close</mat-icon></span>
<span *ngIf="checkImage(image)"><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span>
<span *ngIf="!checkImage(image)"><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span>
<input
type="file"
class="non-visible"

2
src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
View File

@ -18,7 +18,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
<button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
<mat-icon aria-label="Delete port">delete</mat-icon>
</button>
</td>

2
src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
View File

@ -18,7 +18,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
<button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
<mat-icon aria-label="Delete port">delete</mat-icon>
</button>
</td>

5
src/app/components/project-map/nodes-menu/nodes-menu.component.html
View File

@ -1,5 +1,6 @@
<button
matTooltip="Console connect to all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="startConsoleForAllNodes()"
class="menu-button"
@ -8,6 +9,7 @@
</button>
<button
matTooltip="Start/Resume all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="startNodes()"
class="menu-button"
@ -16,6 +18,7 @@
</button>
<button
matTooltip="Suspend all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="suspendNodes()"
class="menu-button"
@ -24,6 +27,7 @@
</button>
<button
matTooltip="Stop all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="stopNodes()"
class="menu-button"
@ -32,6 +36,7 @@
</button>
<button
matTooltip="Reload all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="reloadNodes()"
class="menu-button"

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

@ -1,5 +1,6 @@
<button
matTooltip="Add a note"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="addDrawing('text')">
@ -13,6 +14,7 @@
(change)="uploadImageFile($event)"/>
<button
matTooltip="Insert a picture"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="file.click()">
@ -20,6 +22,7 @@
</button>
<button
matTooltip="Draw a rectangle"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="addDrawing('rectangle')">
@ -27,6 +30,7 @@
</button>
<button
matTooltip="Draw an ellipse"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="addDrawing('ellipse')">
@ -34,6 +38,7 @@
</button>
<button *ngIf="!isLightThemeEnabled"
matTooltip="Draw a line"
matTooltipClass="custom-tooltip"
mat-icon-button class="menu-button"
(click)="addDrawing('line')">
<svg height="40" width="40">
@ -48,6 +53,7 @@
</button>
<button *ngIf="isLightThemeEnabled"
matTooltip="Draw a line"
matTooltipClass="custom-tooltip"
mat-icon-button class="menu-button"
(click)="addDrawing('line')">
<svg height="40" width="40">
@ -62,6 +68,7 @@
</button>
<button
matTooltip="Lock or unlock all items"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="changeLockValue()">
@ -69,6 +76,7 @@
</button>
<button
matTooltip="Take a screenshot"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button"
(click)="takeScreenshot()"

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

@ -35,11 +35,11 @@
<div *ngIf="toolbarVisibility" class="project-toolbar">
<mat-toolbar color="primary" class="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
<mat-toolbar-row *ngIf="!isLightThemeEnabled">
<button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3"></mat-icon></button>
<button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3"></mat-icon></button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="isLightThemeEnabled">
<button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3black"></mat-icon></button>
<button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3black"></mat-icon></button>
</mat-toolbar-row>
<mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
@ -141,13 +141,13 @@
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Add a link" mat-icon-button [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
<button matTooltip="Add a link" matTooltipClass="custom-tooltip" mat-icon-button [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
<mat-icon>timeline</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<button matTooltip="Enable/disable moving mode" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
<button matTooltip="Enable/disable moving mode" matTooltipClass="custom-tooltip" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
<mat-icon>zoom_out_map</mat-icon>
</button>
</mat-toolbar-row>
@ -157,13 +157,13 @@
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Fit in view" mat-icon-button (click)="fitInView()">
<button matTooltip="Fit in view" matTooltipClass="custom-tooltip" mat-icon-button (click)="fitInView()">
<mat-icon>fullscreen</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Center view" mat-icon-button (click)="centerView()">
<button matTooltip="Center view" matTooltipClass="custom-tooltip" mat-icon-button (click)="centerView()">
<mat-icon>center_focus_strong</mat-icon>
</button>
</mat-toolbar-row>
@ -185,9 +185,9 @@
</div>
<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-buttons">
<button matTooltip="Zoom in" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
<button matTooltip="Reset zoom" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
<button matTooltip="Zoom out" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>
</div>
<app-progress></app-progress>

2
src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
View File

@ -66,7 +66,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete variable" (click)="deleteVariable(element)">
<button mat-icon-button matTooltip="Delete variable" matTooltipClass="custom-tooltip" (click)="deleteVariable(element)">
<mat-icon aria-label="Delete adapter">delete</mat-icon>
</button>
</td>

2
src/app/components/projects/import-project-dialog/import-project-dialog.component.html
View File

@ -10,7 +10,7 @@
ng2FileSelect
[uploader]="uploader"
/>
<button mat-raised-button color="primary" (click)="file.click()" matTooltip="Import your .gns3p or .gns3project file" class="file-button">Choose file</button>
<button mat-raised-button color="primary" (click)="file.click()" matTooltip="Import your .gns3p or .gns3project file" matTooltipClass="custom-tooltip" class="file-button">Choose file</button>
<mat-form-field [ngClass]="{ empty: !isDeleteVisible }" class="file-name-form-field">
<input
matInput

8
src/app/components/projects/projects.component.html
View File

@ -53,16 +53,16 @@
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let row" style="text-align: right">
<button mat-icon-button matTooltip="Open project" (click)="open(row)" *ngIf="row.status == 'closed'">
<button mat-icon-button matTooltip="Open project" matTooltipClass="custom-tooltip" (click)="open(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Open project">play_arrow</mat-icon>
</button>
<button mat-icon-button matTooltip="Close project" (click)="close(row)" *ngIf="row.status == 'opened'">
<button mat-icon-button matTooltip="Close project" matTooltipClass="custom-tooltip" (click)="close(row)" *ngIf="row.status == 'opened'">
<mat-icon aria-label="Close project">pause</mat-icon>
</button>
<button mat-icon-button matTooltip="Duplicate project" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
<button mat-icon-button matTooltip="Duplicate project" matTooltipClass="custom-tooltip" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Duplicate project">filter_2</mat-icon>
</button>
<button mat-icon-button matTooltip="Delete project" (click)="delete(row)" *ngIf="row.status == 'closed'">
<button mat-icon-button matTooltip="Delete project" matTooltipClass="custom-tooltip" (click)="delete(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Delete project">delete</mat-icon>
</button>
</mat-cell>

4
src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html
View File

@ -28,11 +28,11 @@
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let row" style="text-align: right">
<button mat-icon-button matTooltip="Restore snapshot" (click)="restoreSnapshot(row)">
<button mat-icon-button matTooltip="Restore snapshot" matTooltipClass="custom-tooltip" (click)="restoreSnapshot(row)">
<mat-icon aria-label="Restore snapshot">restore</mat-icon>
</button>
<button mat-icon-button matTooltip="Delete snapshot" (click)="deleteSnapshot(row)">
<button mat-icon-button matTooltip="Delete snapshot" matTooltipClass="custom-tooltip" (click)="deleteSnapshot(row)">
<mat-icon aria-label="Delete snapshot">delete</mat-icon>
</button>
</mat-cell>

2
src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html
View File

@ -1 +1 @@
<button matTooltip="Manage snapshots" mat-icon-button (click)="createSnapshotModal()"><mat-icon>snooze</mat-icon></button>
<button matTooltip="Manage snapshots" matTooltipClass="custom-tooltip" mat-icon-button (click)="createSnapshotModal()"><mat-icon>snooze</mat-icon></button>

2
src/app/components/template/template.component.html
View File

@ -1,4 +1,4 @@
<button class="addNode" matTooltip="Add a node" mat-icon-button [matMenuTriggerFor]="mainMenu">
<button class="addNode" matTooltip="Add a node" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu">
<mat-icon>add_to_queue</mat-icon>
</button>

5
src/styles.css
View File

@ -42,3 +42,8 @@ app-root {
mat-menu-panel {
min-height: 0px;
}
.custom-tooltip {
background-color: grey;
color: #ffffff;
}