diff --git a/psst-gui/src/ui/home.rs b/psst-gui/src/ui/home.rs index 71fc07d1..0f33d979 100644 --- a/psst-gui/src/ui/home.rs +++ b/psst-gui/src/ui/home.rs @@ -195,6 +195,7 @@ fn loaded_results_widget() -> impl Widget> { .with_child(album_results_widget()) .with_child(playlist_results_widget()) .with_child(show_results_widget())) + // We want it to allign vertially too so it looks neater! .align_left(), ) ) @@ -248,7 +249,7 @@ fn playlist_results_widget() -> impl Widget> { Empty, Flex::column().with_child( Scroll::new( - List::new(|| playlist::horizontal_playlist_widget(true, true)).horizontal(), + List::new(|| playlist::playlist_widget(true)).horizontal(), ) .horizontal() .align_left() @@ -263,7 +264,7 @@ fn show_results_widget() -> impl Widget> { Empty, Flex::column().with_child( Scroll::new( - List::new(show::horizontal_show_widget).horizontal(), + List::new(|| show::show_widget(true)).horizontal(), ) .align_left() ), diff --git a/psst-gui/src/ui/library.rs b/psst-gui/src/ui/library.rs index b5891ded..ba77c27e 100644 --- a/psst-gui/src/ui/library.rs +++ b/psst-gui/src/ui/library.rs @@ -165,7 +165,7 @@ pub fn saved_albums_widget() -> impl Widget { pub fn saved_shows_widget() -> impl Widget { Async::new( utils::spinner_widget, - || List::new(show::show_widget).lens(Ctx::map(SavedShows::shows)), + || List::new(|| show::show_widget(false)).lens(Ctx::map(SavedShows::shows)), utils::error_widget, ) .lens( diff --git a/psst-gui/src/ui/playlist.rs b/psst-gui/src/ui/playlist.rs index c7813ed7..5463274b 100644 --- a/psst-gui/src/ui/playlist.rs +++ b/psst-gui/src/ui/playlist.rs @@ -357,8 +357,11 @@ pub fn horizontal_playlist_widget( .context_menu(playlist_menu_ctx) } -pub fn playlist_widget() -> impl Widget> { - let playlist_image = rounded_cover_widget(theme::grid(6.0)).lens(Ctx::data()); +pub fn playlist_widget(horizontal: bool) -> impl Widget> { + let playlist_image = if horizontal {rounded_cover_widget(theme::grid(16.0)).lens(Ctx::data())} else {rounded_cover_widget(theme::grid(6.0)).lens(Ctx::data())}; + + let mut playlist_info = if horizontal {Flex::column()} else {Flex::row()}; + let mut playlist = if horizontal {Flex::column()} else {Flex::row()}; let playlist_name = Label::raw() .with_font(theme::UI_FONT_MEDIUM) @@ -371,16 +374,27 @@ pub fn playlist_widget() -> impl Widget> { .with_text_size(theme::TEXT_SIZE_SMALL) .lens(Ctx::data().then(Playlist::description)); - let playlist_info = Flex::column() - .cross_axis_alignment(CrossAxisAlignment::Start) + let playlist_description = if horizontal { + playlist_description.fix_width(theme::grid(16.0)).padding_horizontal(theme::grid(1.0)).align_left() + } else { + playlist_description.align_left() + }; + + let playlist_name = if horizontal { + playlist_name.fix_width(theme::grid(16.0)).padding_horizontal(theme::grid(1.0)).align_left() + } else { + playlist_name.align_left() + }; + + playlist_info = playlist_info .with_child(playlist_name) .with_spacer(2.0) .with_child(playlist_description); - let playlist = Flex::row() + let playlist = playlist .with_child(playlist_image) .with_default_spacer() - .with_flex_child(playlist_info, 1.0) + .with_child(playlist_info) .padding(theme::grid(1.0)); playlist diff --git a/psst-gui/src/ui/search.rs b/psst-gui/src/ui/search.rs index 4627b3c9..052e5a75 100644 --- a/psst-gui/src/ui/search.rs +++ b/psst-gui/src/ui/search.rs @@ -141,7 +141,7 @@ fn playlist_results_widget() -> impl Widget> { Flex::column() .with_child(header_widget("Playlists")) .with_child( - List::new(playlist::playlist_widget).lens(Ctx::map(SearchResults::playlists)), + List::new(|| playlist::playlist_widget(false)).lens(Ctx::map(SearchResults::playlists)), ), ) } @@ -152,7 +152,7 @@ fn show_results_widget() -> impl Widget> { Empty, Flex::column() .with_child(header_widget("Podcasts")) - .with_child(List::new(show::show_widget)), + .with_child(List::new(|| show::show_widget(false))), ) .lens(Ctx::map(SearchResults::shows)) } diff --git a/psst-gui/src/ui/show.rs b/psst-gui/src/ui/show.rs index 20119454..702023bd 100644 --- a/psst-gui/src/ui/show.rs +++ b/psst-gui/src/ui/show.rs @@ -76,8 +76,11 @@ fn async_episodes_widget() -> impl Widget { ) } -pub fn horizontal_show_widget() -> impl Widget>> { - let show_image = rounded_cover_widget(theme::grid(16.0)); +pub fn show_widget(horizontal: bool) -> impl Widget>> { + let show_image = if horizontal {rounded_cover_widget(theme::grid(16.0))} else {rounded_cover_widget(theme::grid(6.0))}; + + let mut show_info = if horizontal {Flex::column()} else {Flex::row()}; + let mut show = if horizontal {Flex::column()} else {Flex::row()}; let show_name = Label::raw() .with_font(theme::UI_FONT_MEDIUM) @@ -85,58 +88,38 @@ pub fn horizontal_show_widget() -> impl Widget>> { .lens(Show::name.in_arc()); let show_publisher = Label::raw() + .with_line_break_mode(LineBreaking::WordWrap) .with_text_size(theme::TEXT_SIZE_SMALL) .with_text_color(theme::PLACEHOLDER_COLOR) .lens(Show::publisher.in_arc()); - let show_info = Flex::column() - .cross_axis_alignment(CrossAxisAlignment::Start) - .with_child(show_name) - .with_spacer(1.0) - .with_child(show_publisher); - - let show = Flex::column() - .with_child(show_image) - .with_default_spacer() - .with_child(show_info) - .lens(Ctx::data()); - - show.padding(theme::grid(1.0)) - .link() - .on_left_click(|ctx, _, show, _| { - ctx.submit_command(cmd::NAVIGATE.with(Nav::ShowDetail(show.data.link()))); - }) - .fix_width(theme::grid(20.0)) - .context_menu(show_ctx_menu) -} - -pub fn show_widget() -> impl Widget>> { - let show_image = rounded_cover_widget(theme::grid(6.0)); - - let show_name = Label::raw() - .with_font(theme::UI_FONT_MEDIUM) - .with_line_break_mode(LineBreaking::Clip) - .lens(Show::name.in_arc()); + let show_name = if horizontal { + show_name.fix_width(theme::grid(16.0)).padding_horizontal(theme::grid(1.0)).align_left() + } else { + show_name.align_left() + }; - let show_publisher = Label::raw() - .with_text_size(theme::TEXT_SIZE_SMALL) - .with_text_color(theme::PLACEHOLDER_COLOR) - .lens(Show::publisher.in_arc()); + let show_publisher = if horizontal { + show_publisher.fix_width(theme::grid(16.0)).padding_horizontal(theme::grid(1.0)).align_left() + } else { + show_publisher.align_left() + }; - let show_info = Flex::column() - .cross_axis_alignment(CrossAxisAlignment::Start) + show_info = show_info .with_child(show_name) - .with_spacer(1.0) + .with_spacer(2.0) .with_child(show_publisher); - let show = Flex::row() + let show = show .with_child(show_image) .with_default_spacer() - .with_flex_child(show_info, 1.0) + .with_child(show_info) + .padding(theme::grid(1.0)) .lens(Ctx::data()); - show.padding(theme::grid(1.0)) + show .link() + .rounded(theme::BUTTON_BORDER_RADIUS) .on_left_click(|ctx, _, show, _| { ctx.submit_command(cmd::NAVIGATE.with(Nav::ShowDetail(show.data.link()))); })