github-jwinterm/grim
1
0
Fork 0
mirror of https://github.com/jwinterm/grim.git synced 2026-10-19 14:58:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui + wallet: wallet list refactoring, wallet opening, round button fixes, update translations

Browse Source
This commit is contained in:
ardocrat
2023-07-29 00:17:54 +03:00
parent 2e12b17663
commit 3f0d8facac
12 changed files with 486 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/views/network/setup/p2p.rs
+1 -1
View File
@@ -353,7 +353,7 @@ impl P2PSetup {
format!("{} {}", PLUS_CIRCLE, t!("network_settings.add_peer"))
};
View::button(ui, add_text, Colors::GOLD, || {
View::button(ui, add_text, Colors::BUTTON, || {
// Setup values for modal.
self.peer_edit = "".to_string();
// Select modal id.
src/gui/views/views.rs
+6 -8
View File
@@ -159,23 +159,21 @@ impl View {
action: impl FnOnce()) {
ui.scope(|ui| {
// Setup colors.
ui.visuals_mut().widgets.inactive.bg_fill = Colors::GOLD;
ui.visuals_mut().widgets.inactive.bg_fill = Colors::BUTTON;
ui.visuals_mut().widgets.hovered.bg_fill = Colors::GOLD;
ui.visuals_mut().widgets.active.bg_fill = Colors::YELLOW;
// Setup radius.
let mut r = 42.0 * 0.5;
let mut r = 44.0 * 0.5;
let size = egui::Vec2::splat(2.0 * r + 5.0);
let (rect, br) = ui.allocate_at_least(size, Sense::click_and_drag());
let mut icon_size = 24.0;
let mut icon_color = Colors::TEXT_BUTTON;
let mut icon_color = Colors::GRAY;
// Increase radius and change icon size and color on-hover.
if br.hovered() {
r = r * 1.05;
icon_size = icon_size * 1.07;
icon_color = Colors::BLACK;
r = r * 1.07;
icon_color = Colors::TEXT_BUTTON;
}
let visuals = ui.style().interact(&br);
@@ -187,7 +185,7 @@ impl View {
});
ui.allocate_ui_at_rect(rect, |ui| {
ui.centered_and_justified(|ui| {
ui.label(RichText::new(icon).color(icon_color).size(icon_size));
ui.label(RichText::new(icon).color(icon_color).size(25.0));
});
});
if Self::touched(ui, br) {
src/gui/views/wallets/creation/creation.rs
+4 -17
View File
@@ -17,13 +17,13 @@ use egui_extras::{RetainedImage, Size, StripBuilder};
use crate::built_info;
use crate::gui::Colors;
use crate::gui::icons::{CHECK, EYE, EYE_SLASH, PLUS_CIRCLE, SHARE_FAT};
use crate::gui::icons::{CHECK, EYE, EYE_SLASH, FOLDER_PLUS, SHARE_FAT};
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::{Modal, ModalPosition, View};
use crate::gui::views::wallets::creation::MnemonicSetup;
use crate::gui::views::wallets::creation::types::{PhraseMode, Step};
use crate::gui::views::wallets::setup::ConnectionSetup;
use crate::wallet::WalletList;
use crate::wallet::Wallets;
/// Wallet creation content.
pub struct WalletCreation {
@@ -196,7 +196,7 @@ impl WalletCreation {
.color(Colors::GRAY)
);
ui.add_space(8.0);
let add_text = format!("{} {}", PLUS_CIRCLE, t!("wallets.add"));
let add_text = format!("{} {}", FOLDER_PLUS, t!("wallets.add"));
View::button(ui, add_text, Colors::BUTTON, || {
self.show_name_pass_modal();
});
@@ -258,7 +258,7 @@ impl WalletCreation {
Step::ConfirmMnemonic => Some(Step::SetupConnection),
Step::SetupConnection => {
// Create wallet at last step.
WalletList::create_wallet(
Wallets::create_wallet(
self.name_edit.clone(),
self.pass_edit.clone(),
self.mnemonic_setup.mnemonic.get_phrase(),
@@ -357,19 +357,6 @@ impl WalletCreation {
});
})
});
// Show information when specified values are empty.
if self.name_edit.is_empty() {
ui.add_space(12.0);
ui.label(RichText::new(t!("wallets.name_empty"))
.size(17.0)
.color(Colors::INACTIVE_TEXT));
} else if self.pass_edit.is_empty() {
ui.add_space(12.0);
ui.label(RichText::new(t!("wallets.pass_empty"))
.size(17.0)
.color(Colors::INACTIVE_TEXT));
}
ui.add_space(12.0);
});
src/gui/views/wallets/wallet.rs
+13 -9
View File
@@ -13,26 +13,29 @@
// limitations under the License.
use egui::Margin;
use crate::gui::Colors;
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::View;
use crate::wallet::Wallet;
/// Selected wallet list item content.
pub struct WalletContent {
/// Current wallet instance.
wallet: Wallet
}
impl WalletContent {
fn new(wallet: Wallet) -> Self {
Self { wallet }
impl Default for WalletContent {
fn default() -> Self {
Self {}
}
}
impl WalletContent {
pub fn ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame, cb: &dyn PlatformCallbacks) {
pub fn ui(&mut self,
ui: &mut egui::Ui,
frame: &mut eframe::Frame,
wallet: &Wallet,
cb: &dyn PlatformCallbacks) {
// Show wallet content.
egui::CentralPanel::default()
.frame(egui::Frame {
@@ -40,13 +43,14 @@ impl WalletContent {
fill: Colors::WHITE,
inner_margin: Margin {
left: View::far_left_inset_margin(ui) + 4.0,
right: View::far_right_inset_margin(ui, frame) + 4.0,
top: 3.0,
right: View::get_right_inset() + 4.0,
top: 4.0,
bottom: 4.0,
},
..Default::default()
})
.show_inside(ui, |ui| {
ui.label(&wallet.config.name);
//TODO: wallet content
});
}
src/gui/views/wallets/wallets.rs
+256 -69
View File
@@ -14,21 +14,30 @@
use std::cmp::max;
use egui::{Align2, Margin, Vec2};
use egui::{Align2, Margin, RichText, TextStyle, Widget};
use egui_extras::{Size, StripBuilder};
use crate::gui::Colors;
use crate::gui::icons::{ARROW_LEFT, GEAR, GLOBE, PLUS};
use crate::gui::icons::{ARROW_LEFT, EYE, EYE_SLASH, FOLDER_PLUS, GEAR, GLOBE, PLUS};
use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::{Modal, ModalContainer, Root, TitlePanel, TitleType, View};
use crate::gui::views::{Modal, ModalContainer, ModalPosition, Root, TitlePanel, TitleType, View};
use crate::gui::views::wallets::creation::{MnemonicSetup, WalletCreation};
use crate::gui::views::wallets::setup::ConnectionSetup;
use crate::gui::views::wallets::wallet::WalletContent;
use crate::wallet::WalletList;
use crate::wallet::{Wallet, Wallets};
/// Wallets content.
pub struct WalletsContent {
/// Selected list item content.
item_content: Option<WalletContent>,
/// Password to open wallet for [`Modal`].
pass_edit: String,
/// Flag to show/hide password at [`egui::TextEdit`] field.
hide_pass: bool,
/// Flag to check if wrong password was entered.
wrong_pass: bool,
/// Selected [`Wallet`] content.
wallet_content: WalletContent,
/// Wallet creation content.
creation_content: WalletCreation,
@@ -39,9 +48,13 @@ pub struct WalletsContent {
impl Default for WalletsContent {
fn default() -> Self {
Self {
item_content: None,
pass_edit: "".to_string(),
hide_pass: true,
wrong_pass: false,
wallet_content: WalletContent::default(),
creation_content: WalletCreation::default(),
modal_ids: vec![
Self::OPEN_WALLET_MODAL,
WalletCreation::NAME_PASS_MODAL,
MnemonicSetup::WORD_INPUT_MODAL,
ConnectionSetup::ADD_CONNECTION_URL_MODAL
@@ -57,11 +70,17 @@ impl ModalContainer for WalletsContent {
}
impl WalletsContent {
/// Identifier for wallet opening [`Modal`].
pub const OPEN_WALLET_MODAL: &'static str = "open_wallet_modal";
pub fn ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame, cb: &dyn PlatformCallbacks) {
// Show modal content for current ui container.
if self.can_draw_modal() {
Modal::ui(ui, |ui, modal| {
match modal.id {
Self::OPEN_WALLET_MODAL => {
self.open_wallet_modal_ui(ui, modal, cb);
},
WalletCreation::NAME_PASS_MODAL => {
self.creation_content.modal_ui(ui, modal, cb);
},
@@ -76,33 +95,51 @@ impl WalletsContent {
});
}
// Get wallets.
let wallets = Wallets::list();
let is_list_empty = wallets.is_empty();
let selected = wallets.iter().find(|x| Some(x.config.id) == Wallets::selected_id());
// Show title panel.
self.title_ui(ui, frame);
let wallets = WalletList::list();
// Setup wallet content flags.
let is_wallet_creating = self.creation_content.can_go_back();
let is_wallet_showing = if let Some(id) = Wallets::selected_id() {
Wallets::is_open(id)
} else {
false
};
// Setup panels parameters.
let is_dual_panel = Self::is_dual_panel_mode(ui, frame);
let is_wallet_creation = self.creation_content.can_go_back();
let is_wallet_panel_open = is_dual_panel || is_wallet_creation || wallets.is_empty();
let wallet_panel_width = self.wallet_panel_width(ui, frame);
// Show wallet content.
let is_wallet_panel_open
= is_dual_panel || is_wallet_showing || is_wallet_creating || is_list_empty;
let wallet_panel_width
= self.wallet_panel_width(ui, is_list_empty, is_dual_panel, is_wallet_showing);
// Show wallet panel content.
egui::SidePanel::right("wallet_panel")
.resizable(false)
.min_width(wallet_panel_width)
.exact_width(wallet_panel_width)
.frame(egui::Frame {
fill: if !wallets.is_empty() || is_wallet_creation {
Colors::WHITE
} else {
fill: if is_list_empty && !is_wallet_creating {
Colors::FILL_DARK
} else {
Colors::WHITE
},
..Default::default()
})
.show_animated_inside(ui, is_wallet_panel_open, |ui| {
self.wallet_content_ui(ui, frame, cb);
if is_wallet_showing {
self.wallet_content.ui(ui, frame, selected.unwrap(), cb);
} else {
self.creation_content.ui(ui, cb);
}
});
// Show list of wallets.
if !is_wallet_creation && !wallets.is_empty() {
// Show wallets list.
if !is_list_empty && (!is_wallet_panel_open || is_dual_panel) {
egui::CentralPanel::default()
.frame(egui::Frame {
stroke: View::DEFAULT_STROKE,
@@ -116,22 +153,22 @@ impl WalletsContent {
..Default::default()
})
.show_inside(ui, |ui| {
//TODO: wallets list
for w in WalletList::list() {
ui.label(w.config.get_name());
View::button(ui, "get info".to_string(), Colors::GOLD, || {
println!("12345 amount {}", w.get_txs_info(10).unwrap().2.total);
});
}
self.list_ui(ui, &wallets, cb);
});
// Show wallet creation button if wallet panel is not open.
if !is_wallet_panel_open {
self.create_wallet_btn_ui(ui);
// Do not show creation button if wallets panel is not showing at root
// or if wallet is not showing at dual panel mode.
let root_dual_panel = Root::is_dual_panel_mode(frame);
let wallets_panel_not_open = !root_dual_panel && Root::is_network_panel_open();
if wallets_panel_not_open || (is_wallet_panel_open && !is_wallet_showing) {
return;
} else {
self.create_wallet_btn_ui(ui, if is_dual_panel { wallet_panel_width } else { 0.0 });
}
}
}
/// Draw title content.
/// Draw [`TitlePanel`] content.
fn title_ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
// Setup title text.
let title_text = if self.creation_content.can_go_back() {
@@ -143,7 +180,13 @@ impl WalletsContent {
// Draw title panel.
TitlePanel::ui(title_content, |ui, frame| {
if self.creation_content.can_go_back() {
if Wallets::selected_id().is_some() {
if !Self::is_dual_panel_mode(ui, frame) {
View::title_button(ui, ARROW_LEFT, || {
Wallets::select(None);
});
}
} else if self.creation_content.can_go_back() {
View::title_button(ui, ARROW_LEFT, || {
self.creation_content.back();
});
@@ -159,53 +202,39 @@ impl WalletsContent {
}, ui, frame);
}
/// Draw [`WalletContent`] ui.
fn wallet_content_ui(&mut self,
ui: &mut egui::Ui,
frame: &mut eframe::Frame,
cb: &dyn PlatformCallbacks) {
if WalletList::list().is_empty() || self.item_content.is_none() {
self.creation_content.ui(ui, cb)
} else {
self.item_content.as_mut().unwrap().ui(ui, frame, cb);
}
}
/// Draw list of wallets.
fn list_ui(&mut self, ui: &mut egui::Ui, wallets: &Vec<Wallet>, cb: &dyn PlatformCallbacks) {
for w in wallets {
ui.label(&w.config.name);
/// Get [`WalletContent`] panel width.
fn wallet_panel_width(&self, ui: &mut egui::Ui, frame: &mut eframe::Frame) -> f32 {
let is_wallet_creation = self.creation_content.can_go_back();
let available_width = if WalletList::list().is_empty() || is_wallet_creation {
ui.available_width()
} else {
ui.available_width() - Root::SIDE_PANEL_MIN_WIDTH
};
if Self::is_dual_panel_mode(ui, frame) {
let min_width = (Root::SIDE_PANEL_MIN_WIDTH + View::get_right_inset()) as i64;
max(min_width, available_width as i64) as f32
} else {
let dual_panel_root = Root::is_dual_panel_mode(frame);
if dual_panel_root {
available_width
} else {
frame.info().window_info.size.x
/// Show open/close button
let id = w.config.id;
let is_selected = Some(id) == Wallets::selected_id();
let is_open = Wallets::is_open(id);
if !is_open {
View::button(ui, "open me".to_string(), Colors::GOLD, || {
Wallets::select(Some(id));
self.show_open_wallet_modal(cb);
});
} else if !is_selected {
View::button(ui, "select me".to_string(), Colors::GOLD, || {
Wallets::select(Some(id));
});
}
if Wallets::is_open(id) {
ui.label("opened!");
}
}
}
/// Check if ui can show [`WalletsContent`] list and [`WalletContent`] content at same time.
fn is_dual_panel_mode(ui: &mut egui::Ui, frame: &mut eframe::Frame) -> bool {
let dual_panel_root = Root::is_dual_panel_mode(frame);
let max_width = ui.available_width();
dual_panel_root && max_width >= (Root::SIDE_PANEL_MIN_WIDTH * 2.0) + View::get_right_inset()
}
/// Draw floating button to create the wallet.
fn create_wallet_btn_ui(&mut self, ui: &mut egui::Ui) {
/// Draw floating button to show wallet creation [`Modal`].
fn create_wallet_btn_ui(&mut self, ui: &mut egui::Ui, right_margin: f32) {
egui::Window::new("create_wallet_button")
.title_bar(false)
.resizable(false)
.collapsible(false)
.anchor(Align2::RIGHT_BOTTOM, Vec2::new(-8.0, -8.0))
.anchor(Align2::RIGHT_BOTTOM, egui::Vec2::new(-6.0 - right_margin, -6.0))
.frame(egui::Frame::default())
.show(ui.ctx(), |ui| {
View::round_button(ui, PLUS, || {
@@ -214,6 +243,164 @@ impl WalletsContent {
});
}
/// Show [`Modal`] to open selected wallet.
pub fn show_open_wallet_modal(&mut self, cb: &dyn PlatformCallbacks) {
// Reset modal values.
self.hide_pass = true;
self.pass_edit = String::from("");
self.wrong_pass = false;
// Show modal.
Modal::new(Self::OPEN_WALLET_MODAL)
.position(ModalPosition::CenterTop)
.title(t!("wallets.open"))
.show();
cb.show_keyboard();
}
/// Draw wallet opening [`Modal`] content.
fn open_wallet_modal_ui(&mut self,
ui: &mut egui::Ui,
modal: &Modal,
cb: &dyn PlatformCallbacks) {
ui.add_space(6.0);
ui.vertical_centered(|ui| {
ui.label(RichText::new(t!("wallets.pass"))
.size(17.0)
.color(Colors::GRAY));
ui.add_space(10.0);
StripBuilder::new(ui)
.size(Size::exact(34.0))
.vertical(|mut strip| {
strip.strip(|builder| {
builder
.size(Size::remainder())
.size(Size::exact(48.0))
.horizontal(|mut strip| {
strip.cell(|ui| {
// Draw wallet password text edit.
let pass_resp = egui::TextEdit::singleline(&mut self.pass_edit)
.id(ui.id().with("wallet_pass_edit"))
.font(TextStyle::Heading)
.desired_width(ui.available_width())
.cursor_at_end(true)
.password(self.hide_pass)
.ui(ui);
pass_resp.request_focus();
if pass_resp.clicked() {
cb.show_keyboard();
}
});
strip.cell(|ui| {
ui.vertical_centered(|ui| {
// Draw button to show/hide password.
let eye_icon = if self.hide_pass { EYE } else { EYE_SLASH };
View::button(ui, eye_icon.to_string(), Colors::WHITE, || {
self.hide_pass = !self.hide_pass;
});
});
});
});
})
});
// Show information when password is empty.
if self.pass_edit.is_empty() {
ui.add_space(10.0);
ui.label(RichText::new(t!("wallets.pass_empty"))
.size(17.0)
.color(Colors::INACTIVE_TEXT));
} else if self.wrong_pass {
ui.add_space(10.0);
ui.label(RichText::new(t!("wallets.wrong_pass"))
.size(17.0)
.color(Colors::RED));
}
ui.add_space(12.0);
});
// Show modal buttons.
ui.scope(|ui| {
// Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| {
View::button(ui, t!("modal.cancel"), Colors::WHITE, || {
// Clear values.
self.pass_edit = "".to_string();
self.wrong_pass = false;
self.hide_pass = true;
// Close modal.
cb.hide_keyboard();
modal.close();
});
});
columns[1].vertical_centered_justified(|ui| {
// Callback for continue button.
let mut on_continue = || {
if self.pass_edit.is_empty() {
return;
}
let selected_id = Wallets::selected_id().unwrap();
match Wallets::open(selected_id, self.pass_edit.clone()) {
Ok(_) => {
// Clear values.
self.pass_edit = "".to_string();
self.wrong_pass = false;
self.hide_pass = true;
// Close modal.
cb.hide_keyboard();
modal.close();
}
Err(_) => self.wrong_pass = true
}
};
// Continue on Enter key press.
View::on_enter_key(ui, || {
(on_continue)();
});
View::button(ui, t!("continue"), Colors::WHITE, on_continue);
});
});
ui.add_space(6.0);
});
}
/// Calculate [`WalletContent`] panel width.
fn wallet_panel_width(
&self,
ui:&mut egui::Ui,
is_list_empty: bool,
is_dual_panel: bool,
is_wallet_showing: bool
) -> f32 {
let is_wallet_creation = self.creation_content.can_go_back();
let available_width = if is_list_empty || is_wallet_creation {
ui.available_width()
} else {
ui.available_width() - Root::SIDE_PANEL_MIN_WIDTH
};
if is_dual_panel {
let min_width = (Root::SIDE_PANEL_MIN_WIDTH + View::get_right_inset()) as i64;
max(min_width, available_width as i64) as f32
} else {
if is_wallet_showing {
ui.available_width()
} else {
available_width
}
}
}
/// Check if it's possible to show [`WalletsContent`] and [`WalletContent`] panels at same time.
fn is_dual_panel_mode(ui: &mut egui::Ui, frame: &mut eframe::Frame) -> bool {
let dual_panel_root = Root::is_dual_panel_mode(frame);
let max_width = ui.available_width();
dual_panel_root && max_width >= (Root::SIDE_PANEL_MIN_WIDTH * 2.0) + View::get_right_inset()
}
/// Handle Back key event.
/// Return `false` when event was handled.
pub fn on_back(&mut self) -> bool {