From debf45e4d61ff93079538f6722b2338ee3cb5b3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= Date: Wed, 8 Jul 2020 12:15:08 +0800 Subject: [PATCH] add share menu --- dist/styles.css | 7 +++++++ package.json | 4 +--- src/components/article.tsx | 10 ++++++++-- src/components/context-menu.tsx | 23 +++++++++++++++++++++++ src/scripts/i18n/en-US.json | 1 + src/scripts/i18n/es.json | 1 + src/scripts/i18n/fr-FR.json | 1 + src/scripts/i18n/zh-CN.json | 1 + src/scripts/models/source.ts | 2 +- 9 files changed, 44 insertions(+), 6 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index e43e05a..04a185c 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -55,6 +55,7 @@ html, body { .ms-ContextualMenu-link, .ms-Button { cursor: default; font-size: 13px; + user-select: none; } .ms-Nav-link, .ms-Nav-chevronButton { font-size: 12px; @@ -234,6 +235,12 @@ nav.item-on .btn-group .btn.system { body.darwin .btn-group .btn.system { display: none; } +.qr-container { + height: 150px; + padding: 7px; + margin: 8px; + background: #fff; +} .menu-container, .article-container { position: fixed; diff --git a/package.json b/package.json index 6fa622b..ed65239 100644 --- a/package.json +++ b/package.json @@ -85,9 +85,6 @@ "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "@types/react-redux": "^7.1.9", - "@types/redux": "^3.6.0", - "@types/redux-thunk": "^2.1.0", - "@types/reselect": "^2.2.0", "@yang991178/rss-parser": "^3.8.1", "electron": "^9.0.5", "electron-builder": "^22.7.0", @@ -96,6 +93,7 @@ "electron-window-state": "^5.0.3", "html-webpack-plugin": "^4.3.0", "nedb": "^1.8.0", + "qrcode.react": "^1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-intl-universal": "^2.2.5", diff --git a/src/components/article.tsx b/src/components/article.tsx index 0d96fe0..f144260 100644 --- a/src/components/article.tsx +++ b/src/components/article.tsx @@ -2,8 +2,9 @@ import * as React from "react" import intl from "react-intl-universal" import { renderToString } from "react-dom/server" import { RSSItem } from "../scripts/models/item" -import { Stack, CommandBarButton, IContextualMenuProps, FocusZone } from "@fluentui/react" +import { Stack, CommandBarButton, IContextualMenuProps, FocusZone, ContextualMenuItemType } from "@fluentui/react" import { RSSSource, SourceOpenTarget } from "../scripts/models/source" +import { shareSubmenu } from "./context-menu" const FONT_SIZE_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20] @@ -75,7 +76,12 @@ class Article extends React.Component { 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) } - } + }, + { + key: "divider_1", + itemType: ContextualMenuItemType.Divider, + }, + ...shareSubmenu(this.props.item) ] }) diff --git a/src/components/context-menu.tsx b/src/components/context-menu.tsx index c773922..554e3b5 100644 --- a/src/components/context-menu.tsx +++ b/src/components/context-menu.tsx @@ -1,5 +1,6 @@ import * as React from "react" import intl from "react-intl-universal" +import QRCode from "qrcode.react" import { cutText, googleSearch } from "../scripts/utils" import { ContextualMenu, IContextualMenuItem, ContextualMenuItemType, DirectionalHint } from "office-ui-fabric-react/lib/ContextualMenu" import { ContextMenuType } from "../scripts/models/app" @@ -31,6 +32,19 @@ export type ContextMenuProps = ContextReduxProps & { close: () => void } +export const shareSubmenu = (item: RSSItem): IContextualMenuItem[] => [ + { key: "qr", url: item.link, onRender: renderShareQR } +] + +const renderShareQR = (item: IContextualMenuItem) => ( +
+ +
+) + export class ContextMenu extends React.Component { getItems = (): IContextualMenuItem[] => { switch (this.props.type) { @@ -75,12 +89,21 @@ export class ContextMenu extends React.Component { { 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) } }, { key: "divider_1", itemType: ContextualMenuItemType.Divider, }, + { + key: "share", + text: intl.get("context.share"), + iconProps: { iconName: "Share" }, + subMenuProps: { + items: shareSubmenu(this.props.item) + } + }, { key: "copyTitle", text: intl.get("context.copyTitle"), diff --git a/src/scripts/i18n/en-US.json b/src/scripts/i18n/en-US.json index defdaab..d89aaac 100644 --- a/src/scripts/i18n/en-US.json +++ b/src/scripts/i18n/en-US.json @@ -61,6 +61,7 @@ "loadWebpage": "Load webpage" }, "context": { + "share": "Share", "read": "Read", "copyTitle": "Copy title", "copyURL": "Copy link", diff --git a/src/scripts/i18n/es.json b/src/scripts/i18n/es.json index 91af22f..69e485a 100644 --- a/src/scripts/i18n/es.json +++ b/src/scripts/i18n/es.json @@ -59,6 +59,7 @@ "loadWebpage": "Cargar página web" }, "context": { + "share": "Compartir", "read": "Leer", "copyTitle": "Copiar título", "copyURL": "Copiar enlace", diff --git a/src/scripts/i18n/fr-FR.json b/src/scripts/i18n/fr-FR.json index 57a4143..0ed0e92 100644 --- a/src/scripts/i18n/fr-FR.json +++ b/src/scripts/i18n/fr-FR.json @@ -59,6 +59,7 @@ "loadWebpage": "Charger la page web" }, "context": { + "share": "Partager", "read": "Lu", "copyTitle": "Copier le titre", "copyURL": "Copier le lien", diff --git a/src/scripts/i18n/zh-CN.json b/src/scripts/i18n/zh-CN.json index e36436a..1f3f3bf 100644 --- a/src/scripts/i18n/zh-CN.json +++ b/src/scripts/i18n/zh-CN.json @@ -61,6 +61,7 @@ "loadWebpage": "加载网页" }, "context": { + "share": "分享", "read": "阅读", "copyTitle": "复制标题", "copyURL": "复制链接", diff --git a/src/scripts/models/source.ts b/src/scripts/models/source.ts index e4ad53b..b13e6fa 100644 --- a/src/scripts/models/source.ts +++ b/src/scripts/models/source.ts @@ -244,10 +244,10 @@ export function addSource(url: string, name: string = null, batch = false): AppT .then(inserted => { inserted.unreadCount = feed.items.length dispatch(addSourceSuccess(inserted, batch)) + window.settings.saveGroups(getState().groups) return RSSSource.checkItems(inserted, feed.items) .then(items => insertItems(items)) .then(() => { - window.settings.saveGroups(getState().groups) return inserted.sid }) })