From 237c584363bea5c9698bb61640a1c4dd58766b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= <yang991178@live.com>
Date: Sat, 29 Aug 2020 19:21:13 +0800
Subject: [PATCH] add selected indicator in list view

---
 dist/styles/cards.css              | 9 ++++++++-
 dist/styles/global.css             | 1 +
 src/components/cards/card.tsx      | 1 +
 src/components/cards/list-card.tsx | 1 +
 src/components/feeds/feed.tsx      | 1 +
 src/components/feeds/list-feed.tsx | 4 ++++
 src/containers/feed-container.tsx  | 6 ++++--
 7 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/dist/styles/cards.css b/dist/styles/cards.css
index f921442..44c0dae 100644
--- a/dist/styles/cards.css
+++ b/dist/styles/cards.css
@@ -75,7 +75,7 @@
     width: calc(100% - 6px);
     height: calc(100% - 6px);
     border: 1px solid var(--white);
-    outline: 2px solid #0078d4;
+    outline: 2px solid var(--primary);
 }
 .card.hidden::after {
     content: "";
@@ -223,6 +223,13 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
 }
+.list-card.selected::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    border-left: 2px solid var(--primary);
+}
 
 .magazine-card {
     width: 700px;
diff --git a/dist/styles/global.css b/dist/styles/global.css
index 8e00c07..60905eb 100644
--- a/dist/styles/global.css
+++ b/dist/styles/global.css
@@ -16,6 +16,7 @@
     --black: #000;
     --white: #fff;
     --whiteConstant: #fff;
+    --primary: #0078d4;
     --navHeight: 32px;
 
     --blur-0: saturate(150%) blur(16px);
diff --git a/src/components/cards/card.tsx b/src/components/cards/card.tsx
index 2d31d4c..bde1b4a 100644
--- a/src/components/cards/card.tsx
+++ b/src/components/cards/card.tsx
@@ -11,6 +11,7 @@ export namespace Card {
         item: RSSItem
         source: RSSSource
         filter: FeedFilter
+        selected?: boolean
         viewConfigs?: ViewConfigs
         shortcuts: (item: RSSItem, e: KeyboardEvent) => void
         markRead: (item: RSSItem) => void
diff --git a/src/components/cards/list-card.tsx b/src/components/cards/list-card.tsx
index c793e66..914ee80 100644
--- a/src/components/cards/list-card.tsx
+++ b/src/components/cards/list-card.tsx
@@ -7,6 +7,7 @@ import { ViewConfigs } from "../../schema-types"
 const className = (props: Card.Props) => {
     let cn = ["card", "list-card"]
     if (props.item.hidden) cn.push("hidden")
+    if (props.selected) cn.push("selected")
     return cn.join(" ")
 }
 
diff --git a/src/components/feeds/feed.tsx b/src/components/feeds/feed.tsx
index 0622066..af9c963 100644
--- a/src/components/feeds/feed.tsx
+++ b/src/components/feeds/feed.tsx
@@ -11,6 +11,7 @@ export type FeedProps = FeedReduxProps & {
     viewType: ViewType
     viewConfigs?: ViewConfigs
     items: RSSItem[]
+    currentItem: string
     sourceMap: Object
     filter: FeedFilter
     shortcuts: (item: RSSItem, e: KeyboardEvent) => void
diff --git a/src/components/feeds/list-feed.tsx b/src/components/feeds/list-feed.tsx
index f55b383..a30ab28 100644
--- a/src/components/feeds/list-feed.tsx
+++ b/src/components/feeds/list-feed.tsx
@@ -8,6 +8,7 @@ import { ViewType } from "../../schema-types";
 import ListCard from "../cards/list-card";
 import MagazineCard from "../cards/magazine-card";
 import CompactCard from "../cards/compact-card";
+import { Card } from "../cards/card";
 
 class ListFeed extends React.Component<FeedProps> {
     onRenderItem = (item: RSSItem) => {
@@ -22,6 +23,9 @@ class ListFeed extends React.Component<FeedProps> {
             markRead: this.props.markRead,
             contextMenu: this.props.contextMenu,
             showItem: this.props.showItem,
+        } as Card.Props
+        if (this.props.viewType === ViewType.List && this.props.currentItem === item._id) {
+            props.selected = true
         }
 
         switch (this.props.viewType) {
diff --git a/src/containers/feed-container.tsx b/src/containers/feed-container.tsx
index 21173e9..7acd638 100644
--- a/src/containers/feed-container.tsx
+++ b/src/containers/feed-container.tsx
@@ -19,17 +19,19 @@ const getFeed = (state: RootState, props: FeedContainerProps) => state.feeds[pro
 const getFilter = (state: RootState) => state.page.filter
 const getView = (_, props: FeedContainerProps) => props.viewType
 const getViewConfigs = (state: RootState) => state.page.viewConfigs
+const getCurrentItem = (state: RootState) => state.page.itemId
 
 const makeMapStateToProps = () => {
     return createSelector(
-        [getSources, getItems, getFeed, getView, getFilter, getViewConfigs],
-        (sources, items, feed, viewType, filter, viewConfigs) => ({
+        [getSources, getItems, getFeed, getView, getFilter, getViewConfigs, getCurrentItem],
+        (sources, items, feed, viewType, filter, viewConfigs, currentItem) => ({
             feed: feed,
             items: feed.iids.map(iid => items[iid]),
             sourceMap: sources,
             filter: filter,
             viewType: viewType,
             viewConfigs: viewConfigs,
+            currentItem: currentItem,
         })
     )
 }