Add and correct tooltips for buttons (#379)

qualicen · Oct 6, 2021 · 304a2b3 · 304a2b3
1 parent 63f88af
commit 304a2b3
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 42 deletions.
diff --git a/...rc/app/modules/navigation/modules/project-explorer/components/element-tree.component.html b/...rc/app/modules/navigation/modules/project-explorer/components/element-tree.component.html
@@ -7,8 +7,8 @@
                     <button
                         id="projectexplorer-expand-{{element['extId'] ? element['extId'] + ': ' : ''}}{{element.name}}"
                         type="button" (click)="toggle()" (keydown)="handleKey($event, false);"
-                        title="{{'expand' | translate}}" class="btn btn-sm expand"
-                        [style.visibility]="canExpand ? 'visible' : 'hidden'">
+                        title="{{ !expanded ? ('expand' | translate) : ('collapse' | translate) }}"
+                        class="btn btn-sm expand" [style.visibility]="canExpand ? 'visible' : 'hidden'">
                         <i *ngIf="!expanded" class="fa fa-plus-square-o" aria-hidden="true"></i>
                         <i *ngIf="expanded" class="fa fa-minus-square-o" aria-hidden="true"></i>
                     </button>

diff --git a/...pp/modules/navigation/modules/project-explorer/components/project-explorer.component.html b/...pp/modules/navigation/modules/project-explorer/components/project-explorer.component.html
@@ -3,21 +3,22 @@
         <ul role="tablist" class="nav nav-tabs justify-content-start" id="explorer">
             <li *ngIf="config?.enableProjectExplorer === 'true'" class="nav-item">
                 <button [ngClass]="{'active' : currentActiveTab === ActiveTab.project}" role="tab"
-                    (click)="switchToProject()" class="nav-link" id="ngb-tab-0" aria-disabled="false"
+                    (click)="switchToProject()" class="nav-link" title="{{'project' | translate}}" id="ngb-tab-0" aria-disabled="false"
                     [attr.aria-expanded]="currentActiveTab === ActiveTab.project ? 'true' : 'false'"
                     [attr.aria-controls]="currentActiveTab === ActiveTab.project ? 'ngb-tab-0-panel' : null">{{'project'
                     | translate}}</button>
             </li>
             <li class="nav-item">
                 <button [ngClass]="{'active' : currentActiveTab === ActiveTab.library}" role="tab"
-                    (click)="switchToLibrary()" class="nav-link" id="ngb-tab-1" aria-disabled="false"
+                    (click)="switchToLibrary()" class="nav-link" title="{{'library' | translate}}" id="ngb-tab-1" aria-disabled="false"
                     [attr.aria-expanded]="currentActiveTab === ActiveTab.library ? 'true' : 'false'"
                     [attr.aria-controls]="currentActiveTab === ActiveTab.library ? 'ngb-tab-1-panel' : null">{{'library'
-                    | translate}}</button>
+                    | translate}}
+                </button>
             </li>
             <li class="nav-item">
                 <button [ngClass]="{'active' : currentActiveTab === ActiveTab.recycleBin}" role="tab"
-                    (click)="switchToRecycleBin()" class="nav-link" id="ngb-tab-1" aria-disabled="false"
+                    (click)="switchToRecycleBin()" class="nav-link" title="{{'recycleBin' | translate}}" id="ngb-tab-1" aria-disabled="false"
                     [attr.aria-expanded]="currentActiveTab === ActiveTab.recycleBin ? 'true' : 'false'"
                     [attr.aria-controls]="currentActiveTab === ActiveTab.recycleBin ? 'ngb-tab-1-panel' : null">
                     <i class="fa fa-trash" aria-hidden="true"></i>

diff --git a/...views/main/authentication/modules/choose-project/components/choose-project.component.html b/...views/main/authentication/modules/choose-project/components/choose-project.component.html
@@ -3,5 +3,5 @@
     <div class="input-group-text"><em class="fa fa-suitcase adjusted-height-input-group-prepend"></em></div>
   </div>
   <input type="text" class="form-control form-control-sm" [(ngModel)]="project" [ngbTypeahead]="search"
-  [editable]="false">
-</div>
+  [editable]="false" placeholder="{{'chooseProject' | translate}}">
+</div>
diff --git a/web/src/app/modules/views/main/authentication/modules/login/components/login.component.html b/web/src/app/modules/views/main/authentication/modules/login/components/login.component.html
@@ -41,7 +41,7 @@ <h1 class="card-title text-center mb-4 mt-1">{{'login' | translate}}</h1>
                     </span>
                 </div>
                 <div ngbDropdown class="d-inline-block input-group-append" #projectDropdown>
-                    <button class="btn btn-sm btn-outline-primary" id="login-project-dropdown" ngbDropdownToggle>
+                    <button class="btn btn-sm btn-outline-primary" id="login-project-dropdown" ngbDropdownToggle title="{{'chooseProject' | translate}}">
                         {{project ? project : ('project' | translate)}}
                     </button>
                     <div ngbDropdownMenu aria-labelledby="projectDropdown">

diff --git a/.../app/modules/views/side/modules/errors-warnings/components/errors-warnings.component.html b/.../app/modules/views/side/modules/errors-warnings/components/errors-warnings.component.html
@@ -2,9 +2,11 @@
     <h5 class="card-header">
         {{'ErrorsandWarnings' | translate}}
         <button id="linksactions-expand-button" type="button" class="btn btn-sm btn-secondary pull-right"
-            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i
-                *ngIf="isCollapsed" class="fa fa-angle-double-down"></i><i *ngIf="!isCollapsed"
-                class="fa fa-angle-double-up"></i></button>
+            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"
+            title="{{ isCollapsed ? ('expand' | translate) : ('collapse' | translate) }}">
+            <i *ngIf="isCollapsed" class="fa fa-angle-double-down"></i>
+            <i *ngIf="!isCollapsed" class="fa fa-angle-double-up"></i>
+        </button>
     </h5>
     <div class="card-body" *ngIf="!isCollapsed">
         <p class="card-text">

diff --git a/web/src/app/modules/views/side/modules/history-view/components/history-view.component.html b/web/src/app/modules/views/side/modules/history-view/components/history-view.component.html
@@ -2,14 +2,15 @@
     <h5 class="card-header">
         {{'Changes' | translate}}
         <button id="simplehistory-expand-button" type="button" class="btn btn-sm btn-secondary pull-right"
-            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i
-                *ngIf="isCollapsed" class="fa fa-angle-double-down"></i><i *ngIf="!isCollapsed"
-                class="fa fa-angle-double-up"></i></button>
+            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"
+            title="{{ isCollapsed ? ('expand' | translate) : ('collapse' | translate) }}">
+            <i *ngIf="isCollapsed" class="fa fa-angle-double-down"></i>
+            <i *ngIf="!isCollapsed" class="fa fa-angle-double-up"></i></button>
     </h5>
     <ul class="list-group list-group-flush" *ngIf="!isCollapsed">
         <li *ngFor="let entry of modelHistoryEntries" class="list-group-item">
-            <span
-                class="text-muted">{{getDate(entry.timestamp + '') | date:'yyyy-MM-dd HH:mm:ss'}}</span>&nbsp;<span>{{entry.user}}</span>
+            <span class="text-muted">{{getDate(entry.timestamp + '') | date:'yyyy-MM-dd
+                HH:mm:ss'}}</span>&nbsp;<span>{{entry.user}}</span>
             <ul class="historyentry">
                 <li *ngFor="let deletedObject of entry.deletedObjects" class="list-unstyled">
                     <i class="fa fa-trash fa-sm"
@@ -23,7 +24,7 @@ <h5 class="card-header">
                         <i class="fa fa-edit fa-sm" aria-hidden="true"></i>&nbsp;{{change.objectName}}&nbsp;<span
                             class="text-muted">({{change.objectType}})</span>
                         <br>{{change.feature | translate | titlecase }}&nbsp;{{ 'ChangedTo' | translate
-            }}:&nbsp;{{change.newValue}}
+                        }}:&nbsp;{{change.newValue}}
                     </div>
                     <div *ngIf="change.isCreate">
                         <i class="fa fa-plus fa-sm" aria-hidden="true"></i>&nbsp;{{change.objectName}}&nbsp;<span

diff --git a/web/src/app/modules/views/side/modules/links-actions/components/links-actions.component.html b/web/src/app/modules/views/side/modules/links-actions/components/links-actions.component.html
@@ -2,26 +2,25 @@
     <h5 class="card-header">
         {{'LinksandActions' | translate}}
         <button id="linksactions-expand-button" type="button" class="btn btn-sm btn-secondary pull-right"
-            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i
-                *ngIf="isCollapsed" class="fa fa-angle-double-down"></i><i *ngIf="!isCollapsed"
-                class="fa fa-angle-double-up"></i></button>
+            (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"
+            title="{{ isCollapsed ? ('expand' | translate) : ('collapse' | translate) }}">
+            <i *ngIf="isCollapsed" class="fa fa-angle-double-down"></i>
+            <i *ngIf="!isCollapsed" class="fa fa-angle-double-up"></i></button>
     </h5>
     <ul class="list-group list-group-flush" *ngIf="!isCollapsed">
-        <li *ngIf="requirement" class="list-group-item"><span
-                class="data-item-title">{{'Requirement' | translate}}:</span>&nbsp;<a
-                id="{{'requirement-' + requirement.name + '-link'}}"
+        <li *ngIf="requirement" class="list-group-item"><span class="data-item-title">{{'Requirement' |
+                translate}}:</span>&nbsp;<a id="{{'requirement-' + requirement.name + '-link'}}"
                 [navigationTarget]="requirement">{{requirement.extId}}: {{requirement.name}}</a></li>
-        <li *ngIf="requirement" class="list-group-item"><span
-                class="data-item-title">{{'RequirementDescription' | translate}}:</span>&nbsp;<p
-                (click)="toggleDescription()" id="linksactions-extenddescription-button" class="pointer">
+        <li *ngIf="requirement" class="list-group-item"><span class="data-item-title">{{'RequirementDescription' |
+                translate}}:</span>&nbsp;<p (click)="toggleDescription()" id="linksactions-extenddescription-button"
+                class="pointer">
                 {{requirementDescription}}&nbsp;<i *ngIf="canTruncate"
                     class="{{'fa fa-' + descriptionCollapsibleLabel}}" aria-hidden="true"></i></p>
         </li>
         <li *ngIf="model" class="list-group-item"><span class="data-item-title">{{'Model' | translate}}:</span>&nbsp;<a
                 [navigationTarget]="model">{{model.name}}</a></li>
-        <li *ngIf="testSpecification" class="list-group-item"><span
-                class="data-item-title">{{'TestSpecification' | translate}}:</span>&nbsp;<a
-                [navigationTarget]="testSpecification">{{testSpecification.name}}</a></li>
+        <li *ngIf="testSpecification" class="list-group-item"><span class="data-item-title">{{'TestSpecification' |
+                translate}}:</span>&nbsp;<a [navigationTarget]="testSpecification">{{testSpecification.name}}</a></li>
         <ng-container *ngIf="canHaveTestSpecifications" class="list-group list-group-flush">
             <li class="list-group-item"><span class="data-item-title" style="width: 100%">{{'TestSpecifications' |
                     translate}}:</span>&nbsp;<span *ngIf="!testSpecifications || testSpecifications.length === 0"

diff --git a/.../modules/views/side/modules/properties-editor/components/properties-editor.component.html b/.../modules/views/side/modules/properties-editor/components/properties-editor.component.html
@@ -5,7 +5,9 @@ <h5 class="card-header">
                 {{'Properties' | translate}}
                 <button id="properties-expand-button" type="button" class="btn btn-sm btn-secondary pull-right"
                     (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed"
-                    aria-controls="collapseExample"><em *ngIf="isCollapsed" class="fa fa-angle-double-down"></em>
+                    aria-controls="collapseExample"
+                    title="{{ isCollapsed ? ('expand' | translate) : ('collapse' | translate) }}">
+                    <em *ngIf="isCollapsed" class="fa fa-angle-double-down"></em>
                     <em *ngIf="!isCollapsed" class="fa fa-angle-double-up"></em>
                 </button>
             </h5>
@@ -23,7 +25,9 @@ <h6 class="card-header">
             <li class="list-group-item">
                 <ul class="linking-model-list">
                     <li *ngFor="let linkingModel of linkingModels" class="linking-model-item">
-                        <a [navigationTarget]="linkingModel"><icon-selector [model]="linkingModel"></icon-selector>&nbsp;{{linkingModel.name}}</a>
+                        <a [navigationTarget]="linkingModel">
+                            <icon-selector [model]="linkingModel"></icon-selector>&nbsp;{{linkingModel.name}}
+                        </a>
                     </li>
                 </ul>
             </li>
@@ -34,7 +38,9 @@ <h6 class="card-header">
             </h6>
         </li>
         <li class="list-group-item" *ngIf="hasLinkedNode">
-            <a [navigationTarget]="linkedModel"><icon-selector [model]="linkedModel"></icon-selector>&nbsp;{{linkedModel.name}}</a>
+            <a [navigationTarget]="linkedModel">
+                <icon-selector [model]="linkedModel"></icon-selector>&nbsp;{{linkedModel.name}}
+            </a>
         </li>
         <li class="list-group-item" *ngIf="showLinkingButton">
             <link-model-button [element]="selectedElement"></link-model-button>
@@ -45,4 +51,4 @@ <h6 class="card-header">
     <div class="card-body">
         <p class="card-text">{{'noOrMultipleElementSelected' | translate}}.</p>
     </div>
-</div>
+</div>
diff --git a/web/src/app/modules/views/side/modules/tracing-links/components/tracing-links.component.html b/web/src/app/modules/views/side/modules/tracing-links/components/tracing-links.component.html
@@ -3,9 +3,10 @@ <h5 class="card-header">
         {{'Traces' | translate}}
         <div class="input-group input-group-sm">
             <button id="traces-expand-button" type="button" class="btn btn-sm btn-secondary pull-right"
-                (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed"
-                aria-controls="collapseExample"><i *ngIf="isCollapsed" class="fa fa-angle-double-down"></i><i
-                    *ngIf="!isCollapsed" class="fa fa-angle-double-up"></i></button>
+                (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"
+                title="{{ isCollapsed ? ('expand' | translate) : ('collapse' | translate) }}">
+                <i *ngIf="isCollapsed" class="fa fa-angle-double-down"></i>
+                <i *ngIf="!isCollapsed" class="fa fa-angle-double-up"></i></button>
         </div>
     </h5>
     <div class="card-body" [ngbCollapse]="isCollapsed">

diff --git a/web/src/assets/i18n/de.json b/web/src/assets/i18n/de.json
@@ -101,8 +101,9 @@
 	"cancel": "Abbrechen",
 	"causeEffectGraph": "Ursache-Wirkungs-Diagramm",
 	"chooseLanguage": "Sprache ändern",
-	"chooseProject": "Projekt auswähler",
+	"chooseProject": "Projekt wählen",
 	"clear": "Alle Inhalte entfernen",
+	"collapse": "Einklappen",
 	"commandNotFoundForResolve": "Befehl zum Abarbeiten nicht gefunden",
 	"commandWasNotDefined": "Befehl war nicht definiert",
 	"confirmSave": "Die Änderungen werden gespeichert. Fortfahren?",
@@ -143,7 +144,7 @@
 	"elementCouldNotBeSaved": "Element konnte nicht gespeichert werden",
 	"elementCouldNotBeUpdated": "Element konnte nicht geändert werden",
 	"errorLoggedOut": "Sie wurden aufgrund eines unbekannten Fehlers abgemeldet.",
-	"expand": "",
+	"expand": "Ausklappen",
 	"export": "Exportieren",
 	"exportSuccessful": "Export erfolgreich",
 	"exportTestprocedure": "",
@@ -228,6 +229,7 @@
 	"processModel": "Prozessmodell",
 	"project": "Projekt",
 	"queryCouldNotBePerformed": "Abfrage konnte nicht durchgeführt werden",
+	"recycleBin": "Papierkorb",
 	"recycleBinIsEmpty": "Der Papierkorb ist leer",
 	"redo": "Wiederholen",
 	"requiredField": "Pflichtfeld",
@@ -246,7 +248,7 @@
 		"retry": "Fehler beim Speichern. Bitte versuchen Sie es später erneut.",
 		"title": "Speichern nicht möglich"
 	},
-	"search": "suchen",
+	"search": "Suchen",
 	"searchClear": "Inhalt des Suchfelds löschen",
 	"searchRequirements": "Suchen",
 	"searchResults": "Resultate",

diff --git a/web/src/assets/i18n/gb.json b/web/src/assets/i18n/gb.json
@@ -103,6 +103,7 @@
 	"chooseLanguage": "Choose Language",
 	"chooseProject": "Choose project",
 	"clear": "Clear",
+	"collapse": "Collapse",
 	"commandNotFoundForResolve": "Command for resolve not found.",
 	"commandWasNotDefined": "Command was not defined",
 	"confirmSave": "Your changes will be saved. Continue?",
@@ -143,7 +144,7 @@
 	"elementCouldNotBeSaved": "Could not save element",
 	"elementCouldNotBeUpdated": "Could nto update element",
 	"errorLoggedOut": "You were logged out due to an unknown error.",
-	"expand": "",
+	"expand": "Expand",
 	"export": "Export",
 	"exportSuccessful": "Export successful",
 	"exportTestprocedure": "",
@@ -228,6 +229,7 @@
 	"processModel": "Process Model",
 	"project": "Project",
 	"queryCouldNotBePerformed": "Query could not be performed",
+	"recycleBin": "Recycle bin",
 	"recycleBinIsEmpty": "The recycle bin is empty",
 	"redo": "Redo",
 	"requiredField": "Required field",
@@ -246,7 +248,7 @@
 		"retry": "Error while saving. Please try again later.",
 		"title": "Saving is not possible"
 	},
-	"search": "search",
+	"search": "Search",
 	"searchClear": "Delete contents of search bar",
 	"searchRequirements": "Search",
 	"searchResults": "Search results",

diff --git a/web/src/assets/scss/specmate.extensions.scss b/web/src/assets/scss/specmate.extensions.scss
@@ -21,6 +21,9 @@ button,
 .btn {
   cursor: pointer;
 }
+.btn:disabled {
+    pointer-events: all;
+}
 
 a {
   color: $primary;