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

ui: optimize wallet panels width, creations steps scroll and paddings

Browse source
This commit is contained in:
ardocrat 2023-08-11 04:36:15 +03:00
parent 588fb31fa5
commit e9fa5a140a
6 changed files with 130 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/gui/views/wallets/content.rs
View file

@ -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;

51
src/gui/views/wallets/creation/creation.rs
View file

@ -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);
});
});
});
});
}

32
src/gui/views/wallets/creation/mnemonic.rs
View file

@ -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.

11
src/gui/views/wallets/creation/types.rs
View file

@ -22,3 +22,14 @@ pub enum Step {
/// 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(),
}
}
}

64
src/gui/views/wallets/setup/connection.rs
View file

@ -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));

34
src/gui/views/wallets/wallet/content.rs
View file

@ -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.