diff options
| author | benal01 <bja4245@rit.edu> | 2025-03-24 10:27:31 -0400 |
|---|---|---|
| committer | benal01 <bja4245@rit.edu> | 2025-03-24 10:27:31 -0400 |
| commit | a05f6f0ab8dead76f937a2d7196fa005af0367fe (patch) | |
| tree | 1190a5ad270359868bb59e73f9f7c22122344865 /ufund-ui/src/app | |
| parent | b725948521e81965a18991e7dd59a2bc84dbd460 (diff) | |
| download | JellySolutions-a05f6f0ab8dead76f937a2d7196fa005af0367fe.tar.gz JellySolutions-a05f6f0ab8dead76f937a2d7196fa005af0367fe.tar.bz2 JellySolutions-a05f6f0ab8dead76f937a2d7196fa005af0367fe.zip | |
hover feedback for need list's button
Diffstat (limited to 'ufund-ui/src/app')
3 files changed, 15 insertions, 2 deletions
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css index 8f017cd..c2b8b90 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.css +++ b/ufund-ui/src/app/components/need-list/need-list.component.css @@ -24,8 +24,14 @@ li > button { display: flex; justify-content: space-between; align-items: center; + transition: all 0.3s ease; } +li > button:hover p { + font-weight: bold; +} + + .icon { width: 15px; margin: 3px -3px -1px -3px; diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index fef22d7..fc2daa5 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -13,9 +13,9 @@ <h2 *ngIf="searchResults.length == 0"> No Results Found </h2> <ul> - <li *ngFor="let need of searchResults"> + <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" > <button [routerLink]="'/need/' + need.id"> - {{need.name}} + <p id="need-label-{{need.id}}">{{need.name}}</p> <button (click)="delete(need.id)" *ngIf="isManager()"> <img class="icon" src="/delete.png" alt="Delete"> </button> diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts index 3f77df4..8ae7370 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.ts +++ b/ufund-ui/src/app/components/need-list/need-list.component.ts @@ -78,6 +78,13 @@ export class NeedListComponent { return type === ("HELPER" as unknown as userType); } + changeText(id : number, text : string) { + const label = document.getElementById('need-label-' + id); + if (label) { + label.innerHTML = text; + } + } + add(need: Need) { const currentUser = this.usersService.getCurrentUser(); //console.log("get current user in angular:", currentUser) |