Skip to content

Commit a1c8490

Browse files
zijian-zzijian-z
committed
Fix toolbar tooltips and button styling
1 parent 0b043e2 commit a1c8490

2 files changed

Lines changed: 121 additions & 54 deletions

File tree

‎src/App.jsx‎

Lines changed: 101 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,17 @@ function App() {
548548
);
549549
}
550550

551+
function ActionTooltip({ children, label, placement = "top" }) {
552+
return (
553+
<Tooltip.Root delay={260} closeDelay={80}>
554+
<Tooltip.Trigger>{children}</Tooltip.Trigger>
555+
<Tooltip.Content className="app-tooltip" placement={placement} showArrow>
556+
{label}
557+
</Tooltip.Content>
558+
</Tooltip.Root>
559+
);
560+
}
561+
551562
function SourcesPane({
552563
activeFilter,
553564
articles,
@@ -576,91 +587,124 @@ function SourcesPane({
576587
}`}
577588
>
578589
<div className="pane-rail" aria-label="订阅栏已折叠">
579-
<Tooltip content="展开订阅栏" placement="right">
580-
<Button isIconOnly variant="light" aria-label="展开订阅栏" onPress={onToggleCollapse}>
590+
<ActionTooltip label="展开订阅栏" placement="right">
591+
<Button
592+
isIconOnly
593+
variant="light"
594+
aria-label="展开订阅栏"
595+
title="展开订阅栏"
596+
onPress={onToggleCollapse}
597+
>
581598
<PanelLeftOpen size={18} />
582599
</Button>
583-
</Tooltip>
584-
<Tooltip content="刷新全部" placement="right">
600+
</ActionTooltip>
601+
<ActionTooltip label="刷新全部" placement="right">
585602
<Button
586603
isIconOnly
587604
variant="light"
588605
aria-label="刷新全部"
606+
title="刷新全部"
589607
onPress={onRefreshAll}
590608
isDisabled={isRefreshing}
591609
>
592610
<RefreshCw size={18} className={isRefreshing ? "spin" : ""} />
593611
</Button>
594-
</Tooltip>
595-
<Tooltip content="添加订阅" placement="right">
612+
</ActionTooltip>
613+
<ActionTooltip label="添加订阅" placement="right">
596614
<Button
597615
isIconOnly
598-
className="accent-icon-button"
599-
variant="flat"
616+
variant="light"
600617
aria-label="添加订阅"
618+
title="添加订阅"
601619
onPress={onAdd}
602620
>
603621
<Plus size={18} />
604622
</Button>
605-
</Tooltip>
606-
<Tooltip content="全部已读" placement="right">
607-
<Button isIconOnly variant="light" aria-label="全部已读" onPress={onMarkAllRead}>
623+
</ActionTooltip>
624+
<ActionTooltip label="全部已读" placement="right">
625+
<Button
626+
isIconOnly
627+
variant="light"
628+
aria-label="全部已读"
629+
title="全部已读"
630+
onPress={onMarkAllRead}
631+
>
608632
<CheckCheck size={18} />
609633
</Button>
610-
</Tooltip>
611-
<Tooltip content="设置" placement="right">
612-
<Button isIconOnly variant="light" aria-label="设置" onPress={onOpenSettings}>
634+
</ActionTooltip>
635+
<ActionTooltip label="设置" placement="right">
636+
<Button
637+
isIconOnly
638+
variant="light"
639+
aria-label="设置"
640+
title="设置"
641+
onPress={onOpenSettings}
642+
>
613643
<Settings size={18} />
614644
</Button>
615-
</Tooltip>
645+
</ActionTooltip>
616646
</div>
617647

618648
<div className="pane-body">
619649
<div className="pane-header sidebar-header source-toolbar">
620650
<div className="sidebar-actions">
621-
<Tooltip content="刷新全部">
651+
<ActionTooltip label="刷新全部">
622652
<Button
623653
isIconOnly
624654
variant="flat"
625655
aria-label="刷新全部"
656+
title="刷新全部"
626657
onPress={onRefreshAll}
627658
isDisabled={isRefreshing}
628659
>
629660
<RefreshCw size={18} className={isRefreshing ? "spin" : ""} />
630661
</Button>
631-
</Tooltip>
632-
<Tooltip content="添加订阅">
662+
</ActionTooltip>
663+
<ActionTooltip label="添加订阅">
633664
<Button
634665
isIconOnly
635-
className="accent-icon-button"
636666
variant="flat"
637667
aria-label="添加订阅"
668+
title="添加订阅"
638669
onPress={onAdd}
639670
>
640671
<Plus size={18} />
641672
</Button>
642-
</Tooltip>
643-
<Tooltip content="全部已读">
644-
<Button isIconOnly variant="flat" aria-label="全部已读" onPress={onMarkAllRead}>
673+
</ActionTooltip>
674+
<ActionTooltip label="全部已读">
675+
<Button
676+
isIconOnly
677+
variant="flat"
678+
aria-label="全部已读"
679+
title="全部已读"
680+
onPress={onMarkAllRead}
681+
>
645682
<CheckCheck size={18} />
646683
</Button>
647-
</Tooltip>
648-
<Tooltip content="设置">
649-
<Button isIconOnly variant="flat" aria-label="设置" onPress={onOpenSettings}>
684+
</ActionTooltip>
685+
<ActionTooltip label="设置">
686+
<Button
687+
isIconOnly
688+
variant="flat"
689+
aria-label="设置"
690+
title="设置"
691+
onPress={onOpenSettings}
692+
>
650693
<Settings size={18} />
651694
</Button>
652-
</Tooltip>
653-
<Tooltip content="折叠订阅栏">
695+
</ActionTooltip>
696+
<ActionTooltip label="折叠订阅栏">
654697
<Button
655698
isIconOnly
656699
className="desktop-only"
657700
variant="flat"
658701
aria-label="折叠订阅栏"
702+
title="折叠订阅栏"
659703
onPress={onToggleCollapse}
660704
>
661705
<PanelLeftClose size={18} />
662706
</Button>
663-
</Tooltip>
707+
</ActionTooltip>
664708
</div>
665709
</div>
666710

@@ -720,33 +764,36 @@ function SourcesPane({
720764
) : null}
721765
</button>
722766
<div className="feed-actions">
723-
<Tooltip content="刷新订阅" placement="right">
767+
<ActionTooltip label="刷新订阅" placement="right">
724768
<button
725769
type="button"
726770
aria-label="刷新订阅"
771+
title="刷新订阅"
727772
onClick={() => onRefreshFeed(feed.id)}
728773
>
729774
<RefreshCw size={14} />
730775
</button>
731-
</Tooltip>
732-
<Tooltip content="编辑订阅" placement="right">
776+
</ActionTooltip>
777+
<ActionTooltip label="编辑订阅" placement="right">
733778
<button
734779
type="button"
735780
aria-label="编辑订阅"
781+
title="编辑订阅"
736782
onClick={() => onEditFeed(feed.id)}
737783
>
738784
<Edit3 size={14} />
739785
</button>
740-
</Tooltip>
741-
<Tooltip content="删除订阅" placement="right">
786+
</ActionTooltip>
787+
<ActionTooltip label="删除订阅" placement="right">
742788
<button
743789
type="button"
744790
aria-label="删除订阅"
791+
title="删除订阅"
745792
onClick={() => onRemoveFeed(feed.id)}
746793
>
747794
<Trash2 size={14} />
748795
</button>
749-
</Tooltip>
796+
</ActionTooltip>
750797
</div>
751798
{feed.error ? <p className="feed-error">{feed.error}</p> : null}
752799
</div>
@@ -791,11 +838,17 @@ function ArticleListPane({
791838
}`}
792839
>
793840
<div className="pane-rail" aria-label="文章列表已折叠">
794-
<Tooltip content="展开标题栏" placement="right">
795-
<Button isIconOnly variant="light" aria-label="展开标题栏" onPress={onToggleCollapse}>
841+
<ActionTooltip label="展开标题栏" placement="right">
842+
<Button
843+
isIconOnly
844+
variant="light"
845+
aria-label="展开标题栏"
846+
title="展开标题栏"
847+
onPress={onToggleCollapse}
848+
>
796849
<PanelLeftOpen size={18} />
797850
</Button>
798-
</Tooltip>
851+
</ActionTooltip>
799852
<span className="rail-divider" />
800853
<List size={18} aria-hidden="true" />
801854
</div>
@@ -807,6 +860,7 @@ function ArticleListPane({
807860
variant="light"
808861
className="mobile-back"
809862
aria-label="返回"
863+
title="返回"
810864
onPress={onBack}
811865
>
812866
<ChevronLeft size={19} />
@@ -815,17 +869,18 @@ function ArticleListPane({
815869
<span className="eyebrow">Articles</span>
816870
<h2>{sourceTitle}</h2>
817871
</div>
818-
<Tooltip content="折叠标题栏">
872+
<ActionTooltip label="折叠标题栏">
819873
<Button
820874
isIconOnly
821875
className="desktop-only"
822876
variant="flat"
823877
aria-label="折叠标题栏"
878+
title="折叠标题栏"
824879
onPress={onToggleCollapse}
825880
>
826881
<PanelLeftClose size={18} />
827882
</Button>
828-
</Tooltip>
883+
</ActionTooltip>
829884
</div>
830885

831886
<label className="search-box">
@@ -886,6 +941,7 @@ function ReaderPane({ article, feed, mobilePane, onBack, onToggleStar }) {
886941
variant="light"
887942
className="mobile-back"
888943
aria-label="返回"
944+
title="返回"
889945
onPress={onBack}
890946
>
891947
<ChevronLeft size={19} />
@@ -895,24 +951,26 @@ function ReaderPane({ article, feed, mobilePane, onBack, onToggleStar }) {
895951
{article.publishedAt ? <time>{formatLongDate(article.publishedAt)}</time> : null}
896952
</div>
897953
<div className="reader-actions">
898-
<Tooltip content={article.starred ? "取消星标" : "星标"}>
954+
<ActionTooltip label={article.starred ? "取消星标" : "星标"}>
899955
<Button
900956
isIconOnly
901957
variant={article.starred ? "solid" : "flat"}
902958
color={article.starred ? "warning" : "default"}
903959
aria-label={article.starred ? "取消星标" : "星标"}
960+
title={article.starred ? "取消星标" : "星标"}
904961
onPress={() => onToggleStar(article.id)}
905962
>
906963
<Star size={18} fill={article.starred ? "currentColor" : "none"} />
907964
</Button>
908-
</Tooltip>
965+
</ActionTooltip>
909966
{article.link ? (
910967
<Button
911968
as="a"
912969
href={article.link}
913970
target="_blank"
914971
rel="noreferrer"
915972
variant="flat"
973+
title="打开原文"
916974
>
917975
原文
918976
</Button>
@@ -1211,6 +1269,7 @@ function SettingsDialog({
12111269
/>
12121270
<button
12131271
aria-label="删除文件夹"
1272+
title="删除文件夹"
12141273
disabled={folderDrafts.length <= 1}
12151274
onClick={() => commitFolders(folderDrafts.filter((item) => item.id !== folder.id))}
12161275
type="button"
@@ -1305,7 +1364,7 @@ function Dialog({ children, onClose, title, wide = false }) {
13051364
>
13061365
<div className="dialog-header">
13071366
<h2>{title}</h2>
1308-
<Button isIconOnly variant="light" aria-label="关闭" onPress={onClose}>
1367+
<Button isIconOnly variant="light" aria-label="关闭" title="关闭" onPress={onClose}>
13091368
×
13101369
</Button>
13111370
</div>

‎src/styles.css‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,7 @@ button {
144144
--accent-soft: rgba(251, 191, 36, 0.15);
145145
}
146146

147-
.accent-button,
148-
.accent-icon-button {
147+
.accent-button {
149148
box-shadow: none !important;
150149
}
151150

@@ -159,22 +158,31 @@ button {
159158
filter: brightness(0.96);
160159
}
161160

162-
.accent-icon-button {
163-
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
164-
background: var(--accent-soft) !important;
165-
color: var(--accent) !important;
166-
}
167-
168-
.accent-icon-button:hover {
169-
background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
170-
}
171-
172161
[data-slot="base"][data-focus-visible="true"] {
173162
outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent) !important;
174163
outline-offset: 2px;
175164
box-shadow: none !important;
176165
}
177166

167+
.app-tooltip {
168+
z-index: 80;
169+
padding: 6px 9px;
170+
border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
171+
border-radius: 7px;
172+
background: color-mix(in srgb, var(--text) 92%, transparent);
173+
color: var(--pane-bg);
174+
font-size: 12px;
175+
font-weight: 720;
176+
line-height: 1.2;
177+
box-shadow: 0 10px 24px rgba(24, 32, 38, 0.2);
178+
}
179+
180+
:root[data-theme="dark"] .app-tooltip {
181+
border-color: color-mix(in srgb, white 14%, transparent);
182+
background: color-mix(in srgb, white 92%, transparent);
183+
color: #11161b;
184+
}
185+
178186
.mobile-switch {
179187
display: none;
180188
align-items: center;

0 commit comments

Comments
 (0)