FreshRSS/FluentReader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2025-02-06 04:13:45 +01: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 {
overflow: hidden scroll;
}
body {
:root {
margin: 12px 96px 32px;
--gray: #484644;
--primary: #0078d4;
--primary-alt: #004578;
}
body.dark {
color: #f8f8f8;
--gray: #a19f9d;
--primary: #4ba0e1;
--primary-alt: #65aee6;
@media (prefers-color-scheme: dark) {
:root {
color: #f8f8f8;
--gray: #a19f9d;
--primary: #4ba0e1;
--primary-alt: #65aee6;
}
}
a {

4
dist/article/article.html vendored
View File

@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="scroll.css" />
<link rel="stylesheet" href="article.css" />
</head>
<body>
<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 -->
</body>
</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")) {
s.parentNode.removeChild(s)
}
if (get("d") === "1") document.body.classList.add("dark")
let main = document.getElementById("main")
main.innerHTML = dom.body.innerHTML
document.addEventListener("click", event => {

18
dist/article/scroll.css vendored
View File

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

95
dist/styles.css vendored
View File

@ -16,25 +16,28 @@
--white: #fff;
--whiteConstant: #fff;
}
body.dark {
--neutralLighterAlt: #282828;
--neutralLighter: #313131;
--neutralLight: #3f3f3f;
--neutralQuaternaryAlt: #484848;
--neutralQuaternary: #4f4f4f;
--neutralTertiaryAlt: #6d6d6d;
--neutralTertiary: #c8c8c8;
--neutralSecondaryAlt: #d2d0ce;
--neutralSecondary: #d0d0d0;
--neutralPrimaryAlt: #dadada;
--neutralPrimary: #ffffff;
--neutralDark: #f4f4f4;
--neutralDarker: #f4f4f4;
--black: #f8f8f8;
--white: #1f1f1f;
--whiteConstant: #f8f8f8;
@media (prefers-color-scheme: dark) {
:root {
--neutralLighterAlt: #282828;
--neutralLighter: #313131;
--neutralLight: #3f3f3f;
--neutralQuaternaryAlt: #484848;
--neutralQuaternary: #4f4f4f;
--neutralTertiaryAlt: #6d6d6d;
--neutralTertiary: #c8c8c8;
--neutralSecondaryAlt: #d2d0ce;
--neutralSecondary: #d0d0d0;
--neutralPrimaryAlt: #dadada;
--neutralPrimary: #ffffff;
--neutralDark: #f4f4f4;
--neutralDarker: #f4f4f4;
--black: #f8f8f8;
--white: #1f1f1f;
--whiteConstant: #f8f8f8;
}
}
html, body {
background-color: transparent;
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 {
color: #005a9e;
}
body.dark .ms-Button--commandBar.active .ms-Button-icon {
color: #c7e0f4;
}
i.ms-Nav-chevron {
line-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 {
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 {
background-color: unset !important;
color: var(--neutralSecondaryAlt);
@ -282,9 +276,6 @@ div[role="tabpanel"] {
background-color: #fffa;
z-index: 6;
}
body.dark .settings .loading {
background-color: #000a;
}
.settings .loading .ms-Spinner {
margin-top: 180px;
}
@ -590,12 +581,7 @@ img.favicon {
.card:active {
transform: scale(.97);
}
body.dark .card {
box-shadow: #0006 0px 5px 20px;
}
body.dark .card:hover {
box-shadow: #0008 0px 5px 40px;
}
.card .bg {
position: absolute;
left: 0;
@ -610,9 +596,6 @@ body.dark .card:hover {
.card div.bg {
background-color: #fffb;
}
body.dark div.bg {
background-color: #000b;
}
.card img.head {
display: block;
object-fit: cover;
@ -684,12 +667,6 @@ body.dark div.bg {
.list-card:active {
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 {
width: 80px;
height: 80px;
@ -719,3 +696,33 @@ body.dark .list-card:active {
display: -webkit-box;
-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 { Stack, CommandBarButton, IContextualMenuProps } from "@fluentui/react"
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_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20]
@ -37,11 +39,10 @@ class Article extends React.Component<ArticleProps, ArticleState> {
}
getFontSize = () => {
let size = window.localStorage.getItem(FONT_SIZE_STORE_KEY)
return size ? parseInt(size) : 16
return store.get(FONT_SIZE_STORE_KEY, 16)
}
setFontSize = (size: number) => {
window.localStorage.setItem(FONT_SIZE_STORE_KEY, String(size))
store.set(FONT_SIZE_STORE_KEY, size)
this.setState({fontSize: size})
}
@ -60,12 +61,19 @@ class Article extends React.Component<ArticleProps, ArticleState> {
{
key: "openInBrowser",
text: intl.get("openExternal"),
iconProps: {iconName: "NavigateExternalInline"},
iconProps: { iconName: "NavigateExternalInline" },
onClick: this.openInBrowser
},
{
key: "copyURL",
text: intl.get("context.copyURL"),
iconProps: { iconName: "Link" },
onClick: () => { clipboard.writeText(this.props.item.link) }
},
{
key: "toggleHidden",
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) }
}
]
@ -132,7 +140,7 @@ class Article extends React.Component<ArticleProps, ArticleState> {
<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>
<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 = () => (
<div className="article">

5
src/electron.ts
View File

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

2
src/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<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>
<link rel="stylesheet" href="article/scroll.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 { ActionStatus, AppThunk, getWindowBreakpoint } from "../utils"
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 { getCurrentLocale, setLocaleSettings } from "../settings"
import locales from "../i18n/_locales"
@ -230,6 +230,7 @@ export function appReducer(
case UPDATE_SOURCE_GROUP:
case ADD_SOURCE_TO_GROUP:
case REMOVE_SOURCE_FROM_GROUP:
case REORDER_SOURCE_GROUPS:
case DELETE_SOURCE_GROUP: return {
...state,
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 { saveSettings } from "./app"
import { store } from "../settings"
const GROUPS_STORE_KEY = "sourceGroups"
@ -24,12 +25,11 @@ export class SourceGroup {
}
static save(groups: SourceGroup[]) {
localStorage.setItem(GROUPS_STORE_KEY, JSON.stringify(groups))
store.set(GROUPS_STORE_KEY, groups)
}
static load(): SourceGroup[] {
let stored = localStorage.getItem(GROUPS_STORE_KEY)
return stored ? <SourceGroup[]>JSON.parse(stored) : []
return store.get(GROUPS_STORE_KEY, [])
}
}

53
src/scripts/settings.ts
View File

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