xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(desktop): update text styles and enhance tooltip functionality 

- Replaced hardcoded text sizes with standardized 'text-body' class for consistency across various components.
- Wrapped TooltipContent in RootPortal for better rendering in EnhancedSettingsIndicator and SettingSyncIndicator components.
- Improved accessibility and visual consistency in EntryHeaderImpl and EntryContent components by updating text styles.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-04-27 14:26:40 +08:00
parent e95759b0ed
commit 91b9fae6c5
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
10 changed files with 188 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/renderer/src/modules/entry-column/templates/list-item-template.tsx
View File

@ -304,7 +304,7 @@ function AudioCover({
/>
<div
className={cn(
"group-hover:backdrop-blur-background text-[13px] opacity-0 backdrop-blur-none duration-200 group-hover:opacity-100",
"group-hover:backdrop-blur-background text-body opacity-0 backdrop-blur-none duration-200 group-hover:opacity-100",
isMobile && "backdrop-blur-background opacity-100",
)}
>

2
apps/desktop/src/renderer/src/modules/entry-content/header.electron.tsx
View File

@ -35,7 +35,7 @@ function EntryHeaderImpl({ view, entryId, className, compact }: EntryHeaderProps
{!hideRecentReader && (
<div
className={cn(
"zen-mode-macos:left-12 absolute left-5 top-0 flex h-full items-center gap-2 text-[13px] leading-none text-zinc-500",
"zen-mode-macos:left-12 text-body absolute left-5 top-0 flex h-full items-center gap-2 leading-none text-zinc-500",
"visible z-[11]",
views[view]!.wideMode && "static",
shouldShowMeta && "hidden",

2
apps/desktop/src/renderer/src/modules/entry-content/index.mobile.tsx
View File

@ -148,7 +148,7 @@ export const EntryContent: Component<{
{!hideRecentReader && (
<div
className={cn(
"absolute top-0 my-2 -mt-8 flex items-center gap-2 text-[13px] leading-none text-zinc-500",
"text-body absolute top-0 my-2 -mt-8 flex items-center gap-2 leading-none text-zinc-500",
"visible z-[11]",
)}
>

4
apps/desktop/src/renderer/src/modules/settings/control.tsx
View File

@ -105,9 +105,7 @@ export const SettingTabbedSegment: Component<{
}
export const SettingDescription: Component = ({ children, className }) => (
<small className={cn("text-text-secondary block w-4/5 text-[13px] leading-tight", className)}>
{children}
</small>
<small className={cn("text-text-secondary text-body block w-4/5", className)}>{children}</small>
)
export const SettingActionItem = ({

17
apps/desktop/src/renderer/src/modules/settings/helper/EnhancedIndicator.tsx
View File

@ -1,3 +1,4 @@
import { RootPortal } from "@follow/components/ui/portal/index.js"
import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.js"
import { useTranslation } from "react-i18next"
@ -18,13 +19,15 @@ export const EnhancedSettingsIndicator = () => {
)}
</IconTransition>
</TooltipTrigger>
<TooltipContent className="max-w-[40ch]">
{enhancedSettings ? (
<p>{t("general.enhanced.enabled.tip")}</p>
) : (
<p>{t("general.enhanced.disabled.tip")}</p>
)}
</TooltipContent>
<RootPortal>
<TooltipContent className="max-w-[40ch]">
{enhancedSettings ? (
<p>{t("general.enhanced.enabled.tip")}</p>
) : (
<p>{t("general.enhanced.disabled.tip")}</p>
)}
</TooltipContent>
</RootPortal>
</Tooltip>
)
}

9
apps/desktop/src/renderer/src/modules/settings/helper/SyncIndicator.tsx
View File

@ -1,6 +1,7 @@
import { PhCloudCheck } from "@follow/components/icons/PhCloudCheck.jsx"
import { PhCloudWarning } from "@follow/components/icons/PhCloudWarning.jsx"
import { PhCloudX } from "@follow/components/icons/PhCloudX.jsx"
import { RootPortal } from "@follow/components/ui/portal/index.js"
import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.jsx"
import { useIsOnline } from "@follow/hooks"
import { useEffect, useMemo, useRef } from "react"
@ -64,9 +65,11 @@ export const SettingSyncIndicator = () => {
<metaInfo.icon className="size-4" />
</div>
</TooltipTrigger>
<TooltipContent>
<div className="text-center text-xs">{metaInfo.text}</div>
</TooltipContent>
<RootPortal>
<TooltipContent>
<div className="text-center text-xs">{metaInfo.text}</div>
</TooltipContent>
</RootPortal>
</Tooltip>
)
}

291
apps/mobile/native/ios/Modules/PagerView/EnhancePagerViewModule.swift
View File

@ -8,172 +8,177 @@
import ExpoModulesCore
public class EnhancePagerViewModule: Module {
public func definition() -> ModuleDefinition {
Name("EnhancePagerView")
public func definition() -> ModuleDefinition {
Name("EnhancePagerView")
View(EnhancePagerView.self) {
OnViewDidUpdateProps { view in
view.initialize()
}
View(EnhancePagerView.self) {
OnViewDidUpdateProps { view in
view.initialize()
}
Prop("page") { (view: EnhancePagerView, index: Int) in
view.page = index
}
Prop("page") { (view: EnhancePagerView, index: Int) in
view.page = index
}
Prop("initialPageIndex") { (view: EnhancePagerView, index: Int) in
view.initialPageIndex = index
}
Prop("initialPageIndex") { (view: EnhancePagerView, index: Int) in
view.initialPageIndex = index
}
Prop("transitionStyle") { (view: EnhancePagerView, style: TransitionStyle?) in
guard let style = style else { return }
view.transitionStyle = style
}
Prop("transitionStyle") { (view: EnhancePagerView, style: TransitionStyle?) in
guard let style = style else { return }
view.transitionStyle = style
}
AsyncFunction("setPage") { (view: EnhancePagerView, index: Int) in
view.pageController?.setCurrentPage(index: index)
}
AsyncFunction("setPage") { (view: EnhancePagerView, index: Int) in
view.pageController?.setCurrentPage(index: index)
}
AsyncFunction("getCurrentPage") { view in
view.pageController?.getCurrentPageIndex()
}
AsyncFunction("getCurrentPage") { view in
view.pageController?.getCurrentPageIndex()
}
AsyncFunction("getState") { view -> String? in
if let pageController = view.pageController {
return pageController.getState().rawValue
}
return nil
}
Events("onPageChange")
Events("onScroll")
Events("onScrollBegin")
Events("onScrollEnd")
Events("onPageWillAppear")
AsyncFunction("getState") { view -> String? in
if let pageController = view.pageController {
return pageController.getState().rawValue
}
return nil
}
Events("onPageChange")
Events("onScroll")
Events("onScrollBegin")
Events("onScrollEnd")
Events("onPageWillAppear")
}
}
}
enum TransitionStyle: String, Enumerable {
case scroll
case pageCurl
func toUIPageViewControllerTransitionStyle() -> UIPageViewController.TransitionStyle {
switch self {
case .scroll:
return .scroll
case .pageCurl:
return .pageCurl
}
case scroll
case pageCurl
func toUIPageViewControllerTransitionStyle() -> UIPageViewController.TransitionStyle {
switch self {
case .scroll:
return .scroll
case .pageCurl:
return .pageCurl
}
}
}
private class EnhancePagerView: ExpoView, UIGestureRecognizerDelegate {
fileprivate var pageController: EnhancePagerController?
fileprivate var pageController: EnhancePagerController?
private let onScroll = EventDispatcher()
private let onScrollBegin = EventDispatcher()
private let onScrollEnd = EventDispatcher()
private let onPageChange = EventDispatcher()
private let onPageWillAppear = EventDispatcher()
private let onScroll = EventDispatcher()
private let onScrollBegin = EventDispatcher()
private let onScrollEnd = EventDispatcher()
private let onPageChange = EventDispatcher()
private let onPageWillAppear = EventDispatcher()
private var pageViews: [UIView] = []
private var touchHandler: RCTTouchHandler?
required init(appContext: AppContext? = nil) {
super.init(appContext: appContext)
private var pageViews: [UIView] = []
required init(appContext: AppContext? = nil) {
super.init(appContext: appContext)
touchHandler = RCTTouchHandler(bridge: appContext?.reactBridge)
}
override func insertSubview(_ view: UIView, at index: Int) {
touchHandler?.attach(to: view)
pageViews.insert(view, at: index)
pageController?.insertPageView(view: view)
}
func willRemoveSubview(_ subview: UIView, at index: Int) {
touchHandler?.detach(from: subview)
pageViews.remove(at: index)
pageController?.removePageView(at: index)
}
// Props
var page: Int = 0 {
willSet {
pageController?.setCurrentPage(index: newValue)
}
}
var initialPageIndex: Int = 0
var pageGap = 20
var transitionStyle: TransitionStyle = .scroll
var panGestureRecognizer: UIGestureRecognizer?
func initialize() {
let panGestureRecognizer = UIPanGestureRecognizer()
panGestureRecognizer.delegate = self
self.panGestureRecognizer = panGestureRecognizer
addGestureRecognizer(panGestureRecognizer)
pageController = EnhancePagerController(
pageViews: pageViews, initialPageIndex: initialPageIndex,
transitionStyle: transitionStyle.toUIPageViewControllerTransitionStyle(),
options: [
.interPageSpacing: pageGap
])
guard let pageController = pageController else { return }
addSubview(pageController.view)
pageController.view.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
override func insertSubview(_ view: UIView, at index: Int) {
pageViews.insert(view, at: index)
pageController?.insertPageView(view: view)
pageController.onPageIndexChange = { [weak self] index in
self?.onPageChange(["index": index])
}
pageController.onScrollStart = { [weak self] index in
self?.onScrollBegin(["index": index])
}
pageController.onScroll = { [weak self] percent, direction in
self?.onScroll(["percent": percent, "direction": direction.rawValue])
}
pageController.onScrollEnd = { [weak self] index in
self?.onScrollEnd(["index": index])
}
pageController.onPageWillAppear = { [weak self] index in
self?.onPageWillAppear(["index": index])
}
}
#if RCT_NEW_ARCH_ENABLED
override func mountChildComponentView(_ childComponentView: UIView, index: Int) {
if childComponentView is EnhancePageView {
insertSubview(childComponentView, at: index)
}
}
func willRemoveSubview(_ subview: UIView, at index: Int) {
pageViews.remove(at: index)
pageController?.removePageView(at: index)
override func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
if childComponentView is EnhancePageView {
willRemoveSubview(childComponentView, at: index)
}
}
#endif
func gestureRecognizer(
_ gestureRecognizer: UIGestureRecognizer,
shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer
) -> Bool {
guard let pageController = pageController else { return false }
let currentIndex = pageController.getCurrentPageIndex()
guard let scrollView = pageController.scrollView else { return false }
if gestureRecognizer == panGestureRecognizer,
NSStringFromClass(type(of: otherGestureRecognizer)) == "RNSPanGestureRecognizer"
{
if let panGestureRecognizer = gestureRecognizer as? UIPanGestureRecognizer {
let velocity = panGestureRecognizer.velocity(in: self)
let isLTR = true
let isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0)
if currentIndex == 0 && isBackGesture {
scrollView.panGestureRecognizer.isEnabled = false
}
}
return true
}
// Props
var page: Int = 0 {
willSet {
pageController?.setCurrentPage(index: newValue)
}
}
var initialPageIndex: Int = 0
var pageGap = 20
var transitionStyle: TransitionStyle = .scroll
var panGestureRecognizer: UIGestureRecognizer?
func initialize() {
let panGestureRecognizer = UIPanGestureRecognizer()
panGestureRecognizer.delegate = self
self.panGestureRecognizer = panGestureRecognizer
addGestureRecognizer(panGestureRecognizer)
pageController = EnhancePagerController(
pageViews: pageViews, initialPageIndex: initialPageIndex,
transitionStyle: transitionStyle.toUIPageViewControllerTransitionStyle(),
options: [
.interPageSpacing: pageGap
])
guard let pageController = pageController else { return }
addSubview(pageController.view)
pageController.view.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
pageController.onPageIndexChange = { [weak self] index in
self?.onPageChange(["index": index])
}
pageController.onScrollStart = { [weak self] index in
self?.onScrollBegin(["index": index])
}
pageController.onScroll = { [weak self] percent, direction in
self?.onScroll(["percent": percent, "direction": direction.rawValue])
}
pageController.onScrollEnd = { [weak self] index in
self?.onScrollEnd(["index": index])
}
pageController.onPageWillAppear = { [weak self] index in
self?.onPageWillAppear(["index": index])
}
}
#if RCT_NEW_ARCH_ENABLED
override func mountChildComponentView(_ childComponentView: UIView, index: Int) {
if childComponentView is EnhancePageView {
insertSubview(childComponentView, at: index)
}
}
override func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
if childComponentView is EnhancePageView {
willRemoveSubview(childComponentView, at: index)
}
}
#endif
func gestureRecognizer(
_ gestureRecognizer: UIGestureRecognizer,
shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer
) -> Bool {
guard let pageController = pageController else { return false }
let currentIndex = pageController.getCurrentPageIndex()
guard let scrollView = pageController.scrollView else { return false }
if gestureRecognizer == panGestureRecognizer,
NSStringFromClass(type(of: otherGestureRecognizer)) == "RNSPanGestureRecognizer"
{
if let panGestureRecognizer = gestureRecognizer as? UIPanGestureRecognizer {
let velocity = panGestureRecognizer.velocity(in: self)
let isLTR = true
let isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0)
if currentIndex == 0 && isBackGesture {
scrollView.panGestureRecognizer.isEnabled = false
}
}
return true
}
return false
}
return false
}
}

10
apps/mobile/native/ios/Modules/TabBar/TabBarRootView.swift
View File

@ -11,6 +11,7 @@ import SnapKit
import UIKit
class TabBarRootView: ExpoView {
private var touchHandler: RCTTouchHandler?
private lazy var tabBarController = {
let tabBarController = UITabBarController()
if #available(iOS 16.0, *), UIDevice.current.userInterfaceIdiom == .pad {
@ -34,6 +35,10 @@ class TabBarRootView: ExpoView {
required init(appContext: AppContext? = nil) {
super.init(appContext: appContext)
touchHandler = RCTTouchHandler(
bridge: appContext?.reactBridge
)
tabBarController.delegate = self
addSubview(vc.view)
vc.addChild(tabBarController)
@ -74,7 +79,8 @@ class TabBarRootView: ExpoView {
to: toView,
duration: 0.1,
options: [.transitionCrossDissolve, .preferredFramesPerSecond60],
completion: nil)
completion: nil
)
}
}
@ -85,6 +91,7 @@ class TabBarRootView: ExpoView {
}
override func insertSubview(_ subview: UIView, at atIndex: Int) {
touchHandler?.attach(to: subview)
if let tabScreenView = subview as? TabScreenView {
let screenVC = UIViewController()
screenVC.view = tabScreenView
@ -100,6 +107,7 @@ class TabBarRootView: ExpoView {
}
override func willRemoveSubview(_ subview: UIView) {
touchHandler?.detach(from: subview)
if let tabScreenView = subview as? TabScreenView {
tabViewControllers.removeAll { viewController in
viewController.view == tabScreenView

20
configs/tailwind.base.config.ts
View File

@ -25,16 +25,16 @@ const twConfig = {
fontSize: {
...theme?.fontSize,
largeTitle: ["26px", "32px"],
title1: ["22px", "26px"],
title2: ["17px", "22px"],
title3: ["15px", "20px"],
headline: ["13px", "16px"],
body: ["13px", "16px"],
callout: ["12px", "15px"],
subheadline: ["11px", "14px"],
footnote: ["10px", "13px"],
caption: ["10px", "13px"],
largeTitle: ["1.625rem", "2rem"], // 26px
title1: ["1.375rem", "1.625rem"], // 22px
title2: ["1.0625rem", "1.375rem"], // 17px
title3: ["0.9375rem", "1.25rem"], // 15px
headline: ["0.8125rem", "1rem"], // 13px
body: ["0.8125rem", "1rem"], // 13px
callout: ["0.75rem", "0.9375rem"], // 12px
subheadline: ["0.6875rem", "0.875rem"], // 11px
footnote: ["0.625rem", "0.8125rem"], // 10px
caption: ["0.625rem", "0.8125rem"], // 10px
},
extend: {

2
locales/settings/en.json
View File

@ -83,7 +83,7 @@
"appearance.general": "General",
"appearance.guess_code_language.description": "Major programming languages that use models to infer unlabeled code blocks",
"appearance.guess_code_language.label": "Guess code language",
"appearance.hide_extra_badge.description": "Hide the special badge of the feed in the sidebar, e.g. Boost,Claimed",
"appearance.hide_extra_badge.description": "Hide the special badge of the feed in the sidebar, e.g. Boost, Claimed",
"appearance.hide_extra_badge.label": "Hide special badge",
"appearance.hide_recent_reader.description": "Hide the recent reader in the entry header.",
"appearance.hide_recent_reader.label": "Hide recent reader",