add share menu

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;

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",

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<ArticleProps, ArticleState> {
                 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)
         ]
     })
 

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) => (
+    <div className="qr-container">
+        <QRCode
+            value={item.url}
+            size={150}
+            renderAs="svg" />
+    </div>
+)
+
 export class ContextMenu extends React.Component<ContextMenuProps> {
     getItems = (): IContextualMenuItem[] => {
         switch (this.props.type) {
@@ -75,12 +89,21 @@ export class ContextMenu extends React.Component<ContextMenuProps> {
                 {
                     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"),

src/scripts/i18n/en-US.json

@@ -61,6 +61,7 @@
         "loadWebpage": "Load webpage"
     },
     "context": {
+        "share": "Share",
         "read": "Read",
         "copyTitle": "Copy title",
         "copyURL": "Copy link",

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",

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",

src/scripts/i18n/zh-CN.json

@@ -61,6 +61,7 @@
         "loadWebpage": "加载网页"
     },
     "context": {
+        "share": "分享",
         "read": "阅读",
         "copyTitle": "复制标题",
         "copyURL": "复制链接",

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
                                 })
                         })