fix search with rtl

This commit is contained in:
Bruce Liu 2022-06-18 11:20:40 -07:00
parent d5ab8bf53f
commit 59cc7293c7
8 changed files with 684 additions and 366 deletions

View File

@ -91,6 +91,10 @@
.card span.h {
background: #fce10080;
}
.card.rtl .snippet,
.card.rtl .title {
direction: rtl;
}
.default-card {
display: inline-block;

997
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,7 @@
"@types/react-redux": "^7.1.9",
"@yang991178/rss-parser": "^3.8.1",
"electron": "^19.0.0",
"electron-builder": "^22.11.3",
"electron-builder": "^23.0.3",
"electron-react-devtools": "^0.5.3",
"electron-store": "^5.2.0",
"electron-window-state": "^5.0.3",

View File

@ -3,10 +3,12 @@ import { Card } from "./card"
import CardInfo from "./info"
import Time from "../utils/time"
import Highlights from "./highlights"
import { SourceTextDirection } from "../../scripts/models/source"
const className = (props: Card.Props) => {
let cn = ["card", "compact-card"]
if (props.item.hidden) cn.push("hidden")
if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
return cn.join(" ")
}
@ -23,15 +25,10 @@ const CompactCard: React.FunctionComponent<Card.Props> = props => (
text={props.item.title}
filter={props.filter}
title
dir={props.source.textDir}
/>
</span>
<span className="snippet">
<Highlights
text={props.item.snippet}
filter={props.filter}
dir={props.source.textDir}
/>
<Highlights text={props.item.snippet} filter={props.filter} />
</span>
</div>
<Time date={props.item.date} />

View File

@ -2,11 +2,13 @@ import * as React from "react"
import { Card } from "./card"
import CardInfo from "./info"
import Highlights from "./highlights"
import { SourceTextDirection } from "../../scripts/models/source"
const className = (props: Card.Props) => {
let cn = ["card", "default-card"]
if (props.item.snippet && props.item.thumb) cn.push("transform")
if (props.item.hidden) cn.push("hidden")
if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
return cn.join(" ")
}
@ -25,19 +27,10 @@ const DefaultCard: React.FunctionComponent<Card.Props> = props => (
) : null}
<CardInfo source={props.source} item={props.item} />
<h3 className="title">
<Highlights
text={props.item.title}
filter={props.filter}
title
dir={props.source.textDir}
/>
<Highlights text={props.item.title} filter={props.filter} title />
</h3>
<p className={"snippet" + (props.item.thumb ? "" : " show")}>
<Highlights
text={props.item.snippet}
filter={props.filter}
dir={props.source.textDir}
/>
<Highlights text={props.item.snippet} filter={props.filter} />
</p>
</div>
)

View File

@ -7,7 +7,6 @@ type HighlightsProps = {
text: string
filter: FeedFilter
title?: boolean
dir?: SourceTextDirection
}
const Highlights: React.FunctionComponent<HighlightsProps> = props => {
@ -59,22 +58,10 @@ const Highlights: React.FunctionComponent<HighlightsProps> = props => {
}
}
const testStyle = {
direction: "inherit",
} as React.CSSProperties
if (props.dir === SourceTextDirection.RTL) {
testStyle.direction = "rtl"
}
return (
<>
{spans.map(([text, flag]) =>
flag ? (
<div className="h" style={testStyle}>
{text}
</div>
) : (
<div style={testStyle}>{text}</div>
)
flag ? <span className="h">{text}</span> : text
)}
</>
)

View File

@ -3,6 +3,7 @@ import { Card } from "./card"
import CardInfo from "./info"
import Highlights from "./highlights"
import { ViewConfigs } from "../../schema-types"
import { SourceTextDirection } from "../../scripts/models/source"
const className = (props: Card.Props) => {
let cn = ["card", "list-card"]
@ -10,6 +11,7 @@ const className = (props: Card.Props) => {
if (props.selected) cn.push("selected")
if (props.viewConfigs & ViewConfigs.FadeRead && props.item.hasRead)
cn.push("read")
if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
return cn.join(" ")
}
@ -31,7 +33,6 @@ const ListCard: React.FunctionComponent<Card.Props> = props => (
text={props.item.title}
filter={props.filter}
title
dir={props.source.textDir}
/>
</h3>
{Boolean(props.viewConfigs & ViewConfigs.ShowSnippet) && (
@ -39,7 +40,6 @@ const ListCard: React.FunctionComponent<Card.Props> = props => (
<Highlights
text={props.item.snippet}
filter={props.filter}
dir={props.source.textDir}
/>
</p>
)}

View File

@ -2,11 +2,13 @@ import * as React from "react"
import { Card } from "./card"
import CardInfo from "./info"
import Highlights from "./highlights"
import { SourceTextDirection } from "../../scripts/models/source"
const className = (props: Card.Props) => {
let cn = ["card", "magazine-card"]
if (props.item.hasRead) cn.push("read")
if (props.item.hidden) cn.push("hidden")
if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
return cn.join(" ")
}
@ -28,14 +30,12 @@ const MagazineCard: React.FunctionComponent<Card.Props> = props => (
text={props.item.title}
filter={props.filter}
title
dir={props.source.textDir}
/>
</h3>
<p className="snippet">
<Highlights
text={props.item.snippet}
filter={props.filter}
dir={props.source.textDir}
/>
</p>
</div>