GUI/grim
1
1
Fork 0
Code Issues 6 Pull requests Projects Releases 8 Packages Wiki Activity Actions

gui: fixed font, navigation (in progress)

Browse source
This commit is contained in:
ardocrat 2023-04-22 21:16:17 +03:00
parent 8ef5128ee8
commit 61f02c338d
7 changed files with 180 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

263
src/gui/app.rs
View file

@ -17,14 +17,14 @@ use std::collections::BTreeSet;
use eframe::emath::Align; use eframe::emath::Align;
use eframe::epaint::FontFamily; use eframe::epaint::FontFamily;
use eframe::Frame; use eframe::Frame;
use egui::{Color32, Context, Direction, Id, Layout, RichText, Rounding, Sense, Separator, Stroke, TextStyle, Ui, Widget}; use egui::{Color32, Context, Direction, Id, Layout, RichText, Rounding, Sense, Separator, Stroke, Widget};
use egui::epaint::Shadow; use egui::epaint::Shadow;
use egui::panel::PanelState; use egui::panel::PanelState;
use egui::style::Margin; use egui::style::Margin;
use egui_extras::Size; use egui_extras::Size;
use egui_extras::StripBuilder; use egui_extras::StripBuilder;
use wgpu::Color; use wgpu::Color;
use crate::gui::{COLOR_YELLOW, PlatformCallbacks, SYM_ADD, SYM_ARROW_BACK, SYM_ARROW_FORWARD, SYM_MENU}; use crate::gui::*;
use crate::gui::screens::{Screen}; use crate::gui::screens::{Screen};
pub struct PlatformApp<Platform> { pub struct PlatformApp<Platform> {
@ -35,13 +35,13 @@ pub struct PlatformApp<Platform> {
pub struct Screens { pub struct Screens {
screens: Vec<Box<dyn Screen>>, screens: Vec<Box<dyn Screen>>,
navigation: BTreeSet<String>, navigation: BTreeSet<String>,
menu_open: bool, network_screen_open: bool,
} }
impl Default for Screens { impl Default for Screens {
fn default() -> Self { fn default() -> Self {
Self::from_screens(vec![ Self::from_screens(vec![
Box::new(super::screens::Wallets::default()) Box::new(screens::Wallets::default())
]) ])
} }
} }
@ -51,10 +51,10 @@ impl Screens {
let current = screens[0].name().to_owned(); let current = screens[0].name().to_owned();
let mut navigation = BTreeSet::new(); let mut navigation = BTreeSet::new();
navigation.insert(current); navigation.insert(current);
Self { screens, navigation, menu_open: false } Self { screens, navigation, network_screen_open: false }
} }
fn show_screens(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) { fn show_screens(&mut self, ui: &mut egui::Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) {
let Self { screens, navigation, .. } = self; let Self { screens, navigation, .. } = self;
for screen in screens { for screen in screens {
let id = screen.name(); let id = screen.name();
@ -81,155 +81,150 @@ impl Screens {
} }
fn menu_is_open(&mut self, frame: &mut Frame) -> bool { fn menu_is_open(&mut self, frame: &mut Frame) -> bool {
return self.menu_open; return self.network_screen_open;
} }
pub fn ui(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) { pub fn ui(&mut self, ctx: &Context, frame: &mut Frame, cb: &dyn PlatformCallbacks) {
let menu_open = self.menu_is_open(frame); egui::CentralPanel::default()
let bg_stroke_default = ui.style().visuals.widgets.noninteractive.bg_stroke;
ui.style_mut().visuals.widgets.noninteractive.bg_stroke = Stroke::NONE;
ui.style_mut().visuals.widgets.active.bg_stroke = Stroke::NONE;
egui::SidePanel::left("menu_panel")
.resizable(false)
.exact_width(if !is_landscape(frame) {
frame.info().window_info.size.x - 58.0
} else {
frame.info().window_info.size.y - 58.0
})
.frame(egui::Frame { .frame(egui::Frame {
inner_margin: Margin::same(0.0), inner_margin: Margin::same(0.0),
outer_margin: Margin::same(0.0), outer_margin: Margin::same(0.0),
rounding: Default::default(),
shadow: Shadow::NONE,
fill: COLOR_YELLOW, fill: COLOR_YELLOW,
stroke: Stroke::NONE, .. Default::default()
}) })
.show_animated_inside(ui, menu_open, |ui| { .show(ctx, |ui| {
//TODO: Menu content let menu_open = self.menu_is_open(frame);
ui.vertical_centered(|ui| {
ui.heading("💻 Backend");
});
ui.separator(); let bg_stroke_default = ui.style().visuals.widgets.noninteractive.bg_stroke;
}); ui.style_mut().visuals.widgets.noninteractive.bg_stroke = Stroke::NONE;
ui.style_mut().visuals.widgets.active.bg_stroke = Stroke::NONE;
egui::SidePanel::left("menu_panel")
.resizable(false)
.exact_width(if !is_landscape(frame) {
frame.info().window_info.size.x - 58.0
} else {
frame.info().window_info.size.y - 58.0
})
.frame(egui::Frame {
inner_margin: Margin::same(0.0),
outer_margin: Margin::same(0.0),
rounding: Default::default(),
shadow: Shadow::NONE,
fill: COLOR_YELLOW,
stroke: Stroke::NONE,
})
.show_animated_inside(ui, menu_open, |ui| {
//TODO: Menu content
ui.vertical_centered(|ui| {
ui.heading("🖧 Node");
});
ui.separator();
});
egui::TopBottomPanel::top("title_panel") egui::TopBottomPanel::top("title_panel")
.resizable(false) .resizable(false)
// .default_height(120.0) // .default_height(120.0)
.frame(egui::Frame { .frame(egui::Frame {
fill: COLOR_YELLOW, fill: COLOR_YELLOW,
inner_margin: Margin::same(0.0), inner_margin: Margin::same(0.0),
outer_margin: Margin::same(0.0), outer_margin: Margin::same(0.0),
rounding: Default::default(), rounding: Default::default(),
..Default::default() ..Default::default()
}) })
.show_inside(ui, |ui| { .show_inside(ui, |ui| {
StripBuilder::new(ui) StripBuilder::new(ui)
.size(Size::exact(58.0)) .size(Size::exact(58.0))
.vertical(|mut strip| { .vertical(|mut strip| {
strip.strip(|builder| { strip.strip(|builder| {
builder builder
.size(Size::exact(58.0)) .size(Size::exact(58.0))
.size(Size::remainder()) .size(Size::remainder())
.size(Size::exact(58.0)) .size(Size::exact(58.0))
.horizontal(|mut strip| { .horizontal(|mut strip| {
strip.cell(|ui| { strip.cell(|ui| {
ui.centered_and_justified(|ui| { ui.centered_and_justified(|ui| {
let b = egui::widgets::Button::new( let b = egui::widgets::Button::new(
RichText::new(if !menu_open || is_landscape(frame) { RichText::new(if !menu_open {
SYM_MENU SYM_NETWORK
} else { } else {
SYM_ARROW_FORWARD if is_landscape(frame) {
}).size(24.0) SYM_MENU
).fill(Color32::TRANSPARENT) } else {
.ui(ui) SYM_WALLET
.interact(Sense::click_and_drag()); }
if b.drag_released() || b.clicked() { }).size(24.0)
self.menu_open = !menu_open ).fill(Color32::TRANSPARENT)
}; .ui(ui)
}); .interact(Sense::click_and_drag());
}); if b.drag_released() || b.clicked() {
if !menu_open || is_landscape(frame) { self.network_screen_open = !menu_open
strip.strip(|builder| { };
builder });
.size(Size::remainder()) });
.vertical(|mut strip| { if !menu_open || is_landscape(frame) {
strip.cell(|ui| { strip.strip(|builder| {
ui.centered_and_justified(|ui| { builder
ui.label(RichText::new(self.current_screen_title() .size(Size::remainder())
.to_uppercase()) .vertical(|mut strip| {
.size(20.0) strip.cell(|ui| {
.color(Color32::BLACK) ui.centered_and_justified(|ui| {
); ui.label(RichText::new(self.current_screen_title()
.to_uppercase())
.size(20.0)
.color(Color32::BLACK)
);
});
});
}); });
});
strip.cell(|ui| {
ui.centered_and_justified(|ui| {
let b = egui::widgets::Button::new(
RichText::new(SYM_ADD).size(24.0)
).fill(Color32::TRANSPARENT).ui(ui).interact(Sense::click_and_drag());
if b.drag_released() || b.clicked() {
//TODO: Add wallet
//self.menu_open = !menu_open
};
}); });
}); });
}
}); });
strip.cell(|ui| {
ui.centered_and_justified(|ui| {
let b = egui::widgets::Button::new(
RichText::new(SYM_ADD).size(24.0)
).fill(Color32::TRANSPARENT).ui(ui).interact(Sense::click_and_drag());
if b.drag_released() || b.clicked() {
//TODO: Add wallet
//self.menu_open = !menu_open
};
});
});
}
}); });
}); });
}); });
});
// ui.style_mut().visuals.widgets.noninteractive.bg_stroke = bg_stroke_default; // ctx.style_mut().visuals.widgets.noninteractive.bg_stroke = bg_stroke_default;
// egui::SidePanel::right("screens_content") // egui::SidePanel::right("screens_content")
// .resizable(false) // .resizable(false)
// .min_width(frame.info().window_info.size.x) // .min_width(frame.info().window_info.size.x)
// .frame(egui::Frame { // .frame(egui::Frame {
// inner_margin: Margin::same(3.0), // inner_margin: Margin::same(3.0),
// outer_margin: Margin::same(0.0), // outer_margin: Margin::same(0.0),
// rounding: Default::default(), // rounding: Default::default(),
// shadow: Shadow::NONE, // shadow: Shadow::NONE,
// fill: Color32::KHAKI, // fill: Color32::KHAKI,
// stroke: Stroke::NONE, // stroke: Stroke::NONE,
// }) // })
// .show_inside(ui, |ui| { // .show_inside(ui, |ui| {
// self.show_screens(ui, frame, cb); // self.show_screens(ui, frame, cb);
// }); // });
egui::CentralPanel::default().frame(egui::containers::Frame {
outer_margin: Margin {
left: 0.0,
right: 0.0,
// top: 120.0,
top: 0.0,
bottom: 0.0,
},
rounding: if menu_open {
Rounding {
nw: 5.0,
ne: 0.0,
sw: 0.0,
se: 0.0,
}
} else {
Rounding::none()
},
inner_margin: Margin::same(3.0),
fill: ui.ctx().style().visuals.panel_fill,
stroke: bg_stroke_default,
..Default::default()
})
.show_inside(ui, |ui| {
if !menu_open || is_landscape(frame) { if !menu_open || is_landscape(frame) {
self.show_screens(ui, frame, cb); egui::CentralPanel::default().frame(egui::containers::Frame {
inner_margin: Margin::same(3.0),
fill: Color32::from_gray(30),
stroke: Stroke::new(1.0, Color32::from_gray(5)),
..Default::default()
})
.show_inside(ui, |ui| {
self.show_screens(ui, frame, cb);
});
} }
}); });
} }

10
src/gui/mod.rs
View file

@ -13,7 +13,9 @@
// limitations under the License. // limitations under the License.
mod app; mod app;
pub use app::PlatformApp; pub use app::PlatformApp;
pub use app::Screens;
pub use app::is_landscape; pub use app::is_landscape;
pub mod platform; pub mod platform;
@ -25,11 +27,9 @@ pub const COLOR_YELLOW: egui::Color32 = egui::Color32::from_rgb(254, 241, 2);
pub const SYM_ARROW_BACK: &str = "⇦"; pub const SYM_ARROW_BACK: &str = "⇦";
pub const SYM_ARROW_FORWARD: &str = "⇨"; pub const SYM_ARROW_FORWARD: &str = "⇨";
pub const SYM_ADD: &str = "＋"; pub const SYM_ADD: &str = "＋";
pub const SYM_MENU: &str = "∷";//≡ pub const SYM_MENU: &str = "∷";
pub const SYM_WALLET: &str = "💼";
pub trait Ui { pub const SYM_NETWORK: &str = "🖧";
}
pub trait PlatformCallbacks { pub trait PlatformCallbacks {
fn show_keyboard(&mut self); fn show_keyboard(&mut self);

4
src/gui/nav.rs
View file

@ -12,6 +12,10 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
use std::collections::BTreeSet;
struct Navigation { struct Navigation {
// navigation_stack: BTreeSet<ScreenMode>,
} }

33
src/gui/platform/android/mod.rs
View file

@ -12,11 +12,9 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
use egui::FontFamily;
use winit::platform::android::activity::AndroidApp; use winit::platform::android::activity::AndroidApp;
use crate::gui::{PlatformApp, PlatformCallbacks}; use crate::gui::{PlatformApp, PlatformCallbacks, Screens};
use crate::gui::app::Screens;
#[derive(Clone)] #[derive(Clone)]
pub struct Android { pub struct Android {
@ -71,13 +69,27 @@ impl PlatformApp<Android> {
use egui::FontFamily::Proportional; use egui::FontFamily::Proportional;
let mut fonts = egui::FontDefinitions::default(); let mut fonts = egui::FontDefinitions::default();
// Tweak emoji icons to look nice against main font y-offset
fonts.font_data.insert(
"emoji-icon-font".to_owned(),
egui::FontData {
font: fonts.font_data.get("emoji-icon-font").unwrap().clone().font,
index: 0,
tweak: egui::FontTweak {
scale: 0.88,
y_offset_factor: 0.26,
y_offset: 0.0,
},
});
fonts.font_data.insert( fonts.font_data.insert(
"noto".to_owned(), "noto".to_owned(),
egui::FontData::from_static(include_bytes!( egui::FontData::from_static(include_bytes!(
"../../../../fonts/noto_light.ttf" "../../../../fonts/noto_light.ttf"
)).tweak(egui::FontTweak { )).tweak(egui::FontTweak {
scale: 1.0, scale: 1.0,
y_offset_factor: -0.20, y_offset_factor: -0.25,
y_offset: 0.0 y_offset: 0.0
}), }),
); );
@ -142,19 +154,8 @@ impl eframe::App for PlatformApp<Android> {
self.platform.window_size[1] = _y; self.platform.window_size[1] = _y;
self.platform.cutouts = Self::get_display_cutouts(&self.platform.android_app); self.platform.cutouts = Self::get_display_cutouts(&self.platform.android_app);
} }
padding_panels(self, ctx); padding_panels(self, ctx);
self.screens.ui(ctx, frame, &self.platform);
egui::CentralPanel::default()
.frame(egui::Frame {
inner_margin: egui::style::Margin::same(0.0),
outer_margin: egui::style::Margin::same(0.0),
fill: ctx.style().visuals.panel_fill,
.. Default::default()
})
.show(ctx, |ui| {
self.screens.ui(ui, frame, &self.platform);
});
} }
} }

17
src/gui/screens/main.rs Normal file
View file

@ -0,0 +1,17 @@
// Copyright 2023 The Grim Developers
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
pub struct Main {
}

1
src/gui/screens/mod.rs
View file

@ -13,6 +13,7 @@
// limitations under the License. // limitations under the License.
mod wallets; mod wallets;
mod main;
pub use wallets::Wallets; pub use wallets::Wallets;
use crate::gui::PlatformCallbacks; use crate::gui::PlatformCallbacks;

10
src/gui/screens/wallets.rs
View file

@ -14,7 +14,7 @@
use std::ops::Deref; use std::ops::Deref;
use eframe::Frame; use eframe::Frame;
use egui::{ScrollArea, Ui}; use egui::{Color32, ScrollArea, Ui, Widget};
use crate::gui::app::Screens; use crate::gui::app::Screens;
use crate::gui::{PlatformCallbacks}; use crate::gui::{PlatformCallbacks};
@ -36,11 +36,15 @@ impl super::Screen for Wallets {
} }
fn show(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) { fn show(&mut self, ui: &mut Ui, frame: &mut Frame, cb: &dyn PlatformCallbacks) {
// ui.visuals_mut().widgets = Color32::TRANSPARENT;
ScrollArea::vertical() ScrollArea::vertical()
.auto_shrink([false; 2]) .auto_shrink([false, true])
.show(ui, |ui| { .show(ui, |ui| {
for item in 1..=55 { for item in 1..=4 {
ui.heading(format!("This is longest future Wallet #{}", item)); ui.heading(format!("This is longest future Wallet #{}", item));
egui::Button::new("TEXT").shortcut_text("Shortcut").ui(ui);
ui.button("OK");
ui.button("Test");
} }
}); });
} }