Merge pull request #761 from omnivore-app/fix/reader-fonts

Remove sf mono font. Add system default
This commit is contained in:
Satindar Dhillon 2022-06-05 12:04:17 -07:00 committed by GitHub
commit 27a23496c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 9 deletions

View file

@ -5,8 +5,17 @@ public enum WebFont: String, CaseIterable {
case inter = "Inter"
case merriweather = "Merriweather"
case lyon = "Lyon"
case sfmono = "SF Mono"
case tisa = "Tisa"
case system = "unset"
var displayValue: String {
switch self {
case .inter, .merriweather, .lyon, .tisa:
return rawValue
case .system:
return "System Default"
}
}
}
public struct WebPreferencesPopoverView: View {
@ -55,7 +64,7 @@ public struct WebPreferencesPopoverView: View {
},
label: {
HStack {
Text(font.rawValue).foregroundColor(.appGrayTextContrast)
Text(font.displayValue).foregroundColor(.appGrayTextContrast)
Spacer()
if font.rawValue == preferredFont {
Image(systemName: "checkmark").foregroundColor(.appGrayTextContrast)
@ -67,6 +76,7 @@ public struct WebPreferencesPopoverView: View {
}
.listStyle(.plain)
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("Reader Font")
}
public var body: some View {

File diff suppressed because one or more lines are too long

View file

@ -49,7 +49,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
null
)
const [highContrastFont, setHighContrastFont] = useState(props.highContrastFont ?? false)
const [highContrastFont, setHighContrastFont] = useState(
props.highContrastFont ?? false
)
const highlightHref = useRef(
window.location.hash ? window.location.hash.split('#')[1] : null
)
@ -162,7 +164,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
document.addEventListener('updateMargin', updateMargin)
document.addEventListener('updateFontSize', handleFontSizeChange)
document.addEventListener('updateColorMode', updateColorMode)
document.addEventListener('handleFontContrastChange', handleFontContrastChange)
document.addEventListener(
'handleFontContrastChange',
handleFontContrastChange
)
document.addEventListener('share', share)
return () => {
@ -171,7 +176,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
document.removeEventListener('updateMargin', updateMargin)
document.removeEventListener('updateFontSize', handleFontSizeChange)
document.removeEventListener('updateColorMode', updateColorMode)
document.removeEventListener('handleFontContrastChange', handleFontContrastChange)
document.removeEventListener(
'handleFontContrastChange',
handleFontContrastChange
)
document.removeEventListener('share', share)
}
})
@ -181,7 +189,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
margin: marginOverride ?? props.margin ?? 360,
lineHeight: lineHeightOverride ?? props.lineHeight ?? 150,
fontFamily: fontFamilyOverride ?? props.fontFamily ?? 'inter',
readerFontColor: highContrastFont ? theme.colors.readerFontHighContrast.toString() : theme.colors.readerFont.toString(),
readerFontColor: highContrastFont
? theme.colors.readerFontHighContrast.toString()
: theme.colors.readerFont.toString(),
readerFontColorTransparent: theme.colors.readerFontTransparent.toString(),
readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
readerHeadersColor: theme.colors.readerHeader.toString(),

View file

@ -195,7 +195,7 @@ const darkThemeSpec = {
// Reader Colors
readerBg: '#303030',
readerFont: '#b9b9b9',
readerFontHighContrast: 'black',
readerFontHighContrast: 'white',
readerFontTransparent: 'rgba(185,185,185,0.65)',
readerHeader: '#b9b9b9',
readerTableHeader: '#FFFFFF',
@ -203,7 +203,6 @@ const darkThemeSpec = {
avatarBg: '#000000',
avatarFont: 'rgba(255, 255, 255, 0.8)',
//utility
textDefault: 'rgba(255, 255, 255, 0.8)',
textSubtle: 'rgba(255, 255, 255, 0.65)',