nostr/gossip
1
0
Fork 0
mirror of https://github.com/mikedilger/gossip.git synced 2024-09-29 08:21:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

New Widgets: Make sure "danger hover" is also shown when button is focused (i.e. by keyboard).

Browse Source 
ThemeTest Page:  Add new button states and button to quickly switch between dark and light modes
This commit is contained in:
Bu5hm4nn 2024-04-25 10:15:04 -06:00
parent 5a089d5f9d
commit b6e535424f
2 changed files with 128 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
gossip-bin/src/ui/theme/test_page.rs
View File

@ -39,7 +39,27 @@ pub(in crate::ui) fn update(
_frame: &mut eframe::Frame,
ui: &mut Ui,
) {
widgets::page_header(ui, "Theme Test", |_ui| {});
widgets::page_header(ui, "Theme Test", |ui| {
if app.unsaved_settings.dark_mode {
if widgets::Button::bordered(&app.theme, "🌙 Dark")
.show(ui)
.on_hover_text("Switch to light mode")
.clicked()
{
app.unsaved_settings.dark_mode = false;
let _ = app.unsaved_settings.save();
}
} else {
if widgets::Button::bordered(&app.theme, "☀ Light")
.show(ui)
.on_hover_text("Switch to dark mode")
.clicked()
{
app.unsaved_settings.dark_mode = true;
let _ = app.unsaved_settings.save();
}
}
});
app.vert_scroll_area()
.id_source(ui.auto_id_with("theme_test"))
@ -260,6 +280,22 @@ fn button_test(app: &mut GossipUi, ui: &mut Ui) {
.with_danger_hover()
.draw_hovered(ui);
});
ui.add_space(20.0);
ui.horizontal(|ui| {
ui.add_sized(CSIZE, egui::Label::new("Danger Focused"));
ui.add_space(20.0);
widgets::Button::primary(theme, TEXT)
.with_danger_hover()
.draw_focused(ui);
ui.add_space(20.0);
widgets::Button::secondary(theme, TEXT)
.with_danger_hover()
.draw_focused(ui);
ui.add_space(20.0);
widgets::Button::bordered(theme, TEXT)
.with_danger_hover()
.draw_focused(ui);
});
ui.add_space(30.0);
ui.horizontal(|ui| {
ui.vertical(|ui| {
@ -287,6 +323,33 @@ fn button_test(app: &mut GossipUi, ui: &mut Ui) {
}
});
});
ui.add_space(30.0);
ui.horizontal(|ui| {
ui.vertical(|ui| {
ui.add_sized(CSIZE, egui::Label::new("small ->"));
});
ui.add_space(20.0);
ui.vertical(|ui| {
let response = widgets::Button::primary(theme, TEXT).small(true).ui(ui);
if ui.link("focus").clicked() {
response.request_focus();
}
});
ui.add_space(20.0);
ui.vertical(|ui| {
let response = widgets::Button::secondary(theme, TEXT).small(true).ui(ui);
if ui.link("focus").clicked() {
response.request_focus();
}
});
ui.add_space(20.0);
ui.vertical(|ui| {
let response = widgets::Button::bordered(theme, TEXT).small(true).ui(ui);
if ui.link("focus").clicked() {
response.request_focus();
}
});
});
});
}

105
gossip-bin/src/ui/widgets/button.rs
View File

@ -271,6 +271,7 @@ impl Button<'_> {
) {
if ui.is_rect_visible(rect) {
let no_stroke = Stroke::NONE;
let neutral_50_stroke = Stroke::new(1.0, theme.neutral_50());
let neutral_300_stroke = Stroke::new(1.0, theme.neutral_300());
let neutral_400_stroke = Stroke::new(1.0, theme.neutral_400());
let neutral_500_stroke = Stroke::new(1.0, theme.neutral_500());
@ -360,26 +361,37 @@ impl Button<'_> {
theme.neutral_500(),
no_stroke,
),
WidgetState::Focused => match button_type {
ButtonType::Primary => (
theme.accent_dark_b20(),
no_stroke,
theme.neutral_50(),
neutral_300_stroke,
),
ButtonType::Secondary => (
theme.neutral_50(),
no_stroke,
theme.accent_dark(),
neutral_400_stroke,
),
ButtonType::Bordered => (
theme.neutral_950(),
neutral_300_stroke,
theme.neutral_200(),
neutral_500_stroke,
),
},
WidgetState::Focused => {
if with_danger_hover {
(
danger_color,
danger_stroke,
theme.neutral_50(),
neutral_50_stroke,
)
} else {
match button_type {
ButtonType::Primary => (
theme.accent_dark_b20(),
no_stroke,
theme.neutral_50(),
neutral_300_stroke,
),
ButtonType::Secondary => (
theme.neutral_50(),
no_stroke,
theme.accent_dark(),
neutral_400_stroke,
),
ButtonType::Bordered => (
theme.neutral_950(),
neutral_300_stroke,
theme.neutral_200(),
neutral_500_stroke,
),
}
}
}
}
} else {
match state {
@ -461,30 +473,41 @@ impl Button<'_> {
theme.neutral_400(),
no_stroke,
),
WidgetState::Focused => match button_type {
ButtonType::Primary => (
theme.accent_light_b20(),
no_stroke,
theme.neutral_50(),
neutral_300_stroke,
),
ButtonType::Secondary => (
theme.neutral_900(),
no_stroke,
theme.neutral_100(),
neutral_400_stroke,
),
ButtonType::Bordered => (
theme.neutral_50(),
neutral_600_stroke,
theme.neutral_800(),
neutral_400_stroke,
),
},
WidgetState::Focused => {
if with_danger_hover {
(
danger_color,
danger_stroke,
theme.neutral_50(),
neutral_50_stroke,
)
} else {
match button_type {
ButtonType::Primary => (
theme.accent_light_b20(),
no_stroke,
theme.neutral_50(),
neutral_300_stroke,
),
ButtonType::Secondary => (
theme.neutral_900(),
no_stroke,
theme.neutral_100(),
neutral_400_stroke,
),
ButtonType::Bordered => (
theme.neutral_50(),
neutral_600_stroke,
theme.neutral_800(),
neutral_400_stroke,
),
}
}
}
}
};
let expand = Vec2::splat(ui.visuals().widgets.inactive.expansion);
let expand = Vec2::splat(ui.visuals().widgets.inactive.expansion); // to match egui widgets
let shrink = Vec2::splat(frame_stroke.width / 2.0);
ui.painter().rect(
rect.expand2(expand).shrink2(shrink),