ui: optimize panels width

This commit is contained in:
ardocrat 2023-08-15 21:20:20 +03:00
parent 48630fc6be
commit f54993483f
6 changed files with 42 additions and 67 deletions

View file

@ -93,8 +93,6 @@ impl NetworkContent {
}); });
}); });
let content_width = ui.available_width();
// Show connections content. // Show connections content.
egui::CentralPanel::default() egui::CentralPanel::default()
.frame(egui::Frame { .frame(egui::Frame {
@ -130,15 +128,12 @@ impl NetworkContent {
.show(ui, |ui| { .show(ui, |ui| {
ui.add_space(1.0); ui.add_space(1.0);
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup wallet list width. let max_width = if !Root::is_dual_panel_mode(frame) {
let mut rect = ui.available_rect_before_wrap(); Root::SIDE_PANEL_WIDTH * 1.3
let mut width = ui.available_width(); } else {
if !Root::is_dual_panel_mode(frame) { ui.available_width()
width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.4) };
} View::max_width_ui(ui, max_width, |ui| {
rect.set_width(width);
ui.allocate_ui(rect.size(), |ui| {
self.connections.ui(ui, frame, cb); self.connections.ui(ui, frame, cb);
}); });
}); });

View file

@ -33,6 +33,25 @@ impl View {
/// Stroke for hovered items and buttons. /// Stroke for hovered items and buttons.
pub const HOVER_STROKE: Stroke = Stroke { width: 1.0, color: Colors::ITEM_HOVER }; pub const HOVER_STROKE: Stroke = Stroke { width: 1.0, color: Colors::ITEM_HOVER };
/// Draw content with maximum width value.
pub fn max_width_ui(ui: &mut egui::Ui,
max_width: f32,
add_content: impl FnOnce(&mut egui::Ui)) {
// Setup content width.
let mut width = ui.available_width();
if width == 0.0 {
return;
}
let mut rect = ui.available_rect_before_wrap();
width = f32::min(width, max_width);
rect.set_width(width);
// Draw content.
ui.allocate_ui(rect.size(), |ui| {
(add_content)(ui);
});
}
/// Callback on Enter key press event. /// Callback on Enter key press event.
pub fn on_enter_key(ui: &mut egui::Ui, cb: impl FnOnce()) { pub fn on_enter_key(ui: &mut egui::Ui, cb: impl FnOnce()) {
if ui.ctx().input(|i| i.key_pressed(egui::Key::Enter)) { if ui.ctx().input(|i| i.key_pressed(egui::Key::Enter)) {

View file

@ -228,7 +228,7 @@ impl WalletsContent {
// Setup title. // Setup title.
let title_content = if self.wallets.is_selected_open() && (!dual_panel let title_content = if self.wallets.is_selected_open() && (!dual_panel
|| (dual_panel && !show_list)) { || (dual_panel && !show_list)) && !create_wallet {
let title_text = self.wallet_content.current_tab.get_type().name().to_uppercase(); let title_text = self.wallet_content.current_tab.get_type().name().to_uppercase();
if self.wallet_content.current_tab.get_type() == WalletTabType::Settings { if self.wallet_content.current_tab.get_type() == WalletTabType::Settings {
TitleType::Single(TitleContentType::Title(title_text)) TitleType::Single(TitleContentType::Title(title_text))
@ -332,17 +332,12 @@ impl WalletsContent {
.show(ui, |ui| { .show(ui, |ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup wallet list width. // Setup wallet list width.
let mut rect = ui.available_rect_before_wrap(); let max_width = if !dual_panel {
let mut width = ui.available_width(); Root::SIDE_PANEL_WIDTH * 1.3
if !dual_panel { } else {
width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.4) ui.available_width()
} };
if width == 0.0 { View::max_width_ui(ui, max_width, |ui| {
return;
}
rect.set_width(width);
ui.allocate_ui(rect.size(), |ui| {
let mut list = self.wallets.list().clone(); let mut list = self.wallets.list().clone();
// Remove deleted wallet from the list. // Remove deleted wallet from the list.
list.retain(|w| !w.is_deleted()); list.retain(|w| !w.is_deleted());

View file

@ -95,17 +95,7 @@ impl WalletCreation {
.show_inside(ui, |ui| { .show_inside(ui, |ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup content width. View::max_width_ui(ui, Root::SIDE_PANEL_WIDTH * 2.0, |ui| {
let available_width = ui.available_width();
if available_width == 0.0 {
return;
}
let mut rect = ui.available_rect_before_wrap();
let width = f32::min(available_width, Root::SIDE_PANEL_WIDTH * 2.0);
rect.set_width(width);
// Draw step control content.
ui.allocate_ui(rect.size(), |ui| {
self.step_control_ui(ui, on_create); self.step_control_ui(ui, on_create);
}); });
}); });
@ -137,17 +127,12 @@ impl WalletCreation {
.auto_shrink([false; 2]) .auto_shrink([false; 2])
.show(ui, |ui| { .show(ui, |ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup content width. let max_width = if self.step == Some(Step::SetupConnection) {
let available_width = ui.available_width(); Root::SIDE_PANEL_WIDTH * 1.3
if available_width == 0.0 { } else {
return; Root::SIDE_PANEL_WIDTH * 2.0
} };
let mut rect = ui.available_rect_before_wrap(); View::max_width_ui(ui, max_width, |ui| {
let width = f32::min(available_width, Root::SIDE_PANEL_WIDTH * 2.0);
rect.set_width(width);
// Draw step content.
ui.allocate_ui(rect.size(), |ui| {
self.step_content_ui(ui, frame, cb); self.step_content_ui(ui, frame, cb);
}); });
}); });

View file

@ -59,17 +59,8 @@ impl WalletContent {
}) })
.show_animated_inside(ui, !Self::block_navigation_on_sync(wallet), |ui| { .show_animated_inside(ui, !Self::block_navigation_on_sync(wallet), |ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup tabs width.
let available_width = ui.available_width();
if available_width == 0.0 {
return;
}
let mut rect = ui.available_rect_before_wrap();
let width = f32::min(available_width, Root::SIDE_PANEL_WIDTH * 1.3);
rect.set_width(width);
// Draw wallet tabs. // Draw wallet tabs.
ui.allocate_ui(rect.size(), |ui| { View::max_width_ui(ui, Root::SIDE_PANEL_WIDTH * 1.3, |ui| {
self.tabs_ui(ui); self.tabs_ui(ui);
}); });
}); });

View file

@ -15,7 +15,7 @@
use egui::{Id, ScrollArea}; use egui::{Id, ScrollArea};
use crate::gui::platform::PlatformCallbacks; use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::Root; use crate::gui::views::{Root, View};
use crate::gui::views::wallets::setup::{CommonSetup, ConnectionSetup, RecoverySetup}; use crate::gui::views::wallets::setup::{CommonSetup, ConnectionSetup, RecoverySetup};
use crate::gui::views::wallets::wallet::types::{WalletTab, WalletTabType}; use crate::gui::views::wallets::wallet::types::{WalletTab, WalletTabType};
use crate::gui::views::wallets::wallet::WalletContent; use crate::gui::views::wallets::wallet::WalletContent;
@ -64,17 +64,7 @@ impl WalletTab for WalletSettings {
.auto_shrink([false; 2]) .auto_shrink([false; 2])
.show(ui, |ui| { .show(ui, |ui| {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
// Setup tab content width. View::max_width_ui(ui, Root::SIDE_PANEL_WIDTH * 1.3, |ui| {
let available_width = ui.available_width();
if available_width == 0.0 {
return;
}
let mut rect = ui.available_rect_before_wrap();
let width = f32::min(available_width, Root::SIDE_PANEL_WIDTH * 1.3);
rect.set_width(width);
// Draw current tab content.
ui.allocate_ui(rect.size(), |ui| {
// Show common wallet setup. // Show common wallet setup.
self.common_setup.ui(ui, frame, wallet, cb); self.common_setup.ui(ui, frame, wallet, cb);
// Show wallet connections setup. // Show wallet connections setup.