FEAT: Tooltips on icon-only buttons

davidibl · Mar 23, 2020 · ce1b133 · ce1b133
1 parent 0bff120
commit ce1b133
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/app/components/testsuite/testSuite.html b/src/app/components/testsuite/testSuite.html
@@ -56,20 +56,22 @@
                             [type]="1"></xn-json-editor>
         </td>
         <td class="text-center" style="padding-top:8px;" [ngClass]="item.clazz" (click)="item.showError = true">
-            <i *xnIfNull="item.result" class="fa fa-question-circle" aria-hidden="true"></i>
-            <i *xnIfFalse="item.result" class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-            <i *ngIf="item.result" class="fa fa-check-square" aria-hidden="true"></i>
+            <div [xnTooltip]="'Teststatus'" [placement]="'top'">
+                <i *xnIfNull="item.result" class="fa fa-question-circle" aria-hidden="true"></i>
+                <i *xnIfFalse="item.result" class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                <i *ngIf="item.result" class="fa fa-check-square" aria-hidden="true"></i>
+            </div>
         </td>
         <td class="button-column">
-            <xn-button (click)="testCase(item)" class="small">
+            <xn-button [xnTooltip]="'Test ausführen'" [placement]="'top'" (click)="testCase(item)" class="small">
                 <i class="fa fa-play" aria-hidden="true"></i></xn-button>
         </td>
         <td class="button-column">
-            <xn-button (click)="deleteCase(item)" class="small">
+            <xn-button [xnTooltip]="'Test löschen'" [placement]="'left'" (click)="deleteCase(item)" class="small">
                 <i class="fa fa-times" aria-hidden="true"></i></xn-button>
         </td>
         <td class="button-column">
-            <xn-button (click)="openInSimulator(item)" class="small">
+            <xn-button [xnTooltip]="'Daten in Simulation übernehmen'" [placement]="'left'" (click)="openInSimulator(item)" class="small">
                 <i class="fa fa-flask" aria-hidden="true"></i></xn-button>
         </td>
     </tr>

diff --git a/src/app/components/workspace/commit.html b/src/app/components/workspace/commit.html
@@ -5,7 +5,7 @@
 </div>
 <div class="commit-menu" [@slideInOut]="showCommitMenu">
     <ul class="toolbar">
-        <li (click)="checkout()">
+        <li [xnTooltip]="'Diesen Stand auschecken'" [placement]="'right'" (click)="checkout()">
             <small>
                 <xn-icon [iconClass]="'fa-shopping-cart'"></xn-icon>
             </small>

diff --git a/src/app/components/workspace/workspace.html b/src/app/components/workspace/workspace.html
@@ -5,11 +5,11 @@
         </li>
     </ul>
     <ul class="toolbar">
-        <li (click)="refresh()"><small><xn-icon [iconClass]="'fa-refresh'"></xn-icon></small></li>
-        <li *ngIf="isInFiletreeMode$ | async" (click)="switchViewMode(historyViewmode)">
+        <li [xnTooltip]="'Aktualisieren'" [placement]="'right'" (click)="refresh()"><small><xn-icon [iconClass]="'fa-refresh'"></xn-icon></small></li>
+        <li [xnTooltip]="'Historie'" [placement]="'bottom'" *ngIf="isInFiletreeMode$ | async" (click)="switchViewMode(historyViewmode)">
             <small><xn-icon [iconClass]="'fa-history'"></xn-icon></small>
         </li>
-        <li *ngIf="isInHistoryMode$ | async" (click)="switchViewMode(filetreeViewmode)">
+        <li [xnTooltip]="'Dateien'" [placement]="'bottom'" *ngIf="isInHistoryMode$ | async" (click)="switchViewMode(filetreeViewmode)">
             <small><xn-icon [iconClass]="'fa-file'"></xn-icon></small>
         </li>
     </ul>