diff --git a/src/gui/views/wallets/content.rs b/src/gui/views/wallets/content.rs index 2b84c27..cd4344e 100644 --- a/src/gui/views/wallets/content.rs +++ b/src/gui/views/wallets/content.rs @@ -316,7 +316,7 @@ impl WalletsContent { let mut rect = ui.available_rect_before_wrap(); let mut width = ui.available_width(); if !dual_panel { - width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.3) + width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.4) } if width == 0.0 { return; diff --git a/src/gui/views/wallets/creation/creation.rs b/src/gui/views/wallets/creation/creation.rs index 3ebed64..3102949 100644 --- a/src/gui/views/wallets/creation/creation.rs +++ b/src/gui/views/wallets/creation/creation.rs @@ -12,14 +12,14 @@ // See the License for the specific language governing permissions and // limitations under the License. -use egui::{Id, Margin, RichText, TextStyle, vec2, Widget}; +use egui::{Id, Margin, RichText, ScrollArea, TextStyle, vec2, Widget}; use egui_extras::{RetainedImage, Size, StripBuilder}; use crate::built_info; use crate::gui::Colors; use crate::gui::icons::{CHECK, EYE, EYE_SLASH, FOLDER_PLUS, SHARE_FAT}; use crate::gui::platform::PlatformCallbacks; -use crate::gui::views::{Modal, View}; +use crate::gui::views::{Modal, Root, View}; use crate::gui::views::types::ModalPosition; use crate::gui::views::wallets::creation::MnemonicSetup; use crate::gui::views::wallets::creation::types::Step; @@ -94,7 +94,24 @@ impl WalletCreation { }) .show_inside(ui, |ui| { ui.vertical_centered(|ui| { - self.step_control_ui(ui, on_create); + ui.vertical_centered(|ui| { + // Setup content width. + let mut rect = ui.available_rect_before_wrap(); + let mut width = f32::min( + ui.available_width(), + Root::SIDE_PANEL_WIDTH * 2.0 + ); + if width == 0.0 { + return; + } + rect.set_width(width); + + // Draw step control content. + ui.allocate_ui(rect.size(), |ui| { + self.step_control_ui(ui, on_create); + }); + }); + }); }); } @@ -112,7 +129,33 @@ impl WalletCreation { ..Default::default() }) .show_inside(ui, |ui| { - self.step_content_ui(ui, frame, cb); + let id = if let Some(step) = &self.step { + format!("creation_step_scroll_{}", step.name()) + } else { + "creation_step_scroll".to_owned() + }; + ScrollArea::vertical() + .id_source(id) + .auto_shrink([false; 2]) + .show(ui, |ui| { + ui.vertical_centered(|ui| { + // Setup content width. + let mut rect = ui.available_rect_before_wrap(); + let mut width = f32::min( + ui.available_width(), + Root::SIDE_PANEL_WIDTH * 2.0 + ); + if width == 0.0 { + return; + } + rect.set_width(width); + + // Draw step content. + ui.allocate_ui(rect.size(), |ui| { + self.step_content_ui(ui, frame, cb); + }); + }); + }); }); } diff --git a/src/gui/views/wallets/creation/mnemonic.rs b/src/gui/views/wallets/creation/mnemonic.rs index 5594639..a7758d4 100644 --- a/src/gui/views/wallets/creation/mnemonic.rs +++ b/src/gui/views/wallets/creation/mnemonic.rs @@ -82,22 +82,17 @@ impl MnemonicSetup { // Draw modal content for current ui container. self.current_modal_ui(ui, frame, cb); - ScrollArea::vertical() - .id_source("input_mnemonic_words_list") - .auto_shrink([false; 2]) - .show(ui, |ui| { - ui.add_space(10.0); + ui.add_space(10.0); - // Show mode and type setup. - self.mode_type_ui(ui); + // Show mode and type setup. + self.mode_type_ui(ui); - ui.add_space(12.0); - View::horizontal_line(ui, Colors::ITEM_STROKE); - ui.add_space(6.0); + ui.add_space(12.0); + View::horizontal_line(ui, Colors::ITEM_STROKE); + ui.add_space(6.0); - // Show words setup. - self.word_list_ui(ui, self.mnemonic.mode == PhraseMode::Import, cb); - }); + // Show words setup. + self.word_list_ui(ui, self.mnemonic.mode == PhraseMode::Import, cb); } /// Draw content for phrase confirmation step. @@ -110,16 +105,11 @@ impl MnemonicSetup { ui.add_space(4.0); ui.vertical_centered(|ui| { - ui.label(RichText::new(t!("wallets.saved_phrase")).size(16.0).color(Colors::GRAY)); + let text = format!("{}:", t!("wallets.saved_phrase")); + ui.label(RichText::new(text).size(16.0).color(Colors::GRAY)); }); ui.add_space(4.0); - ScrollArea::vertical() - .id_source("confirm_mnemonic_words_list") - .auto_shrink([false; 2]) - .show(ui, |ui| { - // Show words setup. - self.word_list_ui(ui, true, cb); - }); + self.word_list_ui(ui, true, cb); } /// Draw mode and size setup. diff --git a/src/gui/views/wallets/creation/types.rs b/src/gui/views/wallets/creation/types.rs index b3a7504..58f6dfa 100644 --- a/src/gui/views/wallets/creation/types.rs +++ b/src/gui/views/wallets/creation/types.rs @@ -21,4 +21,15 @@ pub enum Step { ConfirmMnemonic, /// Wallet connection setup. SetupConnection +} + +impl Step { + /// Short name representing creation step. + pub fn name(&self) -> String { + match *self { + Step::EnterMnemonic => "enter_phrase".to_owned(), + Step::ConfirmMnemonic => "confirm_phrase".to_owned(), + Step::SetupConnection => "setup_conn".to_owned(), + } + } } \ No newline at end of file diff --git a/src/gui/views/wallets/setup/connection.rs b/src/gui/views/wallets/setup/connection.rs index b0d2397..19e93e7 100644 --- a/src/gui/views/wallets/setup/connection.rs +++ b/src/gui/views/wallets/setup/connection.rs @@ -86,43 +86,39 @@ impl ConnectionSetup { // Draw modal content for current ui container. self.current_modal_ui(ui, frame, cb); - ScrollArea::vertical() - .id_source("wallet_connection_setup") - .auto_shrink([false; 2]) - .show(ui, |ui| { - View::sub_title(ui, format!("{} {}", GLOBE, t!("wallets.conn_method"))); - View::horizontal_line(ui, Colors::STROKE); - ui.add_space(4.0); + ui.add_space(2.0); + View::sub_title(ui, format!("{} {}", GLOBE, t!("wallets.conn_method"))); + View::horizontal_line(ui, Colors::ITEM_STROKE); + ui.add_space(4.0); - ui.vertical_centered(|ui| { - // Show integrated node selection. - ui.add_space(6.0); - View::radio_value(ui, - &mut self.method, - ConnectionMethod::Integrated, - t!("network.node")); + ui.vertical_centered(|ui| { + // Show integrated node selection. + ui.add_space(6.0); + View::radio_value(ui, + &mut self.method, + ConnectionMethod::Integrated, + t!("network.node")); - ui.add_space(10.0); - ui.label(RichText::new(t!("wallets.ext_conn")).size(16.0).color(Colors::GRAY)); - ui.add_space(6.0); + ui.add_space(10.0); + ui.label(RichText::new(t!("wallets.ext_conn")).size(16.0).color(Colors::GRAY)); + ui.add_space(6.0); - // Show button to add new external node connection. - let add_node_text = format!("{} {}", GLOBE_SIMPLE, t!("wallets.add_node")); - View::button(ui, add_node_text, Colors::GOLD, || { - self.show_add_ext_conn_modal(cb); - }); - ui.add_space(12.0); - - // Show external nodes URLs selection. - for conn in ConnectionsConfig::ext_conn_list() { - View::radio_value(ui, - &mut self.method, - ConnectionMethod::External(conn.id), - conn.url); - ui.add_space(12.0); - } - }); + // Show button to add new external node connection. + let add_node_text = format!("{} {}", GLOBE_SIMPLE, t!("wallets.add_node")); + View::button(ui, add_node_text, Colors::GOLD, || { + self.show_add_ext_conn_modal(cb); }); + ui.add_space(12.0); + + // Show external nodes URLs selection. + for conn in ConnectionsConfig::ext_conn_list() { + View::radio_value(ui, + &mut self.method, + ConnectionMethod::External(conn.id), + conn.url); + ui.add_space(12.0); + } + }); } /// Show external connection adding [`Modal`]. @@ -187,7 +183,7 @@ impl ConnectionSetup { // Show error when specified URL is not valid. if self.ext_node_url_error { - ui.add_space(12.0); + ui.add_space(2.0); ui.label(RichText::new(t!("wallets.invalid_url")) .size(17.0) .color(Colors::RED)); diff --git a/src/gui/views/wallets/wallet/content.rs b/src/gui/views/wallets/wallet/content.rs index 92dd47f..96ba629 100644 --- a/src/gui/views/wallets/wallet/content.rs +++ b/src/gui/views/wallets/wallet/content.rs @@ -45,7 +45,7 @@ impl WalletContent { frame: &mut eframe::Frame, wallet: &mut Wallet, cb: &dyn PlatformCallbacks) { - // Show bottom tabs. + // Show wallet tabs panel. egui::TopBottomPanel::bottom("wallet_tabs") .frame(egui::Frame { fill: Colors::FILL, @@ -58,10 +58,23 @@ impl WalletContent { ..Default::default() }) .show_inside(ui, |ui| { - self.tabs_ui(ui); + ui.vertical_centered(|ui| { + // Setup tabs width. + let mut rect = ui.available_rect_before_wrap(); + let mut width = f32::min(ui.available_width(), Root::SIDE_PANEL_WIDTH * 2.0); + if width == 0.0 { + return; + } + rect.set_width(width); + + // Draw wallet tabs. + ui.allocate_ui(rect.size(), |ui| { + self.tabs_ui(ui); + }); + }); }); - // Show tab content. + // Show tab content panel. egui::CentralPanel::default() .frame(egui::Frame { stroke: View::DEFAULT_STROKE, @@ -75,7 +88,20 @@ impl WalletContent { ..Default::default() }) .show_inside(ui, |ui| { - self.current_tab.ui(ui, frame, wallet, cb); + ui.vertical_centered(|ui| { + // Setup tab content width. + let mut rect = ui.available_rect_before_wrap(); + let mut width = f32::min(ui.available_width(), Root::SIDE_PANEL_WIDTH * 2.0); + if width == 0.0 { + return; + } + rect.set_width(width); + + // Draw current tab content. + ui.allocate_ui(rect.size(), |ui| { + self.current_tab.ui(ui, frame, wallet, cb); + }); + }); }); // Refresh content after 1 second for loaded wallet.