More work on the player UI, more consistent nav bar item sizing

This commit is contained in:
Jackson Harper 2022-10-06 12:17:31 +08:00
parent ca725b4908
commit 42b0921ab6
5 changed files with 21 additions and 15 deletions

View file

@ -96,12 +96,11 @@ public struct MiniPlayer: View {
},
label: {
Image(systemName: "chevron.down")
.font(.appTitleTwo)
.font(.appNavbarIcon)
.tint(.appGrayTextContrast)
}
)
.contentShape(Rectangle())
// .contentShape(Rectangle())
}
func viewArticle() {
@ -174,7 +173,7 @@ public struct MiniPlayer: View {
.transition(.opacity)
}
} else {
HStack(alignment: .center) {
HStack(alignment: .center, spacing: 8) {
let dim = 64.0
if let imageURL = itemAudioProperties.imageURL {
@ -219,7 +218,9 @@ public struct MiniPlayer: View {
stopButton
.frame(width: 28, height: 28)
}.frame(maxHeight: .infinity)
}
.padding(16)
.frame(maxHeight: .infinity)
}
if expanded {
@ -357,6 +358,8 @@ public struct MiniPlayer: View {
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading: Button(action: { self.showVoiceSheet = false }) {
Image(systemName: "chevron.backward")
.font(.appNavbarIcon)
.tint(.appGrayTextContrast)
})
}
}.sheet(isPresented: $showLanguageSheet) {
@ -366,6 +369,8 @@ public struct MiniPlayer: View {
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading: Button(action: { self.showLanguageSheet = false }) {
Image(systemName: "chevron.backward")
.font(.appNavbarIcon)
.tint(.appGrayTextContrast)
})
}
}
@ -441,6 +446,8 @@ public struct MiniPlayer: View {
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading: Button(action: { self.showVoiceSheet = false }) {
Image(systemName: "chevron.backward")
.font(.appNavbarIcon)
.tint(.appGrayTextContrast)
})
}
}

View file

@ -358,10 +358,6 @@ import Views
}
}
}
if viewModel.isLoading {
LoadingSection()
}
}
.listStyle(PlainListStyle())
}

View file

@ -129,7 +129,7 @@ struct LinkItemDetailView: View {
action: { self.presentationMode.wrappedValue.dismiss() },
label: {
Image(systemName: "chevron.backward")
.font(.appTitleTwo)
.font(.appNavbarIcon)
.foregroundColor(.appGrayTextContrast)
.padding(.horizontal)
}

View file

@ -111,10 +111,10 @@ struct WebReaderContainerView: View {
var textToSpeechButtonImage: some View {
if audioController.state == .stopped || audioController.itemAudioProperties?.itemID != self.item.id {
return Image(systemName: "headphones").font(Font.system(size: 19))
return Image(systemName: "headphones").font(.appTitleThree)
}
let name = audioController.isPlayingItem(itemID: item.unwrappedID) ? "pause.circle" : "play.circle"
return Image(systemName: name).font(.appTitleTwo)
return Image(systemName: name).font(.appTitleThree)
}
var navBar: some View {
@ -124,7 +124,7 @@ struct WebReaderContainerView: View {
action: { self.presentationMode.wrappedValue.dismiss() },
label: {
Image(systemName: "chevron.backward")
.font(.appTitleTwo)
.font(.appNavbarIcon)
.foregroundColor(.appGrayTextContrast)
.padding(.horizontal)
}
@ -139,7 +139,7 @@ struct WebReaderContainerView: View {
action: { showPreferencesPopover.toggle() },
label: {
Image(systemName: "textformat.size")
.font(.appTitleTwo)
.font(.appTitleThree)
}
)
.padding(.horizontal)

View file

@ -14,7 +14,6 @@ public extension Font {
.customFont(InterFont.regular.rawValue, size: 28, relativeTo: .title)
}
/// 22pt, Inter-Regular
static var appTitleTwo: Font {
Font.custom(InterFont.regular.rawValue, size: 28, relativeTo: .title2)
}
@ -23,6 +22,10 @@ public extension Font {
Font.custom(InterFont.bold.rawValue, size: 24, relativeTo: .title2)
}
static var appNavbarIcon: Font {
Font.custom(InterFont.regular.rawValue, size: 22, relativeTo: .title2)
}
/// 20pt, Inter-Regular
static var appTitleThree: Font {
Font.custom(InterFont.regular.rawValue, size: 20, relativeTo: .title3)