feat(desktop): add semi-transparent overlay for exiting entry detail view
When viewing entry details in wide mode, a semi-transparent overlay is now displayed over the subscription list area. This overlay includes: - Visual indication with semi-transparent background and blur effect - Exit hint with arrow icon and text prompting users to click to return - Click anywhere on the overlay to navigate back to the entry list - Multi-language support (EN, ZH-CN, JA) This improves UX by providing a clear and intuitive way to exit the detail view. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
bdc17c0f12
commit
a3a6a2aedb
|
|
@ -22,6 +22,8 @@ import {
|
|||
useTimelineColumnTempShow,
|
||||
} from "~/atoms/sidebar"
|
||||
import { FloatingLayerScope } from "~/constants"
|
||||
import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
|
||||
import { useRouteParams } from "~/hooks/biz/useRouteParams"
|
||||
import { useBatchUpdateSubscription } from "~/hooks/biz/useSubscriptionActions"
|
||||
import { useI18n } from "~/hooks/common"
|
||||
import { NetworkStatusIndicator } from "~/modules/app/NetworkStatusIndicator"
|
||||
|
|
@ -103,6 +105,9 @@ const FeedResponsiveResizerContainer = ({
|
|||
|
||||
const feedColumnShow = useTimelineColumnShow()
|
||||
const feedColumnTempShow = useTimelineColumnTempShow()
|
||||
const { entryId, isPendingEntry } = useRouteParams()
|
||||
const navigate = useNavigateEntry()
|
||||
const t = useI18n()
|
||||
|
||||
useEffect(() => {
|
||||
if (feedColumnShow) {
|
||||
|
|
@ -165,7 +170,6 @@ const FeedResponsiveResizerContainer = ({
|
|||
timer = clearTimeout(timer)
|
||||
}
|
||||
}, [feedColumnShow])
|
||||
const t = useI18n()
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -185,6 +189,24 @@ const FeedResponsiveResizerContainer = ({
|
|||
}}
|
||||
>
|
||||
<Slot className={!feedColumnShow ? "!bg-sidebar" : ""}>{children}</Slot>
|
||||
|
||||
{/* Semi-transparent overlay with exit hint when in wide mode with entry selected */}
|
||||
{entryId && !isPendingEntry && (
|
||||
<div
|
||||
className="absolute inset-0 z-20 cursor-pointer bg-white/50 backdrop-blur-[2px] transition-colors duration-200 hover:bg-white/70"
|
||||
onClick={() => navigate({ entryId: null })}
|
||||
>
|
||||
<div className="flex items-center justify-center px-4 pt-16">
|
||||
<div className="flex flex-col items-center gap-2 rounded-lg px-4 py-3">
|
||||
<div className="text-text flex items-center gap-2">
|
||||
<i className="i-mgc-arrow-left-cute-re text-lg" />
|
||||
<span className="text-sm font-medium">{t("entry.exit_detail")}</span>
|
||||
</div>
|
||||
<span className="text-text-secondary text-xs">{t("entry.click_to_return")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@
|
|||
"discover.target.feeds": "Feeds",
|
||||
"discover.target.label": "Search for",
|
||||
"discover.target.lists": "Lists",
|
||||
"entry.click_to_return": "Click to return to entry list",
|
||||
"entry.exit_detail": "Exit Detail View",
|
||||
"entry_actions.copied_notify": "{{which}} copied to clipboard.",
|
||||
"entry_actions.copy_link": "Copy Link",
|
||||
"entry_actions.copy_title": "Copy Title",
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@
|
|||
"discover.target.feeds": "フィード",
|
||||
"discover.target.label": "検索対象",
|
||||
"discover.target.lists": "リスト",
|
||||
"entry.click_to_return": "クリックしてエントリリストに戻る",
|
||||
"entry.exit_detail": "詳細を終了",
|
||||
"entry_actions.copied_notify": "{{which}} をクリップボードにコピーしました。",
|
||||
"entry_actions.copy_link": "リンクをコピー",
|
||||
"entry_actions.copy_title": "タイトルをコピー",
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@
|
|||
"discover.target.feeds": "订阅源",
|
||||
"discover.target.label": "搜索",
|
||||
"discover.target.lists": "列表",
|
||||
"entry.click_to_return": "点击返回条目列表",
|
||||
"entry.exit_detail": "退出详情",
|
||||
"entry_actions.copied_notify": "{{which}}已复制到剪贴板。",
|
||||
"entry_actions.copy_link": "复制链接",
|
||||
"entry_actions.copy_title": "复制标题",
|
||||
|
|
|
|||
Loading…
Reference in New Issue