Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add buttons and functionality #511

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+112 −31
Open

Add buttons and functionality #511

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f701027
Add buttons and functionality
Aug 9, 2024
bcbf466
Merge branch 'jpochyla:master' into Visualize-keyboard-shortcuts
SO9010 Aug 28, 2024
3a2556f
Merge branch 'jpochyla:master' into Visualize-keyboard-shortcuts
SO9010 Sep 3, 2024
22876d0
Update numerous symbols to Sfsymbols
Sep 10, 2024
0fa17ce
note
Sep 10, 2024
be98682
Merge branch 'jpochyla:master' into Visualize-keyboard-shortcuts
SO9010 Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions psst-gui/src/ui/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,8 @@ fn root_widget() -> impl Widget<AppState> {
.with_child(topbar_back_button_widget())
.with_child(topbar_title_widget())
.with_child(topbar_sort_widget())
.with_flex_spacer(6.0)
.with_child(topbar_shortcut_buttons_widget())
.background(Border::Bottom.with_color(theme::BACKGROUND_DARK));

let main = Flex::column()
Expand Down Expand Up @@ -413,6 +415,65 @@ fn topbar_back_button_widget() -> impl Widget<AppState> {
.lens(AppState::history)
}

fn topbar_shortcut_buttons_widget() -> impl Widget<AppState> {
let reload_icon = icons::RELOAD.scale(theme::ICON_SIZE_LARGE)
.padding(theme::grid(1.0))
.link()
.rounded(theme::BUTTON_BORDER_RADIUS)
.on_left_click(|ctx, _, data: &mut AppState, _| {
match &data.nav {
Nav::SavedTracks => {
ctx.submit_command(library::LOAD_TRACKS);
}
Nav::SavedShows => {
ctx.submit_command(library::LOAD_SHOWS);
}
Nav::SavedAlbums => {
ctx.submit_command(library::LOAD_ALBUMS);
}
Nav::Home => {
ctx.submit_command(home::LOAD_MADE_FOR_YOU);
}
Nav::PlaylistDetail(_) => {
ctx.submit_command(cmd::NAVIGATE_REFRESH);
}
_ => {}
}
});

let search_icon = icons::SEARCH.scale(theme::ICON_SIZE_LARGE)
.padding(theme::grid(1.0))
.link()
.rounded(theme::BUTTON_BORDER_RADIUS)
.on_left_click(|ctx, _, _, _| {
ctx.submit_command(cmd::TOGGLE_FINDER);
});
let srch_icon = Either::new(
|nav: &AppState, _| {
// check if the current nav is PlaylistDetail
!matches!(nav.nav, Nav::SavedTracks)
&& !matches!(nav.nav, Nav::SavedShows)
&& !matches!(nav.nav, Nav::Home)
&& !matches!(nav.nav, Nav::SavedAlbums)
},
search_icon,
Empty.boxed(),
);

let icons = Flex::row()
.with_child(reload_icon)
.with_child(srch_icon);

Either::new(
|nav: &AppState, _| {
!matches!(nav.nav, Nav::SearchResults(_))
&& !matches!(nav.nav, Nav::Recommendations(_))
},
icons,
Empty.boxed(),
)
}

fn history_menu(history: &Vector<Nav>) -> Menu<AppState> {
let mut menu = Menu::empty();

Expand Down
7 changes: 7 additions & 0 deletions psst-gui/src/widget/icons.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,13 @@ pub static PLAY_LOOP_ALL: SvgIcon = SvgIcon {
op: PaintOp::Fill,
};

// Font awesome - reload
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should get all icons from SF Pro Regular https://developer.apple.com/sf-symbols/

Copy link
Contributor Author

@SO9010 SO9010 Aug 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want, I can go through and replace all of the icons with those ones?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want, I can go through and replace all of the icons with those ones?

Hold on, I am unable to access any of those symbols as I don't have an Apple machine!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/brendanballon/sfsymbols-svg/tree/master/symbols

I think the SVG's can be found at other places too!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I will rewrite the way that the program processes the SVG files so then we are able to place all of the files into a directory rather than having to extract the curve. It would save a lot of time in the end!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think part of the reason was that the SVG paths alone took up less size and might be quicker to load?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, do you know if there's an efficient way to move the "view" of the path as for example with the gear icon it doesn't start at the top left meaning that it's strongly displaced.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jacksongoode how does this look?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These icons still look quite big from a UI consistency pov. I also think they need a little padding so they don't hit the right side too hard.

pub static RELOAD: SvgIcon = SvgIcon {
svg_path: "M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z",
svg_size: Size::new(28.0, 28.0),
op: PaintOp::Fill,
};

// SF Pro Regular - exclamationmark.circle
pub static ERROR: SvgIcon = SvgIcon {
svg_path: "M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM13.9824 15.1133C14.4658 15.1133 14.7471 14.8408 14.7559 14.3311L14.8877 10.1035C14.9053 9.58496 14.5186 9.20703 13.9736 9.20703C13.4287 9.20703 13.0508 9.57617 13.0684 10.0947L13.1914 14.3311C13.209 14.832 13.4902 15.1133 13.9824 15.1133ZM13.9824 18.0312C14.5537 18.0312 15.0195 17.6182 15.0195 17.0557C15.0195 16.502 14.5625 16.0889 13.9824 16.0889C13.4111 16.0889 12.9453 16.502 12.9453 17.0557C12.9453 17.6094 13.4199 18.0312 13.9824 18.0312Z",
Expand Down
Loading