This is an automated email from the ASF dual-hosted git repository.
chengpan pushed a commit to branch branch-0.12
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/branch-0.12 by this push:
new cd2223ac0f [ZEPPELIN-6072] Unify tooltips across action bar buttons,
and add tooltips to paragraph controller
cd2223ac0f is described below
commit cd2223ac0f5449131ec5486283552120b800e694
Author: cherrie-k <80851202+cherri...@users.noreply.github.com>
AuthorDate: Mon Sep 30 00:33:13 2024 +0900
[ZEPPELIN-6072] Unify tooltips across action bar buttons, and add tooltips
to paragraph controller
### What is this PR for?
I noticed that only some buttons in the first group of the action bar
(highlighted in the red box in the image below) had tooltips, while others did
not. To improve consistency and enhance user experience, I ensured that all
buttons in the first group of the action bar display tooltips on hover.
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/cc89a350-fa2e-42b8-9cd2-b153ddc7431c";>
I also considered adding tooltips to the other groups of the action bar
(outside the red box), but due to the complexity of implementing this with the
ng-zorro UI library, more time and investigation are needed. I aim to address
this in a future update.
In addition, the paragraph controller currently lacks tooltips on its
icons, which may be confusing for new users unfamiliar with Zeppelin (like
myself). Without tooltips, it's unclear what each button does, leading to
potential usability issues. I added tooltips to all icons in the paragraph
controller to improve clarity and guide users of the functionality of each
button.
<img width="300" alt="image"
src="https://github.com/user-attachments/assets/fb9f7bb7-5940-416f-9c02-8c45b1e7ad6a";>
These changes aim to enhance the overall usability of the interface, making
it more intuitive and consistent for all users.
**Before**
Some buttons show no tooltips.
**After**
Missing tooltips are now displayed.
### What type of PR is it?
Improvement
### Todos
* [x] - Add tooltips to action bar
* [x] - Add tooltips to paragraph controller
### What is the Jira issue?
[ZEPPELIN-6072](https://issues.apache.org/jira/browse/ZEPPELIN-6072)
### How should this be tested?
* Build and test - check if tooltips are visible
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #4832 from cherrie-k/feat/tooltip.
Signed-off-by: Cheng Pan <cheng...@apache.org>
(cherry picked from commit 640e2df3cdb1d019f7302aa24cd98373eba69bcf)
Signed-off-by: Cheng Pan <cheng...@apache.org>
---
.../notebook/action-bar/action-bar.component.html | 8 ++++++--
.../notebook/paragraph/control/control.component.html | 16 +++++++++++-----
2 files changed, 17 insertions(+), 7 deletions(-)
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 1972a1e7dc..56c52dc661 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -22,7 +22,9 @@
<nz-button-group nzSize="small">
<button nz-button
nz-popconfirm
- nzTitle="Run all paragraphs?"
+ nzPopconfirmTitle="Run all paragraphs?"
+ nz-tooltip
+ nzTooltipTitle="Run all paragraphs"
(nzOnConfirm)="runAllParagraphs()"
[disabled]="revisionView || isNoteParagraphRunning">
<i nz-icon nzType="play-circle" nzTheme="outline"></i>
@@ -45,9 +47,11 @@
</button>
<button nz-button
nz-popconfirm
+ nzPopconfirmTitle="Do you want to clear all output?"
+ nz-tooltip
+ nzTooltipTitle="Clear all output"
*ngIf="!viewOnly"
[disabled]="revisionView"
- nzTitle="Do you want to clear all output?"
(nzOnConfirm)="clearAllParagraphOutput()">
<i nz-icon nzType="fire" nzTheme="outline"></i>
</button>
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
index 5ec5f52fcc..b21dc8a49d 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
@@ -28,22 +28,28 @@
(click)="runParagraph.emit()"
nzType="play-circle"
class="run-para"
- nzTheme="outline"></i>
+ nzTheme="outline"
+ nz-tooltip
+ nzTooltipTitle="Run paragraph"></i>
<i nz-icon
*ngIf="status=='RUNNING' || status=='PENDING'"
(click)="cancelParagraph.emit()"
class="cancel-para"
nzType="pause-circle"
- nzTheme="outline"></i>
+ nzTheme="outline"
+ nz-tooltip
+ nzTooltipTitle="Cancel paragraph"></i>
</a>
- <a (click)="toggleEditor()">
+ <a (click)="toggleEditor()" nz-tooltip nzTooltipTitle="Show/hide the code">
<i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'"
nzTheme="outline"></i>
</a>
- <a (click)="toggleOutput()">
+ <a (click)="toggleOutput()" nz-tooltip nzTooltipTitle="Show/hide the output">
<i nz-icon [nzType]="tableHide ? 'book' : 'read'" nzTheme="outline"></i>
</a>
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'"
[nzClickHide]="false" [(nzVisible)]="dropdownVisible">
- <i nz-icon nzType="setting" nzTheme="outline"></i>
+ <span nz-tooltip nzTooltipTitle="More">
+ <i nz-icon nzType="setting" nzTheme="outline"></i>
+ </span>
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu class="setting-menu">
