FreshRSS/FluentReader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2025-04-22 22:27:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

use electron-store

Browse Source
This commit is contained in:
刘浩远 2020-06-12 10:18:44 +08:00
parent a0d5e41bf2
commit 69f5a21038
12 changed files with 134 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dist/article/article.css vendored
View File

@ -4,17 +4,19 @@ html, body {
html { html {
overflow: hidden scroll; overflow: hidden scroll;
} }
body { :root {
margin: 12px 96px 32px; margin: 12px 96px 32px;
--gray: #484644; --gray: #484644;
--primary: #0078d4; --primary: #0078d4;
--primary-alt: #004578; --primary-alt: #004578;
} }
body.dark { @media (prefers-color-scheme: dark) {
color: #f8f8f8; :root {
--gray: #a19f9d; color: #f8f8f8;
--primary: #4ba0e1; --gray: #a19f9d;
--primary-alt: #65aee6; --primary: #4ba0e1;
--primary-alt: #65aee6;
}
} }
a { a {

4
dist/article/article.html vendored
View File

@ -3,14 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" <meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src-elem 'sha256-CTdT4eT3ye2S03G9EvKqKVksHK5iE98I6LPSH9ah7UM='; img-src http://* https://*; style-src 'self' 'unsafe-inline'; frame-src http://* https://*; media-src http://* https://*"> content="default-src 'none'; script-src-elem 'sha256-34JRfFnY5YiFDB1MABAIxq6OfvlgM/Ba2el4MdA0WoM='; img-src http://* https://*; style-src 'self' 'unsafe-inline'; frame-src http://* https://*; media-src http://* https://*">
<title>Article</title> <title>Article</title>
<link rel="stylesheet" href="scroll.css" /> <link rel="stylesheet" href="scroll.css" />
<link rel="stylesheet" href="article.css" /> <link rel="stylesheet" href="article.css" />
</head> </head>
<body> <body>
<div id="main"></div> <div id="main"></div>
<script integrity="sha256-CTdT4eT3ye2S03G9EvKqKVksHK5iE98I6LPSH9ah7UM=" src="article.js"></script> <script integrity="sha256-34JRfFnY5YiFDB1MABAIxq6OfvlgM/Ba2el4MdA0WoM=" src="article.js"></script>
<!-- Run "cat article.js | openssl dgst -sha256 -binary | openssl enc -base64 -A" for hash --> <!-- Run "cat article.js | openssl dgst -sha256 -binary | openssl enc -base64 -A" for hash -->
</body> </body>
</html> </html>

1
dist/article/article.js vendored
View File

@ -15,7 +15,6 @@ for (let i of dom.querySelectorAll("img")) {
for (let s of dom.querySelectorAll("script")) { for (let s of dom.querySelectorAll("script")) {
s.parentNode.removeChild(s) s.parentNode.removeChild(s)
} }
if (get("d") === "1") document.body.classList.add("dark")
let main = document.getElementById("main") let main = document.getElementById("main")
main.innerHTML = dom.body.innerHTML main.innerHTML = dom.body.innerHTML
document.addEventListener("click", event => { document.addEventListener("click", event => {

18
dist/article/scroll.css vendored
View File

@ -12,12 +12,14 @@
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background-color: #0008; background-color: #0008;
} }
body.dark::-webkit-scrollbar-thumb , body.dark *::-webkit-scrollbar-thumb { @media (prefers-color-scheme: dark) {
background-color: #fff4; ::-webkit-scrollbar-thumb {
} background-color: #fff4;
body.dark::-webkit-scrollbar-thumb:hover, body.dark *::-webkit-scrollbar-thumb:hover { }
background-color: #fff6; ::-webkit-scrollbar-thumb:hover {
} background-color: #fff6;
body.dark::-webkit-scrollbar-thumb:active, body.dark *::-webkit-scrollbar-thumb:active { }
background-color: #fff8; ::-webkit-scrollbar-thumb:active {
background-color: #fff8;
}
} }

95
dist/styles.css vendored
View File

@ -16,25 +16,28 @@
--white: #fff; --white: #fff;
--whiteConstant: #fff; --whiteConstant: #fff;
} }
body.dark { @media (prefers-color-scheme: dark) {
--neutralLighterAlt: #282828; :root {
--neutralLighter: #313131; --neutralLighterAlt: #282828;
--neutralLight: #3f3f3f; --neutralLighter: #313131;
--neutralQuaternaryAlt: #484848; --neutralLight: #3f3f3f;
--neutralQuaternary: #4f4f4f; --neutralQuaternaryAlt: #484848;
--neutralTertiaryAlt: #6d6d6d; --neutralQuaternary: #4f4f4f;
--neutralTertiary: #c8c8c8; --neutralTertiaryAlt: #6d6d6d;
--neutralSecondaryAlt: #d2d0ce; --neutralTertiary: #c8c8c8;
--neutralSecondary: #d0d0d0; --neutralSecondaryAlt: #d2d0ce;
--neutralPrimaryAlt: #dadada; --neutralSecondary: #d0d0d0;
--neutralPrimary: #ffffff; --neutralPrimaryAlt: #dadada;
--neutralDark: #f4f4f4; --neutralPrimary: #ffffff;
--neutralDarker: #f4f4f4; --neutralDark: #f4f4f4;
--black: #f8f8f8; --neutralDarker: #f4f4f4;
--white: #1f1f1f; --black: #f8f8f8;
--whiteConstant: #f8f8f8; --white: #1f1f1f;
--whiteConstant: #f8f8f8;
}
} }
html, body { html, body {
background-color: transparent; background-color: transparent;
font-family: "Segoe UI Regular", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif; font-family: "Segoe UI Regular", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif;
@ -79,9 +82,6 @@ body {
.ms-Button--commandBar.active .ms-Button-icon { .ms-Button--commandBar.active .ms-Button-icon {
color: #005a9e; color: #005a9e;
} }
body.dark .ms-Button--commandBar.active .ms-Button-icon {
color: #c7e0f4;
}
i.ms-Nav-chevron { i.ms-Nav-chevron {
line-height: 32px; line-height: 32px;
height: 32px; height: 32px;
@ -186,12 +186,6 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
.btn-group .btn:active { .btn-group .btn:active {
background-color: #0002; background-color: #0002;
} }
body.dark .btn-group .btn:hover {
background-color: #fff1;
}
body.dark .btn-group .btn:active {
background-color: #fff2;
}
.btn-group .btn.disabled, .btn-group .btn.fetching { .btn-group .btn.disabled, .btn-group .btn.fetching {
background-color: unset !important; background-color: unset !important;
color: var(--neutralSecondaryAlt); color: var(--neutralSecondaryAlt);
@ -282,9 +276,6 @@ div[role="tabpanel"] {
background-color: #fffa; background-color: #fffa;
z-index: 6; z-index: 6;
} }
body.dark .settings .loading {
background-color: #000a;
}
.settings .loading .ms-Spinner { .settings .loading .ms-Spinner {
margin-top: 180px; margin-top: 180px;
} }
@ -590,12 +581,7 @@ img.favicon {
.card:active { .card:active {
transform: scale(.97); transform: scale(.97);
} }
body.dark .card {
box-shadow: #0006 0px 5px 20px;
}
body.dark .card:hover {
box-shadow: #0008 0px 5px 40px;
}
.card .bg { .card .bg {
position: absolute; position: absolute;
left: 0; left: 0;
@ -610,9 +596,6 @@ body.dark .card:hover {
.card div.bg { .card div.bg {
background-color: #fffb; background-color: #fffb;
} }
body.dark div.bg {
background-color: #000b;
}
.card img.head { .card img.head {
display: block; display: block;
object-fit: cover; object-fit: cover;
@ -684,12 +667,6 @@ body.dark div.bg {
.list-card:active { .list-card:active {
box-shadow: #0000 0px 5px 15px, inset #0004 0px 0px 15px; box-shadow: #0000 0px 5px 15px, inset #0004 0px 0px 15px;
} }
body.dark .list-card:hover {
box-shadow: #0006 0px 5px 15px;
}
body.dark .list-card:active {
box-shadow: #0000 0px 5px 15px, inset #0006 0px 0px 15px;
}
.list-card div.head { .list-card div.head {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -719,3 +696,33 @@ body.dark .list-card:active {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
@media (prefers-color-scheme: dark) {
.ms-Button--commandBar.active .ms-Button-icon {
color: #c7e0f4;
}
.btn-group .btn:hover {
background-color: #fff1;
}
.btn-group .btn:active {
background-color: #fff2;
}
.settings .loading {
background-color: #000a;
}
.card {
box-shadow: #0006 0px 5px 20px;
}
.card:hover {
box-shadow: #0008 0px 5px 40px;
}
.card div.bg {
background-color: #000b;
}
.list-card:hover {
box-shadow: #0006 0px 5px 15px;
}
.list-card:active {
box-shadow: #0000 0px 5px 15px, inset #0006 0px 0px 15px;
}
}

18
src/components/article.tsx
View File

@ -5,6 +5,8 @@ import { RSSItem } from "../scripts/models/item"
import { openExternal } from "../scripts/utils" import { openExternal } from "../scripts/utils"
import { Stack, CommandBarButton, IContextualMenuProps } from "@fluentui/react" import { Stack, CommandBarButton, IContextualMenuProps } from "@fluentui/react"
import { RSSSource, SourceOpenTarget } from "../scripts/models/source" import { RSSSource, SourceOpenTarget } from "../scripts/models/source"
import { store } from "../scripts/settings"
import { clipboard } from "electron"
const FONT_SIZE_STORE_KEY = "fontSize" const FONT_SIZE_STORE_KEY = "fontSize"
const FONT_SIZE_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20] const FONT_SIZE_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20]
@ -37,11 +39,10 @@ class Article extends React.Component<ArticleProps, ArticleState> {
} }
getFontSize = () => { getFontSize = () => {
let size = window.localStorage.getItem(FONT_SIZE_STORE_KEY) return store.get(FONT_SIZE_STORE_KEY, 16)
return size ? parseInt(size) : 16
} }
setFontSize = (size: number) => { setFontSize = (size: number) => {
window.localStorage.setItem(FONT_SIZE_STORE_KEY, String(size)) store.set(FONT_SIZE_STORE_KEY, size)
this.setState({fontSize: size}) this.setState({fontSize: size})
} }
@ -60,12 +61,19 @@ class Article extends React.Component<ArticleProps, ArticleState> {
{ {
key: "openInBrowser", key: "openInBrowser",
text: intl.get("openExternal"), text: intl.get("openExternal"),
iconProps: {iconName: "NavigateExternalInline"}, iconProps: { iconName: "NavigateExternalInline" },
onClick: this.openInBrowser onClick: this.openInBrowser
}, },
{
key: "copyURL",
text: intl.get("context.copyURL"),
iconProps: { iconName: "Link" },
onClick: () => { clipboard.writeText(this.props.item.link) }
},
{ {
key: "toggleHidden", key: "toggleHidden",
text:　this.props.item.hidden ? intl.get("article.unhide") : intl.get("article.hide"), text:　this.props.item.hidden ? intl.get("article.unhide") : intl.get("article.hide"),
iconProps: { iconName: this.props.item.hidden ? "View" : "Hide3" },
onClick: () => { this.props.toggleHidden(this.props.item) } onClick: () => { this.props.toggleHidden(this.props.item) }
} }
] ]
@ -132,7 +140,7 @@ class Article extends React.Component<ArticleProps, ArticleState> {
<p className="title">{this.props.item.title}</p> <p className="title">{this.props.item.title}</p>
<p className="date">{this.props.item.date.toLocaleString(this.props.locale, {hour12: !this.props.locale.startsWith("zh")})}</p> <p className="date">{this.props.item.date.toLocaleString(this.props.locale, {hour12: !this.props.locale.startsWith("zh")})}</p>
<article dangerouslySetInnerHTML={{__html: this.props.item.content}}></article> <article dangerouslySetInnerHTML={{__html: this.props.item.content}}></article>
</>))) + `&s=${this.state.fontSize}&u=${this.props.item.link}&d=${Number(document.body.classList.contains("dark"))}` </>))) + `&s=${this.state.fontSize}&u=${this.props.item.link}`
render = () => ( render = () => (
<div className="article"> <div className="article">

5
src/electron.ts
View File

@ -55,8 +55,3 @@ app.on('activate', function () {
createWindow() createWindow()
} }
}) })
ipcMain.on("set-theme", (_, theme) => {
store.set("theme", theme)
nativeTheme.themeSource = theme
})

2
src/index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; img-src *; style-src 'self' 'unsafe-inline'; font-src 'self' https://static2.sharepointonline.com; connect-src https://* http://*"> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src-elem 'self'; img-src *; style-src 'self' 'unsafe-inline'; font-src 'self' https://static2.sharepointonline.com; connect-src https://* http://*">
<title>Fluent Reader</title> <title>Fluent Reader</title>
<link rel="stylesheet" href="article/scroll.css"> <link rel="stylesheet" href="article/scroll.css">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

22
src/scripts/config-schema.ts Normal file
View File

@ -0,0 +1,22 @@
import { ThemeSettings } from "./settings"
import { SourceGroup } from "./models/group"
// Using schema breaks unsafe-eval. Unused.
/* export const schema: {[key in keyof schemaTypes]: Schema} = {
theme: { type: "string", default: "system" },
pac: { type: "string", default: "" },
pacOn: { type: "boolean", default: false },
view: { type: "number", default: 0 },
locale: { type: "string", default: "default" },
sourceGroups: { type: "array", default: [] }
} */
export type schemaTypes = {
theme: ThemeSettings
pac: string
pacOn: boolean
view: number
locale: string
sourceGroups: SourceGroup[]
fontSize: number
}

3
src/scripts/models/app.ts
View File

@ -3,7 +3,7 @@ import { RSSSource, INIT_SOURCES, SourceActionTypes, ADD_SOURCE, UPDATE_SOURCE,
import { RSSItem, ItemActionTypes, FETCH_ITEMS, fetchItems } from "./item" import { RSSItem, ItemActionTypes, FETCH_ITEMS, fetchItems } from "./item"
import { ActionStatus, AppThunk, getWindowBreakpoint } from "../utils" import { ActionStatus, AppThunk, getWindowBreakpoint } from "../utils"
import { INIT_FEEDS, FeedActionTypes, ALL, initFeeds } from "./feed" import { INIT_FEEDS, FeedActionTypes, ALL, initFeeds } from "./feed"
import { SourceGroupActionTypes, UPDATE_SOURCE_GROUP, ADD_SOURCE_TO_GROUP, DELETE_SOURCE_GROUP, REMOVE_SOURCE_FROM_GROUP } from "./group" import { SourceGroupActionTypes, UPDATE_SOURCE_GROUP, ADD_SOURCE_TO_GROUP, DELETE_SOURCE_GROUP, REMOVE_SOURCE_FROM_GROUP, REORDER_SOURCE_GROUPS } from "./group"
import { PageActionTypes, SELECT_PAGE, PageType, selectAllArticles } from "./page" import { PageActionTypes, SELECT_PAGE, PageType, selectAllArticles } from "./page"
import { getCurrentLocale, setLocaleSettings } from "../settings" import { getCurrentLocale, setLocaleSettings } from "../settings"
import locales from "../i18n/_locales" import locales from "../i18n/_locales"
@ -230,6 +230,7 @@ export function appReducer(
case UPDATE_SOURCE_GROUP: case UPDATE_SOURCE_GROUP:
case ADD_SOURCE_TO_GROUP: case ADD_SOURCE_TO_GROUP:
case REMOVE_SOURCE_FROM_GROUP: case REMOVE_SOURCE_FROM_GROUP:
case REORDER_SOURCE_GROUPS:
case DELETE_SOURCE_GROUP: return { case DELETE_SOURCE_GROUP: return {
...state, ...state,
settings: { settings: {

6
src/scripts/models/group.ts
View File

@ -3,6 +3,7 @@ import { SourceActionTypes, ADD_SOURCE, DELETE_SOURCE, addSource } from "./sourc
import { ActionStatus, AppThunk, domParser, AppDispatch } from "../utils" import { ActionStatus, AppThunk, domParser, AppDispatch } from "../utils"
import { saveSettings } from "./app" import { saveSettings } from "./app"
import { store } from "../settings"
const GROUPS_STORE_KEY = "sourceGroups" const GROUPS_STORE_KEY = "sourceGroups"
@ -24,12 +25,11 @@ export class SourceGroup {
} }
static save(groups: SourceGroup[]) { static save(groups: SourceGroup[]) {
localStorage.setItem(GROUPS_STORE_KEY, JSON.stringify(groups)) store.set(GROUPS_STORE_KEY, groups)
} }
static load(): SourceGroup[] { static load(): SourceGroup[] {
let stored = localStorage.getItem(GROUPS_STORE_KEY) return store.get(GROUPS_STORE_KEY, [])
return stored ? <SourceGroup[]>JSON.parse(stored) : []
} }
} }

53
src/scripts/settings.ts
View File

@ -2,24 +2,28 @@ import { remote, ipcRenderer } from "electron"
import { ViewType } from "./models/page" import { ViewType } from "./models/page"
import { IPartialTheme, loadTheme } from "@fluentui/react" import { IPartialTheme, loadTheme } from "@fluentui/react"
import locales from "./i18n/_locales" import locales from "./i18n/_locales"
import Store = require("electron-store")
import { schemaTypes } from "./config-schema"
const PAC_STORE_KEY = "PAC" export const store = new Store<schemaTypes>()
const PAC_STATUS_KEY = "PAC_ON"
const PAC_STORE_KEY = "pac"
const PAC_STATUS_KEY = "pacOn"
export function getProxyStatus() { export function getProxyStatus() {
return Boolean(localStorage.getItem(PAC_STATUS_KEY)) return store.get(PAC_STATUS_KEY, false)
} }
export function toggleProxyStatus() { export function toggleProxyStatus() {
localStorage.setItem(PAC_STATUS_KEY, getProxyStatus() ? "" : "on") store.set(PAC_STATUS_KEY, !getProxyStatus())
setProxy() setProxy()
} }
export function getProxy() { export function getProxy() {
return localStorage.getItem(PAC_STORE_KEY) || "" return store.get(PAC_STORE_KEY, "")
} }
export function setProxy(address = null) { export function setProxy(address = null) {
if (!address) { if (!address) {
address = getProxy() address = getProxy()
} else { } else {
localStorage.setItem(PAC_STORE_KEY, address) store.set(PAC_STORE_KEY, address)
} }
remote.getCurrentWebContents().session.setProxy({ remote.getCurrentWebContents().session.setProxy({
pacScript: getProxyStatus() ? address : "" pacScript: getProxyStatus() ? address : ""
@ -30,12 +34,11 @@ export function setProxy(address = null) {
} }
const VIEW_STORE_KEY = "view" const VIEW_STORE_KEY = "view"
export const getDefaultView = () => { export const getDefaultView = (): ViewType => {
let view = localStorage.getItem(VIEW_STORE_KEY) return store.get(VIEW_STORE_KEY, ViewType.Cards)
return view ? parseInt(view) as ViewType : ViewType.Cards
} }
export const setDefaultView = (viewType: ViewType) => { export const setDefaultView = (viewType: ViewType) => {
localStorage.setItem(VIEW_STORE_KEY, String(viewType)) store.set(VIEW_STORE_KEY, viewType)
} }
const lightTheme: IPartialTheme = { const lightTheme: IPartialTheme = {
@ -77,41 +80,29 @@ export enum ThemeSettings {
} }
const THEME_STORE_KEY = "theme" const THEME_STORE_KEY = "theme"
export function setThemeSettings(theme: ThemeSettings) { export function setThemeSettings(theme: ThemeSettings) {
localStorage.setItem(THEME_STORE_KEY, theme) store.set(THEME_STORE_KEY, theme)
ipcRenderer.send("set-theme", theme) remote.nativeTheme.themeSource = theme
applyThemeSettings() applyThemeSettings()
} }
export function getThemeSettings(): ThemeSettings { export function getThemeSettings(): ThemeSettings {
let stored = localStorage.getItem(THEME_STORE_KEY) return store.get(THEME_STORE_KEY, ThemeSettings.Default)
return stored === null ? ThemeSettings.Default : stored as ThemeSettings
} }
export function applyThemeSettings() { export function applyThemeSettings() {
let theme = getThemeSettings() loadTheme(remote.nativeTheme.shouldUseDarkColors ? darkTheme : lightTheme)
let useDark = theme === ThemeSettings.Default
? remote.nativeTheme.shouldUseDarkColors
: theme === ThemeSettings.Dark
loadTheme(useDark ? darkTheme : lightTheme)
if (useDark) {
document.body.classList.add("dark")
} else {
document.body.classList.remove("dark")
}
} }
remote.nativeTheme.on("updated", () => {
applyThemeSettings()
})
const LOCALE_STORE_KEY = "locale" const LOCALE_STORE_KEY = "locale"
export function setLocaleSettings(option: string) { export function setLocaleSettings(option: string) {
localStorage.setItem(LOCALE_STORE_KEY, option) store.set(LOCALE_STORE_KEY, option)
} }
export function getLocaleSettings() { export function getLocaleSettings() {
let stored = localStorage.getItem(LOCALE_STORE_KEY) return store.get(LOCALE_STORE_KEY, "default")
return stored === null ? "default" : stored
} }
export function getCurrentLocale() { export function getCurrentLocale() {
let set = getLocaleSettings() let set = getLocaleSettings()
let locale = set === "default" ? remote.app.getLocale() : set let locale = set === "default" ? remote.app.getLocale() : set
return (locale in locales) ? locale : "en-US" return (locale in locales) ? locale : "en-US"
} }
export const STORE_KEYS = [
PAC_STORE_KEY, PAC_STATUS_KEY, VIEW_STORE_KEY, THEME_STORE_KEY
]