-
Notifications
You must be signed in to change notification settings - Fork 128
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update widget design #1343
base: trunk
Are you sure you want to change the base?
Update widget design #1343
Changes from all commits
6165769
17ef6a5
37eac96
65d6a5f
8879b96
cf37730
9ca3f8c
174cb80
c974dae
a556518
df15ef1
c2d5902
2c218c1
b60aa81
1a635ba
be32a48
a7194fb
7690b05
27464a8
2877b05
04aa9b0
7c85359
fd86fef
200f1ee
5cebbfc
9fc6a2e
613b554
89da42b
6753db8
db79b64
af146e3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
{ | ||
"images" : [ | ||
{ | ||
"idiom" : "universal", | ||
"scale" : "1x" | ||
}, | ||
{ | ||
"filename" : "logo_white_small_transparent@2x.png", | ||
"idiom" : "universal", | ||
"scale" : "2x" | ||
}, | ||
{ | ||
"filename" : "logo_white_small_transparent@3x.png", | ||
"idiom" : "universal", | ||
"scale" : "3x" | ||
} | ||
], | ||
"info" : { | ||
"author" : "xcode", | ||
"version" : 1 | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import SwiftUI | ||
import WidgetKit | ||
|
||
struct NowPlayingWidgetBold: Widget { | ||
var body: some WidgetConfiguration { | ||
StaticConfiguration(kind: "Now_Playing_Widget_Bold", provider: NowPlayingProvider()) { entry in | ||
NowPlayingWidgetEntryView(entry: entry, widgetColorSchemeLight: widgetColorSchemeBoldNowPlaying, widgetColorSchemeDark: widgetColorSchemeBoldNowPlaying) | ||
.clearBackground() | ||
} | ||
.contentMarginsDisabledIfAvailable() | ||
.configurationDisplayName(L10n.nowPlaying) | ||
.description(L10n.widgetsNowPlayingDesc) | ||
.supportedFamilies([.systemSmall]) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,53 +5,46 @@ struct EpisodeView: View { | |
@State var episode: WidgetEpisode | ||
@State var topText: Text | ||
@State var isPlaying: Bool = false | ||
|
||
var compactView: Bool { | ||
typeSize >= .xxLarge | ||
} | ||
@State var isFirstEpisode: Bool = false | ||
|
||
@Environment(\.dynamicTypeSize) var typeSize | ||
@Environment(\.widgetColorScheme) var colorScheme | ||
|
||
var body: some View { | ||
let textColor = isFirstEpisode ? colorScheme.topTextColor : colorScheme.bottomTextColor | ||
|
||
Link(destination: CommonWidgetHelper.urlForEpisodeUuid(uuid: episode.episodeUuid)!) { | ||
HStack(spacing: 12) { | ||
if #available(iOS 17, *) { | ||
Toggle(isOn: isPlaying, intent: PlayEpisodeIntent(episodeUuid: episode.episodeUuid)) { | ||
SmallArtworkView(imageData: episode.imageData) | ||
} | ||
.toggleStyle(WidgetPlayToggleStyle()) | ||
} else { | ||
SmallArtworkView(imageData: episode.imageData) | ||
} | ||
SmallArtworkView(imageData: episode.imageData) | ||
.frame(maxWidth: 52, maxHeight: 52) | ||
VStack(alignment: .leading) { | ||
if !compactView { | ||
topText | ||
.textCase(.uppercase) | ||
.font(.caption2) | ||
.foregroundColor(Color.secondary) | ||
} | ||
Text(episode.episodeTitle) | ||
.font(.footnote) | ||
.fontWeight(.semibold) | ||
.foregroundColor(Color.primary) | ||
.foregroundColor(textColor) | ||
.lineLimit(1) | ||
HStack(alignment: .center, spacing: 5) { | ||
if compactView { | ||
.frame(maxWidth: .infinity, alignment: .leading) | ||
if isFirstEpisode, #available(iOS 17, *) { | ||
Spacer() | ||
Toggle(isOn: isPlaying, intent: PlayEpisodeIntent(episodeUuid: episode.episodeUuid)) { | ||
topText | ||
.textCase(.uppercase) | ||
.font(.caption2) | ||
.foregroundColor(Color.secondary) | ||
Text("•") | ||
.font(.caption2) | ||
.foregroundColor(Color.secondary) | ||
.font(.caption) | ||
.fontWeight(.medium) | ||
.foregroundColor(colorScheme.topButtonTextColor) | ||
} | ||
Text(episode.podcastName) | ||
.toggleStyle(WidgetFirstEpisodePlayToggleStyle(colorScheme: colorScheme)) | ||
} else { | ||
Spacer() | ||
.frame(height: 4) | ||
topText | ||
.font(.caption2) | ||
.fontWeight(.semibold) | ||
.foregroundColor(Color.secondary) | ||
.lineLimit(1) | ||
.foregroundColor(textColor.opacity(0.6)) | ||
} | ||
} | ||
if !isFirstEpisode, #available(iOS 17, *) { | ||
Toggle(isOn: isPlaying, intent: PlayEpisodeIntent(episodeUuid: episode.episodeUuid)) {} | ||
.toggleStyle(WidgetPlayToggleStyle(colorScheme: colorScheme)) | ||
} | ||
} | ||
} | ||
} | ||
|
@@ -62,27 +55,57 @@ struct EpisodeView: View { | |
} | ||
} | ||
|
||
struct WidgetPlayToggleStyle: ToggleStyle { | ||
func makeBody(configuration: Configuration) -> some View { | ||
ZStack { | ||
configuration.label | ||
.truncationMode(.tail) | ||
struct WidgetFirstEpisodePlayToggleStyle: ToggleStyle { | ||
let colorScheme: PCWidgetColorScheme | ||
|
||
Circle() | ||
.foregroundStyle(.white) | ||
.frame(width: 24, height: 24) | ||
func makeBody(configuration: Configuration) -> some View { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should this be marked @ViewBuilder in case the view is not a single View? I think the protocol method is marked ViewBuilder, so maybe that's automatically applied? |
||
HStack(spacing: 0) { | ||
Group { | ||
configuration.isOn ? | ||
Image("icon-pause") | ||
.resizable() | ||
.foregroundStyle(.black) | ||
.foregroundStyle(colorScheme.topButtonTextColor) | ||
: | ||
Image("icon-play") | ||
Image("icon-play") | ||
.resizable() | ||
.foregroundStyle(.black) | ||
.foregroundStyle(colorScheme.topButtonTextColor) | ||
} | ||
.frame(width: 28, height: 28) | ||
// TODO: Something fun - create a timeline that counts down by the minute instead of showing "now playing" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I just noticed I left this here... it is more of a "this would be fun if we could do this" activity, but not something that can easily be done right now. Comment should probably be removed, but I'll leave it here for the moment incase anyone has thoughts on it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of the TODO comment add an issue on the repo as an improvement/suggestion to do in the future. |
||
configuration.label | ||
.truncationMode(.tail) | ||
} | ||
.padding(.trailing, 12) // icon has 8px padding built into it, so this should match 8 + .leading | ||
.padding(.leading, 4) | ||
.padding(.vertical, 2) // 2 + 8 (from icon) = 10 in design (actually 9.76) | ||
.background( | ||
RoundedRectangle(cornerRadius: 100) | ||
.foregroundColor(colorScheme.topButtonBackgroundColor) | ||
) | ||
} | ||
} | ||
|
||
struct WidgetPlayToggleStyle: ToggleStyle { | ||
let colorScheme: PCWidgetColorScheme | ||
|
||
func makeBody(configuration: Configuration) -> some View { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should this be marked |
||
HStack { | ||
ZStack { | ||
Circle() | ||
.foregroundStyle(colorScheme.bottomButtonBackgroundColor) | ||
.frame(width: 24, height: 24) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could this 24 be refactored to an enum constant? |
||
Group { | ||
configuration.isOn ? | ||
Image("icon-pause") | ||
.resizable() | ||
.foregroundStyle(colorScheme.bottomButtonTextColor) | ||
: | ||
Image("icon-play") | ||
.resizable() | ||
.foregroundStyle(colorScheme.bottomButtonTextColor) | ||
} | ||
.frame(width: 24, height: 24) | ||
} | ||
.frame(width: 24, height: 24) | ||
} | ||
.opacity(0.9) | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this would be more readable broken into either separate
View
s or severalViewBuilder
functions. Maybe anArtwork
,EpisodeTitle
, andPlayingToggle
?