Skip to content

feat: added context menu on homepage clusters #743

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

Closed
rozwader wants to merge 1 commit into from
Closed

feat: added context menu on homepage clusters #743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
71 changes: 58 additions & 13 deletions packages/oneclient_app/src/components/context_menu.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,22 @@ enum Entry {
Separator,
}

fn separator(item_width: Option<f32>) -> Rect {
let mut sep = rect()
.height(Size::px(1.))
.margin(Gaps::new_symmetric(4., 0.))
.background(MENU_BORDER);
if let Some(w) = item_width {
sep = sep.width(Size::px(w));
}
sep
}

pub struct ContextMenu {
x: f32,
y: f32,
upwards: bool,
title: Option<String>,
entries: Vec<Entry>,
on_close: EventHandler<()>,
}
Expand All @@ -30,11 +43,23 @@ impl ContextMenu {
Self {
x,
y,
upwards: false,
title: None,
entries: Vec::new(),
on_close: (|()| {}).into(),
}
}

pub fn title(mut self, title: impl Into<String>) -> Self {
self.title = Some(title.into());
self
}

pub fn open_upwards(mut self) -> Self {
self.upwards = true;
self
}

pub fn on_close(mut self, on_close: impl Into<EventHandler<()>>) -> Self {
self.on_close = on_close.into();
self
Expand Down Expand Up @@ -78,7 +103,6 @@ impl ContextMenu {

impl PartialEq for ContextMenu {
fn eq(&self, _other: &Self) -> bool {
// Always unequal the menu is rebuilt from scratch whenever it is reopened
false
}
}
Expand All @@ -88,25 +112,34 @@ impl Component for ContextMenu {
let on_close = self.on_close.clone();

let mut width = use_state(|| 0f32);
let mut height = use_state(|| 0f32);

let item_width = {
let w = *width.read();
(w > 0.).then_some(w)
};

let mut list = rect().vertical().spacing(4.);

if let Some(title) = &self.title {
list = list
.child(
// Asymmetric on purpose
rect().padding(Gaps::new(6., 8., 4., 8.)).child(
label()
.text(title.clone())
.font_size(11.)
.font_weight(FontWeight::SEMI_BOLD)
.max_lines(1)
.color(colors::fg_secondary()),
),
)
.child(separator(item_width));
}

for entry in &self.entries {
list = match entry {
Entry::Separator => {
let mut sep = rect()
.height(Size::px(1.))
.margin(Gaps::new_symmetric(4., 0.))
.background(MENU_BORDER);
if let Some(w) = item_width {
sep = sep.width(Size::px(w));
}
list.child(sep)
}
Entry::Separator => list.child(separator(item_width)),
Entry::Action {
icon,
label,
Expand All @@ -133,6 +166,11 @@ impl Component for ContextMenu {
}
});

let measured = *height.read();
let flips = self.upwards && measured > 0. && self.y - measured >= 0.;
let top = if flips { self.y - measured } else { self.y };
let placed = !self.upwards || measured > 0.;

let panel = rect()
.vertical()
.padding(Gaps::new_all(6.))
Expand All @@ -144,11 +182,18 @@ impl Component for ContextMenu {
bottom: 1.,
left: 1.,
}))
.opacity(if placed { 1. } else { 0. })
.on_sized(move |e: Event<SizedEventData>| {
let measured = e.data().area.height();
if (measured - *height.peek()).abs() > 0.5 {
height.set(measured);
}
})
.child(list);

OverlayPopup::new()
.backdrop(false)
.position(Position::new_global().top(self.y).left(self.x))
.backdrop(true)
.position(Position::new_global().top(top).left(self.x))
.on_close(move |_| on_close.call(()))
.child(panel.into_element())
}
Expand Down
67 changes: 65 additions & 2 deletions packages/oneclient_app/src/components/recents_row.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ use freya::prelude::*;
use freya::router::RouterContext;
use oneclient_core::clusters::Cluster;

use crate::components::{ART_PREVIEW_EDGE, DynamicArt, Icon, IconType};
use crate::components::{ART_PREVIEW_EDGE, ContextMenu, DynamicArt, Icon, IconType};
use crate::hooks::{settled_or_loading, use_active_cluster_id, use_clusters};
use crate::routes::Route;
use crate::theme::colors;
Expand Down Expand Up @@ -93,6 +93,46 @@ fn stagger_eased(progress: f32, index: usize, items: usize) -> f32 {
1.0 - (1.0 - local).powi(3)
}

fn cluster_menu_entries(cluster_id: i64) -> [(IconType, &'static str, Route); 7] {
[
(
IconType::InfoCircle,
"Overview",
Route::ClusterOverview { cluster_id },
),
(
IconType::Terminal,
"Logs",
Route::ClusterLogs { cluster_id },
),
(
IconType::Eye,
"Screenshots",
Route::ClusterScreenshots { cluster_id },
),
(
IconType::CodeSnippet02,
"Mods",
Route::ClusterMods { cluster_id },
),
(
IconType::PaintPour,
"Shaders",
Route::ClusterShaders { cluster_id },
),
(
IconType::Colors,
"Textures",
Route::ClusterTextures { cluster_id },
),
(
IconType::Settings01,
"Settings",
Route::ClusterSettings { cluster_id },
),
]
}

struct ClusterCard {
cluster: Cluster,
index: usize,
Expand All @@ -114,6 +154,7 @@ impl Component for ClusterCard {
let mut active_id = use_active_cluster_id();
let active = *active_id.read() == Some(self.cluster.id);
let mut hovering = use_state(|| false);
let mut menu = use_state(|| None::<(f32, f32)>);

let a11y_id = use_a11y();
let focus = use_focus(a11y_id);
Expand All @@ -129,6 +170,19 @@ impl Component for ClusterCard {
*active_id.write() = Some(cluster_id);
};

let menu_overlay = (*menu.read()).map(|(x, y)| {
let mut context = ContextMenu::new(x, y)
.open_upwards()
.title(title.clone())
.on_close(move |_| menu.set(None));
for (icon, label, route) in cluster_menu_entries(cluster_id) {
context = context.action(icon, label, move |()| {
let _ = RouterContext::get().push(route.clone());
});
}
context.into_element()
});

rect()
.key(self.cluster.id)
.width(Size::flex(1.0))
Expand Down Expand Up @@ -172,7 +226,15 @@ impl Component for ClusterCard {
.y(0.)
.color(Color::from_af32rgb(0.3, 0, 0, 0)),
)
.on_all_press(on_press)
.on_press(on_press)
.on_secondary_down(move |e: Event<PressEventData>| {
if let PressEventData::Mouse(m) = e.data() {
menu.set(Some((
m.global_location.x as f32,
m.global_location.y as f32,
)));
}
})
.child(
rect()
.width(Size::fill())
Expand Down Expand Up @@ -222,6 +284,7 @@ impl Component for ClusterCard {
),
),
)
.maybe_child(menu_overlay)
}
}

Expand Down