renciy/fluent-reader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2026-09-18 13:41:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix group context menu and blurred nav

Browse Source
This commit is contained in:
Bruce Liu
2026-04-13 11:40:04 -07:00
committed by Haoyuan Liu
parent e7a08b3f0c
commit 1dfd4507d9
12 changed files with 76 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/styles/global.css
Vendored
-3
View File
@@ -167,9 +167,6 @@ i.ms-Nav-chevron {
z-index: 1;
position: relative;
}
body.blur #root > nav {
--black: var(--neutralSecondaryAlt);
}
.ms-ProgressIndicator-itemProgress {
padding: 0;
}
electron-builder-mas.yml
+1 -1
View File
@@ -1,5 +1,5 @@
appId: me.hyliu.fluent-reader-mas
buildVersion: 30
buildVersion: 31
productName: Fluent Reader
copyright: Copyright © 2020 Haoyuan Liu
files:
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "fluent-reader",
"version": "1.2.0",
"version": "1.2.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "fluent-reader",
"version": "1.2.0",
"version": "1.2.1",
"license": "BSD-3-Clause",
"devDependencies": {
"@fluentui/react": "^7.126.2",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "fluent-reader",
"version": "1.2.0",
"version": "1.2.1",
"description": "Modern desktop RSS reader",
"main": "./dist/electron.js",
"scripts": {
src/components/context-menu.tsx
+26 -19
View File
@@ -13,8 +13,13 @@ import {
ContextualMenuItemType,
DirectionalHint,
} from "office-ui-fabric-react/lib/ContextualMenu"
import { closeContextMenu, ContextMenuType } from "../scripts/models/app"
import {
closeContextMenu,
ContextMenuType,
toggleSettings,
} from "../scripts/models/app"
import {
fetchItems,
markAllRead,
markRead,
markUnread,
@@ -44,7 +49,7 @@ export const renderShareQR = (item: IContextualMenuItem) => (
)
function getSearchItem(text: string): IContextualMenuItem {
const engine = window.settings.getSearchEngine()
const engine = globalThis.settings.getSearchEngine()
return {
key: "searchText",
text: intl.get("context.search", {
@@ -100,7 +105,7 @@ function ItemContextMenu() {
iconProps: { iconName: "NavigateExternalInline" },
onClick: e => {
dispatch(markRead(item))
window.utils.openExternal(item.link, platformCtrl(e))
globalThis.utils.openExternal(item.link, platformCtrl(e))
},
},
{
@@ -189,18 +194,19 @@ function ItemContextMenu() {
key: "copyTitle",
text: intl.get("context.copyTitle"),
onClick: () => {
window.utils.writeClipboard(item.title)
globalThis.utils.writeClipboard(item.title)
},
},
{
key: "copyURL",
text: intl.get("context.copyURL"),
onClick: () => {
window.utils.writeClipboard(item.link)
globalThis.utils.writeClipboard(item.link)
},
},
...(viewConfigs !== undefined
? [
...(viewConfigs === undefined
? []
: [
{
key: "divider_2",
itemType: ContextualMenuItemType.Divider,
@@ -257,8 +263,7 @@ function ItemContextMenu() {
],
},
},
]
: []),
]),
]
return <ContextMenuBase menuItems={menuItems} />
}
@@ -277,7 +282,7 @@ function TextContextMenu() {
text: intl.get("context.copy"),
iconProps: { iconName: "Copy" },
onClick: () => {
window.utils.writeClipboard(text)
globalThis.utils.writeClipboard(text)
},
},
getSearchItem(text),
@@ -297,7 +302,7 @@ function TextContextMenu() {
iconName: "NavigateExternalInline",
},
onClick: e => {
window.utils.openExternal(url, platformCtrl(e))
globalThis.utils.openExternal(url, platformCtrl(e))
},
},
{
@@ -305,7 +310,7 @@ function TextContextMenu() {
text: intl.get("context.copyURL"),
iconProps: { iconName: "Link" },
onClick: () => {
window.utils.writeClipboard(url)
globalThis.utils.writeClipboard(url)
},
},
],
@@ -323,11 +328,13 @@ function ImageContextMenu() {
iconProps: { iconName: "NavigateExternalInline" },
onClick: e => {
if (platformCtrl(e)) {
window.utils.imageCallback(
globalThis.utils.imageCallback(
ImageCallbackTypes.OpenExternalBg
)
} else {
window.utils.imageCallback(ImageCallbackTypes.OpenExternal)
globalThis.utils.imageCallback(
ImageCallbackTypes.OpenExternal
)
}
},
},
@@ -336,7 +343,7 @@ function ImageContextMenu() {
text: intl.get("context.saveImageAs"),
iconProps: { iconName: "SaveTemplate" },
onClick: () => {
window.utils.imageCallback(ImageCallbackTypes.SaveAs)
globalThis.utils.imageCallback(ImageCallbackTypes.SaveAs)
},
},
{
@@ -344,7 +351,7 @@ function ImageContextMenu() {
text: intl.get("context.copyImage"),
iconProps: { iconName: "FileImage" },
onClick: () => {
window.utils.imageCallback(ImageCallbackTypes.Copy)
globalThis.utils.imageCallback(ImageCallbackTypes.Copy)
},
},
{
@@ -352,7 +359,7 @@ function ImageContextMenu() {
text: intl.get("context.copyImageURL"),
iconProps: { iconName: "Link" },
onClick: () => {
window.utils.imageCallback(ImageCallbackTypes.CopyLink)
globalThis.utils.imageCallback(ImageCallbackTypes.CopyLink)
},
},
]
@@ -521,7 +528,7 @@ function GroupContextMenu() {
text: intl.get("nav.refresh"),
iconProps: { iconName: "Sync" },
onClick: () => {
dispatch(markAllRead(sids))
dispatch(fetchItems(false, sids))
},
},
{
@@ -529,7 +536,7 @@ function GroupContextMenu() {
text: intl.get("context.manageSources"),
iconProps: { iconName: "Settings" },
onClick: () => {
dispatch(markAllRead(sids))
dispatch(toggleSettings(true, sids))
},
},
]
src/components/menu.tsx
+3 -13
View File
@@ -18,7 +18,8 @@ import {
import { makeStyles, mergeClasses } from "@fluentui/react-components"
import { FlatButton } from "./utils/FlatButton"
import { FlatButtonGroup } from "./utils/FlatButtonGroup"
import { useIsWideScreen } from "./utils/useIsWideScreen"
import { useIsWideScreen } from "./utils/hooks/useIsWideScreen"
import { useIsBlurred } from "./utils/hooks/useIsBlurred"
const useMenuClasses = makeStyles({
menuBtn: {
@@ -39,18 +40,7 @@ export const Menu: React.FC = () => {
const menuClasses = useMenuClasses()
const isWideScreen = useIsWideScreen()
const isDarwin = globalThis.utils.platform === "darwin"
const [blurred, setBlurred] = useState(!globalThis.utils.isFocused())
useEffect(() => {
const onFocus = () => setBlurred(false)
const onBlur = () => setBlurred(true)
window.addEventListener("focus", onFocus)
window.addEventListener("blur", onBlur)
return () => {
window.removeEventListener("focus", onFocus)
window.removeEventListener("blur", onBlur)
}
}, [])
const blurred = useIsBlurred()
const status = useAppSelector(
s => s.app.sourceInit && !s.app.settings.display
src/components/nav.tsx
+9 -12
View File
@@ -19,7 +19,8 @@ import { ViewType, WindowStateListenerType } from "../schema-types"
import { FlatButton } from "./utils/FlatButton"
import { FlatButtonGroup } from "./utils/FlatButtonGroup"
import { FlatButtonSeparator } from "./utils/FlatButtonSeparator"
import { useIsWideScreen } from "./utils/useIsWideScreen"
import { useIsWideScreen } from "./utils/hooks/useIsWideScreen"
import { useIsBlurred } from "./utils/hooks/useIsBlurred"
const useClasses = makeStyles({
progress: {
@@ -31,6 +32,9 @@ const useClasses = makeStyles({
height: "2px",
overflow: "hidden",
},
navBlurred: {
"--black": "var(--neutralSecondaryAlt)",
},
navBtn: {
height: "var(--navHeight)",
lineHeight: "var(--navHeight)",
@@ -65,13 +69,9 @@ const Nav: React.FC = () => {
)
const [maximized, setMaximized] = useState(globalThis.utils.isMaximized())
const isWideScreen = useIsWideScreen()
const blurred = useIsBlurred()
const isDarwin = globalThis.utils.platform === "darwin"
const setBodyFocusState = useCallback((focused: boolean) => {
if (focused) document.body.classList.remove("blur")
else document.body.classList.add("blur")
}, [])
const setBodyFullscreenState = useCallback((fullscreen: boolean) => {
if (fullscreen) document.body.classList.remove("not-fullscreen")
else document.body.classList.add("not-fullscreen")
@@ -86,12 +86,9 @@ const Nav: React.FC = () => {
case WindowStateListenerType.Fullscreen:
setBodyFullscreenState(windowState)
break
case WindowStateListenerType.Focused:
setBodyFocusState(windowState)
break
}
},
[setBodyFocusState, setBodyFullscreenState]
[setBodyFullscreenState]
)
const canFetch = useCallback(
@@ -160,14 +157,13 @@ const Nav: React.FC = () => {
)
useEffect(() => {
setBodyFocusState(globalThis.utils.isFocused())
setBodyFullscreenState(globalThis.utils.isFullscreen())
globalThis.utils.addWindowStateListener(windowStateListener)
return () => {
// Cleanup will be handled by the event listener removal effect
}
}, [setBodyFocusState, setBodyFullscreenState, windowStateListener])
}, [setBodyFullscreenState, windowStateListener])
useEffect(() => {
document.addEventListener("keydown", navShortcutsHandler)
@@ -199,6 +195,7 @@ const Nav: React.FC = () => {
if (state.settings.display) classNames.push("hide-btns")
if (state.menu) classNames.push("menu-on")
if (itemShown) classNames.push("item-on")
if (blurred) classNames.push(classes.navBlurred)
return classNames.join(" ")
}
src/components/utils/FlatButton.tsx
+2 -2
View File
@@ -123,8 +123,8 @@ export const FlatButton: React.FC<FlatButtonProps> = ({
title={title}
aria-label={ariaLabel || title}
id={id}
onClick={onClick}
onMouseDown={onMouseDown}
onClick={disabled ? undefined : onClick}
onMouseDown={disabled ? undefined : onMouseDown}
disabled={disabled}>
{children}
</button>
src/components/utils/ResizeObserver.d.ts
Vendored
-242
View File
@@ -1,242 +0,0 @@
/**
* The **ResizeObserver** interface reports changes to the dimensions of an
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
* or border box, or the bounding box of an
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
*
* > **Note**: The content box is the box in which content can be placed,
* > meaning the border box minus the padding and border width. The border box
* > encompasses the content, padding, and border. See
* > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
* > for further explanation.
*
* `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
* are often created when resizing via a callback function. It does this by only
* processing elements deeper in the DOM in subsequent frames. Implementations
* should, if they follow the specification, invoke resize events before paint
* and after layout.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
*/
declare class ResizeObserver {
/**
* The **ResizeObserver** constructor creates a new `ResizeObserver` object,
* which can be used to report changes to the content or border box of an
* `Element` or the bounding box of an `SVGElement`.
*
* @example
* var ResizeObserver = new ResizeObserver(callback)
*
* @param callback
* The function called whenever an observed resize occurs. The function is
* called with two parameters:
* * **entries**
* An array of
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
* objects that can be used to access the new dimensions of the element
* after each change.
* * **observer**
* A reference to the `ResizeObserver` itself, so it will definitely be
* accessible from inside the callback, should you need it. This could be
* used for example to automatically unobserve the observer when a certain
* condition is reached, but you can omit it if you don't need it.
*
* The callback will generally follow a pattern along the lines of:
* ```js
* function(entries, observer) {
* for (let entry of entries) {
* // Do something to each entry
* // and possibly something to the observer itself
* }
* }
* ```
*
* The following snippet is taken from the
* [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
* ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
* example:
* @example
* const resizeObserver = new ResizeObserver(entries => {
* for (let entry of entries) {
* if(entry.contentBoxSize) {
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
* } else {
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
* }
* }
* });
*
* resizeObserver.observe(divElem);
*/
constructor(callback: ResizeObserverCallback)
/**
* The **disconnect()** method of the
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
* interface unobserves all observed
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
* targets.
*/
disconnect: () => void
/**
* The `observe()` method of the
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
* interface starts observing the specified
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
*
* @example
* resizeObserver.observe(target, options);
*
* @param target
* A reference to an
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
* to be observed.
*
* @param options
* An options object allowing you to set options for the observation.
* Currently this only has one possible option that can be set.
*/
observe: (target: Element, options?: ResizeObserverObserveOptions) => void
/**
* The **unobserve()** method of the
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
* interface ends the observing of a specified
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
*/
unobserve: (target: Element) => void
}
interface ResizeObserverObserveOptions {
/**
* Sets which box model the observer will observe changes to. Possible values
* are `content-box` (the default), and `border-box`.
*
* @default "content-box"
*/
box?: "content-box" | "border-box"
}
/**
* The function called whenever an observed resize occurs. The function is
* called with two parameters:
*
* @param entries
* An array of
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
* objects that can be used to access the new dimensions of the element after
* each change.
*
* @param observer
* A reference to the `ResizeObserver` itself, so it will definitely be
* accessible from inside the callback, should you need it. This could be used
* for example to automatically unobserve the observer when a certain condition
* is reached, but you can omit it if you don't need it.
*
* The callback will generally follow a pattern along the lines of:
* @example
* function(entries, observer) {
* for (let entry of entries) {
* // Do something to each entry
* // and possibly something to the observer itself
* }
* }
*
* @example
* const resizeObserver = new ResizeObserver(entries => {
* for (let entry of entries) {
* if(entry.contentBoxSize) {
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
* } else {
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
* }
* }
* });
*
* resizeObserver.observe(divElem);
*/
type ResizeObserverCallback = (
entries: ResizeObserverEntry[],
observer: ResizeObserver
) => void
/**
* The **ResizeObserverEntry** interface represents the object passed to the
* [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
* constructor's callback function, which allows you to access the new
* dimensions of the
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
* being observed.
*/
interface ResizeObserverEntry {
/**
* An object containing the new border box size of the observed element when
* the callback is run.
*/
readonly borderBoxSize: ResizeObserverEntryBoxSize
/**
* An object containing the new content box size of the observed element when
* the callback is run.
*/
readonly contentBoxSize: ResizeObserverEntryBoxSize
/**
* A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
* object containing the new size of the observed element when the callback is
* run. Note that this is better supported than the above two properties, but
* it is left over from an earlier implementation of the Resize Observer API,
* is still included in the spec for web compat reasons, and may be deprecated
* in future versions.
*/
// node_modules/typescript/lib/lib.dom.d.ts
readonly contentRect: DOMRectReadOnly
/**
* A reference to the
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
* being observed.
*/
readonly target: Element
}
/**
* The **borderBoxSize** read-only property of the
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
* interface returns an object containing the new border box size of the
* observed element when the callback is run.
*/
interface ResizeObserverEntryBoxSize {
/**
* The length of the observed element's border box in the block dimension. For
* boxes with a horizontal
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
* this is the vertical dimension, or height; if the writing-mode is vertical,
* this is the horizontal dimension, or width.
*/
blockSize: number
/**
* The length of the observed element's border box in the inline dimension.
* For boxes with a horizontal
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
* this is the horizontal dimension, or width; if the writing-mode is
* vertical, this is the vertical dimension, or height.
*/
inlineSize: number
}
interface Window {
ResizeObserver: typeof ResizeObserver
}
src/components/utils/hooks/useIsBlurred.ts
+17
View File
@@ -0,0 +1,17 @@
import { useState, useEffect } from "react"
export const useIsBlurred = () => {
const [blurred, setBlurred] = useState(false)
useEffect(() => {
setBlurred(!globalThis.utils.isFocused())
const onFocus = () => setBlurred(false)
const onBlur = () => setBlurred(true)
window.addEventListener("focus", onFocus)
window.addEventListener("blur", onBlur)
return () => {
window.removeEventListener("focus", onFocus)
window.removeEventListener("blur", onBlur)
}
}, [])
return blurred
}
src/components/utils/useIsWideScreen.ts → src/components/utils/hooks/useIsWideScreen.ts
+8 -2
View File
@@ -1,11 +1,17 @@
import { useState, useEffect } from "react"
import { getWindowBreakpoint } from "../../scripts/utils"
import { getWindowBreakpoint } from "../../../scripts/utils"
export const useIsWideScreen = () => {
const [isWide, setIsWide] = useState(getWindowBreakpoint)
useEffect(() => {
const handler = () => setIsWide(getWindowBreakpoint())
let timer: NodeJS.Timeout
const handler = () => {
clearTimeout(timer)
timer = setTimeout(() => {
setIsWide(getWindowBreakpoint())
}, 100)
}
window.addEventListener("resize", handler)
return () => window.removeEventListener("resize", handler)
}, [])
webpack.config.js
+7 -10
View File
@@ -60,6 +60,13 @@ module.exports = [
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
include: [/src/, /node_modules\/@fluentui/],
use: {
loader: "@griffel/webpack-plugin/loader",
},
},
{
test: /\.ts(x?)$/,
include: /src/,
@@ -68,16 +75,6 @@ module.exports = [
},
use: {
loader: "ts-loader",
options: {
ignoreDiagnostics: [2882],
},
},
},
{
test: /\.(js|ts|tsx)$/,
include: /src/,
use: {
loader: "@griffel/webpack-plugin/loader",
},
},
{