ui: window resize, tabs and creation navigation paddings, title panel hiding

This commit is contained in:
ardocrat
2024-06-24 18:45:01 +03:00
parent de53e867e9
commit 6d052576e7
7 changed files with 154 additions and 54 deletions
+10 -14
View File
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
use egui::{Margin, RichText, ScrollArea, Stroke};
use egui::{Margin, RichText, ScrollArea};
use egui::scroll_area::ScrollBarVisibility;
use crate::AppConfig;
@@ -48,7 +48,7 @@ impl NetworkContent {
let dual_panel = Root::is_dual_panel_mode(ui);
// Show title panel.
self.title_ui(ui, show_connections);
self.title_ui(ui, dual_panel || Root::is_network_panel_open(), show_connections);
// Show integrated node tabs content.
if !show_connections {
@@ -57,10 +57,10 @@ impl NetworkContent {
.frame(egui::Frame {
fill: Colors::fill(),
inner_margin: Margin {
left: View::get_left_inset() + 4.0,
right: View::far_right_inset_margin(ui) + 4.0,
top: 6.0,
bottom: View::get_bottom_inset() + 5.0,
left: View::get_left_inset() + View::TAB_ITEMS_PADDING,
right: View::far_right_inset_margin(ui) + View::TAB_ITEMS_PADDING,
top: View::TAB_ITEMS_PADDING,
bottom: View::get_bottom_inset() + View::TAB_ITEMS_PADDING,
},
outer_margin: if View::is_desktop() {
Margin {
@@ -115,11 +115,7 @@ impl NetworkContent {
// Show connections content.
egui::CentralPanel::default()
.frame(egui::Frame {
stroke: if show_connections {
View::item_stroke()
} else {
Stroke::NONE
},
stroke: View::item_stroke(),
inner_margin: Margin {
left: if show_connections {
View::get_left_inset() + 4.0
@@ -171,7 +167,7 @@ impl NetworkContent {
fn tabs_ui(&mut self, ui: &mut egui::Ui) {
ui.vertical_centered(|ui| {
// Setup spacing between tabs.
ui.style_mut().spacing.item_spacing = egui::vec2(6.0, 0.0);
ui.style_mut().spacing.item_spacing = egui::vec2(View::TAB_ITEMS_PADDING, 0.0);
// Setup vertical padding inside tab button.
ui.style_mut().spacing.button_padding = egui::vec2(0.0, 4.0);
@@ -203,7 +199,7 @@ impl NetworkContent {
}
/// Draw title content.
fn title_ui(&mut self, ui: &mut egui::Ui, show_connections: bool) {
fn title_ui(&mut self, ui: &mut egui::Ui, show_panel: bool, show_connections: bool) {
// Setup values for title panel.
let title_text = self.node_tab_content.get_type().title().to_uppercase();
let subtitle_text = Node::get_sync_status_text();
@@ -215,7 +211,7 @@ impl NetworkContent {
};
// Draw title panel.
TitlePanel::ui(TitleType::Single(title_content), |ui| {
TitlePanel::ui(TitleType::Single(title_content), show_panel, |ui| {
if !show_connections {
View::title_button_big(ui, DOTS_THREE_OUTLINE_VERTICAL, |_| {
AppConfig::toggle_show_connections_network_panel();
+2 -1
View File
@@ -27,6 +27,7 @@ impl TitlePanel {
pub const DEFAULT_HEIGHT: f32 = 54.0;
pub fn ui(title: TitleType,
show: bool,
mut left_content: impl FnMut(&mut egui::Ui),
mut right_content: impl FnMut(&mut egui::Ui),
ui: &mut egui::Ui) {
@@ -57,7 +58,7 @@ impl TitlePanel {
fill: Colors::yellow(),
..Default::default()
})
.show_inside(ui, |ui| {
.show_animated_inside(ui, show, |ui| {
StripBuilder::new(ui)
.size(Size::exact(Self::DEFAULT_HEIGHT))
.size(if dual_title {
+3
View File
@@ -218,6 +218,9 @@ impl View {
});
}
/// Padding for tab items.
pub const TAB_ITEMS_PADDING: f32 = 5.0;
/// Tab button with white background fill color, contains only icon.
pub fn tab_button(ui: &mut egui::Ui, icon: &str, active: bool, action: impl FnOnce()) {
ui.scope(|ui| {
+16 -16
View File
@@ -103,10 +103,13 @@ impl WalletsContent {
let wallet_panel_width = self.wallet_panel_width(ui, empty_list, dual_panel, show_wallet);
let content_width = ui.available_width();
// Flag to check if wallet list is hidden on the screen.
let list_hidden = content_width == 0.0 || empty_list || create_wallet
|| (dual_panel && show_wallet && !self.show_wallets_at_dual_panel)
|| (!dual_panel && show_wallet) || (!dual_panel && Root::is_network_panel_open());
// Show title panel.
View::max_width_ui(ui, ui.available_width(), |ui| {
self.title_ui(ui, dual_panel, create_wallet, show_wallet);
});
self.title_ui(ui, dual_panel, create_wallet, show_wallet);
// Show wallet panel content.
egui::SidePanel::right("wallet_panel")
@@ -161,15 +164,9 @@ impl WalletsContent {
}
});
// Flag to check if wallet list is hidden on the screen.
let list_hidden = content_width == 0.0 || empty_list || create_wallet
|| (dual_panel && show_wallet && !self.show_wallets_at_dual_panel)
|| (!dual_panel && show_wallet);
// Setup flag to show wallets bottom panel if wallet is not showing
// at non-dual panel mode and network is no open or showing at dual panel mode.
let show_bottom_panel = !list_hidden &&
((!show_wallet && !dual_panel && !Root::is_network_panel_open()) || dual_panel);
let show_bottom_panel = !list_hidden || dual_panel;
// Show wallets bottom panel.
if show_bottom_panel {
@@ -177,10 +174,10 @@ impl WalletsContent {
.frame(egui::Frame {
fill: Colors::fill(),
inner_margin: Margin {
left: View::get_left_inset() + 4.0,
right: View::far_right_inset_margin(ui) + 4.0,
top: 6.0,
bottom: View::get_bottom_inset() + 5.0,
left: View::get_left_inset() + View::TAB_ITEMS_PADDING,
right: View::far_right_inset_margin(ui) + View::TAB_ITEMS_PADDING,
top: View::TAB_ITEMS_PADDING,
bottom: View::get_bottom_inset() + View::TAB_ITEMS_PADDING,
},
outer_margin: if View::is_desktop() {
Margin {
@@ -204,7 +201,7 @@ impl WalletsContent {
})
.show_inside(ui, |ui| {
// Setup spacing between tabs.
ui.style_mut().spacing.item_spacing = egui::vec2(6.0, 0.0);
ui.style_mut().spacing.item_spacing = egui::vec2(View::TAB_ITEMS_PADDING, 0.0);
// Setup vertical padding inside buttons.
ui.style_mut().spacing.button_padding = egui::vec2(10.0, 4.0);
@@ -235,6 +232,9 @@ impl WalletsContent {
}
})
.show_inside(ui, |ui| {
if list_hidden {
return;
}
// Update ui after 1 sec at single panel mode.
if !dual_panel {
ui.ctx().request_repaint_after(Duration::from_millis(1000));
@@ -300,7 +300,7 @@ impl WalletsContent {
};
// Draw title panel.
TitlePanel::ui(title_content, |ui| {
TitlePanel::ui(title_content, dual_panel || !Root::is_network_panel_open(), |ui| {
if show_wallet && !dual_panel {
View::title_button_big(ui, ARROW_LEFT, |_| {
self.wallets.select(None);
+14 -1
View File
@@ -73,13 +73,26 @@ impl WalletCreation {
egui::TopBottomPanel::bottom("wallet_creation_step_panel")
.frame(egui::Frame {
fill: Colors::fill(),
stroke: View::default_stroke(),
inner_margin: Margin {
left: View::far_left_inset_margin(ui) + 8.0,
right: View::get_right_inset() + 8.0,
top: 4.0,
bottom: View::get_bottom_inset(),
},
outer_margin: if View::is_desktop() {
Margin {
left: if !Root::is_dual_panel_mode(ui) {
-0.5
} else {
0.0
},
right: -0.5,
top: 0.0,
bottom: -0.5,
}
} else {
Margin::ZERO
},
..Default::default()
})
.show_inside(ui, |ui| {
+5 -5
View File
@@ -128,10 +128,10 @@ impl WalletContent {
.frame(egui::Frame {
fill: Colors::fill(),
inner_margin: Margin {
left: View::far_left_inset_margin(ui) + 4.0,
right: View::get_right_inset() + 4.0,
top: 6.0,
bottom: View::get_bottom_inset() + 5.0,
left: View::far_left_inset_margin(ui) + View::TAB_ITEMS_PADDING,
right: View::get_right_inset() + View::TAB_ITEMS_PADDING,
top: View::TAB_ITEMS_PADDING,
bottom: View::get_bottom_inset() + View::TAB_ITEMS_PADDING,
},
outer_margin: if View::is_desktop() {
Margin {
@@ -526,7 +526,7 @@ impl WalletContent {
fn tabs_ui(&mut self, ui: &mut egui::Ui, wallet: &Wallet) {
ui.scope(|ui| {
// Setup spacing between tabs.
ui.style_mut().spacing.item_spacing = egui::vec2(6.0, 0.0);
ui.style_mut().spacing.item_spacing = egui::vec2(View::TAB_ITEMS_PADDING, 0.0);
// Setup vertical padding inside tab button.
ui.style_mut().spacing.button_padding = egui::vec2(0.0, 4.0);