ui: fix list items paddings

This commit is contained in:
ardocrat 2023-07-17 02:04:08 +03:00
parent 5cd3994163
commit 6497d6798b
2 changed files with 98 additions and 91 deletions

View file

@ -13,14 +13,14 @@
// limitations under the License. // limitations under the License.
use chrono::{DateTime, NaiveDateTime, Utc}; use chrono::{DateTime, NaiveDateTime, Utc};
use egui::{RichText, Rounding, ScrollArea, Stroke}; use egui::{RichText, Rounding, ScrollArea, Stroke, vec2};
use grin_servers::DiffBlock; use grin_servers::DiffBlock;
use crate::gui::Colors; use crate::gui::Colors;
use crate::gui::icons::{AT, COINS, CUBE_TRANSPARENT, HASH, HOURGLASS_LOW, HOURGLASS_MEDIUM, TIMER}; use crate::gui::icons::{AT, COINS, CUBE_TRANSPARENT, HASH, HOURGLASS_LOW, HOURGLASS_MEDIUM, TIMER};
use crate::gui::platform::PlatformCallbacks; use crate::gui::platform::PlatformCallbacks;
use crate::gui::views::network::{NetworkTab, NetworkTabType};
use crate::gui::views::{Modal, Network, View}; use crate::gui::views::{Modal, Network, View};
use crate::gui::views::network::{NetworkTab, NetworkTabType};
use crate::node::Node; use crate::node::Node;
/// Chain metrics tab content. /// Chain metrics tab content.
@ -131,7 +131,7 @@ impl NetworkTab for NetworkMetrics {
.stick_to_bottom(true) .stick_to_bottom(true)
.show_rows( .show_rows(
ui, ui,
BLOCK_ITEM_HEIGHT, BLOCK_ITEM_HEIGHT - 1.0,
blocks_size, blocks_size,
|ui, row_range| { |ui, row_range| {
for index in row_range { for index in row_range {
@ -154,7 +154,7 @@ impl NetworkTab for NetworkMetrics {
fn on_modal_ui(&mut self, ui: &mut egui::Ui, modal: &Modal, cb: &dyn PlatformCallbacks) {} fn on_modal_ui(&mut self, ui: &mut egui::Ui, modal: &Modal, cb: &dyn PlatformCallbacks) {}
} }
const BLOCK_ITEM_HEIGHT: f32 = 74.90; const BLOCK_ITEM_HEIGHT: f32 = 77.0;
/// Draw block difficulty item. /// Draw block difficulty item.
fn block_item_ui(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) { fn block_item_ui(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) {
@ -163,63 +163,62 @@ fn block_item_ui(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) {
ui.add_space(4.0); ui.add_space(4.0);
} }
ui.horizontal(|ui| { let mut rect = ui.available_rect_before_wrap();
ui.add_space(6.0); rect.set_height(BLOCK_ITEM_HEIGHT);
ui.vertical(|ui| { ui.allocate_ui_at_rect(rect, |ui| {
// Draw round background. ui.horizontal(|ui| {
let mut rect = ui.available_rect_before_wrap(); ui.add_space(6.0);
rect.set_height(BLOCK_ITEM_HEIGHT); ui.vertical(|ui| {
ui.painter().rect( // Draw round background.
rect, rect.min += vec2(8.0, 0.0);
Rounding { ui.painter().rect(
nw: if rounding[0] { 8.0 } else { 0.0 }, rect,
ne: if rounding[0] { 8.0 } else { 0.0 }, Rounding {
sw: if rounding[1] { 8.0 } else { 0.0 }, nw: if rounding[0] { 8.0 } else { 0.0 },
se: if rounding[1] { 8.0 } else { 0.0 }, ne: if rounding[0] { 8.0 } else { 0.0 },
}, sw: if rounding[1] { 8.0 } else { 0.0 },
Colors::WHITE, se: if rounding[1] { 8.0 } else { 0.0 },
Stroke { width: 1.0, color: Colors::ITEM_STROKE } },
); Colors::WHITE,
Stroke { width: 1.0, color: Colors::ITEM_STROKE }
);
ui.add_space(2.0);
ui.add_space(2.0);
ui.horizontal(|ui| {
ui.add_space(5.0);
// Draw block hash. // Draw block hash.
ui.heading(RichText::new(format!("{} {}", HASH, db.block_hash)) ui.horizontal(|ui| {
.color(Colors::BLACK) ui.add_space(5.0);
.size(17.0)); ui.label(RichText::new(format!("{} {}", HASH, db.block_hash))
}); .color(Colors::BLACK)
ui.horizontal(|ui| { .size(17.0));
ui.add_space(6.0); });
// Draw block difficulty and height. // Draw block difficulty and height.
ui.heading(RichText::new(format!("{} {}", CUBE_TRANSPARENT, db.difficulty)) ui.horizontal(|ui| {
.color(Colors::TITLE) ui.add_space(6.0);
.size(16.0)); let diff_text = format!("{} {} {} {}",
ui.add_space(2.0); CUBE_TRANSPARENT,
ui.heading(RichText::new(AT).color(Colors::TITLE).size(16.0)); db.difficulty,
ui.add_space(2.0); AT,
ui.heading(RichText::new(db.block_height.to_string()) db.block_height);
.color(Colors::TITLE) ui.label(RichText::new(diff_text).color(Colors::TITLE).size(16.0));
.size(16.0)); });
});
ui.horizontal(|ui| {
ui.add_space(6.0);
// Draw block date. // Draw block date.
ui.heading(RichText::new(format!("{} {}s", TIMER, db.duration)) ui.horizontal(|ui| {
.color(Colors::GRAY) ui.add_space(6.0);
.size(16.0)); let block_time = NaiveDateTime::from_timestamp_opt(db.time as i64, 0).unwrap();
ui.add_space(4.0); let block_date: DateTime<Utc> = DateTime::from_utc(block_time, Utc);
let block_time_text = block_date.format("%d/%m/%Y %H:%M:%S UTC").to_string();
ui.label(RichText::new(format!("{} {}s {} {}",
TIMER,
db.duration,
HOURGLASS_LOW,
block_time_text))
.color(Colors::GRAY)
.size(16.0));
});
ui.heading(RichText::new(HOURGLASS_LOW).color(Colors::GRAY).size(16.0));
ui.add_space(2.0); ui.add_space(2.0);
// Draw block time.
let block_time = NaiveDateTime::from_timestamp_opt(db.time as i64, 0).unwrap();
let block_datetime: DateTime<Utc> = DateTime::from_utc(block_time, Utc);
ui.heading(RichText::new(block_datetime.format("%d/%m/%Y %H:%M:%S UTC").to_string())
.color(Colors::GRAY)
.size(16.0));
}); });
ui.add_space(2.0);
}); });
}); });
} }

View file

@ -188,46 +188,54 @@ impl NetworkTab for NetworkNode {
/// Draw connected peer info item. /// Draw connected peer info item.
fn peer_item_ui(ui: &mut egui::Ui, peer: &PeerStats, rounding: [bool; 2]) { fn peer_item_ui(ui: &mut egui::Ui, peer: &PeerStats, rounding: [bool; 2]) {
ui.vertical(|ui| { let mut rect = ui.available_rect_before_wrap();
// Draw round background. rect.set_height(77.0);
let mut rect = ui.available_rect_before_wrap(); ui.allocate_ui_at_rect(rect, |ui| {
rect.set_height(74.9); ui.vertical(|ui| {
ui.painter().rect( // Draw round background.
rect, ui.painter().rect(
Rounding { rect,
nw: if rounding[0] { 8.0 } else { 0.0 }, Rounding {
ne: if rounding[0] { 8.0 } else { 0.0 }, nw: if rounding[0] { 8.0 } else { 0.0 },
sw: if rounding[1] { 8.0 } else { 0.0 }, ne: if rounding[0] { 8.0 } else { 0.0 },
se: if rounding[1] { 8.0 } else { 0.0 }, sw: if rounding[1] { 8.0 } else { 0.0 },
}, se: if rounding[1] { 8.0 } else { 0.0 },
Colors::WHITE, },
Stroke { width: 1.0, color: Colors::ITEM_STROKE } Colors::WHITE,
); Stroke { width: 1.0, color: Colors::ITEM_STROKE }
);
ui.add_space(2.0); ui.add_space(2.0);
// Draw peer address
ui.horizontal(|ui| {
ui.add_space(5.0);
let addr_text = format!("{} {}", PLUGS_CONNECTED, &peer.addr);
ui.label(RichText::new(addr_text).color(Colors::BLACK).size(17.0));
});
// Draw peer difficulty and height
ui.horizontal(|ui| {
ui.add_space(6.0);
let diff_text = format!("{} {} {} {}",
PACKAGE,
peer.total_difficulty,
AT,
peer.height);
ui.label(RichText::new(diff_text).color(Colors::TITLE).size(16.0));
});
// Draw peer user-agent
ui.horizontal(|ui| {
ui.add_space(6.0);
let agent_text = format!("{} {}", DEVICES, &peer.user_agent);
ui.label(RichText::new(agent_text).color(Colors::GRAY).size(16.0));
});
// Draw peer address
ui.horizontal(|ui| {
ui.add_space(5.0);
let addr_text = format!("{} {}", PLUGS_CONNECTED, &peer.addr);
ui.label(RichText::new(addr_text).color(Colors::BLACK).size(17.0));
});
// Draw peer difficulty and height
ui.horizontal(|ui| {
ui.add_space(6.0);
let diff_text = format!("{} {}", PACKAGE, peer.total_difficulty);
ui.label(RichText::new(diff_text).color(Colors::TITLE).size(16.0));
ui.add_space(2.0); ui.add_space(2.0);
ui.label(RichText::new(AT).color(Colors::TITLE).size(16.0));
ui.add_space(2.0);
ui.label(RichText::new(peer.height.to_string()).color(Colors::TITLE).size(16.0));
}); });
// Draw peer user-agent
ui.horizontal(|ui| {
ui.add_space(6.0);
let agent_text = format!("{} {}", DEVICES, &peer.user_agent);
ui.label(RichText::new(agent_text).color(Colors::GRAY).size(16.0));
});
ui.add_space(2.0);
}); });
// Add space after the last item.
if rounding[1] {
ui.add_space(5.0);
}
} }