ui: fix buttons padding, qr light background

This commit is contained in:
ardocrat 2024-06-04 14:05:45 +03:00
parent a9e59f3a22
commit c91ed8db0d
9 changed files with 60 additions and 56 deletions

View file

@ -305,7 +305,7 @@ impl NodeSetup {
// Show modal buttons. // Show modal buttons.
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Save button callback. // Save button callback.
let on_save = || { let on_save = || {
@ -408,7 +408,7 @@ impl NodeSetup {
// Show modal buttons. // Show modal buttons.
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Save button callback. // Save button callback.
let on_save = || { let on_save = || {

View file

@ -64,17 +64,6 @@ impl QrCodeContent {
/// Draw QR code. /// Draw QR code.
pub fn ui(&mut self, ui: &mut egui::Ui, text: String, cb: &dyn PlatformCallbacks) { pub fn ui(&mut self, ui: &mut egui::Ui, text: String, cb: &dyn PlatformCallbacks) {
if self.animated {
// Show animated QR code.
self.animated_ui(ui, text, cb);
} else {
// Show static QR code.
self.static_ui(ui, text, cb);
}
}
/// Draw QR code image content.
fn qr_image_ui(&mut self, svg: Vec<u8>, ui: &mut egui::Ui) {
let mut rect = ui.available_rect_before_wrap(); let mut rect = ui.available_rect_before_wrap();
rect.min += egui::emath::vec2(8.0, 0.0); rect.min += egui::emath::vec2(8.0, 0.0);
rect.max -= egui::emath::vec2(8.0, 0.0); rect.max -= egui::emath::vec2(8.0, 0.0);
@ -82,8 +71,8 @@ impl QrCodeContent {
// Create background shape. // Create background shape.
let mut bg_shape = egui::epaint::RectShape { let mut bg_shape = egui::epaint::RectShape {
rect, rect,
rounding: egui::Rounding::same(3.0), rounding: egui::Rounding::default(),
fill: egui::Color32::WHITE, fill: egui::Color32::WHITE.linear_multiply(0.9),
stroke: egui::Stroke::NONE, stroke: egui::Stroke::NONE,
fill_texture_id: Default::default(), fill_texture_id: Default::default(),
uv: egui::Rect::ZERO uv: egui::Rect::ZERO
@ -92,6 +81,26 @@ impl QrCodeContent {
// Draw QR code image content. // Draw QR code image content.
let mut content_rect = ui.allocate_ui_at_rect(rect, |ui| { let mut content_rect = ui.allocate_ui_at_rect(rect, |ui| {
ui.add_space(8.0);
if self.animated {
// Show animated QR code.
self.animated_ui(ui, text, cb);
} else {
// Show static QR code.
self.static_ui(ui, text, cb);
}
ui.add_space(6.0);
}).response.rect;
// Setup background shape to be painted behind content.
content_rect.min -= egui::emath::vec2(8.0, 0.0);
content_rect.max += egui::emath::vec2(8.0, 0.0);
bg_shape.rect = content_rect;
ui.painter().set(bg_idx, bg_shape);
}
/// Draw QR code image content.
fn qr_image_ui(&mut self, svg: Vec<u8>, ui: &mut egui::Ui) {
let size = SizeHint::Size(ui.available_width() as u32, ui.available_width() as u32); let size = SizeHint::Size(ui.available_width() as u32, ui.available_width() as u32);
let color_img = load_svg_bytes_with_size(svg.as_slice(), Some(size)).unwrap(); let color_img = load_svg_bytes_with_size(svg.as_slice(), Some(size)).unwrap();
// Create image texture. // Create image texture.
@ -103,20 +112,9 @@ impl QrCodeContent {
color_img.height() as f32); color_img.height() as f32);
let sized_img = SizedTexture::new(texture_handle.id(), img_size); let sized_img = SizedTexture::new(texture_handle.id(), img_size);
// Add image to content. // Add image to content.
ui.add_space(8.0);
ui.add(egui::Image::from_texture(sized_img) ui.add(egui::Image::from_texture(sized_img)
.max_height(ui.available_width()) .max_height(ui.available_width())
.fit_to_original_size(1.0)); .fit_to_original_size(1.0));
ui.add_space(8.0);
}).response.rect;
// Setup background shape to be painted behind main content.
content_rect.min -= egui::emath::vec2(8.0, 0.0);
content_rect.max += egui::emath::vec2(8.0, 0.0);
bg_shape.rect = content_rect;
ui.painter().set(bg_idx, bg_shape);
ui.add_space(6.0);
} }
/// Draw animated QR code content. /// Draw animated QR code content.
@ -156,6 +154,11 @@ impl QrCodeContent {
// Create images from SVG data. // Create images from SVG data.
self.qr_image_ui(svg, ui); self.qr_image_ui(svg, ui);
// Show QR code text.
ui.add_space(6.0);
View::ellipsize_text(ui, text.clone(), 16.0, Colors::inactive_text());
ui.add_space(6.0);
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
let sharing = { let sharing = {
let r_state = self.qr_image_state.read(); let r_state = self.qr_image_state.read();
@ -164,7 +167,6 @@ impl QrCodeContent {
if !sharing { if !sharing {
// Show button to share QR. // Show button to share QR.
let share_txt = format!("{} {}", IMAGES_SQUARE, t!("share")); let share_txt = format!("{} {}", IMAGES_SQUARE, t!("share"));
ui.add_space(4.0);
View::action_button(ui, share_txt, || { View::action_button(ui, share_txt, || {
{ {
let mut w_state = self.qr_image_state.write(); let mut w_state = self.qr_image_state.write();
@ -178,7 +180,7 @@ impl QrCodeContent {
ui.vertical_centered(|ui| { ui.vertical_centered(|ui| {
ui.add_space(6.0); ui.add_space(6.0);
View::small_loading_spinner(ui); View::small_loading_spinner(ui);
ui.add_space(10.0); ui.add_space(6.0);
}); });
} }
@ -230,6 +232,7 @@ impl QrCodeContent {
self.qr_image_ui(svg, ui); self.qr_image_ui(svg, ui);
// Show QR code text. // Show QR code text.
ui.add_space(6.0);
View::ellipsize_text(ui, text.clone(), 16.0, Colors::inactive_text()); View::ellipsize_text(ui, text.clone(), 16.0, Colors::inactive_text());
ui.add_space(6.0); ui.add_space(6.0);
@ -254,6 +257,7 @@ impl QrCodeContent {
} }
}); });
}); });
ui.add_space(2.0);
} }
} }

View file

@ -221,7 +221,7 @@ impl Root {
ui.add_space(10.0); ui.add_space(10.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -404,7 +404,7 @@ impl MnemonicSetup {
if self.scan_phrase_not_found.is_some() { if self.scan_phrase_not_found.is_some() {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -226,7 +226,7 @@ impl RecoverySetup {
// Show modal buttons. // Show modal buttons.
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {
@ -271,7 +271,7 @@ impl RecoverySetup {
// Show modal buttons. // Show modal buttons.
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -314,7 +314,7 @@ impl WalletContent {
}); });
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Show modal buttons. // Show modal buttons.
ui.columns(2, |columns| { ui.columns(2, |columns| {
@ -378,7 +378,7 @@ impl WalletContent {
ui.add_space(6.0); ui.add_space(6.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Show modal buttons. // Show modal buttons.
ui.columns(2, |columns| { ui.columns(2, |columns| {
@ -478,7 +478,7 @@ impl WalletContent {
if self.qr_scan_result.is_some() { if self.qr_scan_result.is_some() {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -246,7 +246,7 @@ impl WalletMessages {
let data = wallet.get_data().unwrap(); let data = wallet.get_data().unwrap();
if data.info.amount_currently_spendable > 0 { if data.info.amount_currently_spendable > 0 {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {
@ -419,7 +419,7 @@ impl WalletMessages {
ui.add_space(12.0); ui.add_space(12.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {
@ -532,7 +532,7 @@ impl WalletMessages {
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {
@ -689,7 +689,7 @@ impl WalletMessages {
let mut show_dandelion = false; let mut show_dandelion = false;
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(columns_num, |columns| { ui.columns(columns_num, |columns| {
let first_column_content = |ui: &mut egui::Ui| { let first_column_content = |ui: &mut egui::Ui| {
@ -868,7 +868,7 @@ impl WalletMessages {
// Draw QR code content. // Draw QR code content.
let text = self.qr_message_text.clone().unwrap(); let text = self.qr_message_text.clone().unwrap();
self.qr_message_content.ui(ui, text.clone(), cb); self.qr_message_content.ui(ui, text.clone(), cb);
ui.add_space(6.0); ui.add_space(8.0);
ui.vertical_centered_justified(|ui| { ui.vertical_centered_justified(|ui| {
View::button(ui, t!("close"), Colors::white_or_black(false), || { View::button(ui, t!("close"), Colors::white_or_black(false), || {
@ -911,7 +911,7 @@ impl WalletMessages {
ui.add_space(12.0); ui.add_space(12.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -335,7 +335,7 @@ impl WalletTransport {
ui.add_space(12.0); ui.add_space(12.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Show buttons to close modal or come back to sending input. // Show buttons to close modal or come back to sending input.
ui.columns(2, |cols| { ui.columns(2, |cols| {
@ -590,15 +590,15 @@ impl WalletTransport {
// Draw QR code content. // Draw QR code content.
let text = self.qr_address_content.text.clone(); let text = self.qr_address_content.text.clone();
self.qr_address_content.ui(ui, text.clone(), cb); self.qr_address_content.ui(ui, text.clone(), cb);
ui.add_space(10.0); ui.add_space(6.0);
ui.vertical_centered_justified(|ui| { ui.vertical_centered_justified(|ui| {
View::button(ui, t!("close"), Colors::white_or_black(false), || { View::button(ui, t!("close"), Colors::white_or_black(false), || {
self.qr_address_content.clear_state(); self.qr_address_content.clear_state();
m.close(); m.close();
}); });
ui.add_space(6.0);
}); });
ui.add_space(6.0);
} }
/// Draw Tor send content. /// Draw Tor send content.
@ -694,7 +694,7 @@ impl WalletTransport {
ui.add_space(6.0); ui.add_space(6.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
// Show buttons to close modal or come back to sending input. // Show buttons to close modal or come back to sending input.
ui.columns(2, |cols| { ui.columns(2, |cols| {
@ -810,7 +810,7 @@ impl WalletTransport {
} }
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {
@ -874,7 +874,7 @@ impl WalletTransport {
ui.add_space(12.0); ui.add_space(12.0);
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {

View file

@ -578,7 +578,7 @@ impl WalletTransactions {
if !self.tx_info_finalizing { if !self.tx_info_finalizing {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
if self.tx_info_show_qr { if self.tx_info_show_qr {
// Show buttons to close modal or come back to text request content. // Show buttons to close modal or come back to text request content.
@ -833,7 +833,7 @@ impl WalletTransactions {
} }
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
if self.tx_info_finalize { if self.tx_info_finalize {
ui.columns(2, |columns| { ui.columns(2, |columns| {
@ -958,7 +958,7 @@ impl WalletTransactions {
// Show modal buttons. // Show modal buttons.
ui.scope(|ui| { ui.scope(|ui| {
// Setup spacing between buttons. // Setup spacing between buttons.
ui.spacing_mut().item_spacing = egui::Vec2::new(6.0, 0.0); ui.spacing_mut().item_spacing = egui::Vec2::new(8.0, 0.0);
ui.columns(2, |columns| { ui.columns(2, |columns| {
columns[0].vertical_centered_justified(|ui| { columns[0].vertical_centered_justified(|ui| {