From 61f02c338de0f4dbb5d7f2eff3bf1d2e21758ff5 Mon Sep 17 00:00:00 2001 From: ardocrat Date: Sat, 22 Apr 2023 21:16:17 +0300 Subject: [PATCH] gui: fixed font, navigation (in progress) --- src/gui/app.rs | 263 ++++++++++++++++---------------- src/gui/mod.rs | 10 +- src/gui/nav.rs | 4 + src/gui/platform/android/mod.rs | 33 ++-- src/gui/screens/main.rs | 17 +++ src/gui/screens/mod.rs | 1 + src/gui/screens/wallets.rs | 10 +- 7 files changed, 180 insertions(+), 158 deletions(-) create mode 100644 src/gui/screens/main.rs diff --git a/src/gui/app.rs b/src/gui/app.rs index 1b4aee8..918f12a 100644 --- a/src/gui/app.rs +++ b/src/gui/app.rs @@ -17,14 +17,14 @@ use std::collections::BTreeSet; use eframe::emath::Align; use eframe::epaint::FontFamily; 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::panel::PanelState; use egui::style::Margin; use egui_extras::Size; use egui_extras::StripBuilder; 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}; pub struct PlatformApp { @@ -35,13 +35,13 @@ pub struct PlatformApp { pub struct Screens { screens: Vec>, navigation: BTreeSet, - menu_open: bool, + network_screen_open: bool, } impl Default for Screens { fn default() -> Self { 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 mut navigation = BTreeSet::new(); 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; for screen in screens { let id = screen.name(); @@ -81,155 +81,150 @@ impl Screens { } 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) { - let menu_open = self.menu_is_open(frame); - - 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 - }) + pub fn ui(&mut self, ctx: &Context, frame: &mut Frame, cb: &dyn PlatformCallbacks) { + egui::CentralPanel::default() .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, + .. Default::default() }) - .show_animated_inside(ui, menu_open, |ui| { - //TODO: Menu content - ui.vertical_centered(|ui| { - ui.heading("💻 Backend"); - }); + .show(ctx, |ui| { + let menu_open = self.menu_is_open(frame); - 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") - .resizable(false) - // .default_height(120.0) - .frame(egui::Frame { - fill: COLOR_YELLOW, - inner_margin: Margin::same(0.0), - outer_margin: Margin::same(0.0), - rounding: Default::default(), - ..Default::default() - }) - .show_inside(ui, |ui| { - StripBuilder::new(ui) - .size(Size::exact(58.0)) - .vertical(|mut strip| { - strip.strip(|builder| { - builder - .size(Size::exact(58.0)) - .size(Size::remainder()) - .size(Size::exact(58.0)) - .horizontal(|mut strip| { - strip.cell(|ui| { - ui.centered_and_justified(|ui| { - let b = egui::widgets::Button::new( - RichText::new(if !menu_open || is_landscape(frame) { - SYM_MENU - } else { - SYM_ARROW_FORWARD - }).size(24.0) - ).fill(Color32::TRANSPARENT) - .ui(ui) - .interact(Sense::click_and_drag()); - if b.drag_released() || b.clicked() { - self.menu_open = !menu_open - }; - }); - }); - if !menu_open || is_landscape(frame) { - strip.strip(|builder| { - builder - .size(Size::remainder()) - .vertical(|mut strip| { - strip.cell(|ui| { - ui.centered_and_justified(|ui| { - ui.label(RichText::new(self.current_screen_title() - .to_uppercase()) - .size(20.0) - .color(Color32::BLACK) - ); + egui::TopBottomPanel::top("title_panel") + .resizable(false) + // .default_height(120.0) + .frame(egui::Frame { + fill: COLOR_YELLOW, + inner_margin: Margin::same(0.0), + outer_margin: Margin::same(0.0), + rounding: Default::default(), + ..Default::default() + }) + .show_inside(ui, |ui| { + StripBuilder::new(ui) + .size(Size::exact(58.0)) + .vertical(|mut strip| { + strip.strip(|builder| { + builder + .size(Size::exact(58.0)) + .size(Size::remainder()) + .size(Size::exact(58.0)) + .horizontal(|mut strip| { + strip.cell(|ui| { + ui.centered_and_justified(|ui| { + let b = egui::widgets::Button::new( + RichText::new(if !menu_open { + SYM_NETWORK + } else { + if is_landscape(frame) { + SYM_MENU + } else { + SYM_WALLET + } + }).size(24.0) + ).fill(Color32::TRANSPARENT) + .ui(ui) + .interact(Sense::click_and_drag()); + if b.drag_released() || b.clicked() { + self.network_screen_open = !menu_open + }; + }); + }); + if !menu_open || is_landscape(frame) { + strip.strip(|builder| { + builder + .size(Size::remainder()) + .vertical(|mut strip| { + strip.cell(|ui| { + 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") - // .resizable(false) - // .min_width(frame.info().window_info.size.x) - // .frame(egui::Frame { - // inner_margin: Margin::same(3.0), - // outer_margin: Margin::same(0.0), - // rounding: Default::default(), - // shadow: Shadow::NONE, - // fill: Color32::KHAKI, - // stroke: Stroke::NONE, - // }) - // .show_inside(ui, |ui| { - // self.show_screens(ui, frame, cb); - // }); + // egui::SidePanel::right("screens_content") + // .resizable(false) + // .min_width(frame.info().window_info.size.x) + // .frame(egui::Frame { + // inner_margin: Margin::same(3.0), + // outer_margin: Margin::same(0.0), + // rounding: Default::default(), + // shadow: Shadow::NONE, + // fill: Color32::KHAKI, + // stroke: Stroke::NONE, + // }) + // .show_inside(ui, |ui| { + // 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) { - 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); + }); } }); } diff --git a/src/gui/mod.rs b/src/gui/mod.rs index 8e68022..f15ddd2 100644 --- a/src/gui/mod.rs +++ b/src/gui/mod.rs @@ -13,7 +13,9 @@ // limitations under the License. mod app; + pub use app::PlatformApp; +pub use app::Screens; pub use app::is_landscape; 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_FORWARD: &str = "⇨"; pub const SYM_ADD: &str = "＋"; -pub const SYM_MENU: &str = "∷";//≡ - -pub trait Ui { - -} +pub const SYM_MENU: &str = "∷"; +pub const SYM_WALLET: &str = "💼"; +pub const SYM_NETWORK: &str = "🖧"; pub trait PlatformCallbacks { fn show_keyboard(&mut self); diff --git a/src/gui/nav.rs b/src/gui/nav.rs index ff7562a..d446f87 100644 --- a/src/gui/nav.rs +++ b/src/gui/nav.rs @@ -12,6 +12,10 @@ // See the License for the specific language governing permissions and // limitations under the License. +use std::collections::BTreeSet; + + struct Navigation { + // navigation_stack: BTreeSet, } \ No newline at end of file diff --git a/src/gui/platform/android/mod.rs b/src/gui/platform/android/mod.rs index 8384441..20372e8 100644 --- a/src/gui/platform/android/mod.rs +++ b/src/gui/platform/android/mod.rs @@ -12,11 +12,9 @@ // See the License for the specific language governing permissions and // limitations under the License. -use egui::FontFamily; use winit::platform::android::activity::AndroidApp; -use crate::gui::{PlatformApp, PlatformCallbacks}; -use crate::gui::app::Screens; +use crate::gui::{PlatformApp, PlatformCallbacks, Screens}; #[derive(Clone)] pub struct Android { @@ -71,13 +69,27 @@ impl PlatformApp { use egui::FontFamily::Proportional; 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( "noto".to_owned(), egui::FontData::from_static(include_bytes!( "../../../../fonts/noto_light.ttf" )).tweak(egui::FontTweak { scale: 1.0, - y_offset_factor: -0.20, + y_offset_factor: -0.25, y_offset: 0.0 }), ); @@ -142,19 +154,8 @@ impl eframe::App for PlatformApp { self.platform.window_size[1] = _y; self.platform.cutouts = Self::get_display_cutouts(&self.platform.android_app); } - padding_panels(self, ctx); - - 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); - }); + self.screens.ui(ctx, frame, &self.platform); } } diff --git a/src/gui/screens/main.rs b/src/gui/screens/main.rs new file mode 100644 index 0000000..5b27006 --- /dev/null +++ b/src/gui/screens/main.rs @@ -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 { + +} + diff --git a/src/gui/screens/mod.rs b/src/gui/screens/mod.rs index 76f2153..62bd7b8 100644 --- a/src/gui/screens/mod.rs +++ b/src/gui/screens/mod.rs @@ -13,6 +13,7 @@ // limitations under the License. mod wallets; +mod main; pub use wallets::Wallets; use crate::gui::PlatformCallbacks; diff --git a/src/gui/screens/wallets.rs b/src/gui/screens/wallets.rs index 2ce87ab..c07b07f 100644 --- a/src/gui/screens/wallets.rs +++ b/src/gui/screens/wallets.rs @@ -14,7 +14,7 @@ use std::ops::Deref; use eframe::Frame; -use egui::{ScrollArea, Ui}; +use egui::{Color32, ScrollArea, Ui, Widget}; use crate::gui::app::Screens; 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) { + // ui.visuals_mut().widgets = Color32::TRANSPARENT; ScrollArea::vertical() - .auto_shrink([false; 2]) + .auto_shrink([false, true]) .show(ui, |ui| { - for item in 1..=55 { + for item in 1..=4 { ui.heading(format!("This is longest future Wallet #{}", item)); + egui::Button::new("TEXT").shortcut_text("Shortcut").ui(ui); + ui.button("OK"); + ui.button("Test"); } }); }