polish(v0.7): styled hover tooltips on timeline + push toggle (explain the icon)
Give the two tab-bar line-icon buttons the same styled data-tip hover tooltip as the toolbar icons, so their meaning is clear on hover (native title was slow/ugly): - timeline → "Activity timeline" - push toggle → "Notifications off — tap to turn on" / "…on — tap to turn off" Left-anchored (they sit on the left of the tab bar). 158 push+tabs tests green.
This commit is contained in:
@@ -319,9 +319,9 @@ function renderToggleButton(
|
||||
)
|
||||
btn.innerHTML = ICON_BELL
|
||||
btn.append(' ' + (isSubscribed ? 'On' : 'Off'))
|
||||
btn.title = isSubscribed
|
||||
? 'Click to disable push notifications'
|
||||
: 'Click to enable push notifications'
|
||||
btn.dataset.tip = isSubscribed
|
||||
? 'Notifications on — tap to turn off'
|
||||
: 'Notifications off — tap to turn on'
|
||||
btn.setAttribute('aria-pressed', isSubscribed ? 'true' : 'false')
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
|
||||
@@ -1562,3 +1562,33 @@ body.home-open #term {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* v0.7: styled hover tooltip on the timeline + push buttons (like .toolbtn).
|
||||
Left-anchored — these sit on the left side of the tab bar. */
|
||||
.tab-timeline,
|
||||
.push-toggle-btn {
|
||||
position: relative;
|
||||
}
|
||||
.tab-timeline[data-tip]::after,
|
||||
.push-toggle-btn[data-tip]::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
background: var(--surface-3);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.12s ease;
|
||||
z-index: 60;
|
||||
}
|
||||
.tab-timeline[data-tip]:hover::after,
|
||||
.push-toggle-btn[data-tip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -855,7 +855,7 @@ export class TabApp {
|
||||
const tl = document.createElement('button')
|
||||
tl.className = 'tab-timeline'
|
||||
tl.innerHTML = ICON_TIMELINE
|
||||
tl.title = 'Activity timeline'
|
||||
tl.dataset.tip = 'Activity timeline'
|
||||
tl.setAttribute('aria-label', 'Activity timeline')
|
||||
tl.classList.toggle('active', this.timelineOpen)
|
||||
tl.addEventListener('click', () => this.toggleTimeline())
|
||||
|
||||
Reference in New Issue
Block a user