prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2298 from omnivore-app/feat/ios-library-cleanup

Browse source 
Update label styles on iOS and MacOS
This commit is contained in:
Jackson Harper 2023-06-02 11:39:47 +08:00 committed by GitHub
commit 6bfa70b680
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 428 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
android/Omnivore/app/src/main/assets/bundle.js
View file

File diff suppressed because one or more lines are too long

6
apple/OmnivoreKit/Sources/App/Views/AudioPlayer/ExpandedPlayer.swift
View file

@ -305,12 +305,12 @@
)
.frame(width: 16, height: 16)
.padding(.trailing, 16)
.foregroundColor(.themeDarkGray)
.foregroundColor(.themeAudioPlayerGray)
playPauseButtonItem
.frame(width: 45, height: 45)
.padding(.trailing, 16)
.foregroundColor(.themeDarkGray)
.foregroundColor(.themeAudioPlayerGray)
Button(
action: { self.audioController.skipForward(seconds: 15) },
@ -322,7 +322,7 @@
)
.frame(width: 16, height: 16)
.padding(.trailing, 32 - 4) // -4 to account for the menu touch padding
.foregroundColor(.themeDarkGray)
.foregroundColor(.themeAudioPlayerGray)
Menu(content: {
playbackRateButton(rate: 0.8, title: "0.8×", selected: audioController.playbackRate == 0.8)

4
apple/OmnivoreKit/Sources/App/Views/AudioPlayer/MiniPlayer.swift
View file

@ -134,11 +134,11 @@
playPauseButtonItem
.frame(width: 40, height: 40)
.foregroundColor(.themeDarkGray)
.foregroundColor(.themeAudioPlayerGray)
stopButton
.frame(width: 40, height: 40)
.foregroundColor(.themeDarkGray)
.foregroundColor(.themeAudioPlayerGray)
}
.padding(16)
.frame(maxHeight: .infinity)

11
apple/OmnivoreKit/Sources/Views/Colors/Colors.swift
View file

@ -23,9 +23,18 @@ public extension Color {
static var webControlButtonBackground: Color { Color("_webControlButtonBackground", bundle: .module) }
// New theme colors
static var themeLightGray: Color { Color("_lightGray", bundle: .module) }
static var themeMediumGray: Color { Color("_mediumGray", bundle: .module) }
static var themeMiddleGray: Color { Color("_middleGray", bundle: .module) }
static var themeLightGray: Color { Color("_lightGray", bundle: .module) }
static var themeLightestGray: Color { Color("_lightestGray", bundle: .module) }
static var themeDarkWhiteGray: Color { Color("_darkWhiteGray", bundle: .module) }
static var themeDarkGray: Color { Color("_darkGray", bundle: .module) }
static var themeLabelOutline: Color { Color("_labelOutline", bundle: .module) }
static var themeLabelForeground: Color { Color("_labelForeground", bundle: .module) }
static var themeLabelBackground: Color { Color("_labelBackground", bundle: .module) }
static var themeAudioPlayerGray: Color { Color("_audioPlayerGray", bundle: .module) }
static var themeGrayBg01: Color { Color("_themeGrayBg01", bundle: .module) }
static var themeHighlightColor: Color { Color("_highlightColor", bundle: .module) }
static var themeTTSReadingText: Color { Color("_themeTTSReadingText", bundle: .module) }

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_audioPlayerGray.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x3C",
"green" : "0x3C",
"red" : "0x3C"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xFF",
"green" : "0xFF",
"red" : "0xFF"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

12
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_darkGray.colorset/Contents.json
View file

@ -5,9 +5,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x3C",
"green" : "0x3C",
"red" : "0x3C"
"blue" : "0x2A",
"green" : "0x2A",
"red" : "0x2A"
}
},
"idiom" : "universal"
@ -23,9 +23,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xFF",
"green" : "0xFF",
"red" : "0xFF"
"blue" : "0x2A",
"green" : "0x2A",
"red" : "0x2A"
}
},
"idiom" : "universal"

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_darkWhiteGray.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xD9",
"green" : "0xD9",
"red" : "0xD9"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xD9",
"green" : "0xD9",
"red" : "0xD9"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_labelBackground.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xF5",
"green" : "0xF5",
"red" : "0xF5"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x2A",
"green" : "0x2A",
"red" : "0x2A"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_labelForeground.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x2A",
"green" : "0x2A",
"red" : "0x2A"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xEB",
"green" : "0xEB",
"red" : "0xEB"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_labelOutline.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xD9",
"green" : "0xD9",
"red" : "0xD9"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x68",
"green" : "0x69",
"red" : "0x69"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_lightGray.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x68",
"green" : "0x69",
"red" : "0x69"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x68",
"green" : "0x69",
"red" : "0x69"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_lightestGray.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x89",
"green" : "0x89",
"red" : "0x89"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x89",
"green" : "0x89",
"red" : "0x89"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

38
apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_middleGray.colorset/Contents.json Normal file
View file

@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x3C",
"green" : "0x3C",
"red" : "0x3C"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x3C",
"green" : "0x3C",
"red" : "0x3C"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

9
apple/OmnivoreKit/Sources/Views/FeedItem/LabelsFlowLayout.swift
View file

@ -20,7 +20,7 @@ struct LabelsFlowLayout: View {
GeometryReader { geometry in
self.generateContent(in: geometry)
}
}.padding(5)
}.padding(0)
.frame(height: totalHeight)
}
@ -31,8 +31,8 @@ struct LabelsFlowLayout: View {
return ZStack(alignment: .topLeading) {
ForEach(self.labelItems, id: \.self) { label in
self.item(for: label)
.padding(.horizontal, 1)
.padding(.vertical, 1)
.padding(.horizontal, 2)
.padding(.vertical, 2)
.alignmentGuide(.leading, computeValue: { dim in
if abs(width - dim.width) > geom.size.width {
width = 0
@ -59,8 +59,7 @@ struct LabelsFlowLayout: View {
}
private func item(for item: LinkedItemLabel) -> some View {
let chip = TextChip(feedItemLabel: item, padded: false, onTap: nil)
return chip
LibraryItemLabelView(text: item.name!, color: Color(hex: item.color!)!)
}
private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {

39
apple/OmnivoreKit/Sources/Views/FeedItem/LibraryItemCard.swift
View file

@ -119,23 +119,25 @@ public struct LibraryItemCard: View {
var readInfo: some View {
AnyView(HStack {
let fgcolor = Color.isDarkMode ? Color.themeDarkWhiteGray : Color.themeMiddleGray
Text("\(estimatedReadingTime)")
.font(Font.system(size: 11, weight: .medium))
.foregroundColor(Color.themeMediumGray)
.foregroundColor(fgcolor)
+
Text("\(readingProgress)")
.font(Font.system(size: 11, weight: .medium))
.foregroundColor(isPartiallyRead ? Color.appGreenSuccess : Color.themeMediumGray)
.foregroundColor(isPartiallyRead ? Color.appGreenSuccess : fgcolor)
+
Text("\(highlightsText)")
.font(Font.system(size: 11, weight: .medium))
.foregroundColor(Color.themeMediumGray)
.foregroundColor(fgcolor)
+
Text("\(notesText)")
.font(Font.system(size: 11, weight: .medium))
.foregroundColor(Color.themeMediumGray)
.foregroundColor(fgcolor)
}
.frame(maxWidth: .infinity, alignment: .leading))
}
@ -148,13 +150,13 @@ public struct LibraryItemCard: View {
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 55, height: 73)
.cornerRadius(4)
.frame(width: 40, height: 40)
.cornerRadius(5)
.padding(.top, 2)
} else {
Color.systemBackground
.frame(width: 55, height: 73)
.cornerRadius(4)
.frame(width: 40, height: 40)
.cornerRadius(5)
.padding(.top, 2)
}
}
@ -172,27 +174,12 @@ public struct LibraryItemCard: View {
}
return ""
// var str = ""
// if let author = item.author {
// str += author
// }
//
// if item.author != nil, item.publisherDisplayName != nil {
// str += ", "
// }
//
// if let publisherDisplayName = item.publisherDisplayName {
// str += publisherDisplayName
// }
//
// return str
}
var byLine: some View {
Text(bylineStr)
.font(Font.system(size: 15, weight: .regular))
.foregroundColor(Color.themeMediumGray)
.font(Font.system(size: 11, weight: .regular))
.foregroundColor(Color.isDarkMode ? Color.themeLightGray : Color.themeLightestGray)
.frame(maxWidth: .infinity, alignment: .leading)
.lineLimit(1)
}
@ -202,7 +189,7 @@ public struct LibraryItemCard: View {
readInfo
Text(item.unwrappedTitle)
.font(Font.system(size: 18, weight: .semibold))
.font(Font.system(size: 14, weight: .semibold))
.lineSpacing(1.25)
.foregroundColor(.appGrayTextContrast)
.fixedSize(horizontal: false, vertical: true)

34
apple/OmnivoreKit/Sources/Views/FeedItem/LibraryItemLabelView.swift Normal file
View file

@ -0,0 +1,34 @@
import Models
import SwiftUI
import Utils
public struct LibraryItemLabelView: View {
let text: String
let color: Color
public init(text: String, color: Color) {
self.text = text
self.color = color
}
public var body: some View {
HStack(spacing: 5) {
Circle()
.fill(color)
.frame(width: 11, height: 11)
Text(text)
.font(.appCaptionTwo)
}
.padding(.horizontal, 10)
.padding(.vertical, 6)
.lineLimit(1)
.foregroundColor(Color.themeLabelForeground)
.background(Color.themeLabelBackground)
.cornerRadius(5)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.themeLabelOutline, lineWidth: 1)
)
}
}

2
apple/OmnivoreKit/Sources/Views/Resources/bundle.js
View file

File diff suppressed because one or more lines are too long

35
packages/web/components/elements/LabelChip.tsx
View file

@ -1,15 +1,19 @@
import { getLuminance, lighten, parseToRgba, toHsla } from 'color2k'
import { useRouter } from 'next/router'
import { Button } from './Button'
import { SpanBox } from './LayoutPrimitives'
import { SpanBox, HStack } from './LayoutPrimitives'
import { Circle } from 'phosphor-react'
import { isDarkTheme } from '../../lib/themeUpdater'
type LabelChipProps = {
text: string
color: string // expected to be a RGB hex color string
useAppAppearance?: boolean
}
export function LabelChip(props: LabelChipProps): JSX.Element {
const router = useRouter()
const isDark = isDarkTheme()
const hexToRgb = (hex: string) => {
const bigint = parseInt(hex.substring(1), 16)
@ -31,6 +35,35 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
const backgroundColor = hexToRgb(props.color)
const textColor = luminance > 0.5 ? '#000000' : '#ffffff'
if (props.useAppAppearance) {
return (
<SpanBox
css={{
display: 'inline-table',
margin: '2px',
fontSize: '11px',
fontWeight: '500',
fontFamily: '$inter',
padding: '4px 10px',
whiteSpace: 'nowrap',
cursor: 'pointer',
backgroundClip: 'padding-box',
borderRadius: '5px',
borderWidth: '1px',
borderStyle: 'solid',
color: isDark ? '#EBEBEB' : '#2A2A2A',
borderColor: isDark ? '#6A6968' : '#D9D9D9',
backgroundColor: isDark ? '#2A2A2A' : '#F5F5F5',
}}
>
<HStack alignment="center" css={{ gap: '5px' }}>
<Circle size={14} color={props.color} weight="fill" />
<SpanBox css={{ pt: '1px' }}>{props.text}</SpanBox>
</HStack>
</SpanBox>
)
}
return (
<Button
style="plainIcon"

26
packages/web/components/templates/article/ArticleContainer.tsx
View file

@ -118,16 +118,21 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
props.highlightOnRelease
)
// iOS app embed can overide the original margin and line height
const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] =
useState<number | null>(null)
const [lineHeightOverride, setLineHeightOverride] =
useState<number | null>(null)
const [fontFamilyOverride, setFontFamilyOverride] =
useState<string | null>(null)
const [highContrastTextOverride, setHighContrastTextOverride] =
useState<boolean | undefined>(undefined)
const [justifyTextOverride, setJustifyTextOverride] =
useState<boolean | undefined>(undefined)
const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
number | null
>(null)
const [lineHeightOverride, setLineHeightOverride] = useState<number | null>(
null
)
const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
null
)
const [highContrastTextOverride, setHighContrastTextOverride] = useState<
boolean | undefined
>(undefined)
const [justifyTextOverride, setJustifyTextOverride] = useState<
boolean | undefined
>(undefined)
const highlightHref = useRef(
window.location.hash ? window.location.hash.split('#')[1] : null
)
@ -429,6 +434,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
key={label.id}
text={label.name}
color={label.color}
useAppAppearance={props.isAppleAppEmbed}
/>
))}
</SpanBox>